@campfire-interactive/ui 0.8.0 → 0.9.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/index.js +10 -7
- package/package.json +56 -56
package/dist/index.js
CHANGED
|
@@ -405,6 +405,9 @@ function SelectSeparator({
|
|
|
405
405
|
}) {
|
|
406
406
|
return /* @__PURE__ */ jsx6(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
|
|
407
407
|
}
|
|
408
|
+
var EMPTY_VALUE = "__cfi_ui_empty__";
|
|
409
|
+
var toRadix = (v) => v === "" ? EMPTY_VALUE : v;
|
|
410
|
+
var fromRadix = (v) => v === EMPTY_VALUE ? "" : v;
|
|
408
411
|
function Select({
|
|
409
412
|
options,
|
|
410
413
|
value,
|
|
@@ -433,9 +436,9 @@ function Select({
|
|
|
433
436
|
return /* @__PURE__ */ jsxs6(
|
|
434
437
|
SelectRoot,
|
|
435
438
|
{
|
|
436
|
-
value,
|
|
437
|
-
onValueChange,
|
|
438
|
-
defaultValue,
|
|
439
|
+
value: toRadix(value),
|
|
440
|
+
onValueChange: onValueChange ? (v) => onValueChange(fromRadix(v)) : void 0,
|
|
441
|
+
defaultValue: toRadix(defaultValue),
|
|
439
442
|
disabled,
|
|
440
443
|
required,
|
|
441
444
|
name,
|
|
@@ -458,8 +461,8 @@ function Select({
|
|
|
458
461
|
(group, i) => group.name ? /* @__PURE__ */ jsxs6(SelectGroup, { children: [
|
|
459
462
|
i > 0 && /* @__PURE__ */ jsx6(SelectSeparator, {}),
|
|
460
463
|
/* @__PURE__ */ jsx6(SelectLabel, { children: group.name }),
|
|
461
|
-
group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
|
|
462
|
-
] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
|
|
464
|
+
group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: toRadix(o.value), disabled: o.disabled, children: o.label }, o.value))
|
|
465
|
+
] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: toRadix(o.value), disabled: o.disabled, children: o.label }, o.value))
|
|
463
466
|
),
|
|
464
467
|
options.length === 0 && /* @__PURE__ */ jsx6("p", { className: "cfi-ui-select-empty", children: emptyLabel })
|
|
465
468
|
] })
|
|
@@ -775,7 +778,7 @@ import * as RadixDialog from "@radix-ui/react-dialog";
|
|
|
775
778
|
import { X as X2 } from "lucide-react";
|
|
776
779
|
|
|
777
780
|
// src/Dialog.css
|
|
778
|
-
styleInject("@layer components {\n .cfi-ui-dialog__overlay {\n position: fixed;\n inset: 0;\n z-index: var(--cfi-ui-z-overlay);\n background: var(--cfi-ui-overlay);\n animation: cfi-ui-fade-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog {\n position: fixed;\n z-index: var(--cfi-ui-z-modal);\n display: flex;\n flex-direction: column;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-dialog[data-side=center] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(100vw - 2 * var(--cfi-ui-space-md));\n max-height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n border-radius: var(--cfi-ui-radius-lg);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=center][data-size=sm] {\n max-width: 26rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=md] {\n max-width: 34rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=lg] {\n max-width: 48rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=xl] {\n max-width: 64rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=full] {\n max-width: none;\n width: calc(100vw - 2 * var(--cfi-ui-space-xl));\n height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n max-height: none;\n }\n .cfi-ui-dialog[data-side=right],\n .cfi-ui-dialog[data-side=left] {\n top: 0;\n bottom: 0;\n height: 100vh;\n max-height: 100vh;\n width: calc(100vw - var(--cfi-ui-space-xl));\n border-radius: 0;\n border: 0;\n }\n .cfi-ui-dialog[data-side=right] {\n right: 0;\n border-right: 0;\n animation: cfi-ui-slide-in-right var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=left] {\n left: 0;\n border-left: 0;\n animation: cfi-ui-slide-in-left var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=right][data-size=sm],\n .cfi-ui-dialog[data-side=left][data-size=sm] {\n max-width: 22rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=md],\n .cfi-ui-dialog[data-side=left][data-size=md] {\n max-width: 24rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=lg],\n .cfi-ui-dialog[data-side=left][data-size=lg] {\n max-width: 42rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=xl],\n .cfi-ui-dialog[data-side=left][data-size=xl] {\n max-width: 56rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=full],\n .cfi-ui-dialog[data-side=left][data-size=full] {\n max-width: none;\n }\n .cfi-ui-dialog__header {\n flex: none;\n display: grid;\n gap: var(--cfi-ui-space-xs);\n padding: var(--cfi-ui-space-md) 3rem var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-dialog__title {\n margin: 0;\n font-size: var(--cfi-ui-text-lg);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-tight);\n letter-spacing: var(--cfi-letter-spacing-tight, -0.015em);\n color: var(--cfi-ui-content);\n text-wrap: balance;\n }\n .cfi-ui-sheet__title {\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-dialog__description {\n margin: 0;\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n :where(.cfi-ui-dialog__body) {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-md);\n }\n .cfi-ui-dialog__footer {\n flex: none;\n padding: var(--cfi-ui-space-md);\n border-top: 1px solid var(--cfi-ui-border);\n background: var(--cfi-ui-surface-sunken);\n }\n .cfi-ui-dialog[data-side=center] .cfi-ui-dialog__footer {\n border-bottom-left-radius: var(--cfi-ui-radius-lg);\n border-bottom-right-radius: var(--cfi-ui-radius-lg);\n }\n .cfi-ui-dialog__close {\n position: absolute;\n top: var(--cfi-ui-space-sm);\n right: var(--cfi-ui-space-sm);\n }\n .cfi-ui-dialog:not(:has(.cfi-ui-dialog__header)) .cfi-ui-dialog__body {\n padding-right: 3rem;\n }\n}\n");
|
|
781
|
+
styleInject("@layer components {\n .cfi-ui-dialog__overlay {\n position: fixed;\n inset: 0;\n z-index: var(--cfi-ui-z-overlay);\n background: var(--cfi-ui-overlay);\n animation: cfi-ui-fade-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog {\n position: fixed;\n z-index: var(--cfi-ui-z-modal);\n display: flex;\n flex-direction: column;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-dialog[data-side=center] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(100vw - 2 * var(--cfi-ui-space-md));\n max-height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n border-radius: var(--cfi-ui-radius-lg);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=center][data-size=sm] {\n max-width: 26rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=md] {\n max-width: 34rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=lg] {\n max-width: 48rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=xl] {\n max-width: 64rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=full] {\n max-width: none;\n width: calc(100vw - 2 * var(--cfi-ui-space-xl));\n height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n max-height: none;\n }\n .cfi-ui-dialog[data-side=right],\n .cfi-ui-dialog[data-side=left] {\n top: 0;\n bottom: 0;\n height: 100vh;\n max-height: 100vh;\n width: calc(100vw - var(--cfi-ui-space-xl));\n border-radius: 0;\n border: 0;\n }\n .cfi-ui-dialog[data-side=right] {\n right: 0;\n border-right: 0;\n animation: cfi-ui-slide-in-right var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=left] {\n left: 0;\n border-left: 0;\n animation: cfi-ui-slide-in-left var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=right][data-size=sm],\n .cfi-ui-dialog[data-side=left][data-size=sm] {\n max-width: 22rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=md],\n .cfi-ui-dialog[data-side=left][data-size=md] {\n max-width: 24rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=lg],\n .cfi-ui-dialog[data-side=left][data-size=lg] {\n max-width: 42rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=xl],\n .cfi-ui-dialog[data-side=left][data-size=xl] {\n max-width: 56rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=full],\n .cfi-ui-dialog[data-side=left][data-size=full] {\n max-width: none;\n }\n .cfi-ui-dialog__header {\n flex: none;\n display: grid;\n gap: var(--cfi-ui-space-xs);\n padding: var(--cfi-ui-space-md) 3rem var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-dialog__title {\n margin: 0;\n font-size: var(--cfi-ui-text-lg);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-tight);\n letter-spacing: var(--cfi-letter-spacing-tight, -0.015em);\n color: var(--cfi-ui-content);\n text-wrap: balance;\n }\n .cfi-ui-sheet__title {\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-dialog__description {\n margin: 0;\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n :where(.cfi-ui-dialog__body) {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-md);\n }\n .cfi-ui-dialog__footer {\n flex: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-md);\n border-top: 1px solid var(--cfi-ui-border);\n background: var(--cfi-ui-surface-sunken);\n }\n .cfi-ui-dialog[data-side=center] .cfi-ui-dialog__footer {\n border-bottom-left-radius: var(--cfi-ui-radius-lg);\n border-bottom-right-radius: var(--cfi-ui-radius-lg);\n }\n .cfi-ui-dialog__close {\n position: absolute;\n top: var(--cfi-ui-space-sm);\n right: var(--cfi-ui-space-sm);\n }\n .cfi-ui-dialog:not(:has(.cfi-ui-dialog__header)) .cfi-ui-dialog__body {\n padding-right: 3rem;\n }\n}\n");
|
|
779
782
|
|
|
780
783
|
// src/Dialog.tsx
|
|
781
784
|
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
@@ -2200,7 +2203,7 @@ function Pagination({
|
|
|
2200
2203
|
}
|
|
2201
2204
|
|
|
2202
2205
|
// src/ListToolbar.css
|
|
2203
|
-
styleInject("@layer components {\n :where(.cfi-ui-list-toolbar) {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-
|
|
2206
|
+
styleInject("@layer components {\n :where(.cfi-ui-list-toolbar) {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-md);\n min-width: 0;\n }\n .cfi-ui-list-toolbar__search {\n flex: 1 1 14rem;\n min-width: 0;\n max-width: 22rem;\n }\n .cfi-ui-list-toolbar__filters {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n flex: 0 1 auto;\n }\n .cfi-ui-list-toolbar__actions {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin-inline-start: auto;\n }\n @media (max-width: 40rem) {\n .cfi-ui-list-toolbar__search,\n .cfi-ui-list-toolbar__filters,\n .cfi-ui-list-toolbar__actions {\n flex: 1 1 100%;\n max-width: none;\n margin-inline-start: 0;\n }\n }\n}\n");
|
|
2204
2207
|
|
|
2205
2208
|
// src/ListToolbar.tsx
|
|
2206
2209
|
import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
|
package/package.json
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@campfire-interactive/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"types": "./dist/index.d.ts",
|
|
11
|
-
"import": "./dist/index.js"
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"files": [
|
|
15
|
-
"dist"
|
|
16
|
-
],
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "tsup",
|
|
19
|
-
"prepublishOnly": "npm run build",
|
|
20
|
-
"dev": "tsup --watch",
|
|
21
|
-
"test": "vitest run",
|
|
22
|
-
"typecheck": "tsc --noEmit"
|
|
23
|
-
},
|
|
24
|
-
"peerDependencies": {
|
|
25
|
-
"react": "^18.0.0 || ^19.0.0",
|
|
26
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
27
|
-
},
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"@campfire-interactive/design-tokens": "*",
|
|
30
|
-
"@radix-ui/react-accordion": "^1.2.12",
|
|
31
|
-
"@radix-ui/react-checkbox": "^1.3.3",
|
|
32
|
-
"@radix-ui/react-dialog": "^1.1.15",
|
|
33
|
-
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
34
|
-
"@radix-ui/react-popover": "^1.1.15",
|
|
35
|
-
"@radix-ui/react-select": "^2.2.6",
|
|
36
|
-
"@radix-ui/react-slider": "^1.3.6",
|
|
37
|
-
"@radix-ui/react-slot": "^1.2.3",
|
|
38
|
-
"@radix-ui/react-switch": "^1.2.6",
|
|
39
|
-
"@radix-ui/react-tabs": "^1.1.13",
|
|
40
|
-
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
41
|
-
"@radix-ui/react-tooltip": "^1.2.8",
|
|
42
|
-
"lucide-react": "^0.487.0"
|
|
43
|
-
},
|
|
44
|
-
"devDependencies": {
|
|
45
|
-
"@types/react": "^19.0.0",
|
|
46
|
-
"@types/react-dom": "^19.0.0",
|
|
47
|
-
"react": "^19.0.0",
|
|
48
|
-
"react-dom": "^19.0.0",
|
|
49
|
-
"tsup": "^8.0.0",
|
|
50
|
-
"typescript": "^5.3.3"
|
|
51
|
-
},
|
|
52
|
-
"publishConfig": {
|
|
53
|
-
"registry": "https://registry.npmjs.org",
|
|
54
|
-
"access": "public"
|
|
55
|
-
}
|
|
56
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@campfire-interactive/ui",
|
|
3
|
+
"version": "0.9.0",
|
|
4
|
+
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tsup",
|
|
19
|
+
"prepublishOnly": "npm run build",
|
|
20
|
+
"dev": "tsup --watch",
|
|
21
|
+
"test": "vitest run",
|
|
22
|
+
"typecheck": "tsc --noEmit"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
26
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@campfire-interactive/design-tokens": "*",
|
|
30
|
+
"@radix-ui/react-accordion": "^1.2.12",
|
|
31
|
+
"@radix-ui/react-checkbox": "^1.3.3",
|
|
32
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
33
|
+
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
34
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
35
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
36
|
+
"@radix-ui/react-slider": "^1.3.6",
|
|
37
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
38
|
+
"@radix-ui/react-switch": "^1.2.6",
|
|
39
|
+
"@radix-ui/react-tabs": "^1.1.13",
|
|
40
|
+
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
41
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
42
|
+
"lucide-react": "^0.487.0"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@types/react": "^19.0.0",
|
|
46
|
+
"@types/react-dom": "^19.0.0",
|
|
47
|
+
"react": "^19.0.0",
|
|
48
|
+
"react-dom": "^19.0.0",
|
|
49
|
+
"tsup": "^8.0.0",
|
|
50
|
+
"typescript": "^5.3.3"
|
|
51
|
+
},
|
|
52
|
+
"publishConfig": {
|
|
53
|
+
"registry": "https://registry.npmjs.org",
|
|
54
|
+
"access": "public"
|
|
55
|
+
}
|
|
56
|
+
}
|