@campfire-interactive/ui 0.7.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.d.ts +22 -16
- package/dist/index.js +15 -12
- package/package.json +56 -56
package/dist/index.d.ts
CHANGED
|
@@ -1168,20 +1168,27 @@ declare function TableCaption({ className, ...rest }: React.HTMLAttributes<HTMLT
|
|
|
1168
1168
|
declare const Tabs: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
1169
1169
|
/** @deprecated Use `Tabs`. Kept so existing imports keep working. */
|
|
1170
1170
|
declare const TabsRoot: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1171
|
+
/**
|
|
1172
|
+
* THERE IS ONE TAB LOOK: the segmented pill tray, with the active tab raised
|
|
1173
|
+
* on white.
|
|
1174
|
+
*
|
|
1175
|
+
* There were two. `underline` — a row of tabs under a heading with the active
|
|
1176
|
+
* one underscored — shipped alongside it as an opt-in for page-level strips,
|
|
1177
|
+
* and the fleet answered by never opting in. A sweep found exactly one caller
|
|
1178
|
+
* in one app (pm's Timeline sub-tabs), where its only effect was to make two
|
|
1179
|
+
* of the four strips on those pages disagree with the other two. Nine repos
|
|
1180
|
+
* are not on this package and carry their own vendored pill-only tabs;
|
|
1181
|
+
* master-data's twelve `TabSet` call sites and analytics' two all took the
|
|
1182
|
+
* default. A variant that one screen in the fleet used, and used to look
|
|
1183
|
+
* inconsistent with its neighbours, is not a variant — it is a way to get the
|
|
1184
|
+
* design wrong, so it is gone rather than deprecated.
|
|
1185
|
+
*
|
|
1186
|
+
* `data-variant="pill"` stays on the element. Nothing reads it as a choice any
|
|
1187
|
+
* more, but the stylesheet still selects on it, and rewriting every selector
|
|
1188
|
+
* to drop one attribute would risk the look this change is meant to preserve.
|
|
1189
|
+
*/
|
|
1190
|
+
type TabsListProps = React.ComponentPropsWithoutRef<typeof RadixTabs.List>;
|
|
1191
|
+
declare const TabsList: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1185
1192
|
interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
|
|
1186
1193
|
icon?: React.ReactNode;
|
|
1187
1194
|
/** A count beside the label — rows in the tab, unread items. Hidden at zero. */
|
|
@@ -1202,7 +1209,6 @@ interface TabSetProps {
|
|
|
1202
1209
|
value?: string;
|
|
1203
1210
|
onValueChange?: (value: string) => void;
|
|
1204
1211
|
defaultValue?: string;
|
|
1205
|
-
variant?: 'pill' | 'underline';
|
|
1206
1212
|
className?: string;
|
|
1207
1213
|
}
|
|
1208
1214
|
/**
|
|
@@ -1215,7 +1221,7 @@ interface TabSetProps {
|
|
|
1215
1221
|
* `defaultValue` falls back to the first tab: Radix renders no panel at all
|
|
1216
1222
|
* when neither is set, which reads as a blank screen.
|
|
1217
1223
|
*/
|
|
1218
|
-
declare function TabSet({ tabs, value, onValueChange, defaultValue,
|
|
1224
|
+
declare function TabSet({ tabs, value, onValueChange, defaultValue, className }: TabSetProps): react.JSX.Element;
|
|
1219
1225
|
|
|
1220
1226
|
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1221
1227
|
orientation?: 'horizontal' | 'vertical';
|
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";
|
|
@@ -1726,19 +1729,19 @@ import { forwardRef as forwardRef15 } from "react";
|
|
|
1726
1729
|
import * as RadixTabs from "@radix-ui/react-tabs";
|
|
1727
1730
|
|
|
1728
1731
|
// src/Tabs.css
|
|
1729
|
-
styleInject("@layer components {\n .cfi-ui-tabs {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n :where(.cfi-ui-tabs__list) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n overflow-x: auto;\n scrollbar-width: none;\n }\n .cfi-ui-tabs__list::-webkit-scrollbar {\n display: none;\n }\n :where(.cfi-ui-tabs__trigger) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n border: 0;\n background: none;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n cursor: pointer;\n transition:\n color var(--cfi-ui-transition-fast),\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tabs__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-tabs__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-tabs__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-tabs__list[data-variant=
|
|
1732
|
+
styleInject("@layer components {\n .cfi-ui-tabs {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n :where(.cfi-ui-tabs__list) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n overflow-x: auto;\n scrollbar-width: none;\n }\n .cfi-ui-tabs__list::-webkit-scrollbar {\n display: none;\n }\n :where(.cfi-ui-tabs__trigger) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n border: 0;\n background: none;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n cursor: pointer;\n transition:\n color var(--cfi-ui-transition-fast),\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tabs__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-tabs__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-tabs__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-tabs__list[data-variant=pill] {\n gap: 0;\n padding: 0.1875rem;\n background: var(--cfi-ui-surface-muted);\n border: 0;\n border-radius: 14px;\n align-self: flex-start;\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger {\n padding: 0.25rem 0.75rem;\n border-radius: 14px;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger[data-state=active] {\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n box-shadow: var(--cfi-ui-shadow-xs);\n }\n :where(.cfi-ui-tabs__content) {\n min-width: 0;\n padding-top: var(--cfi-ui-space-md);\n }\n .cfi-ui-tabs__content:focus-visible {\n outline: none;\n }\n}\n");
|
|
1730
1733
|
|
|
1731
1734
|
// src/Tabs.tsx
|
|
1732
1735
|
import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1733
1736
|
var Tabs = RadixTabs.Root;
|
|
1734
1737
|
var TabsRoot = RadixTabs.Root;
|
|
1735
1738
|
var TabsList = forwardRef15(
|
|
1736
|
-
function TabsList2({
|
|
1739
|
+
function TabsList2({ className, ...rest }, ref) {
|
|
1737
1740
|
return /* @__PURE__ */ jsx22(
|
|
1738
1741
|
RadixTabs.List,
|
|
1739
1742
|
{
|
|
1740
1743
|
ref,
|
|
1741
|
-
"data-variant":
|
|
1744
|
+
"data-variant": "pill",
|
|
1742
1745
|
className: cn("cfi-ui", "cfi-ui-tabs__list", className),
|
|
1743
1746
|
...rest
|
|
1744
1747
|
}
|
|
@@ -1757,7 +1760,7 @@ var TabsTrigger = forwardRef15(
|
|
|
1757
1760
|
var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
|
|
1758
1761
|
return /* @__PURE__ */ jsx22(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
|
|
1759
1762
|
});
|
|
1760
|
-
function TabSet({ tabs, value, onValueChange, defaultValue,
|
|
1763
|
+
function TabSet({ tabs, value, onValueChange, defaultValue, className }) {
|
|
1761
1764
|
return /* @__PURE__ */ jsxs22(
|
|
1762
1765
|
Tabs,
|
|
1763
1766
|
{
|
|
@@ -1766,7 +1769,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
|
|
|
1766
1769
|
defaultValue: defaultValue ?? tabs[0]?.value,
|
|
1767
1770
|
className: cn("cfi-ui", "cfi-ui-tabs", className),
|
|
1768
1771
|
children: [
|
|
1769
|
-
/* @__PURE__ */ jsx22(TabsList, {
|
|
1772
|
+
/* @__PURE__ */ jsx22(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsx22(
|
|
1770
1773
|
TabsTrigger,
|
|
1771
1774
|
{
|
|
1772
1775
|
value: tab.value,
|
|
@@ -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
|
+
}
|