@jbpark/ui-kit 6.2.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tag.d.mts +11 -10
- package/dist/Tag.d.mts.map +1 -1
- package/dist/Tag.mjs +5 -21
- package/dist/Tag.mjs.map +1 -1
- package/dist/style.css +39 -56
- package/package.json +1 -1
- package/dist/lib/colors.mjs +0 -28
- package/dist/lib/colors.mjs.map +0 -1
package/dist/Tag.d.mts
CHANGED
|
@@ -6,18 +6,19 @@ type NativeSpanProps = React$1.ComponentProps<'span'> & {
|
|
|
6
6
|
};
|
|
7
7
|
interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {
|
|
8
8
|
/**
|
|
9
|
-
* Fill style, aligned with `Button`'s vocabulary.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* @remarks `'default'` will be removed in a future major.
|
|
9
|
+
* Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0
|
|
10
|
+
* `'default'` spelling was removed — use `'filled'`, which renders
|
|
11
|
+
* identically.
|
|
14
12
|
*/
|
|
15
|
-
variant?: 'filled' | 'outlined'
|
|
13
|
+
variant?: 'filled' | 'outlined';
|
|
16
14
|
/**
|
|
17
|
-
* Colour
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
15
|
+
* Colour. Every value — the semantic states (`primary`/`success`/`warning`/
|
|
16
|
+
* `danger`) as well as the palette shared with `Button` (`blue`, `red`,
|
|
17
|
+
* `gold`, …) — resolves through the same `data-color` + `--tag-*` system
|
|
18
|
+
* (#320), so any of them can be re-themed the same way.
|
|
19
|
+
*
|
|
20
|
+
* `success`/`warning` have no `Button` counterpart on purpose: a Tag marks
|
|
21
|
+
* state, which is why antd's Tag also carries them while its Button does not.
|
|
21
22
|
*/
|
|
22
23
|
color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;
|
|
23
24
|
}
|
package/dist/Tag.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;KAYK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK
|
|
1
|
+
{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;KAYK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK;;;;;;EAMlC;;;;;;;;;;EAUA,mEAC6D;;cA+BzD,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}
|
package/dist/Tag.mjs
CHANGED
|
@@ -2,39 +2,23 @@
|
|
|
2
2
|
import { cn } from "./utils.mjs";
|
|
3
3
|
import { useConfig } from "./providers/config/context.mjs";
|
|
4
4
|
import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
|
|
5
|
-
import { isPresetColor } from "./lib/colors.mjs";
|
|
6
5
|
import "react";
|
|
7
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
8
7
|
import { jsx } from "react/jsx-runtime";
|
|
9
8
|
//#region src/components/atoms/tag.tsx
|
|
10
9
|
const TAG_BASE = cn(INTERACTIVE_CHASSIS, "border w-fit whitespace-nowrap overflow-hidden", "text-xs font-medium gap-1 transition-[color,box-shadow]", "[&>svg]:size-3 [&>svg]:pointer-events-none", "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground");
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
primary: "border-transparent bg-primary/10 text-primary",
|
|
14
|
-
success: "border-transparent bg-green-500/10 text-green-600 dark:text-green-400",
|
|
15
|
-
warning: "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
|
|
16
|
-
danger: "border-transparent bg-destructive/10 text-destructive"
|
|
17
|
-
};
|
|
18
|
-
const outlinedColorClasses = {
|
|
19
|
-
default: "border-border text-foreground",
|
|
20
|
-
primary: "border-primary text-primary",
|
|
21
|
-
success: "border-green-500 text-green-600 dark:text-green-400",
|
|
22
|
-
warning: "border-yellow-500 text-yellow-600 dark:text-yellow-400",
|
|
23
|
-
danger: "border-destructive text-destructive"
|
|
24
|
-
};
|
|
25
|
-
const presetFillClasses = cn("border-transparent", "bg-[color-mix(in_oklch,var(--tag-bg),transparent_90%)]", "text-(--tag-bg)");
|
|
26
|
-
const presetOutlinedClasses = cn("border-(--tag-bg) text-(--tag-bg)");
|
|
10
|
+
const fillClasses = cn("border-transparent bg-(--tag-tint) text-(--tag-fg)");
|
|
11
|
+
const outlinedClasses = cn("border-(--tag-bg) text-(--tag-fg)");
|
|
27
12
|
const Tag = ({ className, variant, color, asChild = false, children, ...props }) => {
|
|
28
13
|
const { defaultProps } = useConfig();
|
|
29
14
|
const tagDefaults = defaultProps?.tag;
|
|
30
15
|
const resolvedVariant = variant ?? tagDefaults?.variant ?? "filled";
|
|
31
16
|
const resolvedColor = color ?? tagDefaults?.color ?? "default";
|
|
32
|
-
const isOutlined = resolvedVariant === "outlined";
|
|
33
|
-
const preset = isPresetColor(resolvedColor);
|
|
34
17
|
return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
|
|
35
18
|
"data-slot": "badge",
|
|
36
|
-
"data-color":
|
|
37
|
-
|
|
19
|
+
"data-color": resolvedColor,
|
|
20
|
+
"data-variant": resolvedVariant,
|
|
21
|
+
className: cn(TAG_BASE, "rounded-full px-2.5 py-1", "text-xs font-medium", resolvedVariant === "outlined" ? outlinedClasses : fillClasses, className),
|
|
38
22
|
...props,
|
|
39
23
|
children
|
|
40
24
|
});
|
package/dist/Tag.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type PresetColor
|
|
1
|
+
{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type PresetColor } from '../../lib/colors';\n\ntype NativeSpanProps = React.ComponentProps<'span'> & {\n asChild?: boolean;\n};\n\nexport interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {\n /**\n * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0\n * `'default'` spelling was removed — use `'filled'`, which renders\n * identically.\n */\n variant?: 'filled' | 'outlined';\n /**\n * Colour. Every value — the semantic states (`primary`/`success`/`warning`/\n * `danger`) as well as the palette shared with `Button` (`blue`, `red`,\n * `gold`, …) — resolves through the same `data-color` + `--tag-*` system\n * (#320), so any of them can be re-themed the same way.\n *\n * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks\n * state, which is why antd's Tag also carries them while its Button does not.\n */\n color?:\n 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;\n}\n\n// Base absorbed from core/badge's cva base + its `outline` variant, which Tag\n// always rendered as (#278 ③ / #294 Phase 4). The shared focus/aria/centering\n// set lives in INTERACTIVE_CHASSIS; a Tag adds badge geometry and its svg\n// sizing but — unlike Button — no `disabled:*` (a Tag is not disableable). The\n// rounded/padding leftovers are overridden by the atom classes below exactly as\n// before, so the rendered output is unchanged (verified against a pre-refactor\n// render matrix).\nconst TAG_BASE = cn(\n INTERACTIVE_CHASSIS,\n 'border w-fit whitespace-nowrap overflow-hidden',\n 'text-xs font-medium gap-1 transition-[color,box-shadow]',\n '[&>svg]:size-3 [&>svg]:pointer-events-none',\n 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n);\n\n// Every colour — semantic states and shared presets alike — resolves from the\n// `--tag-*` custom properties that `globals.css` sets per `data-color` (#320).\n// Before 7.0 only the presets took this path while the states carried bespoke\n// Tailwind classes, which meant `[data-color]` hooks and `--tag-*` overrides\n// worked on some colours but silently not on others.\n//\n// --tag-bg the hue; the border in `outlined`\n// --tag-fg text colour (defaults to --tag-bg)\n// --tag-tint the fill behind `filled` (defaults to a 10% --tag-bg wash)\nconst fillClasses = cn('border-transparent bg-(--tag-tint) text-(--tag-fg)');\n\nconst outlinedClasses = cn('border-(--tag-bg) text-(--tag-fg)');\n\nconst Tag = ({\n className,\n variant,\n color,\n asChild = false,\n children,\n ...props\n}: Props) => {\n const { defaultProps } = useConfig();\n const tagDefaults = defaultProps?.tag as\n Partial<Pick<Props, 'variant' | 'color'>> | undefined;\n // An explicit prop wins over a `Config` default, which wins over the built-in\n // — the same resolution order `Button` uses.\n const resolvedVariant = variant ?? tagDefaults?.variant ?? 'filled';\n const resolvedColor = color ?? tagDefaults?.color ?? 'default';\n const isOutlined = resolvedVariant === 'outlined';\n const Comp = asChild ? Slot : 'span';\n\n return (\n <Comp\n data-slot=\"badge\"\n // Emitted for every colour, not just the presets, so consumers can hook\n // `[data-color]` / `[data-variant]` uniformly. `data-variant` is what\n // lets `globals.css` give `default` a different text colour when\n // outlined without reintroducing a second class path here.\n data-color={resolvedColor}\n data-variant={resolvedVariant}\n className={cn(\n TAG_BASE,\n 'rounded-full px-2.5 py-1',\n 'text-xs font-medium',\n isOutlined ? outlinedClasses : fillClasses,\n className,\n //\n )}\n {...props}\n >\n {children}\n </Comp>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AA2CA,MAAM,WAAW,GACf,qBACA,kDACA,2DACA,8CACA,wEACF;AAWA,MAAM,cAAc,GAAG,oDAAoD;AAE3E,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D,MAAM,OAAO,EACX,WACA,SACA,OACA,UAAU,OACV,UACA,GAAG,YACQ;CACX,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,cAAc,cAAc;CAIlC,MAAM,kBAAkB,WAAW,aAAa,WAAW;CAC3D,MAAM,gBAAgB,SAAS,aAAa,SAAS;CAIrD,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EAKV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,UACA,4BACA,uBAfa,oBAAoB,aAgBpB,kBAAkB,aAC/B,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}
|
package/dist/style.css
CHANGED
|
@@ -6,11 +6,7 @@
|
|
|
6
6
|
--font-mono: var(--font-geist-mono);
|
|
7
7
|
--color-red-400: oklch(70.4% .191 22.216);
|
|
8
8
|
--color-yellow-400: oklch(85.2% .199 91.936);
|
|
9
|
-
--color-yellow-500: oklch(79.5% .184 86.047);
|
|
10
|
-
--color-yellow-600: oklch(68.1% .162 75.834);
|
|
11
9
|
--color-green-400: oklch(79.2% .209 151.711);
|
|
12
|
-
--color-green-500: oklch(72.3% .219 149.579);
|
|
13
|
-
--color-green-600: oklch(62.7% .194 149.214);
|
|
14
10
|
--color-blue-400: oklch(70.7% .165 254.624);
|
|
15
11
|
--color-black: #000;
|
|
16
12
|
--color-white: #fff;
|
|
@@ -149,6 +145,41 @@
|
|
|
149
145
|
[data-slot="button"][data-color="gold"] {
|
|
150
146
|
--btn-bg: #f59e0b;
|
|
151
147
|
}
|
|
148
|
+
[data-slot="badge"][data-color] {
|
|
149
|
+
--tag-fg: var(--tag-bg);
|
|
150
|
+
--tag-tint: var(--tag-bg);
|
|
151
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
152
|
+
--tag-tint: color-mix(in oklab, var(--tag-bg), transparent 90%);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
[data-slot="badge"][data-color="default"] {
|
|
156
|
+
--tag-bg: var(--border);
|
|
157
|
+
--tag-tint: var(--muted);
|
|
158
|
+
--tag-fg: var(--muted-foreground);
|
|
159
|
+
}
|
|
160
|
+
[data-slot="badge"][data-color="default"][data-variant="outlined"] {
|
|
161
|
+
--tag-fg: var(--foreground);
|
|
162
|
+
}
|
|
163
|
+
[data-slot="badge"][data-color="primary"] {
|
|
164
|
+
--tag-bg: var(--primary);
|
|
165
|
+
}
|
|
166
|
+
[data-slot="badge"][data-color="danger"] {
|
|
167
|
+
--tag-bg: var(--destructive);
|
|
168
|
+
}
|
|
169
|
+
[data-slot="badge"][data-color="success"] {
|
|
170
|
+
--tag-bg: oklch(72.3% .219 149.579);
|
|
171
|
+
--tag-fg: oklch(62.7% .194 149.214);
|
|
172
|
+
}
|
|
173
|
+
[data-slot="badge"][data-color="warning"] {
|
|
174
|
+
--tag-bg: oklch(79.5% .184 86.047);
|
|
175
|
+
--tag-fg: oklch(68.1% .162 75.834);
|
|
176
|
+
}
|
|
177
|
+
:is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
|
|
178
|
+
--tag-fg: oklch(79.2% .209 151.711);
|
|
179
|
+
}
|
|
180
|
+
:is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
|
|
181
|
+
--tag-fg: oklch(85.2% .199 91.936);
|
|
182
|
+
}
|
|
152
183
|
[data-slot="badge"][data-color="blue"] {
|
|
153
184
|
--tag-bg: #3b82f6;
|
|
154
185
|
}
|
|
@@ -1096,12 +1127,6 @@
|
|
|
1096
1127
|
.border-current {
|
|
1097
1128
|
border-color: currentcolor;
|
|
1098
1129
|
}
|
|
1099
|
-
.border-destructive {
|
|
1100
|
-
border-color: var(--destructive);
|
|
1101
|
-
}
|
|
1102
|
-
.border-green-500 {
|
|
1103
|
-
border-color: var(--color-green-500);
|
|
1104
|
-
}
|
|
1105
1130
|
.border-input {
|
|
1106
1131
|
border-color: var(--input);
|
|
1107
1132
|
}
|
|
@@ -1111,17 +1136,11 @@
|
|
|
1111
1136
|
.border-transparent {
|
|
1112
1137
|
border-color: transparent;
|
|
1113
1138
|
}
|
|
1114
|
-
.border-yellow-500 {
|
|
1115
|
-
border-color: var(--color-yellow-500);
|
|
1116
|
-
}
|
|
1117
1139
|
.bg-\(--btn-bg\) {
|
|
1118
1140
|
background-color: var(--btn-bg);
|
|
1119
1141
|
}
|
|
1120
|
-
.bg-\
|
|
1121
|
-
background-color: var(--tag-
|
|
1122
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1123
|
-
background-color: color-mix(in oklch,var(--tag-bg),transparent 90%);
|
|
1124
|
-
}
|
|
1142
|
+
.bg-\(--tag-tint\) {
|
|
1143
|
+
background-color: var(--tag-tint);
|
|
1125
1144
|
}
|
|
1126
1145
|
.bg-accent {
|
|
1127
1146
|
background-color: var(--accent);
|
|
@@ -1156,18 +1175,6 @@
|
|
|
1156
1175
|
.bg-destructive {
|
|
1157
1176
|
background-color: var(--destructive);
|
|
1158
1177
|
}
|
|
1159
|
-
.bg-destructive\/10 {
|
|
1160
|
-
background-color: var(--destructive);
|
|
1161
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1162
|
-
background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
|
|
1163
|
-
}
|
|
1164
|
-
}
|
|
1165
|
-
.bg-green-500\/10 {
|
|
1166
|
-
background-color: color-mix(in srgb, oklch(72.3% .219 149.579) 10%, transparent);
|
|
1167
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1168
|
-
background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
|
|
1169
|
-
}
|
|
1170
|
-
}
|
|
1171
1178
|
.bg-inherit {
|
|
1172
1179
|
background-color: inherit;
|
|
1173
1180
|
}
|
|
@@ -1183,12 +1190,6 @@
|
|
|
1183
1190
|
.bg-primary {
|
|
1184
1191
|
background-color: var(--primary);
|
|
1185
1192
|
}
|
|
1186
|
-
.bg-primary\/10 {
|
|
1187
|
-
background-color: var(--primary);
|
|
1188
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1189
|
-
background-color: color-mix(in oklab, var(--primary) 10%, transparent);
|
|
1190
|
-
}
|
|
1191
|
-
}
|
|
1192
1193
|
.bg-primary\/20 {
|
|
1193
1194
|
background-color: var(--primary);
|
|
1194
1195
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -1201,12 +1202,6 @@
|
|
|
1201
1202
|
.bg-transparent {
|
|
1202
1203
|
background-color: transparent;
|
|
1203
1204
|
}
|
|
1204
|
-
.bg-yellow-500\/10 {
|
|
1205
|
-
background-color: color-mix(in srgb, oklch(79.5% .184 86.047) 10%, transparent);
|
|
1206
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1207
|
-
background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
|
|
1208
|
-
}
|
|
1209
|
-
}
|
|
1210
1205
|
.fill-primary {
|
|
1211
1206
|
fill: var(--primary);
|
|
1212
1207
|
}
|
|
@@ -1415,8 +1410,8 @@
|
|
|
1415
1410
|
.text-\(--btn-fg\) {
|
|
1416
1411
|
color: var(--btn-fg);
|
|
1417
1412
|
}
|
|
1418
|
-
.text-\(--tag-
|
|
1419
|
-
color: var(--tag-
|
|
1413
|
+
.text-\(--tag-fg\) {
|
|
1414
|
+
color: var(--tag-fg);
|
|
1420
1415
|
}
|
|
1421
1416
|
.text-accent-foreground {
|
|
1422
1417
|
color: var(--accent-foreground);
|
|
@@ -1439,9 +1434,6 @@
|
|
|
1439
1434
|
.text-green-400 {
|
|
1440
1435
|
color: var(--color-green-400);
|
|
1441
1436
|
}
|
|
1442
|
-
.text-green-600 {
|
|
1443
|
-
color: var(--color-green-600);
|
|
1444
|
-
}
|
|
1445
1437
|
.text-muted-foreground {
|
|
1446
1438
|
color: var(--muted-foreground);
|
|
1447
1439
|
}
|
|
@@ -1466,9 +1458,6 @@
|
|
|
1466
1458
|
.text-yellow-400 {
|
|
1467
1459
|
color: var(--color-yellow-400);
|
|
1468
1460
|
}
|
|
1469
|
-
.text-yellow-600 {
|
|
1470
|
-
color: var(--color-yellow-600);
|
|
1471
|
-
}
|
|
1472
1461
|
.lowercase {
|
|
1473
1462
|
text-transform: lowercase;
|
|
1474
1463
|
}
|
|
@@ -2604,12 +2593,6 @@
|
|
|
2604
2593
|
background-color: color-mix(in oklab, var(--input) 30%, transparent);
|
|
2605
2594
|
}
|
|
2606
2595
|
}
|
|
2607
|
-
.dark\:text-green-400:is(.dark *, [data-theme="dark"] *) {
|
|
2608
|
-
color: var(--color-green-400);
|
|
2609
|
-
}
|
|
2610
|
-
.dark\:text-yellow-400:is(.dark *, [data-theme="dark"] *) {
|
|
2611
|
-
color: var(--color-yellow-400);
|
|
2612
|
-
}
|
|
2613
2596
|
@media (hover: hover) {
|
|
2614
2597
|
.dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
|
|
2615
2598
|
background-color: var(--accent);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
package/dist/lib/colors.mjs
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
//#region src/lib/colors.ts
|
|
2
|
-
/**
|
|
3
|
-
* The shared preset colour palette. `Button` and `Tag` both express these via
|
|
4
|
-
* the `--btn-*` / `--tag-*` custom-property systems in `globals.css` (keyed off
|
|
5
|
-
* `data-color`), so the same word means the same hue on either component
|
|
6
|
-
* (#320). Keep this list in sync with the `[data-color='…']` rules there.
|
|
7
|
-
*/
|
|
8
|
-
const PRESET_COLORS = [
|
|
9
|
-
"blue",
|
|
10
|
-
"purple",
|
|
11
|
-
"cyan",
|
|
12
|
-
"green",
|
|
13
|
-
"magenta",
|
|
14
|
-
"pink",
|
|
15
|
-
"red",
|
|
16
|
-
"orange",
|
|
17
|
-
"yellow",
|
|
18
|
-
"volcano",
|
|
19
|
-
"geekblue",
|
|
20
|
-
"lime",
|
|
21
|
-
"gold"
|
|
22
|
-
];
|
|
23
|
-
/** Runtime membership test — true when `color` is one of the shared presets. */
|
|
24
|
-
const isPresetColor = (color) => PRESET_COLORS.includes(color);
|
|
25
|
-
//#endregion
|
|
26
|
-
export { PRESET_COLORS, isPresetColor };
|
|
27
|
-
|
|
28
|
-
//# sourceMappingURL=colors.mjs.map
|
package/dist/lib/colors.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"colors.mjs","names":[],"sources":["../../src/lib/colors.ts"],"sourcesContent":["/**\n * The shared preset colour palette. `Button` and `Tag` both express these via\n * the `--btn-*` / `--tag-*` custom-property systems in `globals.css` (keyed off\n * `data-color`), so the same word means the same hue on either component\n * (#320). Keep this list in sync with the `[data-color='…']` rules there.\n */\nexport const PRESET_COLORS = [\n 'blue',\n 'purple',\n 'cyan',\n 'green',\n 'magenta',\n 'pink',\n 'red',\n 'orange',\n 'yellow',\n 'volcano',\n 'geekblue',\n 'lime',\n 'gold',\n] as const;\n\nexport type PresetColor = (typeof PRESET_COLORS)[number];\n\n/** Runtime membership test — true when `color` is one of the shared presets. */\nexport const isPresetColor = (color: string): color is PresetColor =>\n (PRESET_COLORS as readonly string[]).includes(color);\n"],"mappings":";;;;;;;AAMA,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAKA,MAAa,iBAAiB,UAC3B,cAAoC,SAAS,KAAK"}
|