@flightlesslabs/dodo-ui-date 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +2 -0
  2. package/package.json +28 -26
  3. package/dist/components/Calendar/Calendar.stories.svelte +0 -136
  4. package/dist/components/Calendar/Calendar.stories.svelte.d.ts +0 -22
  5. package/dist/components/DatePicker/DatePicker.stories.svelte +0 -136
  6. package/dist/components/DatePicker/DatePicker.stories.svelte.d.ts +0 -22
  7. package/src/lib/components/Calendar/Calendar.stories.svelte +0 -136
  8. package/src/lib/components/DatePicker/DatePicker.stories.svelte +0 -136
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # dodo-ui-date
2
2
 
3
+ @flightlesslabs/dodo-ui-date
4
+
3
5
  [Dodo UI](https://flightlesslabs.github.io/dodo-ui)
package/package.json CHANGED
@@ -1,22 +1,8 @@
1
1
  {
2
2
  "name": "@flightlesslabs/dodo-ui-date",
3
- "version": "0.2.0",
4
- "scripts": {
5
- "scss:main": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/main.scss dist/styles/main.css\"",
6
- "scss": "pnpm scss:main",
7
- "build": "vite build && pnpm run prepack",
8
- "preview": "vite preview",
9
- "prepare": "svelte-kit sync || echo ''",
10
- "prepack": "svelte-kit sync && svelte-package && pnpm run scss && publint",
11
- "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12
- "format": "prettier --write .",
13
- "lint": "prettier --check . && eslint .",
14
- "dev": "storybook dev -p 6006",
15
- "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
16
- "check": "pnpm run svelte-check && eslint . && pnpm run lint",
17
- "check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
18
- "create:component": "node --experimental-strip-types scripts/create-component/create-component.ts",
19
- "test": "vitest run"
3
+ "version": "0.3.1",
4
+ "publishConfig": {
5
+ "access": "public"
20
6
  },
21
7
  "homepage": "https://flightlesslabs.github.io/dodo-ui",
22
8
  "repository": {
@@ -55,18 +41,24 @@
55
41
  }
56
42
  },
57
43
  "peerDependencies": {
58
- "@flightlesslabs/dodo-ui": "^0.22.2",
44
+ "@flightlesslabs/dodo-ui": "^0.24.0",
59
45
  "@internationalized/date": "^3.0.0",
60
46
  "bits-ui": "^2.0.0",
61
47
  "svelte": "^5.0.0"
62
48
  },
49
+ "dependencies": {
50
+ "@internationalized/date": "^3.12.0",
51
+ "bits-ui": "^2.17.2",
52
+ "svelte": "^5.55.2",
53
+ "@iconify/svelte": "^5.2.1",
54
+ "dayjs": "^1.11.20",
55
+ "esm-env": "^1.2.2",
56
+ "@flightlesslabs/dodo-ui": "0.24.0"
57
+ },
63
58
  "devDependencies": {
64
59
  "@chromatic-com/storybook": "^5.1.1",
65
60
  "@eslint/compat": "^2.0.4",
66
61
  "@eslint/js": "^10.0.1",
67
- "@flightlesslabs/dodo-ui": "^0.22.2",
68
- "@iconify/svelte": "^5.2.1",
69
- "@internationalized/date": "^3.12.0",
70
62
  "@storybook/addon-a11y": "^10.3.5",
71
63
  "@storybook/addon-docs": "^10.3.5",
72
64
  "@storybook/addon-svelte-csf": "^5.1.2",
@@ -85,8 +77,6 @@
85
77
  "@vitest/browser": "^4.1.3",
86
78
  "@vitest/browser-playwright": "^4.1.3",
87
79
  "@vitest/coverage-v8": "^4.1.3",
88
- "bits-ui": "^2.17.2",
89
- "dayjs": "^1.11.20",
90
80
  "eslint": "^10.2.0",
91
81
  "eslint-config-prettier": "^10.1.8",
92
82
  "eslint-plugin-storybook": "^10.3.5",
@@ -101,7 +91,6 @@
101
91
  "publint": "^0.3.18",
102
92
  "sass": "^1.99.0",
103
93
  "storybook": "^10.3.5",
104
- "svelte": "^5.55.2",
105
94
  "svelte-check": "^4.4.6",
106
95
  "typescript": "^6.0.2",
107
96
  "typescript-eslint": "^8.58.1",
@@ -110,5 +99,18 @@
110
99
  },
111
100
  "keywords": [
112
101
  "svelte"
113
- ]
114
- }
102
+ ],
103
+ "scripts": {
104
+ "scss:main": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/main.scss dist/styles/main.css\"",
105
+ "scss": "pnpm scss:main",
106
+ "build": "vite build && pnpm run prepack",
107
+ "preview": "vite preview",
108
+ "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
109
+ "format": "prettier --write .",
110
+ "lint": "prettier --check . && eslint .",
111
+ "dev": "storybook dev -p 6006",
112
+ "check": "pnpm run svelte-check && eslint . && pnpm run lint",
113
+ "check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
114
+ "create:component": "node --experimental-strip-types scripts/create-component/create-component.ts"
115
+ }
116
+ }
package/dist/components/Calendar/Calendar.stories.svelte DELETED
@@ -1,136 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import Calendar from './Calendar.svelte';
4
- import type { CalendarProps } from './Calendar.svelte';
5
- import type { ArgTypes } from 'storybook/internal/csf';
6
- import { CalendarDate, type DateValue } from '@internationalized/date';
7
- import {
8
- cardColorOptions,
9
- componentRoundnessOptions,
10
- ComponentShadowOptions,
11
- componentThemeColorsOptions,
12
- componentVariantOptions,
13
- Theme,
14
- } from '@flightlesslabs/dodo-ui';
15
-
16
- const description = `
17
- a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
18
-
19
- \`\`\`ts
20
- import { Calendar } from '@flightlesslabs/dodo-ui-date';
21
- \`\`\`
22
- `;
23
-
24
- // ------------------------------
25
- // Storybook ArgTypes
26
- // ------------------------------
27
- export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
28
- // ------------------------------
29
- // Core
30
- // ------------------------------
31
- class: { table: { category: 'API', subcategory: 'Base' } },
32
- value: {
33
- control: { type: 'text' },
34
- table: { category: 'API', subcategory: 'Base' },
35
- },
36
-
37
- // ------------------------------
38
- // State
39
- // ------------------------------
40
- disabled: {
41
- control: { type: 'boolean' },
42
- description: 'Disabled state of the input',
43
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
44
- },
45
-
46
- // ------------------------------
47
- // Appearance
48
- // ------------------------------
49
- shadow: {
50
- control: { type: 'select' },
51
- options: ComponentShadowOptions,
52
- description: 'Component Shadow',
53
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
54
- },
55
- color: {
56
- control: { type: 'select' },
57
- options: cardColorOptions,
58
- description: 'Color theme token',
59
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
60
- },
61
- variant: {
62
- control: { type: 'select' },
63
- options: componentVariantOptions,
64
- description: 'Visual variant of the card',
65
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
66
- },
67
- roundness: {
68
- control: { type: 'select' },
69
- options: componentRoundnessOptions,
70
- description: 'Border radius token',
71
- table: { category: 'API', subcategory: 'Appearance' },
72
- },
73
- outline: {
74
- control: { type: 'boolean' },
75
- description: 'Render outlined style',
76
- table: { category: 'API', subcategory: 'Appearance' },
77
- },
78
- active: {
79
- control: { type: 'boolean' },
80
- description: 'Add mouse hover and active effects',
81
- table: { category: 'API', subcategory: 'Appearance' },
82
- },
83
- theme: {
84
- control: { type: 'select' },
85
- options: componentThemeColorsOptions,
86
- description: 'Theme color',
87
- table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
88
- },
89
- };
90
-
91
- // ------------------------------
92
- // Storybook Meta
93
- // ------------------------------
94
- const { Story } = defineMeta({
95
- component: Calendar,
96
- tags: ['autodocs'],
97
- argTypes: storyCalendarArgTypes,
98
- parameters: {
99
- docs: {
100
- description: {
101
- component: description,
102
- },
103
- },
104
- },
105
- });
106
-
107
- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
108
- </script>
109
-
110
- <!-- ------------------------------ -->
111
- <!-- Stories -->
112
- <!-- ------------------------------ -->
113
-
114
- <Story name="Default" />
115
-
116
- <Story name="Controlled" asChild>
117
- <Calendar bind:value={myValue} />
118
- </Story>
119
-
120
- <Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
121
-
122
- <Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
123
-
124
- <Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
125
-
126
- <Story name="Light Theme" asChild>
127
- <Theme type="light">
128
- <Calendar />
129
- </Theme>
130
- </Story>
131
-
132
- <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
133
- <Theme type="dark">
134
- <Calendar />
135
- </Theme>
136
- </Story>
package/dist/components/Calendar/Calendar.stories.svelte.d.ts DELETED
@@ -1,22 +0,0 @@
1
- import Calendar from './Calendar.svelte';
2
- import type { CalendarProps } from './Calendar.svelte';
3
- import type { ArgTypes } from 'storybook/internal/csf';
4
- export declare const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>>;
5
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
- $$bindings?: Bindings;
8
- } & Exports;
9
- (internal: unknown, props: {
10
- $$events?: Events;
11
- $$slots?: Slots;
12
- }): Exports & {
13
- $set?: any;
14
- $on?: any;
15
- };
16
- z_$$bindings?: Bindings;
17
- }
18
- declare const Calendar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
19
- [evt: string]: CustomEvent<any>;
20
- }, {}, {}, string>;
21
- type Calendar = InstanceType<typeof Calendar>;
22
- export default Calendar;
package/dist/components/DatePicker/DatePicker.stories.svelte DELETED
@@ -1,136 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import DatePicker from './DatePicker.svelte';
4
- import type { DatePickerProps } from './DatePicker.svelte';
5
- import type { ArgTypes } from 'storybook/internal/csf';
6
- import { CalendarDate, type DateValue } from '@internationalized/date';
7
- import { componentSizeOptions, componentRoundnessOptions, Theme } from '@flightlesslabs/dodo-ui';
8
-
9
- const description = `
10
- A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
11
- \`\`\`ts
12
- import { DatePicker } from '@flightlesslabs/dodo-ui-date';
13
-
14
- import { CalendarDate, type DateValue } from '@internationalized/date';
15
- \`\`\`
16
- `;
17
-
18
- // ------------------------------
19
- // Storybook ArgTypes
20
- // ------------------------------
21
- export const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>> = {
22
- // ------------------------------
23
- // Core
24
- // ------------------------------
25
- class: { table: { category: 'API', subcategory: 'Base' } },
26
- value: {
27
- control: { type: 'text' },
28
- table: { category: 'API', subcategory: 'Base' },
29
- },
30
- dateFormat: {
31
- control: { type: 'text' },
32
- table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'dd/mm/yyyy' } },
33
- },
34
-
35
- // ------------------------------
36
- // State
37
- // ------------------------------
38
- disabled: {
39
- control: { type: 'boolean' },
40
- description: 'Disabled state of the input',
41
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
42
- },
43
- focused: {
44
- control: { type: 'boolean' },
45
- description: 'Force focused visual state',
46
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
47
- },
48
- error: {
49
- control: { type: 'boolean' },
50
- description: 'Error visual state',
51
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
52
- },
53
-
54
- // ------------------------------
55
- // Appearance
56
- // ------------------------------
57
- size: {
58
- control: { type: 'select' },
59
- options: componentSizeOptions,
60
- description: 'Visual size token',
61
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
62
- },
63
- roundness: {
64
- control: { type: 'select' },
65
- options: componentRoundnessOptions,
66
- description: 'Border radius token',
67
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
68
- },
69
- outline: {
70
- control: { type: 'boolean' },
71
- description: 'Render outlined enclosure',
72
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
73
- },
74
-
75
- // ------------------------------
76
- // Slots (Snippets)
77
- // ------------------------------
78
- before: {
79
- table: { category: 'API', subcategory: 'Slots' },
80
- description: 'Content rendered before the input',
81
- },
82
- after: {
83
- table: { category: 'API', subcategory: 'Slots' },
84
- description: 'Content rendered after the input',
85
- },
86
- };
87
-
88
- // ------------------------------
89
- // Storybook Meta
90
- // ------------------------------
91
- const { Story } = defineMeta({
92
- component: DatePicker,
93
- tags: ['autodocs'],
94
- argTypes: storyDatePickerArgTypes,
95
- parameters: {
96
- docs: {
97
- description: {
98
- component: description,
99
- },
100
- story: { height: '420px' },
101
- },
102
- },
103
- });
104
-
105
- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
106
- </script>
107
-
108
- <!-- ------------------------------ -->
109
- <!-- Stories -->
110
- <!-- ------------------------------ -->
111
-
112
- <Story name="Default" />
113
-
114
- <Story name="Controlled" asChild>
115
- <DatePicker bind:value={myValue} />
116
- </Story>
117
-
118
- <Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
119
-
120
- <Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
121
-
122
- <Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
123
-
124
- <Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
125
-
126
- <Story name="Light Theme" asChild>
127
- <Theme type="light">
128
- <DatePicker />
129
- </Theme>
130
- </Story>
131
-
132
- <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
133
- <Theme type="dark">
134
- <DatePicker />
135
- </Theme>
136
- </Story>
package/dist/components/DatePicker/DatePicker.stories.svelte.d.ts DELETED
@@ -1,22 +0,0 @@
1
- import DatePicker from './DatePicker.svelte';
2
- import type { DatePickerProps } from './DatePicker.svelte';
3
- import type { ArgTypes } from 'storybook/internal/csf';
4
- export declare const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>>;
5
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
- $$bindings?: Bindings;
8
- } & Exports;
9
- (internal: unknown, props: {
10
- $$events?: Events;
11
- $$slots?: Slots;
12
- }): Exports & {
13
- $set?: any;
14
- $on?: any;
15
- };
16
- z_$$bindings?: Bindings;
17
- }
18
- declare const DatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
19
- [evt: string]: CustomEvent<any>;
20
- }, {}, {}, string>;
21
- type DatePicker = InstanceType<typeof DatePicker>;
22
- export default DatePicker;
package/src/lib/components/Calendar/Calendar.stories.svelte DELETED
@@ -1,136 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import Calendar from './Calendar.svelte';
4
- import type { CalendarProps } from './Calendar.svelte';
5
- import type { ArgTypes } from 'storybook/internal/csf';
6
- import { CalendarDate, type DateValue } from '@internationalized/date';
7
- import {
8
- cardColorOptions,
9
- componentRoundnessOptions,
10
- ComponentShadowOptions,
11
- componentThemeColorsOptions,
12
- componentVariantOptions,
13
- Theme,
14
- } from '@flightlesslabs/dodo-ui';
15
-
16
- const description = `
17
- a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
18
-
19
- \`\`\`ts
20
- import { Calendar } from '@flightlesslabs/dodo-ui-date';
21
- \`\`\`
22
- `;
23
-
24
- // ------------------------------
25
- // Storybook ArgTypes
26
- // ------------------------------
27
- export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
28
- // ------------------------------
29
- // Core
30
- // ------------------------------
31
- class: { table: { category: 'API', subcategory: 'Base' } },
32
- value: {
33
- control: { type: 'text' },
34
- table: { category: 'API', subcategory: 'Base' },
35
- },
36
-
37
- // ------------------------------
38
- // State
39
- // ------------------------------
40
- disabled: {
41
- control: { type: 'boolean' },
42
- description: 'Disabled state of the input',
43
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
44
- },
45
-
46
- // ------------------------------
47
- // Appearance
48
- // ------------------------------
49
- shadow: {
50
- control: { type: 'select' },
51
- options: ComponentShadowOptions,
52
- description: 'Component Shadow',
53
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
54
- },
55
- color: {
56
- control: { type: 'select' },
57
- options: cardColorOptions,
58
- description: 'Color theme token',
59
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
60
- },
61
- variant: {
62
- control: { type: 'select' },
63
- options: componentVariantOptions,
64
- description: 'Visual variant of the card',
65
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
66
- },
67
- roundness: {
68
- control: { type: 'select' },
69
- options: componentRoundnessOptions,
70
- description: 'Border radius token',
71
- table: { category: 'API', subcategory: 'Appearance' },
72
- },
73
- outline: {
74
- control: { type: 'boolean' },
75
- description: 'Render outlined style',
76
- table: { category: 'API', subcategory: 'Appearance' },
77
- },
78
- active: {
79
- control: { type: 'boolean' },
80
- description: 'Add mouse hover and active effects',
81
- table: { category: 'API', subcategory: 'Appearance' },
82
- },
83
- theme: {
84
- control: { type: 'select' },
85
- options: componentThemeColorsOptions,
86
- description: 'Theme color',
87
- table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
88
- },
89
- };
90
-
91
- // ------------------------------
92
- // Storybook Meta
93
- // ------------------------------
94
- const { Story } = defineMeta({
95
- component: Calendar,
96
- tags: ['autodocs'],
97
- argTypes: storyCalendarArgTypes,
98
- parameters: {
99
- docs: {
100
- description: {
101
- component: description,
102
- },
103
- },
104
- },
105
- });
106
-
107
- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
108
- </script>
109
-
110
- <!-- ------------------------------ -->
111
- <!-- Stories -->
112
- <!-- ------------------------------ -->
113
-
114
- <Story name="Default" />
115
-
116
- <Story name="Controlled" asChild>
117
- <Calendar bind:value={myValue} />
118
- </Story>
119
-
120
- <Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
121
-
122
- <Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
123
-
124
- <Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
125
-
126
- <Story name="Light Theme" asChild>
127
- <Theme type="light">
128
- <Calendar />
129
- </Theme>
130
- </Story>
131
-
132
- <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
133
- <Theme type="dark">
134
- <Calendar />
135
- </Theme>
136
- </Story>
package/src/lib/components/DatePicker/DatePicker.stories.svelte DELETED
@@ -1,136 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import DatePicker from './DatePicker.svelte';
4
- import type { DatePickerProps } from './DatePicker.svelte';
5
- import type { ArgTypes } from 'storybook/internal/csf';
6
- import { CalendarDate, type DateValue } from '@internationalized/date';
7
- import { componentSizeOptions, componentRoundnessOptions, Theme } from '@flightlesslabs/dodo-ui';
8
-
9
- const description = `
10
- A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
11
- \`\`\`ts
12
- import { DatePicker } from '@flightlesslabs/dodo-ui-date';
13
-
14
- import { CalendarDate, type DateValue } from '@internationalized/date';
15
- \`\`\`
16
- `;
17
-
18
- // ------------------------------
19
- // Storybook ArgTypes
20
- // ------------------------------
21
- export const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>> = {
22
- // ------------------------------
23
- // Core
24
- // ------------------------------
25
- class: { table: { category: 'API', subcategory: 'Base' } },
26
- value: {
27
- control: { type: 'text' },
28
- table: { category: 'API', subcategory: 'Base' },
29
- },
30
- dateFormat: {
31
- control: { type: 'text' },
32
- table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'dd/mm/yyyy' } },
33
- },
34
-
35
- // ------------------------------
36
- // State
37
- // ------------------------------
38
- disabled: {
39
- control: { type: 'boolean' },
40
- description: 'Disabled state of the input',
41
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
42
- },
43
- focused: {
44
- control: { type: 'boolean' },
45
- description: 'Force focused visual state',
46
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
47
- },
48
- error: {
49
- control: { type: 'boolean' },
50
- description: 'Error visual state',
51
- table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
52
- },
53
-
54
- // ------------------------------
55
- // Appearance
56
- // ------------------------------
57
- size: {
58
- control: { type: 'select' },
59
- options: componentSizeOptions,
60
- description: 'Visual size token',
61
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
62
- },
63
- roundness: {
64
- control: { type: 'select' },
65
- options: componentRoundnessOptions,
66
- description: 'Border radius token',
67
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
68
- },
69
- outline: {
70
- control: { type: 'boolean' },
71
- description: 'Render outlined enclosure',
72
- table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
73
- },
74
-
75
- // ------------------------------
76
- // Slots (Snippets)
77
- // ------------------------------
78
- before: {
79
- table: { category: 'API', subcategory: 'Slots' },
80
- description: 'Content rendered before the input',
81
- },
82
- after: {
83
- table: { category: 'API', subcategory: 'Slots' },
84
- description: 'Content rendered after the input',
85
- },
86
- };
87
-
88
- // ------------------------------
89
- // Storybook Meta
90
- // ------------------------------
91
- const { Story } = defineMeta({
92
- component: DatePicker,
93
- tags: ['autodocs'],
94
- argTypes: storyDatePickerArgTypes,
95
- parameters: {
96
- docs: {
97
- description: {
98
- component: description,
99
- },
100
- story: { height: '420px' },
101
- },
102
- },
103
- });
104
-
105
- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
106
- </script>
107
-
108
- <!-- ------------------------------ -->
109
- <!-- Stories -->
110
- <!-- ------------------------------ -->
111
-
112
- <Story name="Default" />
113
-
114
- <Story name="Controlled" asChild>
115
- <DatePicker bind:value={myValue} />
116
- </Story>
117
-
118
- <Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
119
-
120
- <Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
121
-
122
- <Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
123
-
124
- <Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
125
-
126
- <Story name="Light Theme" asChild>
127
- <Theme type="light">
128
- <DatePicker />
129
- </Theme>
130
- </Story>
131
-
132
- <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
133
- <Theme type="dark">
134
- <DatePicker />
135
- </Theme>
136
- </Story>