@campfire-interactive/ui 0.10.7 → 0.10.8
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 +6 -6
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/styles/base.css
|
|
24
|
-
styleInject('@layer components {\n :where(:root) {\n --cfi-ui-surface: var(--cfi-surface, #ffffff);\n --cfi-ui-surface-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ui-surface-sunken: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ui-surface-hover: var(--cfi-surface-hover, #f9fafb);\n --cfi-ui-surface-active: var(--cfi-surface-active, #f3f4f6);\n --cfi-ui-surface-selected: var(--cfi-surface-selected, #f3f4f6);\n --cfi-ui-surface-disabled: var(--cfi-surface-disabled, #f3f4f6);\n --cfi-ui-surface-muted: var(--cfi-surface-muted, #ececf0);\n --cfi-ui-surface-segment-selected: var(--cfi-surface-segment-selected, var(--cfi-surface, #ffffff));\n --cfi-ui-input-bg: var(--cfi-input-bg, #f3f3f5);\n --cfi-ui-switch-bg: var(--cfi-switch-bg, #cbced4);\n --cfi-ui-content: var(--cfi-content, oklch(0.145 0 0));\n --cfi-ui-content-muted: var(--cfi-content-muted, #666676);\n --cfi-ui-content-subtle: var(--cfi-content-subtle, #9ca3af);\n --cfi-ui-content-inverse: var(--cfi-content-inverse, #ffffff);\n --cfi-ui-content-disabled: var(--cfi-content-disabled, #9ca3af);\n --cfi-ui-content-link: var(--cfi-content-link, #1d4ed8);\n --cfi-ui-border: var(--cfi-border, #e5e7eb);\n --cfi-ui-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ui-border-strong: var(--cfi-border-strong, #d1d5db);\n --cfi-ui-accent: var(--cfi-action, #030213);\n --cfi-ui-accent-hover: var(--cfi-action-hover, #1a1a2e);\n --cfi-ui-accent-soft: var(--cfi-action-soft, #f3f4f6);\n --cfi-ui-accent-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ui-success: var(--cfi-color-success, #10b981);\n --cfi-ui-success-soft: var(--cfi-color-success-soft, #ecfdf5);\n --cfi-ui-success-text: var(--cfi-color-success-text, #047857);\n --cfi-ui-success-border: var(--cfi-color-success-border, #a7f3d0);\n --cfi-ui-warning: var(--cfi-color-warning, #f59e0b);\n --cfi-ui-warning-soft: var(--cfi-color-warning-soft, #fffbeb);\n --cfi-ui-warning-text: var(--cfi-color-warning-text, #b45309);\n --cfi-ui-warning-border: var(--cfi-color-warning-border, #fde68a);\n --cfi-ui-error: var(--cfi-color-error, #ef4444);\n --cfi-ui-error-strong: var(--cfi-color-error-strong, #dc2626);\n --cfi-ui-error-soft: var(--cfi-color-error-soft, #fef2f2);\n --cfi-ui-error-text: var(--cfi-color-error-text, #b91c1c);\n --cfi-ui-error-border: var(--cfi-color-error-border, #fecaca);\n --cfi-ui-info: var(--cfi-color-info, #3b82f6);\n --cfi-ui-info-soft: var(--cfi-color-info-soft, #eff6ff);\n --cfi-ui-info-text: var(--cfi-color-info-text, #1d4ed8);\n --cfi-ui-info-border: var(--cfi-color-info-border, #bfdbfe);\n --cfi-ui-neutral-soft: var(--cfi-color-neutral-soft, #f3f4f6);\n --cfi-ui-neutral-text: var(--cfi-color-neutral-text, #374151);\n --cfi-ui-neutral-border: var(--cfi-color-neutral-border, #e5e7eb);\n --cfi-ui-focus-color: var(--cfi-focus-ring-color, var(--cfi-ui-accent));\n --cfi-ui-focus-width: var(--cfi-focus-ring-width, 2px);\n --cfi-ui-focus-offset: var(--cfi-focus-ring-offset, 2px);\n --cfi-ui-overlay: var(--cfi-overlay, rgb(17 24 39 / 0.45));\n --cfi-ui-font: var(--cfi-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n --cfi-ui-font-mono: var(--cfi-font-family-mono, ui-monospace, Consolas, monospace);\n --cfi-ui-text-xs: var(--cfi-font-size-xs, 0.75rem);\n --cfi-ui-text-sm: var(--cfi-font-size-sm, 0.875rem);\n --cfi-ui-text-base: var(--cfi-font-size-base, 1rem);\n --cfi-ui-text-lg: var(--cfi-font-size-lg, 1.125rem);\n --cfi-ui-text-xl: var(--cfi-font-size-xl, 1.25rem);\n --cfi-ui-weight-normal: var(--cfi-font-weight-normal, 400);\n --cfi-ui-weight-medium: var(--cfi-font-weight-medium, 500);\n --cfi-ui-weight-semibold: var(--cfi-font-weight-semibold, 600);\n --cfi-ui-leading-tight: var(--cfi-line-height-tight, 1.2);\n --cfi-ui-leading-snug: var(--cfi-line-height-snug, 1.35);\n --cfi-ui-leading-normal: var(--cfi-line-height-normal, 1.5);\n --cfi-ui-tracking-caps: var(--cfi-letter-spacing-caps, 0.08em);\n --cfi-ui-space-3xs: var(--cfi-spacing-3xs, 0.125rem);\n --cfi-ui-space-2xs: var(--cfi-spacing-2xs, 0.1875rem);\n --cfi-ui-space-xs: var(--cfi-spacing-xs, 0.25rem);\n --cfi-ui-space-sm: var(--cfi-spacing-sm, 0.5rem);\n --cfi-ui-space-md: var(--cfi-spacing-md, 1rem);\n --cfi-ui-space-lg: var(--cfi-spacing-lg, 1.5rem);\n --cfi-ui-space-xl: var(--cfi-spacing-xl, 2rem);\n --cfi-ui-radius-sm: var(--cfi-radius-sm, 0.375rem);\n --cfi-ui-radius-md: var(--cfi-radius-md, 0.5rem);\n --cfi-ui-radius-lg: var(--cfi-radius-lg, 0.625rem);\n --cfi-ui-radius-xl: var(--cfi-radius-xl, 0.875rem);\n --cfi-ui-radius-full: var(--cfi-radius-full, 9999px);\n --cfi-ui-shadow-xs: var(--cfi-shadow-xs, 0 1px 1px rgb(17 24 39 / 0.04));\n --cfi-ui-shadow-sm: var(--cfi-shadow-sm, 0 1px 2px rgb(17 24 39 / 0.05));\n --cfi-ui-shadow-md: var(--cfi-shadow-md, 0 4px 6px rgb(17 24 39 / 0.07));\n --cfi-ui-shadow-lg: var(--cfi-shadow-lg, 0 10px 15px rgb(17 24 39 / 0.1));\n --cfi-ui-shadow-xl: var(--cfi-shadow-xl, 0 20px 40px -12px rgb(17 24 39 / 0.22));\n --cfi-ui-transition-fast: var(--cfi-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-transition-base: var(--cfi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-z-dropdown: max(var(--cfi-z-dropdown, 1350), calc(var(--cfi-z-popover, 1300) + 50));\n --cfi-ui-z-overlay: var(--cfi-z-overlay, 1100);\n --cfi-ui-z-modal: var(--cfi-z-modal, 1200);\n --cfi-ui-z-popover: var(--cfi-z-popover, 1300);\n --cfi-ui-z-toast: var(--cfi-z-toast, 1400);\n --cfi-ui-z-tooltip: var(--cfi-z-tooltip, 1500);\n --cfi-ui-control-height-sm: 2rem;\n --cfi-ui-control-height-md: 2.25rem;\n --cfi-ui-control-height-lg: 2.75rem;\n }\n .cfi-ui {\n box-sizing: border-box;\n font-family: var(--cfi-ui-font);\n }\n .cfi-ui *,\n .cfi-ui *::before,\n .cfi-ui *::after {\n box-sizing: border-box;\n }\n .cfi-ui:focus-visible,\n .cfi-ui :focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n @keyframes cfi-ui-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @keyframes cfi-ui-pulse {\n 50% {\n opacity: 0.45;\n }\n }\n @keyframes cfi-ui-fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes cfi-ui-zoom-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes cfi-ui-slide-in-right {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes cfi-ui-slide-in-left {\n from {\n transform: translateX(-100%);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui,\n .cfi-ui *,\n [data-cfi-ui-portal],\n [data-cfi-ui-portal] * {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n }\n }\n}\n');
|
|
24
|
+
styleInject('@layer components {\n :where(:root) {\n --cfi-ui-surface: var(--cfi-surface, #ffffff);\n --cfi-ui-surface-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ui-surface-sunken: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ui-surface-hover: var(--cfi-surface-hover, #f9fafb);\n --cfi-ui-surface-active: var(--cfi-surface-active, #f3f4f6);\n --cfi-ui-surface-selected: var(--cfi-surface-selected, #f3f4f6);\n --cfi-ui-surface-disabled: var(--cfi-surface-disabled, #f3f4f6);\n --cfi-ui-surface-muted: var(--cfi-surface-muted, #ececf0);\n --cfi-ui-surface-segment-selected: var(--cfi-surface-segment-selected, var(--cfi-surface, #ffffff));\n --cfi-ui-input-bg: var(--cfi-input-bg, #f3f3f5);\n --cfi-ui-switch-bg: var(--cfi-switch-bg, #cbced4);\n --cfi-ui-content: var(--cfi-content, oklch(0.145 0 0));\n --cfi-ui-content-muted: var(--cfi-content-muted, #666676);\n --cfi-ui-content-subtle: var(--cfi-content-subtle, #9ca3af);\n --cfi-ui-content-inverse: var(--cfi-content-inverse, #ffffff);\n --cfi-ui-content-disabled: var(--cfi-content-disabled, #9ca3af);\n --cfi-ui-content-link: var(--cfi-content-link, #1d4ed8);\n --cfi-ui-border: var(--cfi-border, #e5e7eb);\n --cfi-ui-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ui-border-strong: var(--cfi-border-strong, #d1d5db);\n --cfi-ui-accent: var(--cfi-action, #030213);\n --cfi-ui-accent-hover: var(--cfi-action-hover, #1a1a2e);\n --cfi-ui-accent-soft: var(--cfi-action-soft, #f3f4f6);\n --cfi-ui-accent-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ui-accent-text: var(--cfi-action-text, var(--cfi-ui-accent));\n --cfi-ui-accent-on-soft: var(--cfi-action-on-soft, var(--cfi-ui-accent-hover));\n --cfi-ui-success: var(--cfi-color-success, #10b981);\n --cfi-ui-success-soft: var(--cfi-color-success-soft, #ecfdf5);\n --cfi-ui-success-text: var(--cfi-color-success-text, #047857);\n --cfi-ui-success-border: var(--cfi-color-success-border, #a7f3d0);\n --cfi-ui-warning: var(--cfi-color-warning, #f59e0b);\n --cfi-ui-warning-soft: var(--cfi-color-warning-soft, #fffbeb);\n --cfi-ui-warning-text: var(--cfi-color-warning-text, #b45309);\n --cfi-ui-warning-border: var(--cfi-color-warning-border, #fde68a);\n --cfi-ui-error: var(--cfi-color-error, #ef4444);\n --cfi-ui-error-strong: var(--cfi-color-error-strong, #dc2626);\n --cfi-ui-error-soft: var(--cfi-color-error-soft, #fef2f2);\n --cfi-ui-error-text: var(--cfi-color-error-text, #b91c1c);\n --cfi-ui-error-border: var(--cfi-color-error-border, #fecaca);\n --cfi-ui-info: var(--cfi-color-info, #3b82f6);\n --cfi-ui-info-soft: var(--cfi-color-info-soft, #eff6ff);\n --cfi-ui-info-text: var(--cfi-color-info-text, #1d4ed8);\n --cfi-ui-info-border: var(--cfi-color-info-border, #bfdbfe);\n --cfi-ui-neutral-soft: var(--cfi-color-neutral-soft, #f3f4f6);\n --cfi-ui-neutral-text: var(--cfi-color-neutral-text, #374151);\n --cfi-ui-neutral-border: var(--cfi-color-neutral-border, #e5e7eb);\n --cfi-ui-focus-color: var(--cfi-focus-ring-color, var(--cfi-ui-accent));\n --cfi-ui-focus-width: var(--cfi-focus-ring-width, 2px);\n --cfi-ui-focus-offset: var(--cfi-focus-ring-offset, 2px);\n --cfi-ui-overlay: var(--cfi-overlay, rgb(17 24 39 / 0.45));\n --cfi-ui-font: var(--cfi-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n --cfi-ui-font-mono: var(--cfi-font-family-mono, ui-monospace, Consolas, monospace);\n --cfi-ui-text-xs: var(--cfi-font-size-xs, 0.75rem);\n --cfi-ui-text-sm: var(--cfi-font-size-sm, 0.875rem);\n --cfi-ui-text-base: var(--cfi-font-size-base, 1rem);\n --cfi-ui-text-lg: var(--cfi-font-size-lg, 1.125rem);\n --cfi-ui-text-xl: var(--cfi-font-size-xl, 1.25rem);\n --cfi-ui-weight-normal: var(--cfi-font-weight-normal, 400);\n --cfi-ui-weight-medium: var(--cfi-font-weight-medium, 500);\n --cfi-ui-weight-semibold: var(--cfi-font-weight-semibold, 600);\n --cfi-ui-leading-tight: var(--cfi-line-height-tight, 1.2);\n --cfi-ui-leading-snug: var(--cfi-line-height-snug, 1.35);\n --cfi-ui-leading-normal: var(--cfi-line-height-normal, 1.5);\n --cfi-ui-tracking-caps: var(--cfi-letter-spacing-caps, 0.08em);\n --cfi-ui-space-3xs: var(--cfi-spacing-3xs, 0.125rem);\n --cfi-ui-space-2xs: var(--cfi-spacing-2xs, 0.1875rem);\n --cfi-ui-space-xs: var(--cfi-spacing-xs, 0.25rem);\n --cfi-ui-space-sm: var(--cfi-spacing-sm, 0.5rem);\n --cfi-ui-space-md: var(--cfi-spacing-md, 1rem);\n --cfi-ui-space-lg: var(--cfi-spacing-lg, 1.5rem);\n --cfi-ui-space-xl: var(--cfi-spacing-xl, 2rem);\n --cfi-ui-radius-sm: var(--cfi-radius-sm, 0.375rem);\n --cfi-ui-radius-md: var(--cfi-radius-md, 0.5rem);\n --cfi-ui-radius-lg: var(--cfi-radius-lg, 0.625rem);\n --cfi-ui-radius-xl: var(--cfi-radius-xl, 0.875rem);\n --cfi-ui-radius-full: var(--cfi-radius-full, 9999px);\n --cfi-ui-shadow-xs: var(--cfi-shadow-xs, 0 1px 1px rgb(17 24 39 / 0.04));\n --cfi-ui-shadow-sm: var(--cfi-shadow-sm, 0 1px 2px rgb(17 24 39 / 0.05));\n --cfi-ui-shadow-md: var(--cfi-shadow-md, 0 4px 6px rgb(17 24 39 / 0.07));\n --cfi-ui-shadow-lg: var(--cfi-shadow-lg, 0 10px 15px rgb(17 24 39 / 0.1));\n --cfi-ui-shadow-xl: var(--cfi-shadow-xl, 0 20px 40px -12px rgb(17 24 39 / 0.22));\n --cfi-ui-transition-fast: var(--cfi-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-transition-base: var(--cfi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-z-dropdown: max(var(--cfi-z-dropdown, 1350), calc(var(--cfi-z-popover, 1300) + 50));\n --cfi-ui-z-overlay: var(--cfi-z-overlay, 1100);\n --cfi-ui-z-modal: var(--cfi-z-modal, 1200);\n --cfi-ui-z-popover: var(--cfi-z-popover, 1300);\n --cfi-ui-z-toast: var(--cfi-z-toast, 1400);\n --cfi-ui-z-tooltip: var(--cfi-z-tooltip, 1500);\n --cfi-ui-control-height-sm: 2rem;\n --cfi-ui-control-height-md: 2.25rem;\n --cfi-ui-control-height-lg: 2.75rem;\n }\n .cfi-ui {\n box-sizing: border-box;\n font-family: var(--cfi-ui-font);\n }\n .cfi-ui *,\n .cfi-ui *::before,\n .cfi-ui *::after {\n box-sizing: border-box;\n }\n .cfi-ui:focus-visible,\n .cfi-ui :focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n @keyframes cfi-ui-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @keyframes cfi-ui-pulse {\n 50% {\n opacity: 0.45;\n }\n }\n @keyframes cfi-ui-fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes cfi-ui-zoom-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes cfi-ui-slide-in-right {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes cfi-ui-slide-in-left {\n from {\n transform: translateX(-100%);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui,\n .cfi-ui *,\n [data-cfi-ui-portal],\n [data-cfi-ui-portal] * {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n }\n }\n}\n');
|
|
25
25
|
|
|
26
26
|
// src/lib/cn.ts
|
|
27
27
|
function cn(...values) {
|
|
@@ -43,7 +43,7 @@ import { cloneElement, forwardRef, isValidElement } from "react";
|
|
|
43
43
|
import { Slot } from "@radix-ui/react-slot";
|
|
44
44
|
|
|
45
45
|
// src/Button.css
|
|
46
|
-
styleInject("@layer components {\n :where(.cfi-ui-btn) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n height: 2rem;\n padding-inline: 0.75rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-md);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: normal;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast),\n color var(--cfi-ui-transition-fast);\n font-variant-numeric: tabular-nums;\n }\n a:where(.cfi-ui-btn),\n a:where(.cfi-ui-btn):hover,\n a:where(.cfi-ui-btn):visited {\n text-decoration: none;\n }\n .cfi-ui-btn:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-btn[data-loading] {\n cursor: progress;\n opacity: 1;\n }\n .cfi-ui-btn--full {\n width: 100%;\n }\n .cfi-ui-btn[data-size=sm] {\n height: 1.75rem;\n padding-inline: 0.5rem;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn[data-size=lg] {\n height: var(--cfi-ui-control-height-md);\n padding-inline: 1rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-btn[data-size=icon] {\n width: var(--cfi-ui-control-height-md);\n padding-inline: 0;\n }\n .cfi-ui-btn--icon[data-size=icon] {\n aspect-ratio: 1;\n }\n .cfi-ui-btn[data-variant=primary] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-btn[data-variant=secondary] {\n background: var(--cfi-ui-surface);\n border-color: var(--cfi-ui-border-strong);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=secondary]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-btn[data-variant=ghost] {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=ghost]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-btn[data-variant=danger] {\n background: var(--cfi-ui-error-strong);\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-btn[data-variant=danger]:hover:not(:disabled) {\n background: linear-gradient(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.14)), var(--cfi-ui-error-strong);\n }\n .cfi-ui-btn[data-variant=link] {\n color: var(--cfi-ui-accent);\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n .cfi-ui-btn[data-variant=link]:hover:not(:disabled) {\n text-decoration-thickness: 2px;\n }\n .cfi-ui-btn__icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n }\n .cfi-ui-btn__icon > svg {\n width: 1em;\n height: 1em;\n display: block;\n }\n .cfi-ui-btn[data-size=lg] .cfi-ui-btn__icon > svg {\n width: 1.15em;\n height: 1.15em;\n }\n .cfi-ui-btn__label {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n }\n .cfi-ui-btn[data-size=sm] .cfi-ui-btn__label {\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn__label > svg,\n .cfi-ui-btn > svg {\n width: 1em;\n height: 1em;\n flex: none;\n display: block;\n }\n .cfi-ui-btn__spinner {\n flex: none;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: var(--cfi-ui-radius-full);\n animation: cfi-ui-spin 620ms linear infinite;\n }\n :where(.cfi-ui-btn-group) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n flex-wrap: wrap;\n }\n .cfi-ui-btn-group[data-align=start] {\n justify-content: flex-start;\n }\n .cfi-ui-btn-group[data-align=end] {\n justify-content: flex-end;\n }\n .cfi-ui-btn-group[data-align=between] {\n justify-content: space-between;\n width: 100%;\n }\n}\n");
|
|
46
|
+
styleInject("@layer components {\n :where(.cfi-ui-btn) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n height: 2rem;\n padding-inline: 0.75rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-md);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: normal;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast),\n color var(--cfi-ui-transition-fast);\n font-variant-numeric: tabular-nums;\n }\n a:where(.cfi-ui-btn),\n a:where(.cfi-ui-btn):hover,\n a:where(.cfi-ui-btn):visited {\n text-decoration: none;\n }\n .cfi-ui-btn:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-btn[data-loading] {\n cursor: progress;\n opacity: 1;\n }\n .cfi-ui-btn--full {\n width: 100%;\n }\n .cfi-ui-btn[data-size=sm] {\n height: 1.75rem;\n padding-inline: 0.5rem;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn[data-size=lg] {\n height: var(--cfi-ui-control-height-md);\n padding-inline: 1rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-btn[data-size=icon] {\n width: var(--cfi-ui-control-height-md);\n padding-inline: 0;\n }\n .cfi-ui-btn--icon[data-size=icon] {\n aspect-ratio: 1;\n }\n .cfi-ui-btn[data-variant=primary] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-btn[data-variant=secondary] {\n background: var(--cfi-ui-surface);\n border-color: var(--cfi-ui-border-strong);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=secondary]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-btn[data-variant=ghost] {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=ghost]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-btn[data-variant=danger] {\n background: var(--cfi-ui-error-strong);\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-btn[data-variant=danger]:hover:not(:disabled) {\n background: linear-gradient(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.14)), var(--cfi-ui-error-strong);\n }\n .cfi-ui-btn[data-variant=link] {\n color: var(--cfi-ui-accent-text);\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n .cfi-ui-btn[data-variant=link]:hover:not(:disabled) {\n text-decoration-thickness: 2px;\n }\n .cfi-ui-btn__icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n }\n .cfi-ui-btn__icon > svg {\n width: 1em;\n height: 1em;\n display: block;\n }\n .cfi-ui-btn[data-size=lg] .cfi-ui-btn__icon > svg {\n width: 1.15em;\n height: 1.15em;\n }\n .cfi-ui-btn__label {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n }\n .cfi-ui-btn[data-size=sm] .cfi-ui-btn__label {\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn__label > svg,\n .cfi-ui-btn > svg {\n width: 1em;\n height: 1em;\n flex: none;\n display: block;\n }\n .cfi-ui-btn__spinner {\n flex: none;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: var(--cfi-ui-radius-full);\n animation: cfi-ui-spin 620ms linear infinite;\n }\n :where(.cfi-ui-btn-group) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n flex-wrap: wrap;\n }\n .cfi-ui-btn-group[data-align=start] {\n justify-content: flex-start;\n }\n .cfi-ui-btn-group[data-align=end] {\n justify-content: flex-end;\n }\n .cfi-ui-btn-group[data-align=between] {\n justify-content: space-between;\n width: 100%;\n }\n}\n");
|
|
47
47
|
|
|
48
48
|
// src/Button.tsx
|
|
49
49
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -124,7 +124,7 @@ import * as RadixMenu from "@radix-ui/react-dropdown-menu";
|
|
|
124
124
|
import { Check } from "lucide-react";
|
|
125
125
|
|
|
126
126
|
// src/Floating.css
|
|
127
|
-
styleInject("@layer components {\n .cfi-ui-floating {\n z-index: var(--cfi-ui-z-popover);\n background: var(--cfi-ui-surface-raised);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n max-height: var(--radix-popper-available-height, none);\n overflow: hidden auto;\n }\n .cfi-ui-floating__arrow {\n fill: var(--cfi-ui-surface-raised);\n filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n }\n .cfi-ui-popover {\n padding: var(--cfi-ui-space-md);\n min-width: 12rem;\n }\n .cfi-ui-popover[data-flush] {\n padding: 0;\n }\n .cfi-ui-menu {\n min-width: 11rem;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-menu__item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-menu__item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-menu__item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-menu__item[data-variant=danger] {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n background: var(--cfi-ui-error-soft);\n }\n .cfi-ui-menu__item > svg,\n .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-menu__icon {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n color: inherit;\n }\n .cfi-ui-menu__shortcut {\n margin-left: auto;\n padding-left: var(--cfi-ui-space-md);\n font-family: var(--cfi-ui-font-mono);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-menu__label {\n padding: 0.375rem 0.5rem 0.25rem;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__separator {\n height: 1px;\n margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n background: var(--cfi-ui-border);\n }\n .cfi-ui-select-content {\n padding: var(--cfi-ui-space-xs);\n min-width: var(--radix-select-trigger-width, 11rem);\n }\n .cfi-ui-select-viewport {\n max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n }\n .cfi-ui-select-item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-select-item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-select-item[data-state=checked] {\n font-weight: var(--cfi-ui-weight-medium);\n }\n .cfi-ui-select-item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select-item__indicator {\n display: inline-flex;\n flex: none;\n width: 0.875rem;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-select-item__indicator > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-select-empty {\n padding: var(--cfi-ui-space-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-tooltip {\n z-index: var(--cfi-ui-z-tooltip);\n max-width: 20rem;\n padding: 0.3125rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n background: var(--cfi-ui-content);\n color: var(--cfi-ui-surface);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n box-shadow: var(--cfi-ui-shadow-md);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tooltip__arrow {\n fill: var(--cfi-ui-content);\n }\n}\n");
|
|
127
|
+
styleInject("@layer components {\n .cfi-ui-floating {\n z-index: var(--cfi-ui-z-popover);\n background: var(--cfi-ui-surface-raised);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n max-height: var(--radix-popper-available-height, none);\n overflow: hidden auto;\n }\n .cfi-ui-floating__arrow {\n fill: var(--cfi-ui-surface-raised);\n filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n }\n .cfi-ui-popover {\n padding: var(--cfi-ui-space-md);\n min-width: 12rem;\n }\n .cfi-ui-popover[data-flush] {\n padding: 0;\n }\n .cfi-ui-menu {\n min-width: 11rem;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-menu__item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-menu__item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-menu__item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-menu__item[data-variant=danger] {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n background: var(--cfi-ui-error-soft);\n }\n .cfi-ui-menu__item > svg,\n .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-menu__icon {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n color: inherit;\n }\n .cfi-ui-menu__shortcut {\n margin-left: auto;\n padding-left: var(--cfi-ui-space-md);\n font-family: var(--cfi-ui-font-mono);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-menu__label {\n padding: 0.375rem 0.5rem 0.25rem;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__separator {\n height: 1px;\n margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n background: var(--cfi-ui-border);\n }\n .cfi-ui-select-content {\n padding: var(--cfi-ui-space-xs);\n min-width: var(--radix-select-trigger-width, 11rem);\n }\n .cfi-ui-select-viewport {\n max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n }\n .cfi-ui-select-item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-select-item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-select-item[data-state=checked] {\n font-weight: var(--cfi-ui-weight-medium);\n }\n .cfi-ui-select-item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select-item__indicator {\n display: inline-flex;\n flex: none;\n width: 0.875rem;\n color: var(--cfi-ui-accent-text);\n }\n .cfi-ui-select-item__indicator > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-select-empty {\n padding: var(--cfi-ui-space-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-tooltip {\n z-index: var(--cfi-ui-z-tooltip);\n max-width: 20rem;\n padding: 0.3125rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n background: var(--cfi-ui-content);\n color: var(--cfi-ui-surface);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n box-shadow: var(--cfi-ui-shadow-md);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tooltip__arrow {\n fill: var(--cfi-ui-content);\n }\n}\n");
|
|
128
128
|
|
|
129
129
|
// src/Menu.tsx
|
|
130
130
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
@@ -290,7 +290,7 @@ import { ListFilter, X } from "lucide-react";
|
|
|
290
290
|
import { forwardRef as forwardRef4 } from "react";
|
|
291
291
|
|
|
292
292
|
// src/Badge.css
|
|
293
|
-
styleInject("@layer components {\n :where(.cfi-ui-badge) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n padding: 0.125rem 0.5rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n vertical-align: middle;\n }\n .cfi-ui-badge[data-size=sm] {\n padding: 0 0.375rem;\n font-size: 0.6875rem;\n }\n .cfi-ui-badge__dot {\n flex: none;\n width: 0.375rem;\n height: 0.375rem;\n border-radius: var(--cfi-ui-radius-full);\n background: currentColor;\n }\n .cfi-ui-badge__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-badge__icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n .cfi-ui-badge--count {\n justify-content: center;\n min-width: 1.25rem;\n padding-inline: 0.375rem;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n background: var(--cfi-ui-neutral-soft);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=success] {\n background: var(--cfi-ui-success-soft);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n background: var(--cfi-ui-warning-soft);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=error] {\n background: var(--cfi-ui-error-soft);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=info] {\n background: var(--cfi-ui-info-soft);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n background: var(--cfi-ui-accent-soft);\n color: var(--cfi-ui-accent-
|
|
293
|
+
styleInject("@layer components {\n :where(.cfi-ui-badge) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n padding: 0.125rem 0.5rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n vertical-align: middle;\n }\n .cfi-ui-badge[data-size=sm] {\n padding: 0 0.375rem;\n font-size: 0.6875rem;\n }\n .cfi-ui-badge__dot {\n flex: none;\n width: 0.375rem;\n height: 0.375rem;\n border-radius: var(--cfi-ui-radius-full);\n background: currentColor;\n }\n .cfi-ui-badge__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-badge__icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n .cfi-ui-badge--count {\n justify-content: center;\n min-width: 1.25rem;\n padding-inline: 0.375rem;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n background: var(--cfi-ui-neutral-soft);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=success] {\n background: var(--cfi-ui-success-soft);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n background: var(--cfi-ui-warning-soft);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=error] {\n background: var(--cfi-ui-error-soft);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=info] {\n background: var(--cfi-ui-info-soft);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n background: var(--cfi-ui-accent-soft);\n color: var(--cfi-ui-accent-on-soft);\n }\n .cfi-ui-badge[data-variant=solid] {\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n background: var(--cfi-ui-content-muted);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=success] {\n background: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n background: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=error] {\n background: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=info] {\n background: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-badge[data-variant=outline] {\n background: transparent;\n }\n .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n border-color: var(--cfi-ui-neutral-border);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=success] {\n border-color: var(--cfi-ui-success-border);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n border-color: var(--cfi-ui-warning-border);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=error] {\n border-color: var(--cfi-ui-error-border);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=info] {\n border-color: var(--cfi-ui-info-border);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n border-color: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-on-soft);\n }\n}\n");
|
|
294
294
|
|
|
295
295
|
// src/Badge.tsx
|
|
296
296
|
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
@@ -1660,7 +1660,7 @@ import { forwardRef as forwardRef14 } from "react";
|
|
|
1660
1660
|
import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
|
|
1661
1661
|
|
|
1662
1662
|
// src/Table.css
|
|
1663
|
-
styleInject("@layer components {\n :where(.cfi-ui-table-scroller) {\n width: 100%;\n overflow-x: auto;\n position: relative;\n }\n :where(.cfi-ui-table) {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n text-align: left;\n }\n :where(.cfi-ui-table__th) {\n height: 2.75rem;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border);\n background: transparent;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n white-space: nowrap;\n text-align: left;\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n background: var(--cfi-ui-surface-sunken);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n color: var(--cfi-ui-content-muted);\n border-bottom-color: var(--cfi-ui-border-strong);\n }\n .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n position: sticky;\n top: 0;\n z-index: var(--cfi-ui-z-raised, 10);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n position: sticky;\n left: 0;\n background: var(--cfi-ui-surface);\n box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n z-index: 1;\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__sort {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin: -0.125rem -0.25rem;\n padding: 0.125rem 0.25rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\n }\n .cfi-ui-table__sort:hover {\n color: var(--cfi-ui-content);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-table__sort-icon {\n display: inline-flex;\n flex: none;\n opacity: 0.55;\n }\n .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n opacity: 1;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-table__sort-icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n :where(.cfi-ui-table__td) {\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n padding: 0.3125rem 0.625rem;\n }\n .cfi-ui-table__row[data-interactive] {\n cursor: pointer;\n }\n .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n border-bottom: 0;\n }\n .cfi-ui-table__th[data-numeric],\n .cfi-ui-table__td[data-numeric] {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-table__td[data-truncate] {\n max-width: 18rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-table__td[data-mono] {\n font-family: var(--cfi-ui-font-mono);\n font-size: 0.9em;\n }\n .cfi-ui-table__foot .cfi-ui-table__td {\n border-top: 1px solid var(--cfi-ui-border-strong);\n border-bottom: 0;\n background: var(--cfi-ui-surface-sunken);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-table__empty {\n padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n border-bottom: 0;\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-table__caption {\n padding: var(--cfi-ui-space-sm) 0;\n caption-side: bottom;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: left;\n }\n}\n");
|
|
1663
|
+
styleInject("@layer components {\n :where(.cfi-ui-table-scroller) {\n width: 100%;\n overflow-x: auto;\n position: relative;\n }\n :where(.cfi-ui-table) {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n text-align: left;\n }\n :where(.cfi-ui-table__th) {\n height: 2.75rem;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border);\n background: transparent;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n white-space: nowrap;\n text-align: left;\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n background: var(--cfi-ui-surface-sunken);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n color: var(--cfi-ui-content-muted);\n border-bottom-color: var(--cfi-ui-border-strong);\n }\n .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n position: sticky;\n top: 0;\n z-index: var(--cfi-ui-z-raised, 10);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n position: sticky;\n left: 0;\n background: var(--cfi-ui-surface);\n box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n z-index: 1;\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__sort {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin: -0.125rem -0.25rem;\n padding: 0.125rem 0.25rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\n }\n .cfi-ui-table__sort:hover {\n color: var(--cfi-ui-content);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-table__sort-icon {\n display: inline-flex;\n flex: none;\n opacity: 0.55;\n }\n .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n opacity: 1;\n color: var(--cfi-ui-accent-text);\n }\n .cfi-ui-table__sort-icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n :where(.cfi-ui-table__td) {\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n padding: 0.3125rem 0.625rem;\n }\n .cfi-ui-table__row[data-interactive] {\n cursor: pointer;\n }\n .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n border-bottom: 0;\n }\n .cfi-ui-table__th[data-numeric],\n .cfi-ui-table__td[data-numeric] {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-table__td[data-truncate] {\n max-width: 18rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-table__td[data-mono] {\n font-family: var(--cfi-ui-font-mono);\n font-size: 0.9em;\n }\n .cfi-ui-table__foot .cfi-ui-table__td {\n border-top: 1px solid var(--cfi-ui-border-strong);\n border-bottom: 0;\n background: var(--cfi-ui-surface-sunken);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-table__empty {\n padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n border-bottom: 0;\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-table__caption {\n padding: var(--cfi-ui-space-sm) 0;\n caption-side: bottom;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: left;\n }\n}\n");
|
|
1664
1664
|
|
|
1665
1665
|
// src/Table.tsx
|
|
1666
1666
|
import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
@@ -2166,7 +2166,7 @@ import { useRef as useRef3 } from "react";
|
|
|
2166
2166
|
import { ArrowUpRight } from "lucide-react";
|
|
2167
2167
|
|
|
2168
2168
|
// src/ExternalLink.css
|
|
2169
|
-
styleInject("@layer components {\n :where(.cfi-ui-extlink) {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n color: var(--cfi-ui-accent);\n text-decoration: none;\n }\n .cfi-ui-extlink:hover {\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n .cfi-ui-extlink:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-extlink__icon {\n flex: none;\n width: 0.75rem;\n height: 0.75rem;\n opacity: 0.7;\n }\n}\n");
|
|
2169
|
+
styleInject("@layer components {\n :where(.cfi-ui-extlink) {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n color: var(--cfi-ui-accent-text);\n text-decoration: none;\n }\n .cfi-ui-extlink:hover {\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n .cfi-ui-extlink:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-extlink__icon {\n flex: none;\n width: 0.75rem;\n height: 0.75rem;\n opacity: 0.7;\n }\n}\n");
|
|
2170
2170
|
|
|
2171
2171
|
// src/ExternalLink.tsx
|
|
2172
2172
|
import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campfire-interactive/ui",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.8",
|
|
4
4
|
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|