ui-lab-registry 0.3.47 → 0.3.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/generated-data.js +1 -1
  2. package/dist/generated-styles.js +343 -343
  3. package/dist/generated-styles.js.map +1 -1
  4. package/dist/generated-styles.json +343 -343
  5. package/package.json +2 -2
  6. package/src/generated-data.ts +1 -1
  7. package/src/generated-styles.ts +343 -343
package/dist/generated-styles.js CHANGED
@@ -40,91 +40,84 @@ export const generatedStyles = {
40
40
  }
41
41
  ]
42
42
  },
43
- "textarea": {
44
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n\n @apply block w-full px-3 py-2;\n box-sizing: border-box;\n resize: none;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n color: var(--foreground);\n font-family: inherit;\n font-size: var(--text-xs);\n line-height: var(--leading-snug);\n outline: none;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-resize-axis=\"x\"],\n &[data-resize-axis=\"both\"] {\n padding-inline-end: calc(var(--padding-inline) + 1rem);\n }\n\n &[data-resize-axis=\"y\"],\n &[data-resize-axis=\"both\"] {\n padding-block-end: calc(var(--padding-block) + 1rem);\n }\n\n &[data-scroll=\"true\"] {\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n overflow: hidden;\n\n &[data-disabled=\"true\"] {\n opacity: 1;\n }\n }\n }\n\n .size-sm {\n min-height: 5rem;\n --padding-inline: 0.5rem;\n --padding-block: 0.25rem;\n font-size: var(--text-sm);\n @apply px-2 py-1;\n }\n\n .size-md {\n min-height: 6rem;\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n font-size: var(--text-sm);\n @apply px-3 py-2;\n }\n\n .size-lg {\n min-height: 8rem;\n --padding-inline: 1rem;\n --padding-block: 0.75rem;\n font-size: var(--text-md);\n @apply px-4 py-3;\n }\n\n .container {\n min-width: 0;\n @apply w-full;\n }\n\n .scope {\n @apply relative flex w-full;\n overflow: visible;\n }\n\n .surface {\n min-width: 0;\n @apply relative w-full;\n }\n\n .scroll-wrapper {\n @apply w-full overflow-hidden;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n }\n }\n\n .resize-handle {\n position: absolute;\n z-index: 1;\n touch-action: none;\n user-select: none;\n\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n &:hover::before,\n &:hover::after {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .resize-handle-both {\n right: 3px;\n bottom: 3px;\n width: 1.5rem;\n height: 1.5rem;\n cursor: nwse-resize;\n\n &::before {\n right: 0.15rem;\n bottom: 0.35rem;\n width: 0.5rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n\n &::after {\n right: 0.2rem;\n bottom: 0.6rem;\n width: 1rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n }\n\n .resize-handle-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 &::after {\n display: none;\n }\n }\n\n .resize-handle-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 &::after {\n display: none;\n }\n }\n\n .character-count {\n @apply mt-1;\n color: var(--foreground);\n font-size: var(--text-sm);\n transition: color 0.15s var(--ease-snappy-pop);\n }\n\n .character-count[data-over-limit=\"true\"] {\n color: var(--foreground-error);\n }\n}\n",
43
+ "toast": {
44
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\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, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-shadow: var(--background-shadow);\n font-family: inherit;\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n touch-action: pan-y;\n }\n\n .icon-wrap {\n @apply mr-4 mt-2 h-5 w-5 shrink-0;\n }\n\n .icon {\n @apply h-5 w-5;\n color: var(--foreground);\n }\n\n .content {\n @apply min-w-0 flex-1;\n }\n\n .title {\n @apply m-0;\n --foreground: inherit;\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n color: var(--foreground);\n }\n\n .description {\n @apply mt-1 mb-0;\n --foreground: inherit;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n color: var(--foreground);\n }\n\n .close {\n @apply flex shrink-0 items-center justify-center p-2 cursor-pointer;\n --foreground: currentColor;\n background-color: var(--background, transparent);\n border: none;\n border-radius: var(--radius-sm, 0.375rem);\n color: var(--foreground);\n opacity: 0.6;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out));\n\n &[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 var(--border-width-base, 1px) var(--focus-visible);\n outline: none;\n }\n\n &[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n }\n\n .close-icon {\n @apply h-4 w-4;\n }\n}\n",
45
45
  "styleableParts": [
46
46
  {
47
47
  "name": "root"
48
48
  },
49
49
  {
50
- "name": "container"
50
+ "name": "iconWrap"
51
51
  },
52
52
  {
53
- "name": "surface"
53
+ "name": "icon"
54
54
  },
55
55
  {
56
- "name": "scrollWrapper"
56
+ "name": "content"
57
57
  },
58
58
  {
59
- "name": "resizeHandle.both"
59
+ "name": "title"
60
60
  },
61
61
  {
62
- "name": "resizeHandle.x"
62
+ "name": "description"
63
63
  },
64
64
  {
65
- "name": "resizeHandle.y"
65
+ "name": "close"
66
66
  },
67
67
  {
68
- "name": "characterCount"
68
+ "name": "closeIcon"
69
69
  }
70
70
  ],
71
71
  "cssVariables": [
72
72
  {
73
- "name": "--padding-inline",
74
- "value": "0.75rem",
73
+ "name": "--foreground",
74
+ "value": "inherit",
75
75
  "defaultValue": null,
76
76
  "referencedVars": [],
77
- "variant": ".textarea"
77
+ "variant": ".title"
78
78
  },
79
79
  {
80
- "name": "--padding-block",
81
- "value": "0.5rem",
80
+ "name": "--foreground",
81
+ "value": "inherit",
82
82
  "defaultValue": null,
83
83
  "referencedVars": [],
84
- "variant": ".textarea"
84
+ "variant": ".description"
85
85
  },
86
86
  {
87
- "name": "--padding-inline",
88
- "value": "0.5rem",
87
+ "name": "--foreground",
88
+ "value": "currentColor",
89
89
  "defaultValue": null,
90
90
  "referencedVars": [],
91
- "variant": ".size-sm"
91
+ "variant": ".close"
92
92
  },
93
93
  {
94
- "name": "--padding-block",
95
- "value": "0.25rem",
96
- "defaultValue": null,
97
- "referencedVars": [],
98
- "variant": ".size-sm"
99
- },
94
+ "name": "--hover-transition-duration",
95
+ "value": "var(--hover-transition-enter-duration, 0ms)",
96
+ "defaultValue": "0ms",
97
+ "referencedVars": [
98
+ "--hover-transition-enter-duration"
99
+ ],
100
+ "variant": ".close[data-hovered=\"true\"]"
101
+ }
102
+ ]
103
+ },
104
+ "tabs": {
105
+ "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: fit-content;\n min-width: 0;\n height: auto;\n align-self: flex-start;\n }\n\n &[data-variant=\"underline\"] {\n background-color: transparent;\n border-radius: 0;\n padding: 0 0 4px;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--border);\n align-items: stretch;\n padding: 0 0 0 4px;\n }\n }\n\n .indicator {\n @apply absolute;\n background-color: var(--background);\n box-sizing: border-box;\n border-radius: var(--radius-sm);\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-fallback {\n z-index: -1;\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 px-2 py-1.5 cursor-pointer select-none;\n height: auto;\n background-color: var(--background);\n border: none;\n color: var(--foreground);\n outline: none;\n box-shadow: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n\n &[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n &[data-selected=\"true\"] {\n cursor: pointer;\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list[data-variant=\"underline\"] & {\n border-bottom-color: var(--underline-border);\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom-color: transparent;\n border-left-color: var(--underline-border);\n }\n }\n\n &:focus,\n &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\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: var(--background);\n background-clip: padding-box;\n border-radius: var(--radius-sm);\n border-bottom: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"] &:focus,\n .list[data-variant=\"underline\"] &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\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\"]):not([data-indicator-fallback=\"true\"]) {\n border-left-color: var(--underline-border);\n border-bottom: none;\n }\n }\n\n .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(--focus-visible);\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 0 4px;\n }\n }\n\n .trigger {\n @apply px-1 py-1;\n .list[data-variant=\"underline\"] & {\n margin: 0.5rem 0.75rem;\n }\n }\n }\n}\n",
106
+ "styleableParts": [
100
107
  {
101
- "name": "--padding-inline",
102
- "value": "0.75rem",
103
- "defaultValue": null,
104
- "referencedVars": [],
105
- "variant": ".size-md"
108
+ "name": "root"
106
109
  },
107
110
  {
108
- "name": "--padding-block",
109
- "value": "0.5rem",
110
- "defaultValue": null,
111
- "referencedVars": [],
112
- "variant": ".size-md"
111
+ "name": "indicator"
113
112
  },
114
113
  {
115
- "name": "--padding-inline",
116
- "value": "1rem",
117
- "defaultValue": null,
118
- "referencedVars": [],
119
- "variant": ".size-lg"
114
+ "name": "icon.left"
120
115
  },
121
116
  {
122
- "name": "--padding-block",
123
- "value": "0.75rem",
124
- "defaultValue": null,
125
- "referencedVars": [],
126
- "variant": ".size-lg"
127
- },
117
+ "name": "icon.right"
118
+ }
119
+ ],
120
+ "cssVariables": [
128
121
  {
129
122
  "name": "--hover-transition-duration",
130
123
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -132,60 +125,67 @@ export const generatedStyles = {
132
125
  "referencedVars": [
133
126
  "--hover-transition-enter-duration"
134
127
  ],
135
- "variant": ".resize-handle:hover::before,\n .resize-handle:hover::after"
128
+ "variant": ".trigger[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
129
+ },
130
+ {
131
+ "name": "--disabled-opacity",
132
+ "value": "0.5",
133
+ "defaultValue": null,
134
+ "referencedVars": [],
135
+ "variant": ".trigger[data-disabled=\"true\"]"
136
136
  }
137
137
  ]
138
138
  },
139
- "toast": {
140
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\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, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-shadow: var(--background-shadow);\n font-family: inherit;\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n touch-action: pan-y;\n }\n\n .icon-wrap {\n @apply mr-4 mt-2 h-5 w-5 shrink-0;\n }\n\n .icon {\n @apply h-5 w-5;\n color: var(--foreground);\n }\n\n .content {\n @apply min-w-0 flex-1;\n }\n\n .title {\n @apply m-0;\n --foreground: inherit;\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-tight, 1.25);\n color: var(--foreground);\n }\n\n .description {\n @apply mt-1 mb-0;\n --foreground: inherit;\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm, 0.875rem);\n line-height: var(--leading-normal, 1.5);\n color: var(--foreground);\n }\n\n .close {\n @apply flex shrink-0 items-center justify-center p-2 cursor-pointer;\n --foreground: currentColor;\n background-color: var(--background, transparent);\n border: none;\n border-radius: var(--radius-sm, 0.375rem);\n color: var(--foreground);\n opacity: 0.6;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-settle-in, ease-out));\n\n &[data-focus-visible=\"true\"] {\n box-shadow: 0 0 0 var(--border-width-base, 1px) var(--focus-visible);\n outline: none;\n }\n\n &[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n }\n\n .close-icon {\n @apply h-4 w-4;\n }\n}\n",
139
+ "table": {
140
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply w-full overflow-x-auto rounded-sm;\n border: var(--border-width-base) solid var(--border, var(--background-border));\n background-color: var(--container-background, var(--background));\n }\n\n .container {\n display: block;\n max-width: none;\n }\n\n .table {\n @apply w-full;\n display: table;\n border-collapse: collapse;\n min-width: max-content;\n background-color: var(--background, transparent);\n color: var(--foreground);\n font-size: var(--text-xs);\n }\n\n .header {\n display: table-header-group;\n background-color: var(--background);\n }\n\n .body {\n display: table-row-group;\n background-color: var(--background);\n }\n\n .headerRow {\n display: table-row;\n background-color: var(--background);\n }\n\n .headerCell {\n @apply px-4 py-3 text-left;\n display: table-cell;\n background-color: var(--background);\n color: var(--foreground);\n font-weight: var(--header-font-weight, var(--font-weight-semibold));\n white-space: nowrap;\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n }\n\n .headerCell:first-child {\n border-top-left-radius: var(--radius-xs);\n }\n\n .headerCell:last-child {\n border-top-right-radius: var(--radius-xs);\n }\n\n .row {\n display: table-row;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row[data-interactive=\"true\"] {\n @apply cursor-pointer;\n }\n\n .row:hover:not([data-disabled=\"true\"]) .cell {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .row[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.5);\n }\n\n .row:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: -2px;\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3 align-middle;\n display: table-cell;\n background-color: var(--background, transparent);\n color: var(--foreground);\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row:last-child .cell {\n border-bottom: none;\n }\n\n .row:last-child .cell:first-child {\n border-bottom-left-radius: var(--radius-xs);\n }\n\n .row:last-child .cell:last-child {\n border-bottom-right-radius: var(--radius-xs);\n }\n\n .emptyRow {\n border-bottom: none;\n }\n\n .emptyRow {\n display: table-row;\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n background-color: var(--background);\n color: var(--foreground);\n }\n\n .emptyState {\n display: table-cell;\n }\n\n .filterBar {\n @apply mb-4 rounded-xs border p-4;\n border: var(--border-width-base) solid var(--background-border);\n background-color: var(--background);\n }\n\n .filterBar {\n display: block;\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n background-color: var(--background);\n }\n\n .filterGrid {\n display: grid;\n }\n\n .filterField {\n @apply min-w-0;\n }\n\n .filterLabel {\n @apply mb-2 block;\n color: var(--foreground);\n font-size: var(--filter-label-font-size, var(--text-xs));\n font-weight: var(--filter-label-font-weight, var(--font-weight-medium));\n }\n\n .filterLabel {\n display: block;\n }\n\n .filterInput {\n @apply w-full;\n }\n}\n",
141
141
  "styleableParts": [
142
142
  {
143
143
  "name": "root"
144
144
  },
145
145
  {
146
- "name": "iconWrap"
146
+ "name": "container"
147
147
  },
148
148
  {
149
- "name": "icon"
149
+ "name": "filterBar"
150
150
  },
151
151
  {
152
- "name": "content"
152
+ "name": "filterGrid"
153
153
  },
154
154
  {
155
- "name": "title"
155
+ "name": "filterLabel"
156
156
  },
157
157
  {
158
- "name": "description"
158
+ "name": "filterInput"
159
159
  },
160
160
  {
161
- "name": "close"
161
+ "name": "table"
162
162
  },
163
163
  {
164
- "name": "closeIcon"
165
- }
166
- ],
167
- "cssVariables": [
164
+ "name": "header"
165
+ },
168
166
  {
169
- "name": "--foreground",
170
- "value": "inherit",
171
- "defaultValue": null,
172
- "referencedVars": [],
173
- "variant": ".title"
167
+ "name": "body"
174
168
  },
175
169
  {
176
- "name": "--foreground",
177
- "value": "inherit",
178
- "defaultValue": null,
179
- "referencedVars": [],
180
- "variant": ".description"
170
+ "name": "headerRow"
181
171
  },
182
172
  {
183
- "name": "--foreground",
184
- "value": "currentColor",
185
- "defaultValue": null,
186
- "referencedVars": [],
187
- "variant": ".close"
173
+ "name": "headerCell"
174
+ },
175
+ {
176
+ "name": "row"
188
177
  },
178
+ {
179
+ "name": "cell"
180
+ },
181
+ {
182
+ "name": "emptyRow"
183
+ },
184
+ {
185
+ "name": "emptyState"
186
+ }
187
+ ],
188
+ "cssVariables": [
189
189
  {
190
190
  "name": "--hover-transition-duration",
191
191
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -193,27 +193,95 @@ export const generatedStyles = {
193
193
  "referencedVars": [
194
194
  "--hover-transition-enter-duration"
195
195
  ],
196
- "variant": ".close[data-hovered=\"true\"]"
196
+ "variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
197
197
  }
198
198
  ]
199
199
  },
200
- "tabs": {
201
- "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: fit-content;\n min-width: 0;\n height: auto;\n align-self: flex-start;\n }\n\n &[data-variant=\"underline\"] {\n background-color: transparent;\n border-radius: 0;\n padding: 0 0 4px;\n }\n\n &[data-variant=\"underline\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-left: var(--border-width-base) solid var(--border);\n align-items: stretch;\n padding: 0 0 0 4px;\n }\n }\n\n .indicator {\n @apply absolute;\n background-color: var(--background);\n box-sizing: border-box;\n border-radius: var(--radius-sm);\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-fallback {\n z-index: -1;\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 px-2 py-1.5 cursor-pointer select-none;\n height: auto;\n background-color: var(--background);\n border: none;\n color: var(--foreground);\n outline: none;\n box-shadow: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n\n &[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n &[data-selected=\"true\"] {\n cursor: pointer;\n }\n\n &[data-selected=\"true\"]:not([data-indicator-ready=\"true\"]):not([data-indicator-fallback=\"true\"]) {\n .list[data-variant=\"underline\"] & {\n border-bottom-color: var(--underline-border);\n }\n\n .list[data-variant=\"underline\"][data-orientation=\"vertical\"] & {\n border-bottom-color: transparent;\n border-left-color: var(--underline-border);\n }\n }\n\n &:focus,\n &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\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: var(--background);\n background-clip: padding-box;\n border-radius: var(--radius-sm);\n border-bottom: 2px solid transparent;\n }\n\n .list[data-variant=\"underline\"] &:focus,\n .list[data-variant=\"underline\"] &:focus-visible {\n outline: none !important;\n box-shadow: none !important;\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\"]):not([data-indicator-fallback=\"true\"]) {\n border-left-color: var(--underline-border);\n border-bottom: none;\n }\n }\n\n .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(--focus-visible);\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 0 4px;\n }\n }\n\n .trigger {\n @apply px-1 py-1;\n .list[data-variant=\"underline\"] & {\n margin: 0.5rem 0.75rem;\n }\n }\n }\n}\n",
200
+ "textarea": {
201
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .textarea {\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n\n @apply block w-full px-3 py-2;\n box-sizing: border-box;\n resize: none;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n color: var(--foreground);\n font-family: inherit;\n font-size: var(--text-xs);\n line-height: var(--leading-snug);\n outline: none;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &::placeholder {\n color: var(--placeholder);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n\n &[data-resize-axis=\"x\"],\n &[data-resize-axis=\"both\"] {\n padding-inline-end: calc(var(--padding-inline) + 1rem);\n }\n\n &[data-resize-axis=\"y\"],\n &[data-resize-axis=\"both\"] {\n padding-block-end: calc(var(--padding-block) + 1rem);\n }\n\n &[data-scroll=\"true\"] {\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n overflow: hidden;\n\n &[data-disabled=\"true\"] {\n opacity: 1;\n }\n }\n }\n\n .size-sm {\n min-height: 5rem;\n --padding-inline: 0.5rem;\n --padding-block: 0.25rem;\n font-size: var(--text-sm);\n @apply px-2 py-1;\n }\n\n .size-md {\n min-height: 6rem;\n --padding-inline: 0.75rem;\n --padding-block: 0.5rem;\n font-size: var(--text-sm);\n @apply px-3 py-2;\n }\n\n .size-lg {\n min-height: 8rem;\n --padding-inline: 1rem;\n --padding-block: 0.75rem;\n font-size: var(--text-md);\n @apply px-4 py-3;\n }\n\n .container {\n min-width: 0;\n @apply w-full;\n }\n\n .scope {\n @apply relative flex w-full;\n overflow: visible;\n }\n\n .surface {\n min-width: 0;\n @apply relative w-full;\n }\n\n .scroll-wrapper {\n @apply w-full overflow-hidden;\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-disabled=\"true\"] {\n opacity: var(--disabled-opacity);\n }\n }\n\n .resize-handle {\n position: absolute;\n z-index: 1;\n touch-action: none;\n user-select: none;\n\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-radius: var(--radius-full);\n background-color: var(--background);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n &:hover::before,\n &:hover::after {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n }\n\n .resize-handle-both {\n right: 3px;\n bottom: 3px;\n width: 1.5rem;\n height: 1.5rem;\n cursor: nwse-resize;\n\n &::before {\n right: 0.15rem;\n bottom: 0.35rem;\n width: 0.5rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n\n &::after {\n right: 0.2rem;\n bottom: 0.6rem;\n width: 1rem;\n height: 0.125rem;\n transform: rotate(-45deg);\n transform-origin: center;\n }\n }\n\n .resize-handle-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 &::after {\n display: none;\n }\n }\n\n .resize-handle-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 &::after {\n display: none;\n }\n }\n\n .character-count {\n @apply mt-1;\n color: var(--foreground);\n font-size: var(--text-sm);\n transition: color 0.15s var(--ease-snappy-pop);\n }\n\n .character-count[data-over-limit=\"true\"] {\n color: var(--foreground-error);\n }\n}\n",
202
202
  "styleableParts": [
203
203
  {
204
204
  "name": "root"
205
205
  },
206
206
  {
207
- "name": "indicator"
207
+ "name": "container"
208
208
  },
209
209
  {
210
- "name": "icon.left"
210
+ "name": "surface"
211
211
  },
212
212
  {
213
- "name": "icon.right"
213
+ "name": "scrollWrapper"
214
+ },
215
+ {
216
+ "name": "resizeHandle.both"
217
+ },
218
+ {
219
+ "name": "resizeHandle.x"
220
+ },
221
+ {
222
+ "name": "resizeHandle.y"
223
+ },
224
+ {
225
+ "name": "characterCount"
214
226
  }
215
227
  ],
216
228
  "cssVariables": [
229
+ {
230
+ "name": "--padding-inline",
231
+ "value": "0.75rem",
232
+ "defaultValue": null,
233
+ "referencedVars": [],
234
+ "variant": ".textarea"
235
+ },
236
+ {
237
+ "name": "--padding-block",
238
+ "value": "0.5rem",
239
+ "defaultValue": null,
240
+ "referencedVars": [],
241
+ "variant": ".textarea"
242
+ },
243
+ {
244
+ "name": "--padding-inline",
245
+ "value": "0.5rem",
246
+ "defaultValue": null,
247
+ "referencedVars": [],
248
+ "variant": ".size-sm"
249
+ },
250
+ {
251
+ "name": "--padding-block",
252
+ "value": "0.25rem",
253
+ "defaultValue": null,
254
+ "referencedVars": [],
255
+ "variant": ".size-sm"
256
+ },
257
+ {
258
+ "name": "--padding-inline",
259
+ "value": "0.75rem",
260
+ "defaultValue": null,
261
+ "referencedVars": [],
262
+ "variant": ".size-md"
263
+ },
264
+ {
265
+ "name": "--padding-block",
266
+ "value": "0.5rem",
267
+ "defaultValue": null,
268
+ "referencedVars": [],
269
+ "variant": ".size-md"
270
+ },
271
+ {
272
+ "name": "--padding-inline",
273
+ "value": "1rem",
274
+ "defaultValue": null,
275
+ "referencedVars": [],
276
+ "variant": ".size-lg"
277
+ },
278
+ {
279
+ "name": "--padding-block",
280
+ "value": "0.75rem",
281
+ "defaultValue": null,
282
+ "referencedVars": [],
283
+ "variant": ".size-lg"
284
+ },
217
285
  {
218
286
  "name": "--hover-transition-duration",
219
287
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -221,14 +289,7 @@ export const generatedStyles = {
221
289
  "referencedVars": [
222
290
  "--hover-transition-enter-duration"
223
291
  ],
224
- "variant": ".trigger[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
225
- },
226
- {
227
- "name": "--disabled-opacity",
228
- "value": "0.5",
229
- "defaultValue": null,
230
- "referencedVars": [],
231
- "variant": ".trigger[data-disabled=\"true\"]"
292
+ "variant": ".resize-handle:hover::before,\n .resize-handle:hover::after"
232
293
  }
233
294
  ]
234
295
  },
@@ -384,67 +445,6 @@ export const generatedStyles = {
384
445
  }
385
446
  ]
386
447
  },
387
- "table": {
388
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .root {\n @apply w-full;\n }\n\n .container {\n @apply w-full overflow-x-auto rounded-sm;\n border: var(--border-width-base) solid var(--border, var(--background-border));\n background-color: var(--container-background, var(--background));\n }\n\n .container {\n display: block;\n max-width: none;\n }\n\n .table {\n @apply w-full;\n display: table;\n border-collapse: collapse;\n min-width: max-content;\n background-color: var(--background, transparent);\n color: var(--foreground);\n font-size: var(--text-xs);\n }\n\n .header {\n display: table-header-group;\n background-color: var(--background);\n }\n\n .body {\n display: table-row-group;\n background-color: var(--background);\n }\n\n .headerRow {\n display: table-row;\n background-color: var(--background);\n }\n\n .headerCell {\n @apply px-4 py-3 text-left;\n display: table-cell;\n background-color: var(--background);\n color: var(--foreground);\n font-weight: var(--header-font-weight, var(--font-weight-semibold));\n white-space: nowrap;\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n }\n\n .headerCell:first-child {\n border-top-left-radius: var(--radius-xs);\n }\n\n .headerCell:last-child {\n border-top-right-radius: var(--radius-xs);\n }\n\n .row {\n display: table-row;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row[data-interactive=\"true\"] {\n @apply cursor-pointer;\n }\n\n .row:hover:not([data-disabled=\"true\"]) .cell {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .row[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.5);\n }\n\n .row:focus-visible {\n outline: 2px solid var(--focus-ring);\n outline-offset: -2px;\n }\n\n .interactive {\n @apply cursor-pointer;\n }\n\n .cell {\n @apply px-4 py-3 align-middle;\n display: table-cell;\n background-color: var(--background, transparent);\n color: var(--foreground);\n border-bottom: var(--border-width-base) solid var(--border, var(--background-border));\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .row:last-child .cell {\n border-bottom: none;\n }\n\n .row:last-child .cell:first-child {\n border-bottom-left-radius: var(--radius-xs);\n }\n\n .row:last-child .cell:last-child {\n border-bottom-right-radius: var(--radius-xs);\n }\n\n .emptyRow {\n border-bottom: none;\n }\n\n .emptyRow {\n display: table-row;\n }\n\n .emptyState {\n @apply px-4 py-8 text-center;\n background-color: var(--background);\n color: var(--foreground);\n }\n\n .emptyState {\n display: table-cell;\n }\n\n .filterBar {\n @apply mb-4 rounded-xs border p-4;\n border: var(--border-width-base) solid var(--background-border);\n background-color: var(--background);\n }\n\n .filterBar {\n display: block;\n }\n\n .filterGrid {\n @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;\n background-color: var(--background);\n }\n\n .filterGrid {\n display: grid;\n }\n\n .filterField {\n @apply min-w-0;\n }\n\n .filterLabel {\n @apply mb-2 block;\n color: var(--foreground);\n font-size: var(--filter-label-font-size, var(--text-xs));\n font-weight: var(--filter-label-font-weight, var(--font-weight-medium));\n }\n\n .filterLabel {\n display: block;\n }\n\n .filterInput {\n @apply w-full;\n }\n}\n",
389
- "styleableParts": [
390
- {
391
- "name": "root"
392
- },
393
- {
394
- "name": "container"
395
- },
396
- {
397
- "name": "filterBar"
398
- },
399
- {
400
- "name": "filterGrid"
401
- },
402
- {
403
- "name": "filterLabel"
404
- },
405
- {
406
- "name": "filterInput"
407
- },
408
- {
409
- "name": "table"
410
- },
411
- {
412
- "name": "header"
413
- },
414
- {
415
- "name": "body"
416
- },
417
- {
418
- "name": "headerRow"
419
- },
420
- {
421
- "name": "headerCell"
422
- },
423
- {
424
- "name": "row"
425
- },
426
- {
427
- "name": "cell"
428
- },
429
- {
430
- "name": "emptyRow"
431
- },
432
- {
433
- "name": "emptyState"
434
- }
435
- ],
436
- "cssVariables": [
437
- {
438
- "name": "--hover-transition-duration",
439
- "value": "var(--hover-transition-enter-duration, 0ms)",
440
- "defaultValue": "0ms",
441
- "referencedVars": [
442
- "--hover-transition-enter-duration"
443
- ],
444
- "variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
445
- }
446
- ]
447
- },
448
448
  "select": {
449
449
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .select {\n --disabled-opacity: 0.5;\n --trigger-padding-inline: calc(var(--spacing) * 1.60);\n --trigger-padding-block: calc(var(--spacing) * 1.30);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n font-size: var(--foreground-size);\n height: fit-content;\n align-self: center;\n\n @apply p-0 gap-0 w-full flex-row items-center;\n position: relative;\n overflow: visible;\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(--background-radius);\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=\"true\"]:not([data-disabled]) {\n background-color: var(--background-pressed, var(--background-hover, var(--background)));\n }\n\n &[data-open=\"true\"] {\n background-color: var(--background-hover);\n }\n\n &:global(.group) {\n height: 100%;\n align-self: stretch;\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([data-disabled]):hover .icon-section,\n &:not([data-disabled]):hover .value-section:not(:empty) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-hover);\n }\n }\n\n &[data-focus-visible=\"true\"] {\n @apply outline-none;\n }\n }\n\n .trigger-compact {\n @apply flex-none w-auto;\n }\n\n .select 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(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n font-size: var(--foreground-size);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &:only-child {\n border-radius: var(--background-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(--trigger-padding-block) var(--trigger-padding-inline);\n border-radius: 0 var(--background-inner-radius) var(--background-inner-radius) 0;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .icon {\n @apply flex items-center justify-center w-4 h-4 opacity-70;\n }\n\n .select .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;\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-weight: var(--font-weight-medium);\n @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;\n }\n\n .content,\n .sub-content {\n --item-padding-inline: calc(var(--spacing) * 1.5);\n --item-padding-block: var(--spacing);\n --background-radius: var(--radius-sm, 0.375rem);\n --background-inner-radius: calc(var(--background-radius) - var(--border-width-base, 1px));\n overflow: hidden;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--background-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 .sub-trigger {\n @apply flex items-center gap-2 outline-none cursor-default select-none;\n background-color: var(--background);\n border-radius: var(--background-inner-radius);\n font-size: var(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &[data-disabled] {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n .item {\n --item-padding-inline: var(--trigger-padding-inline);\n --item-padding-block: calc(var(--trigger-padding-block) * 1.15);\n\n padding: var(--item-padding-block) var(--item-padding-inline);\n\n &[data-selected=\"true\"] {\n color: var(--foreground);\n }\n\n &[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\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(--foreground-size);\n font-weight: var(--font-weight-medium);\n color: var(--foreground-muted);\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(--icon-foreground); }\n .item-indicator { color: var(--indicator-foreground); 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(--background-border);\n }\n\n .placeholder {\n color: var(--foreground-muted);\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(--background-inner-radius);\n transition: box-shadow 150ms var(--ease-snappy-pop), border-color 150ms var(--ease-snappy-pop);\n\n &:focus-within {\n @apply outline-none;\n z-index: 1;\n }\n }\n\n .search-trigger :global(.focus-indicator) {\n display: none;\n }\n\n .search-value-section {\n @apply p-0;\n border-radius: var(--background-inner-radius) 0 0 var(--background-inner-radius);\n }\n\n .input {\n padding-right: calc(var(--trigger-padding-inline) * 2 + 1rem);\n @apply border-none rounded-none shadow-none bg-transparent;\n\n &[data-focused], &[data-focus-visible] {\n @apply border-none shadow-none;\n }\n }\n\n .search-content-input {\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(--trigger-padding-inline);\n }\n\n\n .search-wrapper {\n @apply overflow-hidden;\n border-bottom: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n .empty-state {\n @apply px-3 py-2;\n color: var(--foreground-muted);\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(--background-border);\n }\n\n .sub-trigger {\n padding: var(--trigger-padding-block) var(--trigger-padding-inline);\n\n &[data-highlighted=\"true\"],\n &[data-open=\"true\"]:not([data-highlighted=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\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",
450
450
  "styleableParts": [
@@ -754,34 +754,6 @@ export const generatedStyles = {
754
754
  ],
755
755
  "cssVariables": []
756
756
  },
757
- "path": {
758
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n @apply block;\n }\n\n .list {\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n list-style: none;\n }\n\n .list[data-separator=\"custom\"] .item:not(:last-child)::after {\n content: none;\n }\n\n .item {\n @apply m-0 flex items-center gap-2 p-0;\n border-radius: var(--radius-sm, 0.375rem);\n }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .separator {\n @apply m-0 flex items-center p-0;\n list-style: none;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .link {\n @apply relative cursor-pointer px-2 py-1;\n border: 0;\n /* Inherit the item radius so the focus ring matches rounded breadcrumbs. */\n border-radius: inherit;\n background-color: var(--background);\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n text-decoration: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n button.link {\n font: inherit;\n }\n\n .link:focus,\n .link:focus-visible {\n outline: none;\n }\n\n .link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .link[data-selected=\"true\"] {\n cursor: default;\n }\n\n .link[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n}\n",
759
- "styleableParts": [
760
- {
761
- "name": "root"
762
- },
763
- {
764
- "name": "link"
765
- },
766
- {
767
- "name": "list"
768
- },
769
- {
770
- "name": "separator"
771
- }
772
- ],
773
- "cssVariables": [
774
- {
775
- "name": "--hover-transition-duration",
776
- "value": "var(--hover-transition-enter-duration, 0ms)",
777
- "defaultValue": "0ms",
778
- "referencedVars": [
779
- "--hover-transition-enter-duration"
780
- ],
781
- "variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
782
- }
783
- ]
784
- },
785
757
  "popover": {
786
758
  "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(--background);\n --frame-stroke-color: var(--background-border);\n --frame-radius: 8px;\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 }\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 p-2.5;\n color: var(--foreground);\n font-weight: var(--font-weight-medium);\n font-size: var(--text-sm);\n }\n}\n",
787
759
  "styleableParts": [
@@ -826,6 +798,34 @@ export const generatedStyles = {
826
798
  }
827
799
  ]
828
800
  },
801
+ "path": {
802
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .path {\n @apply block;\n }\n\n .list {\n @apply m-0 flex flex-wrap items-center gap-2 p-0;\n list-style: none;\n }\n\n .list[data-separator=\"custom\"] .item:not(:last-child)::after {\n content: none;\n }\n\n .item {\n @apply m-0 flex items-center gap-2 p-0;\n border-radius: var(--radius-sm, 0.375rem);\n }\n\n .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: 0.5rem;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .separator {\n @apply m-0 flex items-center p-0;\n list-style: none;\n color: var(--foreground);\n pointer-events: none;\n user-select: none;\n }\n\n .link {\n @apply relative cursor-pointer px-2 py-1;\n border: 0;\n /* Inherit the item radius so the focus ring matches rounded breadcrumbs. */\n border-radius: inherit;\n background-color: var(--background);\n color: var(--foreground);\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--leading-normal, 1.5);\n text-decoration: none;\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n outline: none;\n }\n\n button.link {\n font: inherit;\n }\n\n .link:focus,\n .link:focus-visible {\n outline: none;\n }\n\n .link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"]) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .link[data-selected=\"true\"] {\n cursor: default;\n }\n\n .link[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity);\n }\n}\n",
803
+ "styleableParts": [
804
+ {
805
+ "name": "root"
806
+ },
807
+ {
808
+ "name": "link"
809
+ },
810
+ {
811
+ "name": "list"
812
+ },
813
+ {
814
+ "name": "separator"
815
+ }
816
+ ],
817
+ "cssVariables": [
818
+ {
819
+ "name": "--hover-transition-duration",
820
+ "value": "var(--hover-transition-enter-duration, 0ms)",
821
+ "defaultValue": "0ms",
822
+ "referencedVars": [
823
+ "--hover-transition-enter-duration"
824
+ ],
825
+ "variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
826
+ }
827
+ ]
828
+ },
829
829
  "panel": {
830
830
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .panel {\n @apply flex h-full w-full min-h-0 min-w-0 flex-row;\n background: inherit;\n }\n\n .panel[data-stacked=\"true\"] { flex-direction: column; }\n\n .header,\n .footer {\n @apply shrink-0;\n background: inherit;\n }\n\n .sticky {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n .content {\n @apply flex min-h-0 min-w-0;\n flex: 1;\n overflow: auto;\n }\n\n .fixed {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 5;\n }\n\n /* Sidebar */\n .sidebar {\n @apply shrink-0 overflow-hidden;\n overflow: hidden;\n transition: width 0.2s ease;\n border-right: var(--border-width-base) solid var(--panel-border-color);\n }\n\n .sidebar[data-side=\"right\"] {\n border-right: none;\n border-left: var(--border-width-base) solid var(--panel-border-color);\n }\n\n /* Toggle */\n .toggle {\n @apply flex items-center;\n }\n\n /* Group */\n .group {\n @apply flex w-full h-full;\n background: inherit;\n }\n\n .group[data-direction=\"vertical\"] { flex-direction: column; }\n\n /* Resize handle */\n .resize {\n @apply relative shrink-0;\n cursor: col-resize;\n background: transparent;\n width: 10px;\n }\n\n .resize::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: var(--panel-divider-color, #374151);\n transform: translateX(-50%);\n transition:\n width var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n height var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .resize[data-direction=\"vertical\"] {\n cursor: row-resize;\n height: 10px;\n }\n\n .resize[data-direction=\"vertical\"]::before {\n top: 50%;\n bottom: auto;\n left: 0;\n right: 0;\n width: auto;\n height: 1px;\n transform: translateY(-50%);\n }\n\n .resize:hover::before,\n .resize[data-resizing=\"true\"]::before {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n width: 2px;\n }\n\n .resize[data-direction=\"vertical\"]:hover::before,\n .resize[data-direction=\"vertical\"][data-resizing=\"true\"]::before {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n width: auto;\n height: 2px;\n }\n\n /* Spacing variants */\n .spacingNone,\n .spacing-none { gap: 0; }\n\n .spacingSm,\n .spacing-sm { gap: var(--spacing-sm, 0.5rem); }\n\n .spacingMd,\n .spacing-md { gap: var(--spacing-md, 1rem); }\n\n .spacingLg,\n .spacing-lg { gap: var(--spacing-lg, 1.5rem); }\n\n /* Compact variant */\n .compact {\n gap: calc(var(--spacing-sm, 0.5rem) / 2);\n }\n\n /* Responsive stacking (mobile) */\n @media (max-width: 767px) {\n .stacked { flex-direction: column; }\n }\n}\n",
831
831
  "styleableParts": [
@@ -1032,29 +1032,97 @@ export const generatedStyles = {
1032
1032
  "referencedVars": [
1033
1033
  "--ease-snappy-pop"
1034
1034
  ],
1035
- "variant": ":global(.menu) .content,\n .sub-content"
1035
+ "variant": ":global(.menu) .content,\n .sub-content"
1036
+ },
1037
+ {
1038
+ "name": "--disabled-opacity",
1039
+ "value": "0.5",
1040
+ "defaultValue": null,
1041
+ "referencedVars": [],
1042
+ "variant": ":global(.menu) .content,\n .sub-content"
1043
+ }
1044
+ ]
1045
+ },
1046
+ "mask": {
1047
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .mask {\n @apply relative h-full w-full;\n }\n}\n\n.mask[style*=\"mask-image\"],\n.mask[style*=\"-webkit-mask-image\"] {\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.mask[style*=\"--mask-clip-path\"] {\n clip-path: var(--mask-clip-path);\n}\n\n.mask-gradient {\n background: var(--mask-gradient);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n}\n",
1048
+ "styleableParts": [
1049
+ {
1050
+ "name": "root"
1051
+ },
1052
+ {
1053
+ "name": "gradient"
1054
+ }
1055
+ ],
1056
+ "cssVariables": []
1057
+ },
1058
+ "label": {
1059
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n --background: transparent;\n --foreground: var(--foreground-primary);\n --foreground-disabled: var(--foreground-secondary);\n --foreground-error: var(--danger-600);\n }\n\n .label > 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(--foreground-disabled);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--foreground-error);\n }\n }\n\n .label > .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .label > .helper-text {\n --helper-foreground: var(--foreground-secondary);\n --helper-foreground-error: var(--danger-600);\n\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-foreground);\n\n &[data-error] {\n color: var(--helper-foreground-error);\n }\n }\n}\n",
1060
+ "styleableParts": [
1061
+ {
1062
+ "name": "root"
1063
+ },
1064
+ {
1065
+ "name": "requiredIndicator"
1066
+ },
1067
+ {
1068
+ "name": "helperText"
1069
+ }
1070
+ ],
1071
+ "cssVariables": [
1072
+ {
1073
+ "name": "--background",
1074
+ "value": "transparent",
1075
+ "defaultValue": null,
1076
+ "referencedVars": [],
1077
+ "variant": ".label"
1078
+ },
1079
+ {
1080
+ "name": "--foreground",
1081
+ "value": "var(--foreground-primary)",
1082
+ "defaultValue": null,
1083
+ "referencedVars": [
1084
+ "--foreground-primary"
1085
+ ],
1086
+ "variant": ".label"
1087
+ },
1088
+ {
1089
+ "name": "--foreground-disabled",
1090
+ "value": "var(--foreground-secondary)",
1091
+ "defaultValue": null,
1092
+ "referencedVars": [
1093
+ "--foreground-secondary"
1094
+ ],
1095
+ "variant": ".label"
1096
+ },
1097
+ {
1098
+ "name": "--foreground-error",
1099
+ "value": "var(--danger-600)",
1100
+ "defaultValue": null,
1101
+ "referencedVars": [
1102
+ "--danger-600"
1103
+ ],
1104
+ "variant": ".label"
1105
+ },
1106
+ {
1107
+ "name": "--helper-foreground",
1108
+ "value": "var(--foreground-secondary)",
1109
+ "defaultValue": null,
1110
+ "referencedVars": [
1111
+ "--foreground-secondary"
1112
+ ],
1113
+ "variant": ".label > .helper-text"
1036
1114
  },
1037
1115
  {
1038
- "name": "--disabled-opacity",
1039
- "value": "0.5",
1116
+ "name": "--helper-foreground-error",
1117
+ "value": "var(--danger-600)",
1040
1118
  "defaultValue": null,
1041
- "referencedVars": [],
1042
- "variant": ":global(.menu) .content,\n .sub-content"
1119
+ "referencedVars": [
1120
+ "--danger-600"
1121
+ ],
1122
+ "variant": ".label > .helper-text"
1043
1123
  }
1044
1124
  ]
1045
1125
  },
1046
- "mask": {
1047
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .mask {\n @apply relative h-full w-full;\n }\n}\n\n.mask[style*=\"mask-image\"],\n.mask[style*=\"-webkit-mask-image\"] {\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.mask[style*=\"--mask-clip-path\"] {\n clip-path: var(--mask-clip-path);\n}\n\n.mask-gradient {\n background: var(--mask-gradient);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n}\n",
1048
- "styleableParts": [
1049
- {
1050
- "name": "root"
1051
- },
1052
- {
1053
- "name": "gradient"
1054
- }
1055
- ],
1056
- "cssVariables": []
1057
- },
1058
1126
  "list": {
1059
1127
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .container {\n --gap-scale: 0.75;\n\n color: var(--foreground);\n @apply flex flex-col;\n gap: calc(var(--spacing, 0.25rem) * var(--list-gap-step, 0) * var(--gap-scale, 1));\n }\n\n .container[data-orientation=\"horizontal\"] {\n @apply flex-row flex-wrap;\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 .sticky {\n position: sticky;\n top: 0;\n }\n\n .header > :first-child {\n font-weight: var(--font-weight-semibold);\n font-size: 1.125rem;\n color: var(--header-title-foreground);\n }\n\n .header > :last-child {\n color: var(--header-subtitle-foreground);\n }\n\n .item {\n --background: transparent;\n\n @apply flex gap-3 px-2 py-1 cursor-pointer;\n background-color: var(--background);\n color: var(--foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .item[data-focus-visible=\"true\"] {\n box-shadow:\n inset 0 0 0 1px var(--item-focus-visible-background, var(--focus-visible-background)),\n 0 0 0 2px var(--item-focus-visible, var(--focus-visible));\n border-radius: var(--item-radius, var(--radius-sm, 0.375rem));\n outline: none;\n }\n\n .item:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .container[data-keyboard-mode=\"true\"] .item[data-highlighted=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n }\n\n .item[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n\n .checkbox,\n .control,\n .media {\n @apply flex items-center justify-center flex-shrink-0;\n }\n\n .control {\n margin-left: auto;\n }\n\n .control[data-placement=\"start\"] {\n margin-left: 0;\n }\n\n .media {\n @apply h-8 w-8;\n }\n\n .title {\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n color: var(--foreground);\n @apply truncate;\n }\n\n .desc {\n font-size: var(--text-sm);\n color: var(--desc-foreground);\n @apply truncate;\n }\n\n .actionGroup {\n @apply flex items-center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .actionGroup[data-justify=\"between\"] { justify-content: space-between; }\n .actionGroup[data-justify=\"start\"] { justify-content: flex-start; }\n .actionGroup[data-justify=\"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 flex p-1.5 opacity-70 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100;\n }\n\n .action {\n --background: transparent;\n\n @apply flex items-center justify-center;\n border-radius: 0.25rem;\n background-color: var(--background);\n color: var(--foreground);\n @apply p-2;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .action:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\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=\"start\"] { justify-content: flex-start; }\n .footer[data-align=\"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",
1060
1128
  "styleableParts": [
@@ -1143,74 +1211,6 @@ export const generatedStyles = {
1143
1211
  }
1144
1212
  ]
1145
1213
  },
1146
- "label": {
1147
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .label {\n --background: transparent;\n --foreground: var(--foreground-primary);\n --foreground-disabled: var(--foreground-secondary);\n --foreground-error: var(--danger-600);\n }\n\n .label > 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(--foreground-disabled);\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &[data-error] {\n color: var(--foreground-error);\n }\n }\n\n .label > .required-indicator {\n margin-left: 0.25rem;\n color: var(--required-color);\n }\n\n .label > .helper-text {\n --helper-foreground: var(--foreground-secondary);\n --helper-foreground-error: var(--danger-600);\n\n display: block;\n font-size: var(--text-sm);\n margin-top: 0.25rem;\n transition: color 150ms ease;\n color: var(--helper-foreground);\n\n &[data-error] {\n color: var(--helper-foreground-error);\n }\n }\n}\n",
1148
- "styleableParts": [
1149
- {
1150
- "name": "root"
1151
- },
1152
- {
1153
- "name": "requiredIndicator"
1154
- },
1155
- {
1156
- "name": "helperText"
1157
- }
1158
- ],
1159
- "cssVariables": [
1160
- {
1161
- "name": "--background",
1162
- "value": "transparent",
1163
- "defaultValue": null,
1164
- "referencedVars": [],
1165
- "variant": ".label"
1166
- },
1167
- {
1168
- "name": "--foreground",
1169
- "value": "var(--foreground-primary)",
1170
- "defaultValue": null,
1171
- "referencedVars": [
1172
- "--foreground-primary"
1173
- ],
1174
- "variant": ".label"
1175
- },
1176
- {
1177
- "name": "--foreground-disabled",
1178
- "value": "var(--foreground-secondary)",
1179
- "defaultValue": null,
1180
- "referencedVars": [
1181
- "--foreground-secondary"
1182
- ],
1183
- "variant": ".label"
1184
- },
1185
- {
1186
- "name": "--foreground-error",
1187
- "value": "var(--danger-600)",
1188
- "defaultValue": null,
1189
- "referencedVars": [
1190
- "--danger-600"
1191
- ],
1192
- "variant": ".label"
1193
- },
1194
- {
1195
- "name": "--helper-foreground",
1196
- "value": "var(--foreground-secondary)",
1197
- "defaultValue": null,
1198
- "referencedVars": [
1199
- "--foreground-secondary"
1200
- ],
1201
- "variant": ".label > .helper-text"
1202
- },
1203
- {
1204
- "name": "--helper-foreground-error",
1205
- "value": "var(--danger-600)",
1206
- "defaultValue": null,
1207
- "referencedVars": [
1208
- "--danger-600"
1209
- ],
1210
- "variant": ".label > .helper-text"
1211
- }
1212
- ]
1213
- },
1214
1214
  "input": {
1215
1215
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .scope {\n @apply flex w-full;\n position: relative;\n overflow: visible;\n }\n\n .input {\n height: fit-content;\n flex: 1;\n min-width: 0;\n @apply py-1.5 px-3;\n font-family: inherit;\n font-size: var(--text-xs);\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\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 pointer-events: none;\n }\n\n .icon {\n @apply flex items-center shrink-0;\n color: var(--foreground, currentColor);\n }\n\n .icon-left {\n @apply relative;\n }\n\n .icon-right {\n @apply relative;\n }\n\n .container {\n --adornment-offset: calc(var(--spacing, 0.25rem) * 1.5);\n\n display: flex;\n align-items: center;\n width: 100%;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n box-sizing: border-box;\n overflow: hidden;\n\n &[data-disabled] {\n background-color: var(--disabled-background);\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n &[data-variant=\"ghost\"] {\n --ring-shadow: none;\n --ring-border: transparent;\n --ring-border-visible: transparent;\n\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .start-adornments,\n .end-adornments {\n @apply flex items-center gap-1;\n align-self: stretch;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .start-adornments {\n @apply pl-2.5;\n }\n\n .end-adornments {\n padding-right: var(--adornment-offset);\n\n &:has(.controls) {\n padding-right: 0;\n }\n\n &:has([data-hint]) {\n padding-right: 0;\n }\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-foreground);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .action:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--action-background-hover);\n color: var(--action-foreground-hover);\n }\n\n .hint {\n @apply inline-flex items-center justify-center whitespace-nowrap;\n flex-shrink: 0;\n margin-inline-start: calc(var(--spacing, 0.25rem) * 0.5);\n margin-inline-end: var(--adornment-offset);\n font-size: var(--text-sm);\n line-height: 1;\n color: var(--foreground);\n background-color: var(--background);\n pointer-events: auto;\n }\n\n .controls {\n @apply flex w-7.5 flex-col;\n align-self: stretch;\n min-height: 100%;\n border-left: var(--border-width-base, 1px) solid var(--background-border);\n pointer-events: auto;\n }\n\n .controls[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .stepper {\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(--foreground);\n --active-background: var(--background-700);\n --active-color: var(--foreground-100);\n transition:\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n\n &+.stepper {\n border-top: var(--border-width-base, 1px) solid var(--background-border);\n }\n\n &:hover:not(:disabled) {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--hover-background);\n color: var(--hover-color);\n }\n\n &:active:not(:disabled) {\n background-color: var(--active-background);\n color: var(--active-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n}\n",
1216
1216
  "styleableParts": [
@@ -2249,6 +2249,88 @@ export const generatedStyles = {
2249
2249
  }
2250
2250
  ]
2251
2251
  },
2252
+ "code": {
2253
+ "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .code {\n --border-color: var(--background-700);\n --header-bg: mix(var(--background-900) 90%, transparent);\n --scroll-track-bg: mix(var(--background-950) 50%, transparent);\n\n max-height: 52.5rem;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border-color);\n @apply flex w-full min-w-0 flex-col overflow-hidden;\n }\n\n .header {\n flex: none;\n background-color: var(--header-bg);\n @apply flex items-center justify-between px-3 py-1.5;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n border-bottom: 1px solid var(--border-color);\n color: var(--foreground-400);\n }\n\n\n .body {\n @apply relative flex min-h-0 flex-1 flex-col;\n flex: 1;\n }\n\n .viewport { @apply overflow-hidden; }\n\n .viewport :global(pre) {\n background: transparent;\n @apply m-0 p-0;\n width: fit-content;\n }\n\n .viewport :global(code) {\n color: var(--foreground-300);\n white-space: pre;\n }\n\n .viewport::-webkit-scrollbar {\n width: 0.5rem;\n }\n\n .viewport::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .viewport::-webkit-scrollbar-thumb {\n background-color: var(--background-700);\n border-radius: 9999px;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .viewport::-webkit-scrollbar-thumb:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-600);\n }\n\n .scroll-track {\n flex: none;\n @apply w-full;\n overflow-x: auto;\n background-color: var(--scroll-track-bg);\n backdrop-filter: blur(4px);\n }\n\n .expand-button {\n @apply flex w-full items-center gap-3 px-4 py-2 cursor-pointer;\n color: var(--foreground-300);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n border-top: 1px solid var(--border-color);\n background: transparent;\n border-left: none;\n border-right: none;\n border-bottom: none;\n font-family: inherit;\n }\n\n .expand-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n }\n\n .expand-icon { @apply shrink-0; color: var(--foreground-400); }\n\n .copy-button {\n @apply absolute right-2 top-2 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-sm);\n color: var(--foreground-400);\n opacity: 0;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n background: transparent;\n border: none;\n z-index: 1;\n }\n\n .copy-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n color: var(--foreground-300);\n }\n\n .copy-button:focus,\n .body:hover .copy-button {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n}\n",
2254
+ "styleableParts": [
2255
+ {
2256
+ "name": "root"
2257
+ },
2258
+ {
2259
+ "name": "header"
2260
+ },
2261
+ {
2262
+ "name": "body"
2263
+ },
2264
+ {
2265
+ "name": "viewport"
2266
+ }
2267
+ ],
2268
+ "cssVariables": [
2269
+ {
2270
+ "name": "--border-color",
2271
+ "value": "var(--background-700)",
2272
+ "defaultValue": null,
2273
+ "referencedVars": [
2274
+ "--background-700"
2275
+ ],
2276
+ "variant": ".code"
2277
+ },
2278
+ {
2279
+ "name": "--header-bg",
2280
+ "value": "mix(var(--background-900) 90%, transparent)",
2281
+ "defaultValue": null,
2282
+ "referencedVars": [
2283
+ "--background-900"
2284
+ ],
2285
+ "variant": ".code"
2286
+ },
2287
+ {
2288
+ "name": "--scroll-track-bg",
2289
+ "value": "mix(var(--background-950) 50%, transparent)",
2290
+ "defaultValue": null,
2291
+ "referencedVars": [
2292
+ "--background-950"
2293
+ ],
2294
+ "variant": ".code"
2295
+ },
2296
+ {
2297
+ "name": "--hover-transition-duration",
2298
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2299
+ "defaultValue": "0ms",
2300
+ "referencedVars": [
2301
+ "--hover-transition-enter-duration"
2302
+ ],
2303
+ "variant": ".viewport::-webkit-scrollbar-thumb:hover"
2304
+ },
2305
+ {
2306
+ "name": "--hover-transition-duration",
2307
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2308
+ "defaultValue": "0ms",
2309
+ "referencedVars": [
2310
+ "--hover-transition-enter-duration"
2311
+ ],
2312
+ "variant": ".expand-button:hover"
2313
+ },
2314
+ {
2315
+ "name": "--hover-transition-duration",
2316
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2317
+ "defaultValue": "0ms",
2318
+ "referencedVars": [
2319
+ "--hover-transition-enter-duration"
2320
+ ],
2321
+ "variant": ".copy-button:hover"
2322
+ },
2323
+ {
2324
+ "name": "--hover-transition-duration",
2325
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2326
+ "defaultValue": "0ms",
2327
+ "referencedVars": [
2328
+ "--hover-transition-enter-duration"
2329
+ ],
2330
+ "variant": ".copy-button:focus,\n .body:hover .copy-button"
2331
+ }
2332
+ ]
2333
+ },
2252
2334
  "color": {
2253
2335
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .color {\n --background: color-mix(in srgb, var(--background-800) 30%, transparent);\n --background-border: var(--background-700);\n --focus-visible: var(--accent-500);\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-sm, 0.375rem);\n width: 260px;\n }\n\n .color[data-disabled=\"true\"] {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .color[data-variant=\"popover\"] {\n background: transparent;\n border-color: transparent;\n border-radius: 0;\n }\n\n .color-provider {\n display: inline-flex;\n width: fit-content;\n }\n\n .color-provider .color-trigger {\n --trigger-background: color-mix(in srgb, var(--background-800) 35%, transparent);\n --trigger-background-hover: color-mix(in srgb, var(--background-700) 45%, transparent);\n --trigger-border: var(--background-700);\n --trigger-text: var(--foreground-200);\n --background-border: var(--background-700);\n --focus-visible: var(--accent-500);\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-width: 170px;\n height: 40px;\n padding: 0 0.75rem;\n border: var(--border-width-base, 1px) solid var(--trigger-border);\n border-radius: var(--radius-sm, 0.375rem);\n background: var(--trigger-background);\n color: var(--trigger-text);\n cursor: pointer;\n font: inherit;\n font-size: 0.875rem;\n line-height: 1;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n border-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .color-provider .color-trigger:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background: var(--trigger-background-hover);\n }\n\n .color-provider .color-trigger:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .color-provider .color-trigger[data-disabled=\"true\"] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .color-provider .color-trigger[data-size=\"sm\"] {\n min-width: 150px;\n height: 34px;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n }\n\n .color-provider .color-trigger[data-size=\"lg\"] {\n min-width: 190px;\n height: 46px;\n padding: 0 0.875rem;\n font-size: 0.9375rem;\n }\n\n .color-provider .color-trigger-swatch {\n position: relative;\n width: 20px;\n height: 20px;\n flex: 0 0 auto;\n border-radius: var(--radius-xs, 0.25rem);\n border: var(--border-width-base, 1px) solid var(--background-border);\n overflow: hidden;\n }\n\n .color-provider .color-trigger-swatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 4px,\n var(--checkerboard-light) 4px,\n var(--checkerboard-light) 8px\n );\n }\n\n .color-provider .color-trigger-swatch::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: var(--preview-color, transparent);\n }\n\n .color-provider .color-trigger-value {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .color .controls {\n @apply pb-3 px-3 space-y-3;\n }\n\n .input-group {\n width: 100%;\n }\n\n .input-group > div:first-child {\n flex: 1;\n min-width: 0;\n }\n\n .input-group .input {\n width: 100%;\n }\n\n .input-group .format {\n flex-shrink: 0;\n width: 85px;\n }\n\n .color[data-size=\"sm\"] .format {\n width: 75px;\n }\n\n .canvas {\n position: relative;\n width: 96%;\n @apply mx-auto mt-2;\n cursor: crosshair;\n touch-action: none;\n display: flex;\n flex-direction: column;\n min-height: 160px;\n }\n\n .canvas[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .canvas .canvas-inner {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n }\n\n .canvas .canvas-gradient-hue {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n\n .canvas .canvas-gradient-saturation {\n position: absolute;\n inset: 0;\n background: linear-gradient(to right, rgb(255, 255, 255), transparent);\n }\n\n .canvas .canvas-gradient-brightness {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgb(0, 0, 0), transparent);\n }\n\n .canvas .canvas-pointer {\n --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);\n\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: var(--radius-full);\n border: 2px solid var(--pointer-border);\n box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.3);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 10;\n }\n\n .hue-slider {\n --slider-track-size: 16px;\n --slider-thumb-size: 12px;\n --slider-hit-size: 16px;\n --slider-track-radius: var(--radius-full);\n --slider-track-border: var(--border-width-base, 1px) solid var(--background-border);\n --slider-track-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 --slider-range-display: none;\n --slider-thumb-scale-active: 1;\n\n width: 100%;\n min-height: 16px;\n border-radius: var(--radius-full);\n }\n\n .hue-slider .hue-track {\n position: relative;\n width: 100%;\n }\n\n .hue-slider .hue-thumb {\n --thumb-border: white;\n --thumb-background: white;\n --slider-thumb-background: var(--thumb-background);\n --slider-thumb-border: 2px solid var(--thumb-border);\n --slider-thumb-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n --slider-thumb-shadow-hover: 0 2px 6px rgb(0 0 0 / 0.4);\n --slider-thumb-shadow-active: 0 1px 3px rgb(0 0 0 / 0.3);\n\n border-radius: var(--radius-full);\n }\n\n .hue-slider .hue-thumb[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .hue-slider .hue-thumb[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n box-shadow: var(--slider-thumb-shadow-hover);\n }\n\n .hue-slider .hue-thumb[data-pressed=\"true\"] {\n box-shadow: var(--slider-thumb-shadow-active);\n }\n\n .opacity-slider {\n --slider-track-size: 12px;\n --slider-thumb-size: 10px;\n --slider-hit-size: 12px;\n --slider-track-radius: var(--radius-full);\n --slider-track-border: var(--border-width-base, 1px) solid var(--background-border);\n --slider-range-display: none;\n --slider-thumb-scale-active: 1;\n --checkerboard-dark: var(--background-800);\n --checkerboard-light: var(--background-700);\n --slider-track-background:\n linear-gradient(to right, transparent, var(--color-slider-opacity-color, rgb(0, 0, 0))),\n 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\n width: 100%;\n min-height: 12px;\n border-radius: var(--radius-full);\n }\n\n .opacity-slider .opacity-track {\n position: relative;\n width: 100%;\n overflow: hidden;\n }\n\n .opacity-slider .opacity-thumb {\n --thumb-border: white;\n --thumb-background: white;\n --slider-thumb-background: var(--thumb-background);\n --slider-thumb-border: 2px solid var(--thumb-border);\n --slider-thumb-shadow: 0 2px 4px rgb(0 0 0 / 0.3);\n --slider-thumb-shadow-hover: 0 2px 6px rgb(0 0 0 / 0.4);\n --slider-thumb-shadow-active: 0 1px 3px rgb(0 0 0 / 0.3);\n\n border-radius: var(--radius-full);\n }\n\n .opacity-slider .opacity-thumb[data-focus-visible=\"true\"] {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .opacity-slider .opacity-thumb[data-hovered=\"true\"] {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n box-shadow: var(--slider-thumb-shadow-hover);\n }\n\n .opacity-slider .opacity-thumb[data-pressed=\"true\"] {\n box-shadow: var(--slider-thumb-shadow-active);\n }\n\n .recent-colors {\n display: flex;\n gap: 0.5rem;\n overflow-x: auto;\n padding-bottom: 0.25rem;\n }\n\n .recent-colors .recent-color-swatch {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n cursor: pointer;\n background: none;\n padding: 0;\n outline: none;\n transition:\n box-shadow var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n transform var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .recent-colors .recent-color-swatch:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n transform: scale(1.1);\n box-shadow: 0 0 0 2px var(--focus-visible);\n }\n\n .recent-colors .recent-color-swatch:active {\n transform: scale(0.95);\n }\n\n .recent-colors .recent-color-swatch:focus-visible {\n outline: 2px solid var(--focus-visible);\n outline-offset: 2px;\n }\n\n .preview-swatch {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .preview-swatch::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n 45deg,\n var(--checkerboard-dark),\n var(--checkerboard-dark) 6px,\n var(--checkerboard-light) 6px,\n var(--checkerboard-light) 12px\n );\n border-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n\n .preview-swatch::after {\n content: \"\";\n position: absolute;\n 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 .preview {\n --checkerboard-dark: var(--background-700);\n --checkerboard-light: var(--background-800);\n\n position: relative;\n width: 64px;\n height: 64px;\n border-radius: var(--radius-sm);\n border: var(--border-width-base, 1px) solid var(--background-border);\n box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);\n overflow: hidden;\n }\n\n .preview::before {\n content: \"\";\n position: absolute;\n inset: 0;\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-radius: var(--radius-sm);\n pointer-events: none;\n z-index: 1;\n }\n}\n",
2254
2336
  "styleableParts": [
@@ -2758,88 +2840,6 @@ export const generatedStyles = {
2758
2840
  }
2759
2841
  ]
2760
2842
  },
2761
- "code": {
2762
- "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .code {\n --border-color: var(--background-700);\n --header-bg: mix(var(--background-900) 90%, transparent);\n --scroll-track-bg: mix(var(--background-950) 50%, transparent);\n\n max-height: 52.5rem;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border-color);\n @apply flex w-full min-w-0 flex-col overflow-hidden;\n }\n\n .header {\n flex: none;\n background-color: var(--header-bg);\n @apply flex items-center justify-between px-3 py-1.5;\n font-size: var(--text-sm);\n font-weight: var(--font-weight-semibold);\n border-bottom: 1px solid var(--border-color);\n color: var(--foreground-400);\n }\n\n\n .body {\n @apply relative flex min-h-0 flex-1 flex-col;\n flex: 1;\n }\n\n .viewport { @apply overflow-hidden; }\n\n .viewport :global(pre) {\n background: transparent;\n @apply m-0 p-0;\n width: fit-content;\n }\n\n .viewport :global(code) {\n color: var(--foreground-300);\n white-space: pre;\n }\n\n .viewport::-webkit-scrollbar {\n width: 0.5rem;\n }\n\n .viewport::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .viewport::-webkit-scrollbar-thumb {\n background-color: var(--background-700);\n border-radius: 9999px;\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n }\n\n .viewport::-webkit-scrollbar-thumb:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-600);\n }\n\n .scroll-track {\n flex: none;\n @apply w-full;\n overflow-x: auto;\n background-color: var(--scroll-track-bg);\n backdrop-filter: blur(4px);\n }\n\n .expand-button {\n @apply flex w-full items-center gap-3 px-4 py-2 cursor-pointer;\n color: var(--foreground-300);\n font-size: var(--text-sm);\n font-weight: var(--font-weight-medium);\n transition:\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n border-top: 1px solid var(--border-color);\n background: transparent;\n border-left: none;\n border-right: none;\n border-bottom: none;\n font-family: inherit;\n }\n\n .expand-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n }\n\n .expand-icon { @apply shrink-0; color: var(--foreground-400); }\n\n .copy-button {\n @apply absolute right-2 top-2 flex items-center justify-center p-1 cursor-pointer;\n border-radius: var(--radius-sm);\n color: var(--foreground-400);\n opacity: 0;\n transition:\n opacity var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n background-color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out)),\n color var(--hover-transition-duration, var(--hover-transition-leave-duration, 300ms)) var(--hover-transition-timing-function, var(--ease-snappy-pop, ease-out));\n background: transparent;\n border: none;\n z-index: 1;\n }\n\n .copy-button:hover {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n background-color: var(--background-800);\n color: var(--foreground-300);\n }\n\n .copy-button:focus,\n .body:hover .copy-button {\n --hover-transition-duration: var(--hover-transition-enter-duration, 0ms);\n opacity: 1;\n }\n}\n",
2763
- "styleableParts": [
2764
- {
2765
- "name": "root"
2766
- },
2767
- {
2768
- "name": "header"
2769
- },
2770
- {
2771
- "name": "body"
2772
- },
2773
- {
2774
- "name": "viewport"
2775
- }
2776
- ],
2777
- "cssVariables": [
2778
- {
2779
- "name": "--border-color",
2780
- "value": "var(--background-700)",
2781
- "defaultValue": null,
2782
- "referencedVars": [
2783
- "--background-700"
2784
- ],
2785
- "variant": ".code"
2786
- },
2787
- {
2788
- "name": "--header-bg",
2789
- "value": "mix(var(--background-900) 90%, transparent)",
2790
- "defaultValue": null,
2791
- "referencedVars": [
2792
- "--background-900"
2793
- ],
2794
- "variant": ".code"
2795
- },
2796
- {
2797
- "name": "--scroll-track-bg",
2798
- "value": "mix(var(--background-950) 50%, transparent)",
2799
- "defaultValue": null,
2800
- "referencedVars": [
2801
- "--background-950"
2802
- ],
2803
- "variant": ".code"
2804
- },
2805
- {
2806
- "name": "--hover-transition-duration",
2807
- "value": "var(--hover-transition-enter-duration, 0ms)",
2808
- "defaultValue": "0ms",
2809
- "referencedVars": [
2810
- "--hover-transition-enter-duration"
2811
- ],
2812
- "variant": ".viewport::-webkit-scrollbar-thumb:hover"
2813
- },
2814
- {
2815
- "name": "--hover-transition-duration",
2816
- "value": "var(--hover-transition-enter-duration, 0ms)",
2817
- "defaultValue": "0ms",
2818
- "referencedVars": [
2819
- "--hover-transition-enter-duration"
2820
- ],
2821
- "variant": ".expand-button:hover"
2822
- },
2823
- {
2824
- "name": "--hover-transition-duration",
2825
- "value": "var(--hover-transition-enter-duration, 0ms)",
2826
- "defaultValue": "0ms",
2827
- "referencedVars": [
2828
- "--hover-transition-enter-duration"
2829
- ],
2830
- "variant": ".copy-button:hover"
2831
- },
2832
- {
2833
- "name": "--hover-transition-duration",
2834
- "value": "var(--hover-transition-enter-duration, 0ms)",
2835
- "defaultValue": "0ms",
2836
- "referencedVars": [
2837
- "--hover-transition-enter-duration"
2838
- ],
2839
- "variant": ".copy-button:focus,\n .body:hover .copy-button"
2840
- }
2841
- ]
2842
- },
2843
2843
  "checkbox": {
2844
2844
  "rawCss": "@reference \"tailwindcss\";\n\n@layer components {\n .checkbox {\n @apply inline-grid gap-x-3;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n\n .container {\n @apply relative inline-flex items-center justify-center;\n }\n\n .box {\n @apply relative h-5 w-5 cursor-pointer appearance-none;\n\n background-color: var(--background);\n border: var(--border-width-base, 1px) solid var(--background-border);\n border-radius: var(--radius-xs, 0.25rem);\n outline: none;\n\n &[data-invalid=\"true\"] {\n border-color: var(--background-error-border, var(--danger-600));\n }\n\n &[data-invalid=\"true\"][data-selected=\"true\"],\n &[data-invalid=\"true\"][data-indeterminate=\"true\"] {\n border-color: var(--background-border);\n }\n\n &[data-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: var(--disabled-opacity, 0.6);\n pointer-events: none;\n }\n }\n\n .checkmark,\n .indeterminate {\n @apply absolute;\n inset: 50%;\n width: 65%;\n height: 65%;\n transform: translate(-50%, -50%);\n color: var(--foreground);\n pointer-events: none;\n }\n\n .label {\n @apply cursor-pointer select-none;\n\n &[data-disabled=\"true\"] {\n @apply opacity-60 cursor-not-allowed;\n }\n }\n\n .label-md {\n font-size: var(--text-sm, 0.875rem);\n font-weight: var(--font-weight-medium, 500);\n }\n\n .helper-text {\n @apply text-xs;\n grid-column: 2;\n color: var(--helper-foreground);\n\n &[data-error=\"true\"] {\n color: var(--helper-error-foreground, var(--foreground-error, var(--danger-600)));\n }\n }\n}\n",
2845
2845
  "styleableParts": [