Package Exports

recomped
recomped/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (recomped) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Recomped

A customizable web component built with Lit.

Features

📅 Date and time selection
⌨️ Manual input support with formatting
🌏 Locale support (ja/en)
🎨 Customizable styles via CSS variables
🎯 Single/double digit input support
🔄 Today button and clear functionality

Installation

npm install recomped

Usage

<!-- Import the component -->
<script type="module">
  import { initDatetimePicker } from 'recomped';
  initDatetimePicker();
</script>

<!-- Use the component -->
<input
  data-recomped-datetime-picker
  placeholder="YYYY/MM/DD HH:mm"
  value="2024/01/01 10:30"
/>

CSS Variables

:root {
  --dt-background: white;
  --dt-border-radius: 0.5rem;
  --dt-border-color: #e5e7eb;
  --dt-text: #6b7280;
  --dt-header-text: #6b7280;
  --dt-hover-bg: #f3f4f6;
  --dt-selected-bg: rgb(235, 245, 255);
  --dt-sunday-color: #dc2626;
  --dt-saturday-color: #2563eb;
}

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Run E2E tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

# Lint
npm run lint        # Check for issues
npm run lint:fix    # Fix issues automatically

# Format
npm run format      # Check formatting
npm run format:fix  # Fix formatting issues

# Build
npm run build

Release

Update version

# For patch release (bug fixes)
npm version patch

# For minor release (new features)
npm version minor

# For major release (breaking changes)
npm version major

Build and verify package contents

# Build the package
rm -rf dist && npm run build

# Check package contents
npm pack --dry-run

Publish to npm

# Login to npm (first time only)
npm login

# Publish package
npm publish

Create and push git tag

git push origin main --tags

Code Quality

This project uses Biome for linting and formatting. The configuration can be found in biome.json.

License

MIT