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.json CHANGED
@@ -39,91 +39,84 @@
39
39
  }
40
40
  ]
41
41
  },
42
- "textarea": {
43
- "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",
42
+ "toast": {
43
+ "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",
44
44
  "styleableParts": [
45
45
  {
46
46
  "name": "root"
47
47
  },
48
48
  {
49
- "name": "container"
49
+ "name": "iconWrap"
50
50
  },
51
51
  {
52
- "name": "surface"
52
+ "name": "icon"
53
53
  },
54
54
  {
55
- "name": "scrollWrapper"
55
+ "name": "content"
56
56
  },
57
57
  {
58
- "name": "resizeHandle.both"
58
+ "name": "title"
59
59
  },
60
60
  {
61
- "name": "resizeHandle.x"
61
+ "name": "description"
62
62
  },
63
63
  {
64
- "name": "resizeHandle.y"
64
+ "name": "close"
65
65
  },
66
66
  {
67
- "name": "characterCount"
67
+ "name": "closeIcon"
68
68
  }
69
69
  ],
70
70
  "cssVariables": [
71
71
  {
72
- "name": "--padding-inline",
73
- "value": "0.75rem",
72
+ "name": "--foreground",
73
+ "value": "inherit",
74
74
  "defaultValue": null,
75
75
  "referencedVars": [],
76
- "variant": ".textarea"
76
+ "variant": ".title"
77
77
  },
78
78
  {
79
- "name": "--padding-block",
80
- "value": "0.5rem",
79
+ "name": "--foreground",
80
+ "value": "inherit",
81
81
  "defaultValue": null,
82
82
  "referencedVars": [],
83
- "variant": ".textarea"
83
+ "variant": ".description"
84
84
  },
85
85
  {
86
- "name": "--padding-inline",
87
- "value": "0.5rem",
86
+ "name": "--foreground",
87
+ "value": "currentColor",
88
88
  "defaultValue": null,
89
89
  "referencedVars": [],
90
- "variant": ".size-sm"
90
+ "variant": ".close"
91
91
  },
92
92
  {
93
- "name": "--padding-block",
94
- "value": "0.25rem",
95
- "defaultValue": null,
96
- "referencedVars": [],
97
- "variant": ".size-sm"
98
- },
93
+ "name": "--hover-transition-duration",
94
+ "value": "var(--hover-transition-enter-duration, 0ms)",
95
+ "defaultValue": "0ms",
96
+ "referencedVars": [
97
+ "--hover-transition-enter-duration"
98
+ ],
99
+ "variant": ".close[data-hovered=\"true\"]"
100
+ }
101
+ ]
102
+ },
103
+ "tabs": {
104
+ "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",
105
+ "styleableParts": [
99
106
  {
100
- "name": "--padding-inline",
101
- "value": "0.75rem",
102
- "defaultValue": null,
103
- "referencedVars": [],
104
- "variant": ".size-md"
107
+ "name": "root"
105
108
  },
106
109
  {
107
- "name": "--padding-block",
108
- "value": "0.5rem",
109
- "defaultValue": null,
110
- "referencedVars": [],
111
- "variant": ".size-md"
110
+ "name": "indicator"
112
111
  },
113
112
  {
114
- "name": "--padding-inline",
115
- "value": "1rem",
116
- "defaultValue": null,
117
- "referencedVars": [],
118
- "variant": ".size-lg"
113
+ "name": "icon.left"
119
114
  },
120
115
  {
121
- "name": "--padding-block",
122
- "value": "0.75rem",
123
- "defaultValue": null,
124
- "referencedVars": [],
125
- "variant": ".size-lg"
126
- },
116
+ "name": "icon.right"
117
+ }
118
+ ],
119
+ "cssVariables": [
127
120
  {
128
121
  "name": "--hover-transition-duration",
129
122
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -131,60 +124,67 @@
131
124
  "referencedVars": [
132
125
  "--hover-transition-enter-duration"
133
126
  ],
134
- "variant": ".resize-handle:hover::before,\n .resize-handle:hover::after"
127
+ "variant": ".trigger[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
128
+ },
129
+ {
130
+ "name": "--disabled-opacity",
131
+ "value": "0.5",
132
+ "defaultValue": null,
133
+ "referencedVars": [],
134
+ "variant": ".trigger[data-disabled=\"true\"]"
135
135
  }
136
136
  ]
137
137
  },
138
- "toast": {
139
- "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",
138
+ "table": {
139
+ "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",
140
140
  "styleableParts": [
141
141
  {
142
142
  "name": "root"
143
143
  },
144
144
  {
145
- "name": "iconWrap"
145
+ "name": "container"
146
146
  },
147
147
  {
148
- "name": "icon"
148
+ "name": "filterBar"
149
149
  },
150
150
  {
151
- "name": "content"
151
+ "name": "filterGrid"
152
152
  },
153
153
  {
154
- "name": "title"
154
+ "name": "filterLabel"
155
155
  },
156
156
  {
157
- "name": "description"
157
+ "name": "filterInput"
158
158
  },
159
159
  {
160
- "name": "close"
160
+ "name": "table"
161
161
  },
162
162
  {
163
- "name": "closeIcon"
164
- }
165
- ],
166
- "cssVariables": [
163
+ "name": "header"
164
+ },
167
165
  {
168
- "name": "--foreground",
169
- "value": "inherit",
170
- "defaultValue": null,
171
- "referencedVars": [],
172
- "variant": ".title"
166
+ "name": "body"
173
167
  },
174
168
  {
175
- "name": "--foreground",
176
- "value": "inherit",
177
- "defaultValue": null,
178
- "referencedVars": [],
179
- "variant": ".description"
169
+ "name": "headerRow"
180
170
  },
181
171
  {
182
- "name": "--foreground",
183
- "value": "currentColor",
184
- "defaultValue": null,
185
- "referencedVars": [],
186
- "variant": ".close"
172
+ "name": "headerCell"
173
+ },
174
+ {
175
+ "name": "row"
187
176
  },
177
+ {
178
+ "name": "cell"
179
+ },
180
+ {
181
+ "name": "emptyRow"
182
+ },
183
+ {
184
+ "name": "emptyState"
185
+ }
186
+ ],
187
+ "cssVariables": [
188
188
  {
189
189
  "name": "--hover-transition-duration",
190
190
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -192,27 +192,95 @@
192
192
  "referencedVars": [
193
193
  "--hover-transition-enter-duration"
194
194
  ],
195
- "variant": ".close[data-hovered=\"true\"]"
195
+ "variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
196
196
  }
197
197
  ]
198
198
  },
199
- "tabs": {
200
- "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",
199
+ "textarea": {
200
+ "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",
201
201
  "styleableParts": [
202
202
  {
203
203
  "name": "root"
204
204
  },
205
205
  {
206
- "name": "indicator"
206
+ "name": "container"
207
207
  },
208
208
  {
209
- "name": "icon.left"
209
+ "name": "surface"
210
210
  },
211
211
  {
212
- "name": "icon.right"
212
+ "name": "scrollWrapper"
213
+ },
214
+ {
215
+ "name": "resizeHandle.both"
216
+ },
217
+ {
218
+ "name": "resizeHandle.x"
219
+ },
220
+ {
221
+ "name": "resizeHandle.y"
222
+ },
223
+ {
224
+ "name": "characterCount"
213
225
  }
214
226
  ],
215
227
  "cssVariables": [
228
+ {
229
+ "name": "--padding-inline",
230
+ "value": "0.75rem",
231
+ "defaultValue": null,
232
+ "referencedVars": [],
233
+ "variant": ".textarea"
234
+ },
235
+ {
236
+ "name": "--padding-block",
237
+ "value": "0.5rem",
238
+ "defaultValue": null,
239
+ "referencedVars": [],
240
+ "variant": ".textarea"
241
+ },
242
+ {
243
+ "name": "--padding-inline",
244
+ "value": "0.5rem",
245
+ "defaultValue": null,
246
+ "referencedVars": [],
247
+ "variant": ".size-sm"
248
+ },
249
+ {
250
+ "name": "--padding-block",
251
+ "value": "0.25rem",
252
+ "defaultValue": null,
253
+ "referencedVars": [],
254
+ "variant": ".size-sm"
255
+ },
256
+ {
257
+ "name": "--padding-inline",
258
+ "value": "0.75rem",
259
+ "defaultValue": null,
260
+ "referencedVars": [],
261
+ "variant": ".size-md"
262
+ },
263
+ {
264
+ "name": "--padding-block",
265
+ "value": "0.5rem",
266
+ "defaultValue": null,
267
+ "referencedVars": [],
268
+ "variant": ".size-md"
269
+ },
270
+ {
271
+ "name": "--padding-inline",
272
+ "value": "1rem",
273
+ "defaultValue": null,
274
+ "referencedVars": [],
275
+ "variant": ".size-lg"
276
+ },
277
+ {
278
+ "name": "--padding-block",
279
+ "value": "0.75rem",
280
+ "defaultValue": null,
281
+ "referencedVars": [],
282
+ "variant": ".size-lg"
283
+ },
216
284
  {
217
285
  "name": "--hover-transition-duration",
218
286
  "value": "var(--hover-transition-enter-duration, 0ms)",
@@ -220,14 +288,7 @@
220
288
  "referencedVars": [
221
289
  "--hover-transition-enter-duration"
222
290
  ],
223
- "variant": ".trigger[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
224
- },
225
- {
226
- "name": "--disabled-opacity",
227
- "value": "0.5",
228
- "defaultValue": null,
229
- "referencedVars": [],
230
- "variant": ".trigger[data-disabled=\"true\"]"
291
+ "variant": ".resize-handle:hover::before,\n .resize-handle:hover::after"
231
292
  }
232
293
  ]
233
294
  },
@@ -383,67 +444,6 @@
383
444
  }
384
445
  ]
385
446
  },
386
- "table": {
387
- "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",
388
- "styleableParts": [
389
- {
390
- "name": "root"
391
- },
392
- {
393
- "name": "container"
394
- },
395
- {
396
- "name": "filterBar"
397
- },
398
- {
399
- "name": "filterGrid"
400
- },
401
- {
402
- "name": "filterLabel"
403
- },
404
- {
405
- "name": "filterInput"
406
- },
407
- {
408
- "name": "table"
409
- },
410
- {
411
- "name": "header"
412
- },
413
- {
414
- "name": "body"
415
- },
416
- {
417
- "name": "headerRow"
418
- },
419
- {
420
- "name": "headerCell"
421
- },
422
- {
423
- "name": "row"
424
- },
425
- {
426
- "name": "cell"
427
- },
428
- {
429
- "name": "emptyRow"
430
- },
431
- {
432
- "name": "emptyState"
433
- }
434
- ],
435
- "cssVariables": [
436
- {
437
- "name": "--hover-transition-duration",
438
- "value": "var(--hover-transition-enter-duration, 0ms)",
439
- "defaultValue": "0ms",
440
- "referencedVars": [
441
- "--hover-transition-enter-duration"
442
- ],
443
- "variant": ".row:hover:not([data-disabled=\"true\"]) .cell"
444
- }
445
- ]
446
- },
447
447
  "select": {
448
448
  "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",
449
449
  "styleableParts": [
@@ -753,34 +753,6 @@
753
753
  ],
754
754
  "cssVariables": []
755
755
  },
756
- "path": {
757
- "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",
758
- "styleableParts": [
759
- {
760
- "name": "root"
761
- },
762
- {
763
- "name": "link"
764
- },
765
- {
766
- "name": "list"
767
- },
768
- {
769
- "name": "separator"
770
- }
771
- ],
772
- "cssVariables": [
773
- {
774
- "name": "--hover-transition-duration",
775
- "value": "var(--hover-transition-enter-duration, 0ms)",
776
- "defaultValue": "0ms",
777
- "referencedVars": [
778
- "--hover-transition-enter-duration"
779
- ],
780
- "variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
781
- }
782
- ]
783
- },
784
756
  "popover": {
785
757
  "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",
786
758
  "styleableParts": [
@@ -825,6 +797,34 @@
825
797
  }
826
798
  ]
827
799
  },
800
+ "path": {
801
+ "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",
802
+ "styleableParts": [
803
+ {
804
+ "name": "root"
805
+ },
806
+ {
807
+ "name": "link"
808
+ },
809
+ {
810
+ "name": "list"
811
+ },
812
+ {
813
+ "name": "separator"
814
+ }
815
+ ],
816
+ "cssVariables": [
817
+ {
818
+ "name": "--hover-transition-duration",
819
+ "value": "var(--hover-transition-enter-duration, 0ms)",
820
+ "defaultValue": "0ms",
821
+ "referencedVars": [
822
+ "--hover-transition-enter-duration"
823
+ ],
824
+ "variant": ".link[data-hovered=\"true\"]:not([data-disabled=\"true\"]):not([data-selected=\"true\"])"
825
+ }
826
+ ]
827
+ },
828
828
  "panel": {
829
829
  "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",
830
830
  "styleableParts": [
@@ -1031,29 +1031,97 @@
1031
1031
  "referencedVars": [
1032
1032
  "--ease-snappy-pop"
1033
1033
  ],
1034
- "variant": ":global(.menu) .content,\n .sub-content"
1034
+ "variant": ":global(.menu) .content,\n .sub-content"
1035
+ },
1036
+ {
1037
+ "name": "--disabled-opacity",
1038
+ "value": "0.5",
1039
+ "defaultValue": null,
1040
+ "referencedVars": [],
1041
+ "variant": ":global(.menu) .content,\n .sub-content"
1042
+ }
1043
+ ]
1044
+ },
1045
+ "mask": {
1046
+ "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",
1047
+ "styleableParts": [
1048
+ {
1049
+ "name": "root"
1050
+ },
1051
+ {
1052
+ "name": "gradient"
1053
+ }
1054
+ ],
1055
+ "cssVariables": []
1056
+ },
1057
+ "label": {
1058
+ "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",
1059
+ "styleableParts": [
1060
+ {
1061
+ "name": "root"
1062
+ },
1063
+ {
1064
+ "name": "requiredIndicator"
1065
+ },
1066
+ {
1067
+ "name": "helperText"
1068
+ }
1069
+ ],
1070
+ "cssVariables": [
1071
+ {
1072
+ "name": "--background",
1073
+ "value": "transparent",
1074
+ "defaultValue": null,
1075
+ "referencedVars": [],
1076
+ "variant": ".label"
1077
+ },
1078
+ {
1079
+ "name": "--foreground",
1080
+ "value": "var(--foreground-primary)",
1081
+ "defaultValue": null,
1082
+ "referencedVars": [
1083
+ "--foreground-primary"
1084
+ ],
1085
+ "variant": ".label"
1086
+ },
1087
+ {
1088
+ "name": "--foreground-disabled",
1089
+ "value": "var(--foreground-secondary)",
1090
+ "defaultValue": null,
1091
+ "referencedVars": [
1092
+ "--foreground-secondary"
1093
+ ],
1094
+ "variant": ".label"
1095
+ },
1096
+ {
1097
+ "name": "--foreground-error",
1098
+ "value": "var(--danger-600)",
1099
+ "defaultValue": null,
1100
+ "referencedVars": [
1101
+ "--danger-600"
1102
+ ],
1103
+ "variant": ".label"
1104
+ },
1105
+ {
1106
+ "name": "--helper-foreground",
1107
+ "value": "var(--foreground-secondary)",
1108
+ "defaultValue": null,
1109
+ "referencedVars": [
1110
+ "--foreground-secondary"
1111
+ ],
1112
+ "variant": ".label > .helper-text"
1035
1113
  },
1036
1114
  {
1037
- "name": "--disabled-opacity",
1038
- "value": "0.5",
1115
+ "name": "--helper-foreground-error",
1116
+ "value": "var(--danger-600)",
1039
1117
  "defaultValue": null,
1040
- "referencedVars": [],
1041
- "variant": ":global(.menu) .content,\n .sub-content"
1118
+ "referencedVars": [
1119
+ "--danger-600"
1120
+ ],
1121
+ "variant": ".label > .helper-text"
1042
1122
  }
1043
1123
  ]
1044
1124
  },
1045
- "mask": {
1046
- "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",
1047
- "styleableParts": [
1048
- {
1049
- "name": "root"
1050
- },
1051
- {
1052
- "name": "gradient"
1053
- }
1054
- ],
1055
- "cssVariables": []
1056
- },
1057
1125
  "list": {
1058
1126
  "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",
1059
1127
  "styleableParts": [
@@ -1142,74 +1210,6 @@
1142
1210
  }
1143
1211
  ]
1144
1212
  },
1145
- "label": {
1146
- "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",
1147
- "styleableParts": [
1148
- {
1149
- "name": "root"
1150
- },
1151
- {
1152
- "name": "requiredIndicator"
1153
- },
1154
- {
1155
- "name": "helperText"
1156
- }
1157
- ],
1158
- "cssVariables": [
1159
- {
1160
- "name": "--background",
1161
- "value": "transparent",
1162
- "defaultValue": null,
1163
- "referencedVars": [],
1164
- "variant": ".label"
1165
- },
1166
- {
1167
- "name": "--foreground",
1168
- "value": "var(--foreground-primary)",
1169
- "defaultValue": null,
1170
- "referencedVars": [
1171
- "--foreground-primary"
1172
- ],
1173
- "variant": ".label"
1174
- },
1175
- {
1176
- "name": "--foreground-disabled",
1177
- "value": "var(--foreground-secondary)",
1178
- "defaultValue": null,
1179
- "referencedVars": [
1180
- "--foreground-secondary"
1181
- ],
1182
- "variant": ".label"
1183
- },
1184
- {
1185
- "name": "--foreground-error",
1186
- "value": "var(--danger-600)",
1187
- "defaultValue": null,
1188
- "referencedVars": [
1189
- "--danger-600"
1190
- ],
1191
- "variant": ".label"
1192
- },
1193
- {
1194
- "name": "--helper-foreground",
1195
- "value": "var(--foreground-secondary)",
1196
- "defaultValue": null,
1197
- "referencedVars": [
1198
- "--foreground-secondary"
1199
- ],
1200
- "variant": ".label > .helper-text"
1201
- },
1202
- {
1203
- "name": "--helper-foreground-error",
1204
- "value": "var(--danger-600)",
1205
- "defaultValue": null,
1206
- "referencedVars": [
1207
- "--danger-600"
1208
- ],
1209
- "variant": ".label > .helper-text"
1210
- }
1211
- ]
1212
- },
1213
1213
  "input": {
1214
1214
  "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",
1215
1215
  "styleableParts": [
@@ -2248,6 +2248,88 @@
2248
2248
  }
2249
2249
  ]
2250
2250
  },
2251
+ "code": {
2252
+ "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",
2253
+ "styleableParts": [
2254
+ {
2255
+ "name": "root"
2256
+ },
2257
+ {
2258
+ "name": "header"
2259
+ },
2260
+ {
2261
+ "name": "body"
2262
+ },
2263
+ {
2264
+ "name": "viewport"
2265
+ }
2266
+ ],
2267
+ "cssVariables": [
2268
+ {
2269
+ "name": "--border-color",
2270
+ "value": "var(--background-700)",
2271
+ "defaultValue": null,
2272
+ "referencedVars": [
2273
+ "--background-700"
2274
+ ],
2275
+ "variant": ".code"
2276
+ },
2277
+ {
2278
+ "name": "--header-bg",
2279
+ "value": "mix(var(--background-900) 90%, transparent)",
2280
+ "defaultValue": null,
2281
+ "referencedVars": [
2282
+ "--background-900"
2283
+ ],
2284
+ "variant": ".code"
2285
+ },
2286
+ {
2287
+ "name": "--scroll-track-bg",
2288
+ "value": "mix(var(--background-950) 50%, transparent)",
2289
+ "defaultValue": null,
2290
+ "referencedVars": [
2291
+ "--background-950"
2292
+ ],
2293
+ "variant": ".code"
2294
+ },
2295
+ {
2296
+ "name": "--hover-transition-duration",
2297
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2298
+ "defaultValue": "0ms",
2299
+ "referencedVars": [
2300
+ "--hover-transition-enter-duration"
2301
+ ],
2302
+ "variant": ".viewport::-webkit-scrollbar-thumb:hover"
2303
+ },
2304
+ {
2305
+ "name": "--hover-transition-duration",
2306
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2307
+ "defaultValue": "0ms",
2308
+ "referencedVars": [
2309
+ "--hover-transition-enter-duration"
2310
+ ],
2311
+ "variant": ".expand-button:hover"
2312
+ },
2313
+ {
2314
+ "name": "--hover-transition-duration",
2315
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2316
+ "defaultValue": "0ms",
2317
+ "referencedVars": [
2318
+ "--hover-transition-enter-duration"
2319
+ ],
2320
+ "variant": ".copy-button:hover"
2321
+ },
2322
+ {
2323
+ "name": "--hover-transition-duration",
2324
+ "value": "var(--hover-transition-enter-duration, 0ms)",
2325
+ "defaultValue": "0ms",
2326
+ "referencedVars": [
2327
+ "--hover-transition-enter-duration"
2328
+ ],
2329
+ "variant": ".copy-button:focus,\n .body:hover .copy-button"
2330
+ }
2331
+ ]
2332
+ },
2251
2333
  "color": {
2252
2334
  "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",
2253
2335
  "styleableParts": [
@@ -2757,88 +2839,6 @@
2757
2839
  }
2758
2840
  ]
2759
2841
  },
2760
- "code": {
2761
- "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",
2762
- "styleableParts": [
2763
- {
2764
- "name": "root"
2765
- },
2766
- {
2767
- "name": "header"
2768
- },
2769
- {
2770
- "name": "body"
2771
- },
2772
- {
2773
- "name": "viewport"
2774
- }
2775
- ],
2776
- "cssVariables": [
2777
- {
2778
- "name": "--border-color",
2779
- "value": "var(--background-700)",
2780
- "defaultValue": null,
2781
- "referencedVars": [
2782
- "--background-700"
2783
- ],
2784
- "variant": ".code"
2785
- },
2786
- {
2787
- "name": "--header-bg",
2788
- "value": "mix(var(--background-900) 90%, transparent)",
2789
- "defaultValue": null,
2790
- "referencedVars": [
2791
- "--background-900"
2792
- ],
2793
- "variant": ".code"
2794
- },
2795
- {
2796
- "name": "--scroll-track-bg",
2797
- "value": "mix(var(--background-950) 50%, transparent)",
2798
- "defaultValue": null,
2799
- "referencedVars": [
2800
- "--background-950"
2801
- ],
2802
- "variant": ".code"
2803
- },
2804
- {
2805
- "name": "--hover-transition-duration",
2806
- "value": "var(--hover-transition-enter-duration, 0ms)",
2807
- "defaultValue": "0ms",
2808
- "referencedVars": [
2809
- "--hover-transition-enter-duration"
2810
- ],
2811
- "variant": ".viewport::-webkit-scrollbar-thumb:hover"
2812
- },
2813
- {
2814
- "name": "--hover-transition-duration",
2815
- "value": "var(--hover-transition-enter-duration, 0ms)",
2816
- "defaultValue": "0ms",
2817
- "referencedVars": [
2818
- "--hover-transition-enter-duration"
2819
- ],
2820
- "variant": ".expand-button:hover"
2821
- },
2822
- {
2823
- "name": "--hover-transition-duration",
2824
- "value": "var(--hover-transition-enter-duration, 0ms)",
2825
- "defaultValue": "0ms",
2826
- "referencedVars": [
2827
- "--hover-transition-enter-duration"
2828
- ],
2829
- "variant": ".copy-button:hover"
2830
- },
2831
- {
2832
- "name": "--hover-transition-duration",
2833
- "value": "var(--hover-transition-enter-duration, 0ms)",
2834
- "defaultValue": "0ms",
2835
- "referencedVars": [
2836
- "--hover-transition-enter-duration"
2837
- ],
2838
- "variant": ".copy-button:focus,\n .body:hover .copy-button"
2839
- }
2840
- ]
2841
- },
2842
2842
  "checkbox": {
2843
2843
  "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",
2844
2844
  "styleableParts": [