ui-lab-registry 0.3.1 → 0.3.2
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.
- package/dist/component-dependencies.d.ts +0 -11
- package/dist/component-dependencies.d.ts.map +1 -1
- package/dist/component-dependencies.js +4 -4
- package/dist/component-dependencies.js.map +1 -1
- package/dist/components/Color/examples/03-format-switching.d.ts +0 -4
- package/dist/components/Color/examples/03-format-switching.d.ts.map +1 -1
- package/dist/components/Color/examples/03-format-switching.js +2 -2
- package/dist/components/Color/examples/03-format-switching.js.map +1 -1
- package/dist/components/Color/examples.json +0 -5
- package/dist/components/Command/examples/01-basic-command.js +1 -1
- package/dist/components/Command/examples/01-basic-command.js.map +1 -1
- package/dist/components/Command/examples.json +1 -1
- package/dist/components/Command/index.js +3 -3
- package/dist/components/Command/index.js.map +1 -1
- package/dist/components/Divider/examples/02-pattern-variants.js +1 -1
- package/dist/components/Divider/examples.json +1 -1
- package/dist/components/Grid/examples/01-basic-grid.js +1 -1
- package/dist/components/Grid/examples/01-basic-grid.js.map +1 -1
- package/dist/components/Grid/examples.json +1 -1
- package/dist/components/Grid/index.js +2 -2
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/Input/examples/02-validation.js +1 -1
- package/dist/components/Input/examples/02-validation.js.map +1 -1
- package/dist/components/Input/examples.json +1 -1
- package/dist/components/Path/examples.json +0 -5
- package/dist/components/Radio/index.js +1 -1
- package/dist/components/Select/examples/02-searchable-select.js +1 -1
- package/dist/components/Select/examples/02-searchable-select.js.map +1 -1
- package/dist/components/Select/examples.json +1 -1
- package/dist/components/Tabs/examples/01-basic-tabs.js +2 -2
- package/dist/components/Tabs/examples/01-basic-tabs.js.map +1 -1
- package/dist/components/Tabs/examples/02-vertical-tabs.js +2 -2
- package/dist/components/Tabs/examples/02-vertical-tabs.js.map +1 -1
- package/dist/components/Tabs/examples.json +2 -2
- package/dist/components/Tabs/index.js +11 -11
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/elements/AI/AIChatInput/index.js +1 -1
- package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/index.js +1 -1
- package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.js +1 -1
- package/dist/elements/AI/AIChatInput/variations.json +2 -2
- package/dist/elements/AI/ChainOfThought/index.js +1 -1
- package/dist/elements/AI/Chat/index.js +1 -1
- package/dist/elements/AI/Chat/variations/02-with-actions/index.js +1 -1
- package/dist/elements/AI/Chat/variations.json +1 -1
- package/dist/elements/Documentation/CopyPage/index.js +1 -1
- package/dist/elements/Documentation/NextArticle/index.js +1 -1
- package/dist/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.js +1 -1
- package/dist/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.js +1 -1
- package/dist/elements/Documentation/NextArticle/variations.json +2 -2
- package/dist/elements/Documentation/TOC/index.js +1 -1
- package/dist/generated-data.d.ts.map +1 -1
- package/dist/generated-data.js +213 -947
- package/dist/generated-data.js.map +1 -1
- package/dist/generated-styles.d.ts.map +1 -1
- package/dist/generated-styles.js +171 -63
- package/dist/generated-styles.js.map +1 -1
- package/dist/generated-styles.json +171 -63
- package/dist/patterns/data/data-table-row/metadata.json +3 -3
- package/dist/patterns/data/data-table-row/variations/expandable/index.js +1 -1
- package/dist/patterns/data/data-table-row/variations/main/index.js +1 -1
- package/dist/patterns/data/data-table-row/variations/selectable/index.js +1 -1
- package/dist/patterns/data/progress-metric/metadata.json +3 -3
- package/dist/patterns/data/progress-metric/variations/colored/index.js +1 -1
- package/dist/patterns/data/progress-metric/variations/main/index.js +1 -1
- package/dist/patterns/data/progress-metric/variations/stacked/index.js +1 -1
- package/dist/patterns/form/labeled-field/metadata.json +4 -4
- package/dist/patterns/form/labeled-field/variations/main/index.js +1 -1
- package/dist/patterns/form/labeled-field/variations/with-error/index.js +1 -1
- package/dist/patterns/form/labeled-field/variations/with-hint/index.js +1 -1
- package/dist/patterns/form/select-row/metadata.json +2 -2
- package/dist/patterns/form/select-row/variations/main/index.js +1 -1
- package/dist/patterns/form/select-row/variations/with-icon/index.js +1 -1
- package/dist/patterns/form/toggle-setting-row/metadata.json +2 -2
- package/dist/patterns/form/toggle-setting-row/variations/destructive/index.js +1 -1
- package/dist/patterns/form/toggle-setting-row/variations/main/index.js +1 -1
- package/dist/patterns/interaction/icon-action-bar/variations/compact/index.js +1 -1
- package/dist/patterns/layout/media-object/metadata.json +1 -1
- package/dist/patterns/layout/media-object/variations/sm/index.js +1 -1
- package/dist/patterns/layout/split-row/metadata.json +3 -3
- package/dist/patterns/layout/split-row/variations/actions/index.js +1 -1
- package/dist/patterns/layout/split-row/variations/main/index.js +1 -1
- package/dist/patterns/layout/split-row/variations/meta/index.js +1 -1
- package/dist/patterns/layout/stat-block/metadata.json +3 -3
- package/dist/patterns/layout/stat-block/variations/compact/index.js +1 -1
- package/dist/patterns/layout/stat-block/variations/main/index.js +1 -1
- package/dist/patterns/layout/stat-block/variations/with-icon/index.js +1 -1
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +17 -27
- package/dist/registry.js.map +1 -1
- package/dist/sections/CTA/variations/02-split/index.js +1 -1
- package/dist/sections/CTA/variations.json +1 -1
- package/dist/sections/Pricing/variations/01-cards/index.js +1 -1
- package/dist/sections/Pricing/variations/02-comparison/index.js +1 -1
- package/dist/sections/Pricing/variations.json +2 -2
- package/dist/sections/categories.d.ts +0 -11
- package/dist/sections/categories.d.ts.map +1 -1
- package/dist/sections/categories.js +2 -2
- package/dist/sections/categories.js.map +1 -1
- package/dist/starters/NextJS/index.js +1 -1
- package/dist/types.d.ts +0 -5
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/load-component-examples.d.ts +3 -2
- package/dist/utils/load-component-examples.d.ts.map +1 -1
- package/package.json +2 -6
- package/src/component-dependencies.ts +4 -4
- package/src/components/Anchor/metadata.json +1 -1
- package/src/components/Banner/metadata.json +1 -1
- package/src/components/Code/metadata.json +1 -1
- package/src/components/Color/examples/03-format-switching.tsx +3 -3
- package/src/components/Color/examples.json +0 -5
- package/src/components/Command/examples/01-basic-command.tsx +1 -1
- package/src/components/Command/examples.json +1 -1
- package/src/components/Command/index.tsx +3 -3
- package/src/components/Date/metadata.json +1 -1
- package/src/components/Divider/examples/02-pattern-variants.tsx +3 -3
- package/src/components/Divider/examples.json +1 -1
- package/src/components/Flex/metadata.json +1 -1
- package/src/components/Gallery/metadata.json +1 -1
- package/src/components/Grid/examples/01-basic-grid.tsx +1 -1
- package/src/components/Grid/examples.json +1 -1
- package/src/components/Grid/index.tsx +2 -2
- package/src/components/Group/metadata.json +1 -1
- package/src/components/Input/examples/02-validation.tsx +2 -2
- package/src/components/Input/examples.json +1 -1
- package/src/components/List/metadata.json +1 -1
- package/src/components/Page/metadata.json +1 -1
- package/src/components/Panel/metadata.json +1 -1
- package/src/components/Path/examples.json +0 -5
- package/src/components/Radio/index.tsx +1 -1
- package/src/components/Select/examples/02-searchable-select.tsx +1 -1
- package/src/components/Select/examples.json +1 -1
- package/src/components/Tabs/examples/01-basic-tabs.tsx +12 -12
- package/src/components/Tabs/examples/02-vertical-tabs.tsx +19 -19
- package/src/components/Tabs/examples.json +2 -2
- package/src/components/Tabs/index.tsx +45 -45
- package/src/elements/AI/AIChatInput/index.tsx +2 -2
- package/src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx +1 -1
- package/src/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.tsx +1 -1
- package/src/elements/AI/AIChatInput/variations.json +2 -2
- package/src/elements/AI/ChainOfThought/index.tsx +1 -1
- package/src/elements/AI/Chat/index.tsx +4 -4
- package/src/elements/AI/Chat/variations/02-with-actions/index.tsx +3 -3
- package/src/elements/AI/Chat/variations.json +1 -1
- package/src/elements/Documentation/CopyPage/index.tsx +1 -1
- package/src/elements/Documentation/NextArticle/index.tsx +1 -1
- package/src/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.tsx +1 -1
- package/src/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.tsx +1 -1
- package/src/elements/Documentation/NextArticle/variations.json +2 -2
- package/src/elements/Documentation/TOC/index.tsx +4 -4
- package/src/generated-data.ts +213 -947
- package/src/generated-styles.ts +171 -63
- package/src/patterns/data/data-table-row/metadata.json +4 -4
- package/src/patterns/data/data-table-row/variations/expandable/index.tsx +3 -3
- package/src/patterns/data/data-table-row/variations/main/index.tsx +2 -2
- package/src/patterns/data/data-table-row/variations/selectable/index.tsx +2 -2
- package/src/patterns/data/progress-metric/metadata.json +4 -4
- package/src/patterns/data/progress-metric/variations/colored/index.tsx +2 -2
- package/src/patterns/data/progress-metric/variations/main/index.tsx +2 -2
- package/src/patterns/data/progress-metric/variations/stacked/index.tsx +2 -2
- package/src/patterns/form/labeled-field/metadata.json +5 -5
- package/src/patterns/form/labeled-field/variations/main/index.tsx +1 -1
- package/src/patterns/form/labeled-field/variations/with-error/index.tsx +1 -1
- package/src/patterns/form/labeled-field/variations/with-hint/index.tsx +1 -1
- package/src/patterns/form/select-row/metadata.json +3 -3
- package/src/patterns/form/select-row/variations/main/index.tsx +1 -1
- package/src/patterns/form/select-row/variations/with-icon/index.tsx +1 -1
- package/src/patterns/form/toggle-setting-row/metadata.json +3 -3
- package/src/patterns/form/toggle-setting-row/variations/destructive/index.tsx +1 -1
- package/src/patterns/form/toggle-setting-row/variations/main/index.tsx +1 -1
- package/src/patterns/interaction/icon-action-bar/variations/compact/index.tsx +1 -1
- package/src/patterns/layout/media-object/metadata.json +2 -2
- package/src/patterns/layout/media-object/variations/sm/index.tsx +2 -2
- package/src/patterns/layout/split-row/metadata.json +4 -4
- package/src/patterns/layout/split-row/variations/actions/index.tsx +1 -1
- package/src/patterns/layout/split-row/variations/main/index.tsx +2 -2
- package/src/patterns/layout/split-row/variations/meta/index.tsx +3 -3
- package/src/patterns/layout/stat-block/metadata.json +4 -4
- package/src/patterns/layout/stat-block/variations/compact/index.tsx +1 -1
- package/src/patterns/layout/stat-block/variations/main/index.tsx +1 -1
- package/src/patterns/layout/stat-block/variations/with-icon/index.tsx +1 -1
- package/src/registry.ts +17 -27
- package/src/sections/CTA/variations/02-split/index.tsx +1 -1
- package/src/sections/CTA/variations.json +1 -1
- package/src/sections/Pricing/variations/01-cards/index.tsx +1 -1
- package/src/sections/Pricing/variations/02-comparison/index.tsx +1 -1
- package/src/sections/Pricing/variations.json +2 -2
- package/src/sections/categories.ts +2 -2
- package/src/starters/NextJS/index.tsx +2 -2
- package/src/types.ts +1 -1
- package/src/utils/load-component-examples.ts +2 -2
- package/src/components/Path/examples/01-basic-breadcrumbs.tsx +0 -17
- package/src/providers/Theme/examples/01-provider-setup.tsx +0 -37
- package/src/providers/Theme/examples/02-toggle-component.tsx +0 -52
- package/src/providers/Theme/examples/03-advanced-patterns.tsx +0 -138
- package/src/providers/Theme/examples/index.ts +0 -3
- package/src/src/generated-styles.ts +0 -1359
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
{
|
|
2
|
+
"toast": {
|
|
3
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .toast {\n @apply flex w-full max-w-[28rem] items-start gap-3 px-4 py-2.5 select-none;\n background: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow);\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n touch-action: pan-y;\n }\n\n .icon {\n @apply mr-4 mt-2 h-5 w-5 shrink-0;\n color: var(--icon-color);\n }\n\n .content {\n @apply min-w-0 flex-1;\n }\n\n .title {\n @apply m-0;\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm);\n line-height: var(--leading-tight);\n color: var(--title-color);\n }\n\n .description {\n @apply mt-1 mb-0;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n color: var(--description-color);\n }\n\n .close {\n @apply flex shrink-0 items-center justify-center p-2 cursor-pointer;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm);\n color: var(--close-color);\n opacity: 0.6;\n transition: opacity 0.15s ease-out;\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n\n @media (hover: hover) {\n &:hover {\n opacity: 1;\n background: var(--close-hover-background);\n }\n }\n }\n}\n",
|
|
4
|
+
"styleableParts": [
|
|
5
|
+
{
|
|
6
|
+
"name": "root"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"name": "content"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"name": "title"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "description"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "close"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "icon"
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
"cssVariables": []
|
|
25
|
+
},
|
|
2
26
|
"tooltip": {
|
|
3
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--tooltip-fill);\n --frame-stroke-color: var(--tooltip-border-color);\n opacity: 0;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n pointer-events: auto;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-
|
|
27
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--tooltip-fill);\n --frame-stroke-color: var(--tooltip-border-color);\n opacity: 0;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n pointer-events: auto;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n @apply whitespace-nowrap;\n }\n\n .frame[data-hint] {\n @apply pr-1;\n }\n}\n",
|
|
4
28
|
"styleableParts": [
|
|
5
29
|
{
|
|
6
30
|
"name": "root"
|
|
@@ -39,32 +63,8 @@
|
|
|
39
63
|
}
|
|
40
64
|
]
|
|
41
65
|
},
|
|
42
|
-
"toast": {
|
|
43
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .toast {\n @apply flex w-full max-w-[28rem] items-start gap-3 px-4 py-2.5 select-none;\n background: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow);\n font-family: inherit;\n font-size: var(--text-xs);\n line-height: var(--leading-normal);\n touch-action: pan-y;\n }\n\n .icon {\n @apply mr-4 mt-2 h-5 w-5 shrink-0;\n color: var(--icon-color);\n }\n\n .content {\n @apply min-w-0 flex-1;\n }\n\n .title {\n @apply m-0;\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm);\n line-height: var(--leading-tight);\n color: var(--title-color);\n }\n\n .description {\n @apply mt-1 mb-0;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-xs);\n line-height: var(--leading-normal);\n color: var(--description-color);\n }\n\n .close {\n @apply flex shrink-0 items-center justify-center p-2 cursor-pointer;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm);\n color: var(--close-color);\n opacity: 0.6;\n transition: opacity 0.15s ease-out;\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n\n @media (hover: hover) {\n &:hover {\n opacity: 1;\n background: var(--close-hover-background);\n }\n }\n }\n}\n",
|
|
44
|
-
"styleableParts": [
|
|
45
|
-
{
|
|
46
|
-
"name": "root"
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
"name": "content"
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
"name": "title"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "description"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": "close"
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
"name": "icon"
|
|
62
|
-
}
|
|
63
|
-
],
|
|
64
|
-
"cssVariables": []
|
|
65
|
-
},
|
|
66
66
|
"textarea": {
|
|
67
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --textarea-padding-x: 0.75rem;\n --textarea-padding-y: 0.5rem;\n --disabled-opacity: 0.6;\n\n @apply block w-full px-3 py-2;\n font-family: inherit;\n font-size: var(--text-
|
|
67
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --textarea-padding-x: 0.75rem;\n --textarea-padding-y: 0.5rem;\n --disabled-opacity: 0.6;\n\n @apply block w-full px-3 py-2;\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n box-sizing: border-box;\n resize: none;\n outline: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-focus-visible] {\n outline: none;\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n color: var(--disabled-foreground);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-error] {\n border-color: var(--border);\n\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n }\n\n &[data-resize-axis=\"x\"],\n &[data-resize-axis=\"both\"] {\n padding-inline-end: calc(var(--textarea-padding-x) + 1rem);\n }\n\n &[data-resize-axis=\"y\"],\n &[data-resize-axis=\"both\"] {\n padding-block-end: calc(var(--textarea-padding-y) + 1rem);\n }\n\n &[data-scroll=\"true\"] {\n overflow: hidden;\n resize: none;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n\n &[data-active],\n &[data-focus-visible] {\n border-color: transparent;\n box-shadow: none;\n }\n\n &[data-disabled] {\n background-color: transparent;\n opacity: 1;\n }\n\n &[data-error] {\n border-color: transparent;\n\n &[data-active] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n }\n }\n\n .surface {\n @apply relative w-full;\n }\n\n .resize-handle {\n position: absolute;\n z-index: 1;\n touch-action: none;\n user-select: none;\n\n &::before {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--resize-handle-color);\n transition: background-color 150ms;\n }\n\n &::after {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--resize-handle-color);\n transition: background-color 150ms;\n }\n\n &:hover::before,\n &:hover::after {\n background-color: var(--resize-handle-color-hover);\n }\n\n &[data-axis=\"both\"] {\n right: 3px;\n bottom: 3px;\n width: 1.5rem;\n height: 1.5rem;\n cursor: nwse-resize;\n\n &::before {\n bottom: 0.35rem;\n right: 0.15rem;\n width: 0.5rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n\n &::after {\n bottom: 0.6rem;\n right: 0.2rem;\n width: 1.0rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n }\n\n &[data-axis=\"x\"] {\n top: 50%;\n right: 0;\n width: 0.75rem;\n height: 2rem;\n cursor: ew-resize;\n transform: translateY(-50%);\n\n &::before {\n top: 50%;\n left: 50%;\n width: 0.125rem;\n height: 1.5rem;\n transform: translate(-50%, -50%);\n }\n }\n\n &[data-axis=\"y\"] {\n left: 50%;\n bottom: 0;\n width: 2rem;\n height: 0.75rem;\n cursor: ns-resize;\n transform: translateX(-50%);\n\n &::before {\n top: 50%;\n left: 50%;\n width: 1.5rem;\n height: 0.125rem;\n transform: translate(-50%, -50%);\n }\n }\n }\n\n .scroll-wrapper {\n --disabled-opacity: 0.6;\n\n @apply w-full overflow-hidden;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-focus-visible] {\n outline: none;\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n opacity: var(--disabled-opacity);\n }\n\n &[data-error] {\n border-color: var(--border);\n\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n }\n }\n\n .textarea[data-size=\"sm\"] {\n min-height: 5rem;\n --textarea-padding-x: 0.5rem;\n --textarea-padding-y: 0.25rem;\n font-size: var(--text-sm);\n @apply px-2 py-1;\n }\n\n .textarea[data-size=\"md\"] {\n min-height: 6rem;\n --textarea-padding-x: 0.75rem;\n --textarea-padding-y: 0.5rem;\n font-size: var(--text-sm);\n @apply px-3 py-2;\n }\n\n .textarea[data-size=\"lg\"] {\n min-height: 8rem;\n --textarea-padding-x: 1rem;\n --textarea-padding-y: 0.75rem;\n font-size: var(--text-md);\n @apply px-4 py-3;\n }\n\n .container {\n @apply w-full;\n }\n\n .character-count {\n font-size: var(--text-sm);\n color: var(--character-count-color);\n @apply mt-1;\n transition: color 0.15s var(--ease-snappy-pop);\n }\n\n .character-count[data-over-limit] {\n color: var(--character-count-over-limit-color);\n }\n}\n",
|
|
68
68
|
"styleableParts": [
|
|
69
69
|
{
|
|
70
70
|
"name": "root"
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
]
|
|
148
148
|
},
|
|
149
149
|
"tabs": {
|
|
150
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .tabs {\n @apply flex w-full flex-col;\n\n &[data-orientation=\"vertical\"] {\n flex-direction: row;\n }\n }\n\n .list {\n @apply relative flex w-full flex-row items-center gap-3 py-1;\n border-radius: var(--radius-sm);\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n width: auto;\n min-width: 120px;\n height: 100%;\n }\n\n &[data-variant=\"underline\"] {\n background-color: transparent;\n border-radius: 0;\n padding: 0;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--list-border-color);\n align-items: stretch;\n }\n }\n\n .indicator {\n --indicator-padding: 2px;\n\n @apply absolute;\n background-color: var(--indicator-background);\n border-radius: var(--radius-xs);\n z-index: 0;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n\n .indicator-underline {\n border-radius: 0;\n }\n\n .trigger {\n @apply relative z-[1] flex shrink-0 items-center justify-center gap-2 rounded-sm px-2 py-1.5 cursor-pointer select-none;\n background-color: transparent;\n border: none;\n font-size: var(--text-
|
|
150
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .tabs {\n @apply flex w-full flex-col;\n\n &[data-orientation=\"vertical\"] {\n flex-direction: row;\n }\n }\n\n .list {\n @apply relative flex w-full flex-row items-center gap-3 py-1;\n border-radius: var(--radius-sm);\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n width: auto;\n min-width: 120px;\n height: 100%;\n }\n\n &[data-variant=\"underline\"] {\n background-color: transparent;\n border-radius: 0;\n padding: 0;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--list-border-color);\n align-items: stretch;\n }\n }\n\n .indicator {\n --indicator-padding: 2px;\n\n @apply absolute;\n background-color: var(--indicator-background);\n border-radius: var(--radius-xs);\n z-index: 0;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n\n .indicator-underline {\n border-radius: 0;\n }\n\n .trigger {\n @apply relative z-[1] flex shrink-0 items-center justify-center gap-2 rounded-sm px-2 py-1.5 cursor-pointer select-none;\n background-color: transparent;\n border: none;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--trigger-color);\n outline: none;\n transition: color 0.15s ease, background-color 0.15s ease;\n\n\n &:not([data-disabled]) {\n &:hover {\n color: var(--trigger-hover-color);\n }\n\n &:active {\n color: var(--trigger-active-color);\n }\n }\n\n &[data-selected=\"true\"] {\n color: var(--trigger-selected-color);\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]) {\n .list & {\n background-color: var(--trigger-selected-background);\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: transparent;\n border-bottom-color: var(--trigger-underline-color);\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom-color: transparent;\n border-left-color: var(--trigger-underline-color);\n }\n }\n\n &[data-focus-visible] {\n background: var(--trigger-focus-background);\n outline: none;\n }\n\n &[data-disabled=\"true\"] {\n --disabled-opacity: 0.5;\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .list[data-variant=\"underline\"] & {\n background-color: transparent;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom: none;\n border-left: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]) {\n border-left-color: var(--trigger-underline-color);\n border-bottom: none;\n }\n }\n\n .trigger-icon {\n @apply flex h-4 w-4 shrink-0 items-center justify-center;\n }\n\n .content {\n @apply w-full p-0 outline-none;\n flex: 1;\n padding-top: 1rem;\n\n &[data-orientation=\"vertical\"] {\n flex: 1;\n width: 100%;\n }\n\n &:focus-visible {\n outline: 2px solid var(--content-outline-color);\n outline-offset: 2px;\n }\n }\n\n @media (max-width: 640px) {\n .list {\n padding: 0.125rem;\n\n &[data-variant=\"underline\"] {\n padding: 0;\n }\n }\n\n .trigger {\n @apply px-1 py-1;\n font-size: var(--text-sm);\n\n .list[data-variant=\"underline\"] & {\n margin: 0.5rem 0.75rem;\n }\n }\n }\n}\n",
|
|
151
151
|
"styleableParts": [
|
|
152
152
|
{
|
|
153
153
|
"name": "root"
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
]
|
|
342
342
|
},
|
|
343
343
|
"select": {
|
|
344
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n\n --padding-x: calc(var(--spacing) * 2.00);\n --padding-y: calc(var(--spacing) * 1.75);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n\n @apply p-0 gap-0 w-full flex-row items-center;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--border-color);\n border-radius: var(--radius);\n font-size: var(--text-
|
|
344
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .select {\n --disabled-opacity: 0.5;\n\n --padding-x: calc(var(--spacing) * 2.00);\n --padding-y: calc(var(--spacing) * 1.75);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n\n @apply p-0 gap-0 w-full flex-row items-center;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--border-color);\n border-radius: var(--radius);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n\n @apply select-none cursor-pointer;\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n &[data-pressed]:not([data-disabled]) {\n background-color: var(--pressed-background);\n }\n\n &[aria-expanded=\"true\"] {\n background-color: var(--hover-background);\n }\n }\n\n .trigger {\n @apply flex items-stretch flex-1 gap-0 w-full h-full min-h-0;\n\n background: transparent;\n\n @apply border-none cursor-pointer select-none;\n\n @media (hover: hover) {\n &:not(:disabled):hover .icon-section,\n &:not(:disabled):hover .value-section:not(:empty) {\n background-color: var(--hover-background);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--focus-ring-background), 0 0 0 4px var(--ring-color);\n @apply outline-none;\n }\n\n :global(.group) &:focus-visible {\n @apply outline-none;\n }\n }\n\n button.trigger { @apply p-0; }\n\n .value-section {\n @apply flex items-center flex-1 min-w-0 gap-0.5;\n\n padding: var(--padding-y) var(--padding-x);\n border-radius: var(--inner-radius) 0 0 var(--inner-radius);\n\n &:only-child {\n border-radius: var(--inner-radius);\n justify-content: center;\n }\n &:empty {\n flex: 0;\n padding: 0;\n min-width: auto;\n }\n }\n\n .icon-section {\n @apply flex items-center justify-center shrink-0;\n padding: var(--padding-y) var(--padding-x);\n border-radius: 0 var(--inner-radius) var(--inner-radius) 0;\n }\n\n .icon {\n @apply flex items-center justify-center w-4 h-4 opacity-70;\n }\n\n .trigger[aria-expanded=\"true\"] .icon,\n .trigger[data-open=\"true\"] .icon {\n transform: rotate(180deg);\n }\n\n .value {\n @apply flex items-center flex-1 min-w-0 gap-2 bg-transparent border-none p-0;\n cursor: inherit;\n }\n\n .value-icon {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n color: var(--foreground);\n }\n\n .value-text {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .content,\n .sub-content {\n --padding-x: calc(var(--spacing) * 1.5);\n --padding-y: var(--spacing);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n overflow: hidden;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n }\n\n .content-root,\n .sub-content-root {\n position: absolute;\n }\n\n .content {\n &[data-state=\"open\"][data-placement=\"bottom\"] { animation: slide-in-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"open\"][data-placement=\"top\"] { animation: slide-in-from-bottom 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"bottom\"] { animation: slide-out-from-top 0.15s var(--ease-snappy-pop); }\n &[data-state=\"closed\"][data-placement=\"top\"] { animation: slide-out-from-bottom 0.15s var(--ease-snappy-pop); }\n }\n\n .list {\n @apply space-y-1;\n }\n\n .item {\n --item-padding-x: var(--padding-x);\n --item-padding-y: calc(var(--padding-y) * 1.15);\n\n @apply flex items-center gap-2 outline-none cursor-default select-none;\n padding: var(--item-padding-y) var(--item-padding-x);\n\n border-radius: var(--inner-radius);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--item-foreground);\n\n &[data-selected=\"true\"] {\n color: var(--item-foreground);\n }\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n &[data-highlighted=\"true\"] {\n background-color: var(--item-background-hover);\n }\n }\n\n .item-content {\n @apply flex flex-col flex-1 min-w-0;\n }\n\n .item-text {\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--item-description-color);\n @apply min-w-0 whitespace-normal break-words;\n }\n\n .item-icon, .item-indicator {\n @apply flex items-center justify-center shrink-0 w-4 h-4;\n }\n\n .item-icon { color: var(--item-icon-color); }\n .item-indicator { color: var(--item-indicator-color); margin-left: auto; }\n\n .item-with-description { @apply items-start py-2; }\n .item-icon-with-description, .item-indicator-with-description { @apply mt-0.5; }\n\n .separator {\n @apply my-1 -mx-1 h-px;\n background-color: var(--content-border); /* Reuses content border var */\n }\n\n .placeholder {\n color: var(--placeholder-color);\n }\n\n .icon-prefix {\n @apply inline-flex items-center shrink-0;\n }\n\n .select[data-mode=\"multiple\"] .item { gap: 0.5rem; }\n\n .search-trigger {\n @apply flex items-stretch relative bg-transparent cursor-text overflow-hidden;\n border-radius: var(--inner-radius);\n transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n\n &:focus-within {\n @apply outline-none;\n box-shadow: 0 0 0 1px var(--search-focus-ring);\n z-index: 1;\n }\n }\n\n .search-value-section {\n @apply p-0;\n border-radius: var(--inner-radius) 0 0 var(--inner-radius);\n }\n\n .input {\n padding: var(--padding-y) calc(var(--padding-x) * 1.50);\n padding-right: calc(var(--padding-x) * 2 + 1rem);\n @apply border-none rounded-none shadow-none bg-transparent;\n\n &[data-active], &[data-focus-visible] {\n @apply border-none shadow-none;\n }\n }\n\n .search-content-input {\n padding-inline: calc(var(--padding-x) * 1.50);\n @apply border-none rounded-none bg-transparent;\n }\n\n .search-icon-section {\n @apply absolute right-0 top-0 bottom-0 flex items-center justify-center bg-transparent pointer-events-none;\n padding-inline: var(--padding-x);\n }\n\n\n .search-wrapper {\n @apply overflow-hidden;\n border-bottom: var(--border-width-base, 1px) solid var(--content-border);\n }\n\n .content[data-placement=\"top\"] .search-wrapper {\n border-radius: 0;\n border-bottom: none;\n border-top: var(--border-width-base, 1px) solid var(--content-border);\n }\n\n .sub-trigger {\n --subtrigger-padding-x: var(--padding-x);\n --subtrigger-padding-y: var(--padding-y);\n\n @apply flex items-center gap-2 cursor-default select-none outline-none;\n padding: var(--subtrigger-padding-y) var(--subtrigger-padding-x);\n border-radius: var(--inner-radius);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--subtrigger-foreground);\n\n &[data-highlighted=\"true\"],\n &[data-state=\"open\"]:not([data-highlighted=\"true\"]) {\n background-color: var(--subtrigger-background-hover);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n pointer-events: none;\n }\n }\n\n .sub-trigger-chevron {\n @apply shrink-0 ml-auto w-4 h-4 opacity-60;\n }\n\n .sub-content {\n min-width: 160px;\n max-width: 320px;\n }\n\n @keyframes slide-in-from-top { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-in-from-bottom { from { opacity: 0; translate: 0 2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-out-from-top { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -2px; } }\n @keyframes slide-out-from-bottom { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 2px; } }\n}\n",
|
|
345
345
|
"styleableParts": [
|
|
346
346
|
{
|
|
347
347
|
"name": "root"
|
|
@@ -486,6 +486,20 @@
|
|
|
486
486
|
],
|
|
487
487
|
"variant": ".item"
|
|
488
488
|
},
|
|
489
|
+
{
|
|
490
|
+
"name": "--input-active-border-color",
|
|
491
|
+
"value": "transparent",
|
|
492
|
+
"defaultValue": null,
|
|
493
|
+
"referencedVars": [],
|
|
494
|
+
"variant": ".search-trigger"
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"name": "--input-active-box-shadow",
|
|
498
|
+
"value": "none",
|
|
499
|
+
"defaultValue": null,
|
|
500
|
+
"referencedVars": [],
|
|
501
|
+
"variant": ".search-trigger"
|
|
502
|
+
},
|
|
489
503
|
{
|
|
490
504
|
"name": "--subtrigger-padding-x",
|
|
491
505
|
"value": "var(--padding-x)",
|
|
@@ -507,7 +521,7 @@
|
|
|
507
521
|
]
|
|
508
522
|
},
|
|
509
523
|
"scroll": {
|
|
510
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply relative;\n }\n\n .vertical {\n --scrollbar-width: 12px;\n min-height: 0;\n }\n\n .horizontal { --scrollbar-height: 12px; }\n\n .content {\n @apply h-full w-full;\n overflow: auto;\n }\n\n .vertical .content {\n overflow-y: auto;\n overflow-x: hidden;\n
|
|
524
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply relative;\n }\n\n .vertical {\n --scrollbar-width: 12px;\n min-height: 0;\n }\n\n .horizontal { --scrollbar-height: 12px; }\n\n .content {\n @apply h-full w-full;\n overflow: auto;\n }\n\n .vertical .content {\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n .vertical[data-inset=\"true\"] .content {\n padding-right: 16px;\n }\n\n .horizontal .content {\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n .horizontal[data-inset=\"true\"] .content {\n padding-bottom: 16px;\n }\n\n .vertical .content::-webkit-scrollbar,\n .horizontal .content::-webkit-scrollbar { display: none; }\n\n .track {\n @apply absolute;\n z-index: 10;\n }\n\n .track[data-hide=\"true\"] {\n transition-property: opacity;\n transition-duration: 200ms;\n }\n\n .vertical .track {\n right: 4px;\n top: var(--scroll-padding-y, 0);\n width: 12px;\n height: calc(100% - 2 * var(--scroll-padding-y, 0));\n background-color: var(--track-background);\n box-sizing: border-box;\n }\n\n .horizontal .track {\n bottom: 2px;\n left: 0;\n height: 12px;\n width: 100%;\n background-color: var(--track-background);\n }\n\n .thumb {\n position: absolute;\n border-radius: calc(var(--radius-xs) * 0.80);\n background-color: var(--thumb-background);\n transition-property: background-color, width, height;\n transition-duration: 150ms;\n }\n\n .thumb:hover { background-color: var(--thumb-hover-background); }\n\n .root[data-dragging=\"true\"] .thumb {\n background-color: var(--thumb-dragging-background);\n }\n\n .vertical .thumb {\n width: 6px;\n margin-left: 6px;\n transition-property: background-color, width, margin-left;\n transition-duration: 150ms;\n }\n\n .vertical .thumb:hover,\n .vertical[data-dragging=\"true\"] .thumb {\n width: 8px;\n margin-left: 4px;\n }\n\n .horizontal .thumb {\n height: 6px;\n margin-top: 6px;\n transition-property: background-color, height, margin-top;\n transition-duration: 150ms;\n }\n\n .horizontal .thumb:hover,\n .horizontal[data-dragging=\"true\"] .thumb {\n height: 8px;\n margin-top: 4px;\n }\n}\n",
|
|
511
525
|
"styleableParts": [
|
|
512
526
|
{
|
|
513
527
|
"name": "root"
|
|
@@ -666,7 +680,7 @@
|
|
|
666
680
|
"cssVariables": []
|
|
667
681
|
},
|
|
668
682
|
"popover": {
|
|
669
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--popover-fill);\n --frame-stroke-color: var(--popover-border-color);\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n pointer-events: none;\n min-width: 200px;\n max-width: 400px;\n padding: 0.75rem;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n }\n\n .content[data-instant] {\n transition: none;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-
|
|
683
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .trigger {\n @apply inline-block;\n }\n\n .root {\n @apply absolute;\n pointer-events: none;\n z-index: 50;\n }\n\n .content {\n --frame-fill: var(--popover-fill);\n --frame-stroke-color: var(--popover-border-color);\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n pointer-events: none;\n min-width: 200px;\n max-width: 400px;\n padding: 0.75rem;\n }\n\n .content[data-visible=\"true\"] {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n }\n\n .content[data-instant] {\n transition: none;\n }\n\n .frame {\n @apply flex items-center gap-1.5 px-2 py-1;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n @apply whitespace-nowrap;\n }\n}\n",
|
|
670
684
|
"styleableParts": [
|
|
671
685
|
{
|
|
672
686
|
"name": "root"
|
|
@@ -700,7 +714,7 @@
|
|
|
700
714
|
]
|
|
701
715
|
},
|
|
702
716
|
"path": {
|
|
703
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n --foreground: var(--foreground-primary);\n --foreground-muted: var(--foreground-secondary);\n --separator-color: var(--border-secondary);\n --focus-ring-color: var(--accent-500);\n --disabled-opacity: 0.6;\n\n @apply block;\n }\n\n .path-list {\n list-style: none;\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n flex-wrap: wrap;\n }\n\n .path-list.with-custom-separator .path-item:not(:last-child)::after {\n content: none;\n }\n\n .path-item {\n @apply m-0 flex items-center gap-2 p-0;\n }\n\n /* Separator after each item except the last */\n .path-item:not(:last-child)::after {\n content: '/';\n color: var(--separator-color);\n margin-left: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n\n /* Custom separator element */\n .separator {\n list-style: none;\n @apply m-0 flex items-center p-0;\n color: var(--separator-color);\n user-select: none;\n pointer-events: none;\n }\n\n .path-item-link {\n @apply relative cursor-pointer rounded-sm px-2 py-1;\n color: var(--foreground);\n text-decoration: none;\n font-size: var(--text-
|
|
717
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n --foreground: var(--foreground-primary);\n --foreground-muted: var(--foreground-secondary);\n --separator-color: var(--border-secondary);\n --focus-ring-color: var(--accent-500);\n --disabled-opacity: 0.6;\n\n @apply block;\n }\n\n .path-list {\n list-style: none;\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n flex-wrap: wrap;\n }\n\n .path-list.with-custom-separator .path-item:not(:last-child)::after {\n content: none;\n }\n\n .path-item {\n @apply m-0 flex items-center gap-2 p-0;\n }\n\n /* Separator after each item except the last */\n .path-item:not(:last-child)::after {\n content: '/';\n color: var(--separator-color);\n margin-left: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n\n /* Custom separator element */\n .separator {\n list-style: none;\n @apply m-0 flex items-center p-0;\n color: var(--separator-color);\n user-select: none;\n pointer-events: none;\n }\n\n .path-item-link {\n @apply relative cursor-pointer rounded-sm px-2 py-1;\n color: var(--foreground);\n text-decoration: none;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n line-height: 1.5;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover:not([data-disabled='true']) {\n background-color: var(--background-hover, rgba(0, 0, 0, 0.04));\n color: var(--accent-600);\n }\n\n &:active:not([data-disabled='true']) {\n background-color: var(--background-active, rgba(0, 0, 0, 0.08));\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-current='true'] {\n color: var(--foreground-muted);\n cursor: default;\n font-weight: var(--font-weight-medium);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &[data-disabled='true'] {\n color: var(--foreground-muted);\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n\n &:hover {\n background-color: transparent;\n }\n }\n }\n}\n",
|
|
704
718
|
"styleableParts": [
|
|
705
719
|
{
|
|
706
720
|
"name": "root"
|
|
@@ -777,7 +791,7 @@
|
|
|
777
791
|
"cssVariables": []
|
|
778
792
|
},
|
|
779
793
|
"modal": {
|
|
780
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .overlay {\n --disabled-opacity: 0.5;\n }\n\n .backdrop {\n @apply absolute inset-0 cursor-pointer;\n background-color: var(--backdrop-background);\n backdrop-filter: blur(4px);\n }\n\n .modal {\n @apply relative flex w-full flex-col overflow-hidden;\n z-index: 1;\n max-height: 90vh;\n margin: 1rem;\n background-color: var(--modal-background);\n border: var(--border-width-base) solid var(--modal-border);\n border-radius: var(--radius-sm);\n pointer-events: auto;\n overflow: hidden;\n }\n\n .header {\n @apply flex shrink-0 items-center justify-between gap-2 px-6 py-4;\n border-bottom: var(--border-width-base) solid var(--modal-border);\n }\n\n .title {\n @apply m-0;\n font-size: 1.125rem;\n font-weight: var(--font-weight-semibold);\n color: var(--modal-title-color);\n }\n\n .spacer {\n flex: 1;\n }\n\n .close {\n @apply ml-auto flex items-center justify-center cursor-pointer;\n background: none;\n border: none;\n color: var(--modal-close-color);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .close:hover {\n color: var(--modal-close-hover);\n }\n\n .close:active {\n transform: scale(0.92);\n }\n\n .close:focus {\n outline: 2px solid var(--modal-close-hover);\n outline-offset: 2px;\n border-radius: 0.25rem;\n }\n\n .closeIcon {\n @apply h-5 w-5;\n }\n\n .content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n color: var(--modal-text-color);\n }\n\n .content::-webkit-scrollbar {\n width: 6px;\n }\n\n .content::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .content::-webkit-scrollbar-thumb {\n background: var(--modal-border);\n border-radius: 3px;\n transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .content::-webkit-scrollbar-thumb:hover {\n background: var(--modal-close-color);\n }\n\n .footer {\n @apply flex shrink-0 items-center justify-between gap-4 px-6 py-4;\n background-color: var(--footer-background);\n border-top: var(--border-width-base) solid var(--modal-border);\n }\n\n /* Size variants */\n .size-fit {\n width: fit-content;\n }\n\n .size-auto {\n max-width: min(90vw, 28rem);\n }\n\n /* Media queries for smaller screens */\n @media (max-width: 640px) {\n .modal {\n margin: 1rem;\n }\n\n .content {\n max-height: calc(100vh - 10rem);\n }\n }\n}\n",
|
|
794
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .overlay {\n --disabled-opacity: 0.5;\n }\n\n .backdrop {\n @apply absolute inset-0 cursor-pointer;\n background-color: var(--backdrop-background);\n backdrop-filter: blur(4px);\n }\n\n .modal:focus-visible {\n outline: 2px solid var(--modal-focus-ring);\n outline-offset: 2px;\n }\n\n .modal {\n @apply relative flex w-full flex-col overflow-hidden;\n z-index: 1;\n max-height: 90vh;\n margin: 1rem;\n background-color: var(--modal-background);\n border: var(--border-width-base) solid var(--modal-border);\n border-radius: var(--radius-sm);\n pointer-events: auto;\n overflow: hidden;\n }\n\n .header {\n @apply flex shrink-0 items-center justify-between gap-2 px-6 py-4;\n border-bottom: var(--border-width-base) solid var(--modal-border);\n }\n\n .title {\n @apply m-0;\n font-size: 1.125rem;\n font-weight: var(--font-weight-semibold);\n color: var(--modal-title-color);\n }\n\n .spacer {\n flex: 1;\n }\n\n .close {\n @apply ml-auto flex items-center justify-center cursor-pointer;\n background: none;\n border: none;\n color: var(--modal-close-color);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .close:hover {\n color: var(--modal-close-hover);\n }\n\n .close:active {\n transform: scale(0.92);\n }\n\n .close:focus {\n outline: 2px solid var(--modal-close-hover);\n outline-offset: 2px;\n border-radius: 0.25rem;\n }\n\n .closeIcon {\n @apply h-5 w-5;\n }\n\n .content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n color: var(--modal-text-color);\n }\n\n .content::-webkit-scrollbar {\n width: 6px;\n }\n\n .content::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .content::-webkit-scrollbar-thumb {\n background: var(--modal-border);\n border-radius: 3px;\n transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .content::-webkit-scrollbar-thumb:hover {\n background: var(--modal-close-color);\n }\n\n .footer {\n @apply flex shrink-0 items-center justify-between gap-4 px-6 py-4;\n background-color: var(--footer-background);\n border-top: var(--border-width-base) solid var(--modal-border);\n }\n\n /* Size variants */\n .size-fit {\n width: fit-content;\n }\n\n .size-auto {\n max-width: min(90vw, 28rem);\n }\n\n /* Media queries for smaller screens */\n @media (max-width: 640px) {\n .modal {\n margin: 1rem;\n }\n\n .content {\n max-height: calc(100vh - 10rem);\n }\n }\n}\n",
|
|
781
795
|
"styleableParts": [
|
|
782
796
|
{
|
|
783
797
|
"name": "root"
|
|
@@ -821,7 +835,7 @@
|
|
|
821
835
|
]
|
|
822
836
|
},
|
|
823
837
|
"menu": {
|
|
824
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .content,\n .sub-content {\n --padding: calc(var(--spacing) * 1.5);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n --menu-animation: none;\n --disabled-opacity: 0.5;\n }\n\n .trigger {\n &[data-type=\"pop-over\"][data-active] {\n opacity: 1
|
|
838
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .content,\n .sub-content {\n --padding: calc(var(--spacing) * 1.5);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n --menu-animation: none;\n --disabled-opacity: 0.5;\n }\n\n .trigger {\n &[data-type=\"pop-over\"][data-active] {\n opacity: 1;\n background-color: var(--trigger-active-background);\n border-radius: var(--radius-sm, 0.375rem);\n }\n }\n\n .content {\n @apply absolute min-w-40 max-w-80 overflow-hidden;\n z-index: 50000;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n\n &[data-state=\"open\"] {\n animation: var(--menu-animation, slide-in-from-top 0.15s var(--ease-snappy-pop));\n }\n\n &[data-state=\"closed\"] {\n animation: var(--menu-animation, slide-out-to-top 0.15s var(--ease-snappy-pop));\n }\n }\n\n .list {\n @apply space-y-1;\n max-height: 24rem;\n overflow-y: auto;\n }\n\n .item,\n .checkbox-item,\n .radio-item {\n @apply flex min-w-0 items-center gap-2;\n padding: var(--padding);\n border-radius: var(--inner-radius);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n cursor: default;\n user-select: none;\n outline: none;\n color: var(--item-foreground);\n &[data-highlighted] {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n }\n\n .item,\n .sub-trigger {\n &[data-inset] {\n padding-left: calc(var(--padding) * 2.67);\n }\n }\n\n .item-indicator {\n @apply ml-auto flex h-4 w-4 shrink-0 items-center justify-center;\n color: var(--item-indicator-color);\n }\n\n .sub-trigger {\n @apply flex min-w-0 items-center gap-2;\n padding: var(--padding);\n border-radius: var(--inner-radius);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--item-foreground);\n cursor: default;\n user-select: none;\n outline: none;\n &[data-highlighted] {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-state=\"open\"]:not([data-highlighted]) {\n background-color: var(--item-highlighted-background);\n }\n\n &[data-disabled] {\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n }\n\n .sub-trigger-chevron {\n @apply ml-auto h-4 w-4 shrink-0;\n }\n\n .sub-content {\n @apply absolute min-w-40 max-w-80 overflow-hidden;\n z-index: 50000;\n background-color: var(--content-background);\n border: var(--border-width-base, 1px) solid var(--content-border);\n border-radius: var(--radius);\n\n &[data-state=\"open\"] {\n animation: var(--menu-animation, slide-in-from-top 0.15s var(--ease-snappy-pop));\n }\n\n &[data-state=\"closed\"] {\n animation: var(--menu-animation, slide-out-to-top 0.15s var(--ease-snappy-pop));\n }\n }\n\n .label {\n padding: var(--padding);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--label-foreground);\n\n &[data-inset] {\n padding-left: calc(var(--padding) * 2.67);\n }\n }\n\n .separator {\n @apply -mx-1 my-1 h-px;\n background-color: var(--separator-background);\n }\n\n .shortcut {\n margin-left: auto;\n font-size: var(--text-sm);\n letter-spacing: 0.1em;\n color: var(--shortcut-foreground);\n }\n\n @keyframes slide-in-from-top { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }\n @keyframes slide-out-to-top { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -2px; } }\n}\n",
|
|
825
839
|
"styleableParts": [
|
|
826
840
|
{
|
|
827
841
|
"name": "root"
|
|
@@ -884,7 +898,7 @@
|
|
|
884
898
|
"cssVariables": []
|
|
885
899
|
},
|
|
886
900
|
"list": {
|
|
887
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n @apply mx-auto;\n max-width: 28rem;\n font-family: var(--font-sans, system-ui, -apple-system, sans-serif);\n color: var(--foreground);\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .header.sticky { position: sticky; top: 0; }\n\n .container[data-spacing=\"sm\"] .header {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-color);\n }\n\n .header > :last-child { color: var(--header-subtitle-color); }\n\n .item {\n @apply flex flex-row items-center gap-3 px-2 py-1 cursor-pointer;\n
|
|
901
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n @apply mx-auto;\n max-width: 28rem;\n font-family: var(--font-sans, system-ui, -apple-system, sans-serif);\n color: var(--foreground);\n }\n\n .header {\n @apply flex items-center justify-between;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n backdrop-filter: blur(12px);\n z-index: 10;\n }\n\n .header.sticky { position: sticky; top: 0; }\n\n .container[data-spacing=\"sm\"] .header {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-color);\n }\n\n .header > :last-child { color: var(--header-subtitle-color); }\n\n .item {\n @apply flex flex-row items-center gap-3 px-2 py-1 cursor-pointer;\n }\n\n .container .item:hover {\n background-color: var(--background-hover);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n background-color: var(--background-highlighted);\n }\n\n .container[data-spacing=\"sm\"] .item {\n padding: 0.5rem 0.75rem;\n gap: 0.375rem;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control { margin-left: auto; }\n\n .media {\n @apply h-8 w-8;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-color);\n @apply truncate;\n }\n\n .action-group {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .action-group[data-justify=\"space-between\"] { justify-content: space-between; }\n .action-group[data-justify=\"flex-start\"] { justify-content: flex-start; }\n .action-group[data-justify=\"flex-end\"] { justify-content: flex-end; }\n\n .actions {\n align-items: center;\n gap: 0.25rem;\n margin-left: auto;\n flex-shrink: 0;\n @apply p-1.5 hidden group-hover:flex;\n }\n\n .action {\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n color: var(--action-color);\n @apply p-2;\n }\n\n .action:hover {\n background-color: var(--background-hover);\n color: var(--action-hover-color);\n }\n\n .footer {\n @apply flex p-6 pb-12;\n }\n\n .footer[data-align=\"center\"] { justify-content: center; }\n .footer[data-align=\"flex-start\"] { justify-content: flex-start; }\n .footer[data-align=\"flex-end\"] { justify-content: flex-end; }\n\n .container[data-spacing=\"sm\"] .footer {\n padding: 0.375rem 0.75rem;\n padding-bottom: 0.375rem;\n }\n}\n",
|
|
888
902
|
"styleableParts": [
|
|
889
903
|
{
|
|
890
904
|
"name": "root"
|
|
@@ -893,7 +907,7 @@
|
|
|
893
907
|
"cssVariables": []
|
|
894
908
|
},
|
|
895
909
|
"label": {
|
|
896
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n display: block;\n font-family: inherit;\n font-size: var(--text-sm);\n color: var(--foreground);\n transition: color 150ms ease;\n\n &[data-size=\"sm\"] { font-size: var(--text-
|
|
910
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n display: block;\n font-family: inherit;\n font-size: var(--text-sm);\n color: var(--foreground);\n transition: color 150ms ease;\n\n &[data-size=\"sm\"] { font-size: var(--text-sm); }\n &[data-size=\"lg\"] { font-size: var(--text-md); }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--error-foreground);\n }\n }\n\n .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .helper-text {\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-color);\n\n &[data-error] {\n color: var(--helper-error-color);\n }\n }\n}\n",
|
|
897
911
|
"styleableParts": [
|
|
898
912
|
{
|
|
899
913
|
"name": "root"
|
|
@@ -908,7 +922,7 @@
|
|
|
908
922
|
"cssVariables": []
|
|
909
923
|
},
|
|
910
924
|
"input": {
|
|
911
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n --disabled-opacity: 0.5;\n\n @apply
|
|
925
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .input {\n --disabled-opacity: 0.5;\n\n flex: 1;\n min-width: 0;\n @apply py-2 px-3;\n font-family: inherit;\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--foreground);\n background-color: transparent;\n border: none;\n outline: none;\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled] {\n color: var(--disabled-foreground);\n cursor: not-allowed;\n }\n\n /* Hide default browser spinners for number inputs */\n &[type=\"number\"] {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n display: none;\n }\n\n /* Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n }\n }\n\n .icon-wrapper {\n @apply z-10 flex items-center;\n color: var(--icon-color);\n pointer-events: none;\n }\n\n .prefix-icon {\n @apply relative;\n }\n\n .suffix-icon {\n @apply relative;\n }\n\n .container {\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--input-border-color, var(--border));\n border-radius: var(--input-border-radius, var(--radius-sm));\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-active] {\n border-color: var(--input-active-border-color, var(--ring-color));\n box-shadow: var(--input-active-box-shadow, 0 0 0 1px mix(var(--ring-color) 20%, transparent));\n }\n\n &[data-focus-visible] {\n @apply ring-0;\n border-color: var(--input-active-border-color, var(--ring-color));\n }\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n &[data-error] {\n &[data-active] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n\n &[data-focus-visible] {\n border-color: var(--ring-color);\n box-shadow: 0 0 0 1px mix(var(--ring-color) 20%, transparent);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n &[data-active], &[data-focus-visible] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n }\n\n .start-adornments,\n .end-adornments {\n @apply flex items-center gap-1;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2;\n }\n\n .end-adornments {\n @apply pr-2;\n }\n\n .actions {\n @apply flex items-center gap-1;\n pointer-events: auto;\n }\n\n .action {\n @apply flex items-center justify-center p-2;\n border-radius: 0.25rem;\n color: var(--action-color);\n }\n\n .action:hover {\n background-color: var(--background-hover);\n color: var(--action-hover-color);\n }\n\n .number-controls {\n @apply flex w-6 flex-col;\n pointer-events: auto;\n }\n\n .number-controls.disabled {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .spin-button {\n @apply flex w-full flex-1 items-center justify-center p-0 cursor-pointer;\n flex: 1;\n background-color: transparent;\n border: none;\n color: var(--spin-color);\n transition: color 150ms ease-out, background-color 150ms ease-out;\n\n &:hover:not(:disabled) {\n background-color: var(--spin-hover-background);\n color: var(--spin-hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--spin-active-background);\n color: var(--spin-active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n }\n}\n",
|
|
912
926
|
"styleableParts": [
|
|
913
927
|
{
|
|
914
928
|
"name": "root"
|
|
@@ -925,7 +939,7 @@
|
|
|
925
939
|
]
|
|
926
940
|
},
|
|
927
941
|
"group": {
|
|
928
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --radius-basis: calc(var(--spacing) * 1.5);\n --padding: var(--radius-basis);\n\n @apply flex overflow-hidden;\n width: fit-content;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n
|
|
942
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .group {\n --radius-basis: calc(var(--spacing) * 1.5);\n --padding: var(--radius-basis);\n --radius: var(--radius-sm, 0.375rem);\n --inner-radius: calc(var(--radius) - var(--border-width-base, 1px));\n\n @apply flex overflow-hidden;\n width: fit-content;\n flex-shrink: 0;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n\n border-radius: var(--radius);\n padding: var(--padding);\n }\n\n /* Orientations */\n .group.horizontal {\n @apply flex-row items-stretch;\n }\n\n .group.vertical {\n @apply flex-col;\n }\n\n /* Spacing */\n .group.none {\n --padding: 0;\n @apply gap-0;\n }\n\n .group.xs {\n --radius-basis: calc(var(--spacing) * 0.875);\n --padding: var(--radius-basis);\n @apply space-x-0.5;\n }\n\n .group.sm {\n --radius-basis: calc(var(--spacing) * 1.25);\n --padding: var(--radius-basis);\n @apply space-x-1;\n }\n\n /* Variants */\n .group.ghost {\n border: none;\n overflow: visible;\n @apply gap-1;\n }\n\n .item {\n @apply flex min-w-0 items-stretch;\n }\n\n .item.grow {\n flex: 1;\n }\n\n .group:not(.ghost) .item .group-item,\n .group:not(.ghost) .item .group-select-wrapper {\n border: none;\n }\n\n .group:not(.ghost) .group-input-wrapper {\n --input-border-color: transparent;\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n }\n\n .group.none:not(.ghost) .item .group-item,\n .group.none:not(.ghost) .item .group-select-wrapper,\n .group.none:not(.ghost) .item .trigger {\n border-radius: 0;\n }\n\n .group.none:not(.ghost) .group-input-wrapper {\n --input-border-radius: 0;\n }\n\n .group.none:not(.ghost) .item .group-select-wrapper {\n --radius: 0;\n --inner-radius: 0;\n }\n\n .group.xs:not(.ghost) .item .group-item,\n .group.xs:not(.ghost) .item .trigger,\n .group.xs:not(.ghost) .group-select-wrapper .group-item,\n .group.xs:not(.ghost) .group-select-wrapper .trigger,\n .group.sm:not(.ghost) .item .group-item,\n .group.sm:not(.ghost) .item .trigger,\n .group.sm:not(.ghost) .group-select-wrapper .group-item,\n .group.sm:not(.ghost) .group-select-wrapper .trigger {\n border-radius: var(--inner-radius);\n }\n\n .group.xs:not(.ghost) .group-input-wrapper,\n .group.sm:not(.ghost) .group-input-wrapper {\n --input-border-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:first-child > .group-item {\n border-top-left-radius: var(--inner-radius);\n border-bottom-left-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:last-child > .group-item {\n border-top-right-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:first-child > .group-item {\n border-top-left-radius: var(--inner-radius);\n border-top-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:last-child > .group-item {\n border-bottom-left-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:first-child .group-input-wrapper > * {\n border-top-left-radius: var(--inner-radius);\n border-bottom-left-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:last-child .group-input-wrapper > * {\n border-top-right-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:first-child .group-input-wrapper > * {\n border-top-left-radius: var(--inner-radius);\n border-top-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:last-child .group-input-wrapper > * {\n border-bottom-left-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:first-child .group-select-wrapper .group-item {\n border-top-left-radius: var(--inner-radius);\n border-bottom-left-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:last-child .group-select-wrapper .trigger {\n border-top-right-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:first-child .group-select-wrapper .group-item {\n border-top-left-radius: var(--inner-radius);\n border-top-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:last-child .group-select-wrapper .trigger {\n border-bottom-left-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:first-child > .trigger {\n border-top-left-radius: var(--inner-radius);\n border-bottom-left-radius: var(--inner-radius);\n }\n\n .group.none.horizontal:not(.ghost) .item:last-child > .trigger {\n border-top-right-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:first-child > .trigger {\n border-top-left-radius: var(--inner-radius);\n border-top-right-radius: var(--inner-radius);\n }\n\n .group.none.vertical:not(.ghost) .item:last-child > .trigger {\n border-bottom-left-radius: var(--inner-radius);\n border-bottom-right-radius: var(--inner-radius);\n }\n\n .item.divider {\n @apply flex items-stretch p-0;\n }\n\n .item.divider > [role=\"separator\"] {\n @apply h-full w-full;\n }\n\n .group.horizontal .item.divider {\n margin-top: calc(var(--padding) * -1);\n margin-bottom: calc(var(--padding) * -1);\n }\n\n .group.vertical .item.divider {\n margin-left: calc(var(--padding) * -1);\n margin-right: calc(var(--padding) * -1);\n }\n\n .group.ghost:not(.none) .item .group-item:not(.active) {\n border-radius: var(--inner-radius);\n border: var(--border-width-base) solid transparent;\n }\n\n /* ghost + none: flat children — no borders or radius */\n .group.ghost.none {\n @apply gap-0;\n }\n\n .group.ghost.none .item .group-item,\n .group.ghost.none .group-item.active {\n border: none;\n border-radius: 0;\n }\n\n .group.ghost.none .group-input-wrapper {\n --input-border-color: transparent;\n --input-border-radius: 0;\n }\n\n .group.ghost.none .group-select-wrapper {\n --radius: 0;\n --inner-radius: 0;\n border: none;\n border-radius: 0;\n }\n\n .group:not(.ghost) .item .group-item:focus-visible,\n .group:not(.ghost) .item .trigger:focus-visible,\n .group:not(.ghost) .group-input-wrapper > [data-focus-visible] {\n outline: none;\n box-shadow: inset 0 0 0 1px var(--focus-ring-color);\n position: relative;\n z-index: 1;\n }\n\n .group.ghost .item .group-item:focus-visible,\n .group.ghost .item .trigger:focus-visible,\n .group.ghost .group-input-wrapper > [data-focus-visible] {\n outline: none;\n box-shadow: 0 0 0 1px var(--focus-ring-color);\n position: relative;\n z-index: 1;\n }\n\n .group-input-wrapper {\n @apply flex h-full items-stretch;\n flex: 1;\n overflow: visible;\n }\n\n .group-input-wrapper input {\n height: 100%;\n }\n\n .item .group-item {\n @apply flex h-full;\n }\n\n .group.vertical .item .group-item {\n @apply w-full;\n }\n\n .group.xs .item button.group-item {\n padding: calc(var(--spacing) * 1.00) calc(var(--spacing) * 1.50);\n }\n\n .group.sm .item button.group-item {\n padding: calc(var(--spacing) * 1.50) calc(var(--spacing) * 2.00);\n }\n\n .group.none .item button.group-item {\n padding: calc(var(--spacing) * 2.00) calc(var(--spacing) * 2.50);\n }\n\n .group-select-wrapper {\n @apply flex items-stretch p-0;\n border: none;\n background-color: transparent;\n }\n\n .group.none:not(.ghost) .trigger {\n border-radius: 0;\n }\n\n .trigger {\n border: none;\n }\n\n .group-select-wrapper .select {\n @apply h-full w-full;\n }\n\n .group-item.active {\n @apply relative;\n }\n\n .group.ghost .group-item.active {\n border-radius: var(--inner-radius);\n }\n\n .group:not(.ghost) .group-item.active {\n background-color: var(--active-background);\n font-weight: 500;\n }\n}\n",
|
|
929
943
|
"styleableParts": [],
|
|
930
944
|
"cssVariables": [
|
|
931
945
|
{
|
|
@@ -946,6 +960,25 @@
|
|
|
946
960
|
],
|
|
947
961
|
"variant": ".group"
|
|
948
962
|
},
|
|
963
|
+
{
|
|
964
|
+
"name": "--radius",
|
|
965
|
+
"value": "var(--radius-sm, 0.375rem)",
|
|
966
|
+
"defaultValue": "0.375rem",
|
|
967
|
+
"referencedVars": [
|
|
968
|
+
"--radius-sm"
|
|
969
|
+
],
|
|
970
|
+
"variant": ".group"
|
|
971
|
+
},
|
|
972
|
+
{
|
|
973
|
+
"name": "--inner-radius",
|
|
974
|
+
"value": "calc(var(--radius) - var(--border-width-base, 1px))",
|
|
975
|
+
"defaultValue": "1px",
|
|
976
|
+
"referencedVars": [
|
|
977
|
+
"--radius",
|
|
978
|
+
"--border-width-base"
|
|
979
|
+
],
|
|
980
|
+
"variant": ".group"
|
|
981
|
+
},
|
|
949
982
|
{
|
|
950
983
|
"name": "--padding",
|
|
951
984
|
"value": "0",
|
|
@@ -989,6 +1022,34 @@
|
|
|
989
1022
|
],
|
|
990
1023
|
"variant": ".group.sm"
|
|
991
1024
|
},
|
|
1025
|
+
{
|
|
1026
|
+
"name": "--input-border-color",
|
|
1027
|
+
"value": "transparent",
|
|
1028
|
+
"defaultValue": null,
|
|
1029
|
+
"referencedVars": [],
|
|
1030
|
+
"variant": ".group:not(.ghost) .group-input-wrapper"
|
|
1031
|
+
},
|
|
1032
|
+
{
|
|
1033
|
+
"name": "--input-active-border-color",
|
|
1034
|
+
"value": "transparent",
|
|
1035
|
+
"defaultValue": null,
|
|
1036
|
+
"referencedVars": [],
|
|
1037
|
+
"variant": ".group:not(.ghost) .group-input-wrapper"
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
"name": "--input-active-box-shadow",
|
|
1041
|
+
"value": "none",
|
|
1042
|
+
"defaultValue": null,
|
|
1043
|
+
"referencedVars": [],
|
|
1044
|
+
"variant": ".group:not(.ghost) .group-input-wrapper"
|
|
1045
|
+
},
|
|
1046
|
+
{
|
|
1047
|
+
"name": "--input-border-radius",
|
|
1048
|
+
"value": "0",
|
|
1049
|
+
"defaultValue": null,
|
|
1050
|
+
"referencedVars": [],
|
|
1051
|
+
"variant": ".group.none:not(.ghost) .group-input-wrapper"
|
|
1052
|
+
},
|
|
992
1053
|
{
|
|
993
1054
|
"name": "--radius",
|
|
994
1055
|
"value": "0",
|
|
@@ -1003,6 +1064,29 @@
|
|
|
1003
1064
|
"referencedVars": [],
|
|
1004
1065
|
"variant": ".group.none:not(.ghost) .item .group-select-wrapper"
|
|
1005
1066
|
},
|
|
1067
|
+
{
|
|
1068
|
+
"name": "--input-border-radius",
|
|
1069
|
+
"value": "var(--inner-radius)",
|
|
1070
|
+
"defaultValue": null,
|
|
1071
|
+
"referencedVars": [
|
|
1072
|
+
"--inner-radius"
|
|
1073
|
+
],
|
|
1074
|
+
"variant": ".group.xs:not(.ghost) .group-input-wrapper,\n .group.sm:not(.ghost) .group-input-wrapper"
|
|
1075
|
+
},
|
|
1076
|
+
{
|
|
1077
|
+
"name": "--input-border-color",
|
|
1078
|
+
"value": "transparent",
|
|
1079
|
+
"defaultValue": null,
|
|
1080
|
+
"referencedVars": [],
|
|
1081
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1082
|
+
},
|
|
1083
|
+
{
|
|
1084
|
+
"name": "--input-border-radius",
|
|
1085
|
+
"value": "0",
|
|
1086
|
+
"defaultValue": null,
|
|
1087
|
+
"referencedVars": [],
|
|
1088
|
+
"variant": ".group.ghost.none .group-input-wrapper"
|
|
1089
|
+
},
|
|
1006
1090
|
{
|
|
1007
1091
|
"name": "--radius",
|
|
1008
1092
|
"value": "0",
|
|
@@ -1019,6 +1103,15 @@
|
|
|
1019
1103
|
}
|
|
1020
1104
|
]
|
|
1021
1105
|
},
|
|
1106
|
+
"grid": {
|
|
1107
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .grid {\n @apply grid w-full;\n grid-template-columns: var(--grid-tpl, repeat(3, 1fr));\n grid-template-rows: var(--grid-rows, auto);\n gap: var(--grid-gap, calc(var(--spacing, 0.25rem) * 4));\n justify-items: var(--grid-ji, stretch);\n align-items: var(--grid-ai, stretch);\n justify-content: var(--grid-jc, start);\n align-content: var(--grid-ac, start);\n grid-auto-flow: var(--grid-flow, row);\n }\n\n .container {\n container-type: inline-size;\n container-name: grid-ctx;\n }\n\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-sm, 1fr);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-md, var(--grid-tpl-sm, 1fr));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-xl, var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr))));\n }\n }\n\n .grid.responsive-gap {\n gap: var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 2));\n }\n\n @media (min-width: 640px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4)));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-lg, var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4))));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-xl, var(--grid-gap-lg, var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4)))));\n }\n }\n\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-sm, auto);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-md, var(--grid-rows-sm, auto));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-xl, var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto))));\n }\n }\n\n .grid.has-row-gap { row-gap: var(--grid-row-gap); }\n .grid.has-col-gap { column-gap: var(--grid-col-gap); }\n\n @container grid-ctx (width < 400px) {\n .container .grid {\n grid-template-columns: 1fr;\n gap: calc(var(--spacing, 0.25rem) * 2);\n }\n }\n}\n",
|
|
1108
|
+
"styleableParts": [
|
|
1109
|
+
{
|
|
1110
|
+
"name": "root"
|
|
1111
|
+
}
|
|
1112
|
+
],
|
|
1113
|
+
"cssVariables": []
|
|
1114
|
+
},
|
|
1022
1115
|
"gallery": {
|
|
1023
1116
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .item {\n @apply flex flex-col border overflow-hidden no-underline cursor-pointer;\n\n background: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n color: inherit;\n }\n\n .item:focus {\n outline: none;\n }\n\n .item[data-focus-visible] {\n outline: 2px solid var(--border-focus);\n outline-offset: 2px;\n }\n\n .item[data-hovered] {\n border-color: var(--border-hover);\n }\n\n .item[data-pressed] {\n border-color: var(--border-focus);\n }\n\n .item[data-orientation=\"horizontal\"] {\n @apply flex-row;\n }\n\n .item[data-orientation=\"horizontal\"] .view {\n width: var(--gallery-horizontal-view-width, 200px);\n }\n\n .view {\n --aspect-ratio: var(--gallery-aspect-ratio, 16/9);\n\n @apply relative overflow-hidden;\n aspect-ratio: var(--aspect-ratio);\n background: var(--background);\n }\n\n .view > img,\n .view > video {\n @apply w-full h-full object-cover;\n }\n\n .body {\n @apply flex flex-col gap-1 p-3 self-start min-w-0;\n }\n\n .item[data-orientation=\"horizontal\"] .body {\n flex: 1;\n align-self: stretch;\n }\n\n .body > :first-child {\n font-weight: var(--font-weight-medium);\n color: var(--title-color);\n }\n\n .body > :not(:first-child) {\n font-size: var(--text-sm);\n color: var(--description-color);\n }\n}\n",
|
|
1024
1117
|
"styleableParts": [
|
|
@@ -1038,15 +1131,6 @@
|
|
|
1038
1131
|
}
|
|
1039
1132
|
]
|
|
1040
1133
|
},
|
|
1041
|
-
"grid": {
|
|
1042
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .grid {\n @apply grid w-full;\n grid-template-columns: var(--grid-tpl, repeat(3, 1fr));\n grid-template-rows: var(--grid-rows, auto);\n gap: var(--grid-gap, calc(var(--spacing, 0.25rem) * 4));\n justify-items: var(--grid-ji, stretch);\n align-items: var(--grid-ai, stretch);\n justify-content: var(--grid-jc, start);\n align-content: var(--grid-ac, start);\n grid-auto-flow: var(--grid-flow, row);\n }\n\n .container {\n container-type: inline-size;\n container-name: grid-ctx;\n }\n\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-sm, 1fr);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-md, var(--grid-tpl-sm, 1fr));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-cols {\n grid-template-columns: var(--grid-tpl-xl, var(--grid-tpl-lg, var(--grid-tpl-md, var(--grid-tpl-sm, 1fr))));\n }\n }\n\n .grid.responsive-gap {\n gap: var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 2));\n }\n\n @media (min-width: 640px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4)));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-lg, var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4))));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-gap {\n gap: var(--grid-gap-xl, var(--grid-gap-lg, var(--grid-gap-md, var(--grid-gap-sm, calc(var(--spacing, 0.25rem) * 4)))));\n }\n }\n\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-sm, auto);\n }\n\n @media (min-width: 640px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-md, var(--grid-rows-sm, auto));\n }\n }\n\n @media (min-width: 1024px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto)));\n }\n }\n\n @media (min-width: 1280px) {\n .grid.responsive-rows {\n grid-template-rows: var(--grid-rows-xl, var(--grid-rows-lg, var(--grid-rows-md, var(--grid-rows-sm, auto))));\n }\n }\n\n .grid.has-row-gap { row-gap: var(--grid-row-gap); }\n .grid.has-col-gap { column-gap: var(--grid-col-gap); }\n\n @container grid-ctx (width < 400px) {\n .container .grid {\n grid-template-columns: 1fr;\n gap: calc(var(--spacing, 0.25rem) * 2);\n }\n }\n}\n",
|
|
1043
|
-
"styleableParts": [
|
|
1044
|
-
{
|
|
1045
|
-
"name": "root"
|
|
1046
|
-
}
|
|
1047
|
-
],
|
|
1048
|
-
"cssVariables": []
|
|
1049
|
-
},
|
|
1050
1134
|
"frame": {
|
|
1051
1135
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n --frame-radius: var(--radius-sm, 24px);\n --frame-stroke-width: var(--border-width-base, 1px);\n }\n\n .shape {\n rx: var(--frame-radius);\n }\n\n .stroke {\n stroke-width: var(--frame-stroke-width);\n vector-effect: non-scaling-stroke;\n }\n\n}\n",
|
|
1052
1136
|
"styleableParts": [
|
|
@@ -1075,6 +1159,15 @@
|
|
|
1075
1159
|
}
|
|
1076
1160
|
]
|
|
1077
1161
|
},
|
|
1162
|
+
"flex": {
|
|
1163
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .flex {\n @apply flex w-full flex-row;\n flex-wrap: nowrap;\n gap: var(--spacing-md);\n justify-content: flex-start;\n align-items: stretch;\n }\n\n /* Direction variants */\n .flex.row { flex-direction: row; }\n .flex.column { flex-direction: column; }\n\n /* Wrap variants */\n .flex.wrap { flex-wrap: wrap; }\n .flex.nowrap { flex-wrap: nowrap; }\n\n /* Gap variants */\n .flex.gap-xs { gap: var(--spacing-xs); }\n .flex.gap-sm { gap: var(--spacing-sm); }\n .flex.gap-md { gap: var(--spacing-md); }\n .flex.gap-lg { gap: var(--spacing-lg); }\n .flex.gap-xl { gap: var(--spacing-xl); }\n\n /* Justify-content variants */\n .flex.justify-flex-start { justify-content: flex-start; }\n .flex.justify-flex-end { justify-content: flex-end; }\n .flex.justify-center { justify-content: center; }\n .flex.justify-space-between { justify-content: space-between; }\n .flex.justify-space-around { justify-content: space-around; }\n .flex.justify-space-evenly { justify-content: space-evenly; }\n\n /* Align-items variants */\n .flex.align-flex-start { align-items: flex-start; }\n .flex.align-flex-end { align-items: flex-end; }\n .flex.align-center { align-items: center; }\n .flex.align-stretch { align-items: stretch; }\n .flex.align-baseline { align-items: baseline; }\n\n /* Container query parent - establishes containment context */\n .container-query-parent {\n container-type: inline-size;\n container-name: flex-parent;\n @apply w-full;\n }\n\n /* Container query responsive behavior - use .flex.container-responsive for specificity parity with base variants */\n @container flex-parent (width < 400px) {\n .flex.container-responsive {\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (400px <= width < 500px) {\n .flex.container-responsive {\n flex-wrap: wrap;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (500px <= width < 900px) {\n .flex.container-responsive {\n gap: var(--spacing-md);\n }\n }\n\n @container flex-parent (width >= 900px) {\n .flex.container-responsive {\n gap: var(--spacing-lg);\n }\n }\n}\n",
|
|
1164
|
+
"styleableParts": [
|
|
1165
|
+
{
|
|
1166
|
+
"name": "root"
|
|
1167
|
+
}
|
|
1168
|
+
],
|
|
1169
|
+
"cssVariables": []
|
|
1170
|
+
},
|
|
1078
1171
|
"expand": {
|
|
1079
1172
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .expand {\n --disabled-opacity: 0.6;\n\n @apply flex flex-col;\n }\n\n .expand[data-disabled] {\n opacity: var(--disabled-opacity);\n cursor: not-allowed;\n }\n\n .trigger {\n @apply flex w-full items-stretch justify-between p-0 text-left cursor-pointer;\n\n font-size: var(--text-sm);\n line-height: var(--leading-snug);\n color: var(--trigger-foreground);\n background-color: var(--trigger-background);\n\n border: none;\n border-radius: var(--radius-sm);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n }\n\n .icon {\n @apply flex shrink-0 items-center justify-center px-3 py-2;\n color: inherit;\n border-radius: var(--radius-sm);\n\n @media (hover: hover) {\n .trigger:not([data-disabled]):hover & {\n background-color: var(--trigger-background-hover);\n border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n }\n\n /* When the icon itself is hovered, it should be isolated and fully rounded */\n .trigger:not([data-disabled]) &:hover {\n border-radius: var(--radius-sm);\n }\n }\n }\n\n .icon > * {\n transition: transform 250ms var(--ease-smooth-settle);\n }\n\n .expand:has(.trigger[data-expanded=\"true\"]) .icon > *,\n .icon[data-expanded=\"true\"] > * {\n transform: rotate(180deg);\n }\n\n /* from=\"above\": content expands upward above the trigger */\n .expand:has(.content[data-from=\"above\"]) {\n flex-direction: column-reverse;\n\n .icon > * {\n transform: rotate(180deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(0deg);\n }\n }\n\n /* from=\"left\": content appears left of trigger */\n .expand:has(.content[data-from=\"left\"]) {\n @apply flex-row-reverse items-start;\n\n .trigger {\n @apply w-auto flex-col;\n }\n\n .icon > * {\n transform: rotate(-90deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(90deg);\n }\n }\n\n /* from=\"right\": content appears right of trigger */\n .expand:has(.content[data-from=\"right\"]) {\n @apply flex-row items-start;\n\n .trigger {\n @apply w-auto flex-col;\n }\n\n .icon > * {\n transform: rotate(90deg);\n }\n\n &:has(.trigger[data-expanded=\"true\"]) .icon > * {\n transform: rotate(-90deg);\n }\n }\n\n /* Horizontal content animation */\n .content[data-from=\"left\"],\n .content[data-from=\"right\"] {\n grid-template-rows: 1fr;\n grid-template-columns: 0fr;\n transition: grid-template-columns 300ms var(--ease-smooth-settle);\n\n &[data-expanded=\"true\"] {\n grid-template-columns: 1fr;\n }\n\n .content-inner {\n min-height: unset;\n min-width: 0;\n }\n }\n\n .title {\n @apply flex flex-1 min-w-0 items-center overflow-hidden py-2 pl-3;\n\n font-weight: var(--font-weight-medium);\n border-radius: var(--radius-sm) 0 0 var(--radius-sm);\n\n @media (hover: hover) {\n .trigger:not([data-disabled]):hover & {\n background-color: var(--trigger-background-hover);\n }\n\n /* When icon is hovered, remove background from title */\n .trigger:not([data-disabled]):has(.icon:hover) & {\n background-color: transparent;\n }\n }\n\n .trigger:not([data-disabled]) {\n background-color: transparent;\n }\n }\n\n .content {\n @apply grid overflow-hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 300ms var(--ease-smooth-settle);\n\n &[data-expanded=\"true\"] {\n grid-template-rows: 1fr;\n }\n }\n\n .content-inner {\n @apply min-h-0 overflow-hidden;\n color: var(--content-foreground);\n background-color: var(--content-background);\n }\n\n .expand:has(.trigger[data-disabled]) {\n pointer-events: none;\n }\n}\n",
|
|
1080
1173
|
"styleableParts": [
|
|
@@ -1098,17 +1191,8 @@
|
|
|
1098
1191
|
}
|
|
1099
1192
|
]
|
|
1100
1193
|
},
|
|
1101
|
-
"flex": {
|
|
1102
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .flex {\n @apply flex w-full flex-row;\n flex-wrap: nowrap;\n gap: var(--spacing-md);\n justify-content: flex-start;\n align-items: stretch;\n }\n\n /* Direction variants */\n .flex.row { flex-direction: row; }\n .flex.column { flex-direction: column; }\n\n /* Wrap variants */\n .flex.wrap { flex-wrap: wrap; }\n .flex.nowrap { flex-wrap: nowrap; }\n\n /* Gap variants */\n .flex.gap-xs { gap: var(--spacing-xs); }\n .flex.gap-sm { gap: var(--spacing-sm); }\n .flex.gap-md { gap: var(--spacing-md); }\n .flex.gap-lg { gap: var(--spacing-lg); }\n .flex.gap-xl { gap: var(--spacing-xl); }\n\n /* Justify-content variants */\n .flex.justify-flex-start { justify-content: flex-start; }\n .flex.justify-flex-end { justify-content: flex-end; }\n .flex.justify-center { justify-content: center; }\n .flex.justify-space-between { justify-content: space-between; }\n .flex.justify-space-around { justify-content: space-around; }\n .flex.justify-space-evenly { justify-content: space-evenly; }\n\n /* Align-items variants */\n .flex.align-flex-start { align-items: flex-start; }\n .flex.align-flex-end { align-items: flex-end; }\n .flex.align-center { align-items: center; }\n .flex.align-stretch { align-items: stretch; }\n .flex.align-baseline { align-items: baseline; }\n\n /* Container query parent - establishes containment context */\n .container-query-parent {\n container-type: inline-size;\n container-name: flex-parent;\n @apply w-full;\n }\n\n /* Container query responsive behavior - use .flex.container-responsive for specificity parity with base variants */\n @container flex-parent (width < 400px) {\n .flex.container-responsive {\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (400px <= width < 500px) {\n .flex.container-responsive {\n flex-wrap: wrap;\n gap: var(--spacing-sm);\n }\n }\n\n @container flex-parent (500px <= width < 900px) {\n .flex.container-responsive {\n gap: var(--spacing-md);\n }\n }\n\n @container flex-parent (width >= 900px) {\n .flex.container-responsive {\n gap: var(--spacing-lg);\n }\n }\n}\n",
|
|
1103
|
-
"styleableParts": [
|
|
1104
|
-
{
|
|
1105
|
-
"name": "root"
|
|
1106
|
-
}
|
|
1107
|
-
],
|
|
1108
|
-
"cssVariables": []
|
|
1109
|
-
},
|
|
1110
1194
|
"date": {
|
|
1111
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .calendar {\n --disabled-opacity: 0.5;\n\n @apply inline-flex flex-col overflow-hidden gap-0;\n border-radius: var(--radius-md);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n }\n\n .day-headers {\n @apply grid gap-2 px-4 pt-3 pb-1;\n grid-template-columns: repeat(7, 1fr);\n background: var(--day-headers-background);\n border-top: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-md) var(--radius-md) 0 0;\n }\n\n .day-header {\n @apply flex items-center justify-center;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-
|
|
1195
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .calendar {\n --disabled-opacity: 0.5;\n\n @apply inline-flex flex-col overflow-hidden gap-0;\n border-radius: var(--radius-md);\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n }\n\n .day-headers {\n @apply grid gap-2 px-4 pt-3 pb-1;\n grid-template-columns: repeat(7, 1fr);\n background: var(--day-headers-background);\n border-top: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-md) var(--radius-md) 0 0;\n }\n\n .day-header {\n @apply flex items-center justify-center;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n color: var(--day-header-color);\n }\n\n .header {\n @apply flex items-center justify-between gap-4 pl-2 pr-1.5 py-1.5;\n color: var(--header-color);\n }\n\n .month-year {\n @apply ml-2;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n text-align: center;\n }\n\n .nav-button {\n @apply inline-flex min-h-8 min-w-8 items-center justify-center cursor-pointer;\n border-radius: var(--radius-sm);\n background-color: transparent;\n color: var(--nav-button-color);\n border: 1px solid transparent;\n font-size: var(--text-sm);\n font-weight: 500;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .nav-button:hover { background-color: var(--nav-button-background-hover); }\n\n .nav-button:focus-visible {\n background: var(--nav-button-background-hover);\n border-radius: 0px;\n outline: 0px solid var(--accent-500);\n }\n\n .grid {\n @apply grid gap-1 px-4 pb-4;\n grid-template-columns: repeat(7, 1fr); /* 7 days only */\n background: var(--grid-background);\n border-radius: 0 0 var(--radius-sm) var(--radius-sm);\n }\n\n .day-cell {\n --cell-background: transparent;\n\n @apply flex min-h-8 items-center justify-center px-2.5 py-2 cursor-pointer;\n border-radius: var(--radius-base);\n background-color: var(--cell-background);\n color: var(--cell-text);\n border: 2px solid transparent;\n font-size: var(--text-sm);\n font-weight: 400;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .week-header {\n display: none;\n }\n\n .week-number {\n display: none;\n }\n}\n\n/* Variant states - these are outside @layer */\n.day-cell[data-selected=\"true\"] {\n font-weight: 500;\n}\n\n.day-cell[data-today=\"true\"] {\n border-color: transparent;\n}\n\n.day-cell[data-disabled=\"true\"],\n.day-cell[data-out-of-range=\"true\"] {\n opacity: var(--disabled-opacity);\n}\n\n.day-cell[data-disabled=\"true\"] { cursor: not-allowed; }\n\n.day-cell[data-focus-visible=\"true\"]:not([data-disabled=\"true\"]) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }\n",
|
|
1112
1196
|
"styleableParts": [
|
|
1113
1197
|
{
|
|
1114
1198
|
"name": "root"
|
|
@@ -1149,9 +1233,33 @@
|
|
|
1149
1233
|
"cssVariables": []
|
|
1150
1234
|
},
|
|
1151
1235
|
"command": {
|
|
1152
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n /* Overlay Container */\n .overlay {\n @apply fixed inset-0 flex items-start justify-center overflow-hidden;\n z-index: 999;\n padding-top: 20vh;\n /* Apply backdrop styles directly to avoid creating a containing block that disrupts sticky elements */\n background-color: var(--overlay);\n backdrop-filter: var(--overlay-backdrop);\n }\n\n /* Content */\n .content {\n @apply relative m-2 w-full max-w-[28rem];\n border-radius: var(--radius-sm);\n background: var(--background-default);\n margin-inline: 1rem;\n box-shadow: var(--shadow);\n animation: fade-in-zoom-in 0.2s ease-out;\n }\n\n .inner {\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n border-top: var(--border-width-base) solid var(--border-default);\n @apply overflow-hidden;\n }\n\n /* Search Section */\n .search {\n @apply border-none flex p-
|
|
1236
|
+
"rawCss": "@reference \"tailwindcss\";\n\n:global(.command) :global(.input) {\n --background: var(--background-input);\n}\n\n@layer components {\n /* Overlay Container */\n .overlay {\n @apply fixed inset-0 flex items-start justify-center overflow-hidden;\n z-index: 999;\n padding-top: 20vh;\n /* Apply backdrop styles directly to avoid creating a containing block that disrupts sticky elements */\n background-color: var(--overlay);\n backdrop-filter: var(--overlay-backdrop);\n }\n\n /* Content */\n .content {\n @apply relative m-2 w-full max-w-[28rem];\n border-radius: var(--radius-sm);\n background: var(--background-default);\n margin-inline: 1rem;\n box-shadow: var(--shadow);\n animation: fade-in-zoom-in 0.2s ease-out;\n }\n\n .inner {\n border-radius: var(--radius-sm) var(--radius-sm) 0 0;\n border-top: var(--border-width-base) solid var(--border-default);\n @apply overflow-hidden;\n }\n\n /* Search Section */\n .search {\n @apply border-none flex p-1.5;\n --input-active-border-color: transparent;\n --input-active-box-shadow: none;\n }\n\n .input {\n border-color: transparent;\n background: transparent;\n box-shadow: none;\n\n &[data-active],\n &[data-focus-visible] {\n border-color: transparent;\n box-shadow: none;\n }\n }\n\n /* List Section */\n .list {\n @apply py-0.5 px-2 space-y-2;\n background-color: var(--list-background);\n }\n\n .list :global([role=\"listbox\"]) {\n @apply flex w-full flex-col;\n }\n\n .item {\n @apply flex items-center justify-between rounded-sm px-2 py-0.5 cursor-pointer;\n border-radius: 0.375rem;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .item:hover {\n background-color: var(--background-hover);\n }\n\n .item[data-highlighted=\"true\"] {\n background-color: var(--background-selected);\n }\n\n .item-content {\n @apply flex min-w-0 flex-1 items-center gap-2.5;\n flex: 1;\n }\n\n .item-icon {\n @apply flex h-6 w-6 shrink-0 items-center justify-center;\n color: var(--color-icon);\n }\n\n .item-labels {\n flex: 1;\n @apply min-w-0;\n }\n\n .item-label {\n font-size: var(--text-sm);\n color: var(--color-default);\n font-weight: var(--font-weight-medium);\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .item-description {\n color: var(--color-muted);\n font-size: 0.875rem;\n @apply overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .hint-wrapper {\n @apply flex items-center;\n }\n\n .category-header {\n @apply px-2 py-1.5 mt-2 first:mt-0;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-muted);\n }\n\n /* Empty State */\n .empty {\n padding: 1.5rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--color-muted);\n }\n\n /* Footer */\n .footer {\n @apply flex w-full items-center gap-2 px-1.5 py-2;\n background-color: var(--footer-background);\n border-top: 1px solid var(--border-default);\n justify-content: flex-between;\n }\n\n /* Animations */\n @keyframes fade-in-zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n}\n",
|
|
1153
1237
|
"styleableParts": [],
|
|
1154
|
-
"cssVariables": [
|
|
1238
|
+
"cssVariables": [
|
|
1239
|
+
{
|
|
1240
|
+
"name": "--background",
|
|
1241
|
+
"value": "var(--background-input)",
|
|
1242
|
+
"defaultValue": null,
|
|
1243
|
+
"referencedVars": [
|
|
1244
|
+
"--background-input"
|
|
1245
|
+
],
|
|
1246
|
+
"variant": ":global(.command) :global(.input)"
|
|
1247
|
+
},
|
|
1248
|
+
{
|
|
1249
|
+
"name": "--input-active-border-color",
|
|
1250
|
+
"value": "transparent",
|
|
1251
|
+
"defaultValue": null,
|
|
1252
|
+
"referencedVars": [],
|
|
1253
|
+
"variant": ".search"
|
|
1254
|
+
},
|
|
1255
|
+
{
|
|
1256
|
+
"name": "--input-active-box-shadow",
|
|
1257
|
+
"value": "none",
|
|
1258
|
+
"defaultValue": null,
|
|
1259
|
+
"referencedVars": [],
|
|
1260
|
+
"variant": ".search"
|
|
1261
|
+
}
|
|
1262
|
+
]
|
|
1155
1263
|
},
|
|
1156
1264
|
"color": {
|
|
1157
1265
|
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --disabled-opacity: 0.5;\n @apply flex flex-col gap-4;\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n width: 260px;\n }\n\n .color[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n\n .colorControls,\n .color-controls {\n @apply pb-3 px-3 space-y-3;\n }\n\n /* Input styles */\n .inputGroup,\n .input-group {\n @apply flex w-full;\n }\n\n .inputGroup > div:nth-child(1),\n .input-group > div:nth-child(1) {\n flex: 1;\n @apply min-w-0;\n }\n\n .colorInput,\n .color-input { @apply w-full; }\n\n .formatSelect,\n .format-select { @apply shrink-0; width: 85px; }\n\n .color[data-size=\"sm\"] .formatSelect,\n .color[data-size=\"sm\"] .format-select { width: 75px; }\n\n /* Canvas Styles */\n .canvasContainer,\n .canvas-container {\n @apply relative mx-auto mt-2 flex flex-col;\n width: 96%;\n cursor: crosshair;\n touch-action: none;\n min-height: 160px;\n }\n\n .canvasContainer[data-focus-visible=\"true\"],\n .canvas-container[data-focus-visible=\"true\"] {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .canvas {\n @apply relative w-full flex-1 overflow-hidden;\n flex: 1;\n border-radius: none;\n }\n\n .canvasGradientHue,\n .canvas-gradient-hue {\n @apply absolute inset-0 overflow-hidden;\n }\n\n .canvasGradientSaturation,\n .canvasGradientLightness,\n .canvas-gradient-saturation,\n .canvas-gradient-lightness {\n @apply absolute inset-0;\n border-radius: none;\n }\n\n .canvas-gradient-saturation {\n background: linear-gradient(to right, rgb(255, 255, 255), transparent);\n }\n\n .canvas-gradient-lightness {\n background: linear-gradient(to top, rgb(0, 0, 0), transparent);\n }\n\n .canvasPointer,\n .canvas-pointer {\n @apply absolute h-3 w-3;\n border-radius: var(--radius-full);\n border: 2px solid var(--pointer-border);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n\n /* Hue Slider Styles */\n .hueSlider,\n .hue-slider {\n @apply relative flex items-center overflow-hidden;\n height: 16px;\n border-radius: var(--radius-full);\n cursor: pointer;\n touch-action: none;\n }\n\n .hueTrack,\n .hue-track {\n @apply relative h-full w-full;\n border-radius: var(--radius-full);\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n border: var(--border-width-base) solid var(--border);\n }\n\n .hueThumb,\n .opacityThumb,\n .hue-thumb,\n .opacity-thumb {\n @apply absolute;\n border-radius: var(--radius-full);\n border: 2px solid var(--thumb-border);\n top: 50%;\n background: var(--thumb-background);\n pointer-events: none;\n }\n\n .hueThumb,\n .hue-thumb {\n @apply h-3 w-3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n transform: translateY(-50%) translateX(-50%);\n }\n\n .hueSlider[data-focus-visible=\"true\"] .hueThumb,\n .hue-slider[data-focus-visible=\"true\"] .hue-thumb {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .hue-thumb:hover {\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n }\n\n .hue-thumb:active {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n /* Opacity Slider Styles */\n .opacitySlider,\n .opacity-slider {\n @apply relative flex items-center overflow-hidden;\n height: 12px;\n border-radius: var(--radius-full);\n cursor: pointer;\n touch-action: none;\n }\n\n .opacityTrack,\n .opacity-track {\n @apply relative h-full w-full overflow-hidden;\n border-radius: var(--radius-full);\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 10px,\n var(--checkerboard-light) 10px,\n var(--checkerboard-light) 20px\n );\n border: var(--border-width-base) solid var(--border);\n }\n\n .opacityThumb,\n .opacity-thumb {\n @apply h-2.5 w-2.5;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n transform: translateY(-50%) translateX(-50%);\n }\n\n .opacitySlider[data-focus-visible=\"true\"] .opacityThumb,\n .opacity-slider[data-focus-visible=\"true\"] .opacity-thumb {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n .opacity-thumb:hover {\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n }\n\n .opacity-thumb:active {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n /* Recent Colors Styles */\n .recentColors,\n .recent-colors {\n @apply flex gap-2 overflow-x-auto pb-1;\n }\n\n .recentColorSwatch,\n .recent-color-swatch {\n @apply h-8 w-8 shrink-0 cursor-pointer p-0;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n background: none;\n outline: none;\n }\n\n .recentColorSwatch:hover,\n .recent-color-swatch:hover {\n transform: scale(1.1);\n box-shadow: 0 0 0 2px var(--ring-color);\n }\n\n .recentColorSwatch:active,\n .recent-color-swatch:active {\n transform: scale(0.95);\n }\n\n .recentColorSwatch:focus-visible,\n .recent-color-swatch:focus-visible {\n outline: 2px solid var(--ring-color);\n outline-offset: 2px;\n }\n\n\n /* Preview Container - deprecated, use preview-swatch instead */\n .previewContainer,\n .preview-container {\n @apply flex justify-center py-2;\n }\n\n /* Preview Swatch - inline with input */\n .previewSwatch,\n .preview-swatch {\n @apply relative h-9 w-9 shrink-0 overflow-hidden;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n\n .previewSwatch::before,\n .preview-swatch::before {\n content: \"\";\n @apply absolute inset-0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-light),\n var(--checkerboard-light) 6px,\n var(--checkerboard-dark) 6px,\n var(--checkerboard-dark) 12px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .preview {\n @apply relative h-16 w-16 overflow-hidden;\n border-radius: var(--radius-sm);\n border: var(--border-width-base) solid var(--border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n\n .preview::before {\n content: \"\";\n @apply absolute inset-0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-light),\n var(--checkerboard-light) 10px,\n var(--checkerboard-dark) 10px,\n var(--checkerboard-dark) 20px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .previewSwatch::after,\n .preview-swatch::after,\n .preview::after {\n content: \"\";\n @apply absolute inset-0;\n background-color: var(--preview-color, transparent);\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 2;\n }\n}\n",
|
|
@@ -1207,7 +1315,7 @@
|
|
|
1207
1315
|
]
|
|
1208
1316
|
},
|
|
1209
1317
|
"checkbox": {
|
|
1210
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n /* Hidden input element positioned behind visual checkbox */\n .checkbox-input {\n @apply absolute inset-0 h-full w-full cursor-pointer;\n opacity: 0;\n }\n\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .checkbox-container {\n @apply relative inline-flex items-center justify-center;\n }\n\n /* Visual checkbox */\n .checkbox {\n --disabled-opacity: 0.6;\n\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-xs);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n /* Interactive States */\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:focus-visible {\n outline: 2px solid transparent;\n box-shadow: 0 0 0 3px var(--ring-color);\n }\n\n &[data-pressed=\"true\"] {\n transform: scale(0.92);\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-indeterminate=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n\n /* Sizes */\n &.size-sm {\n @apply h-4 w-4;\n }\n\n &.size-md {\n @apply h-5 w-5;\n }\n\n &.size-lg {\n @apply h-6 w-6;\n }\n }\n\n /* Checkmark and Indeterminate styles - combined */\n .checkbox-checkmark,\n .checkbox-indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--checkmark-color);\n pointer-events: none;\n }\n\n\n .label {\n @apply cursor-pointer select-none;\n transition: color 200ms var(--ease-snappy-pop);\n }\n\n .label-sm {\n font-size: var(--text-
|
|
1318
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n /* Hidden input element positioned behind visual checkbox */\n .checkbox-input {\n @apply absolute inset-0 h-full w-full cursor-pointer;\n opacity: 0;\n }\n\n .checkbox-root {\n @apply inline-flex items-center justify-center gap-3;\n }\n\n .checkbox-container {\n @apply relative inline-flex items-center justify-center;\n }\n\n /* Visual checkbox */\n .checkbox {\n --disabled-opacity: 0.6;\n\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-xs);\n outline: none;\n transition: all 200ms var(--ease-snappy-pop), transform 200ms var(--ease-snappy-pop);\n /* Interactive States */\n &:hover:not([data-disabled=\"true\"]) {\n background-color: var(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:focus-visible {\n outline: 2px solid transparent;\n box-shadow: 0 0 0 3px var(--ring-color);\n }\n\n &[data-pressed=\"true\"] {\n transform: scale(0.92);\n }\n\n &[data-selected=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-indeterminate=\"true\"] {\n background-color: var(--background);\n border-color: var(--border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n pointer-events: none;\n }\n\n /* Sizes */\n &.size-sm {\n @apply h-4 w-4;\n }\n\n &.size-md {\n @apply h-5 w-5;\n }\n\n &.size-lg {\n @apply h-6 w-6;\n }\n }\n\n /* Checkmark and Indeterminate styles - combined */\n .checkbox-checkmark,\n .checkbox-indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--checkmark-color);\n pointer-events: none;\n }\n\n\n .label {\n @apply cursor-pointer select-none;\n transition: color 200ms var(--ease-snappy-pop);\n }\n\n .label-sm {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-md {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-lg {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium)\n }\n\n .label-disabled {\n @apply opacity-60 cursor-not-allowed;\n }\n\n .helper-text {\n @apply text-sm ml-8;\n transition: color 200ms var(--ease-snappy-pop);\n }\n\n .helper-text-normal { color: inherit; }\n\n .helper-text-error { color: var(--error-color); }\n}\n",
|
|
1211
1319
|
"styleableParts": [
|
|
1212
1320
|
{
|
|
1213
1321
|
"name": "root"
|
|
@@ -1248,7 +1356,7 @@
|
|
|
1248
1356
|
"cssVariables": []
|
|
1249
1357
|
},
|
|
1250
1358
|
"button": {
|
|
1251
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .button {\n @apply inline-flex items-center justify-center gap-2 select-none cursor-pointer whitespace-nowrap;;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n\n
|
|
1359
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .button {\n @apply inline-flex items-center justify-center gap-2 select-none cursor-pointer whitespace-nowrap;;\n\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n\n font-weight: var(--font-weight-medium, 500);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n\n &:hover:not(:disabled) {\n background-color: var(--hover-background);\n border-color: var(--hover-border);\n }\n\n &:active:not(:disabled) {\n filter: brightness(0.8);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 1.5px var(--focus-visible);\n outline: none;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n filter: grayscale(0.5);\n }\n }\n}\n",
|
|
1252
1360
|
"styleableParts": [
|
|
1253
1361
|
{
|
|
1254
1362
|
"name": "root"
|
|
@@ -1263,7 +1371,7 @@
|
|
|
1263
1371
|
"cssVariables": []
|
|
1264
1372
|
},
|
|
1265
1373
|
"banner": {
|
|
1266
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-4;\n font-family: inherit;\n font-size: var(--text-
|
|
1374
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .banner {\n @apply flex w-full items-start gap-4;\n font-family: inherit;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n line-height: var(--leading-normal);\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease-out, border-color 0.15s ease-out;\n }\n\n .content {\n @apply flex flex-col gap-2;\n }\n\n .icon-container {\n @apply flex shrink-0 items-center justify-center self-start;\n }\n\n .icon {\n @apply mr-4 h-5 w-5;\n color: var(--icon-color, currentColor);\n }\n\n .dismiss {\n @apply flex h-8 w-8 shrink-0 items-center justify-center p-0 cursor-pointer;\n background-color: transparent;\n color: currentColor;\n border: none;\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease-out;\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n }\n\n .title {\n font-weight: var(--font-weight-semibold);\n font-size: inherit;\n line-height: var(--leading-tight);\n @apply my-0;\n }\n\n .body {\n font-weight: var(--font-weight-medium);\n font-size: inherit;\n line-height: var(--leading-normal);\n @apply my-0;\n }\n}\n\n\n.banner.sm {\n @apply px-3 py-2;\n font-size: var(--text-sm);\n}\n\n.banner.md {\n @apply px-4 py-3;\n font-size: var(--text-sm);\n}\n\n.banner.lg {\n @apply px-6 py-4;\n font-size: var(--text-sm);\n}\n",
|
|
1267
1375
|
"styleableParts": [
|
|
1268
1376
|
{
|
|
1269
1377
|
"name": "root"
|
|
@@ -1281,7 +1389,7 @@
|
|
|
1281
1389
|
"cssVariables": []
|
|
1282
1390
|
},
|
|
1283
1391
|
"badge": {
|
|
1284
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 px-3 py-0.5;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--border);\n border-radius: var(--radius-sm);\n }\n\n .badge.sm {\n @apply px-1.5 py-px;\n gap: 0.25rem;\n font-size: var(--text-
|
|
1392
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .badge {\n @apply inline-flex items-center justify-center gap-2 px-3 py-0.5;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n background-color: var(--background);\n color: var(--foreground);\n border: var(--border-width-base) solid var(--background-border);\n border-radius: var(--radius-sm);\n }\n\n .badge.sm {\n @apply px-1.5 py-px;\n gap: 0.25rem;\n font-size: var(--text-sm);\n }\n\n .badge.dismissible {\n @apply pr-0.5;\n }\n\n .badge.md {\n @apply px-3.5 py-1;\n font-size: var(--text-sm);\n }\n\n .badge.lg {\n @apply px-4 py-2.5;\n font-size: var(--text-sm);\n }\n\n .pill { border-radius: 9999px; }\n\n .icon {\n @apply flex items-center shrink-0;\n }\n\n .dismiss {\n @apply ml-1 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-xs);\n background: transparent;\n border: none;\n color: var(--dismiss-color);\n transition: opacity 150ms var(--ease-snappy-pop), transform 150ms var(--ease-snappy-pop);\n outline: none;\n }\n\n .dismiss-button[data-hovered=\"true\"] {\n background: var(--dismiss-hover-background);\n }\n\n .dismiss-button[data-pressed=\"true\"] {\n background: var(--dismiss-pressed-background);\n transform: scale(0.95);\n }\n\n .dismiss-button[data-focus-visible=\"true\"] {\n outline: 2px solid currentColor;\n outline-offset: 1px;\n }\n}\n",
|
|
1285
1393
|
"styleableParts": [
|
|
1286
1394
|
{
|
|
1287
1395
|
"name": "root"
|
|
@@ -1296,7 +1404,7 @@
|
|
|
1296
1404
|
"cssVariables": []
|
|
1297
1405
|
},
|
|
1298
1406
|
"anchor": {
|
|
1299
|
-
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .anchor {\n @apply inline;\n }\n\n .preview {\n @apply inline;\n }\n\n .trigger {\n @apply inline-block relative cursor-pointer;\n color: var(--foreground);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: 2px;\n border-radius: 2px;\n }\n }\n\n .underline {\n @apply absolute left-0 right-0 bottom-0 h-px;\n background: var(--underline-background);\n transform-origin: right;\n transform: scaleX(1);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n}\n",
|
|
1407
|
+
"rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .anchor {\n @apply inline;\n }\n\n .preview {\n @apply inline;\n }\n\n .trigger {\n @apply inline-block relative cursor-pointer;\n color: var(--foreground);\n text-decoration: none;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover .underline {\n background: var(--underline-background-hover);\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: 2px;\n border-radius: 2px;\n }\n }\n\n .underline {\n @apply absolute left-0 right-0 bottom-0 h-px;\n background: var(--underline-background);\n transform-origin: right;\n transform: scaleX(1);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n }\n}\n",
|
|
1300
1408
|
"styleableParts": [
|
|
1301
1409
|
{
|
|
1302
1410
|
"name": "root"
|