@campfire-interactive/ui 0.10.1 → 0.10.3

package/dist/index.d.ts

@@ -1126,7 +1126,13 @@ interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /** Adds hover feedback. Set it when the row itself navigates or opens something. */
     interactive?: boolean;
 }
-declare function TableRow({ selected, interactive, className, ...rest }: TableRowProps): react.JSX.Element;
+/**
+ * Forwards its ref. Under React 18 a plain function component drops a ref
+ * outright, and rows are what callers hold one to: a drag handle's connect
+ * function, scroll-into-view on the selected row. omsf had both, and every
+ * one of them would have received null.
+ */
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
 type SortDirection = 'asc' | 'desc';
 interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     /** Right-aligns and tabular-aligns the column. Use for every numeric column. */
@@ -1167,7 +1173,8 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
      */
     mono?: boolean;
 }
-declare function TableCell({ numeric, truncate, mono, className, ...rest }: TableCellProps): react.JSX.Element;
+/** Forwards its ref, for the same reason as TableRow. */
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
 interface TableEmptyProps {
     /** Must match the table's column count, or the message will not span the width. */
     colSpan: number;

package/dist/index.js

@@ -1686,10 +1686,11 @@ function TableFooter({ className, ...rest }) {
   return /* @__PURE__ */ jsx21("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
 }
 var TableFoot = TableFooter;
-function TableRow({ selected, interactive, className, ...rest }) {
+var TableRow = forwardRef14(function TableRow2({ selected, interactive, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx21(
     "tr",
     {
+      ref,
       "data-selected": selected || void 0,
       "data-interactive": interactive || void 0,
       "aria-selected": selected || void 0,
@@ -1697,7 +1698,7 @@ function TableRow({ selected, interactive, className, ...rest }) {
       ...rest
     }
   );
-}
+});
 function TableHead({
   numeric,
   sortable,
@@ -1726,10 +1727,11 @@ function TableHead({
     }
   );
 }
-function TableCell({ numeric, truncate, mono, className, ...rest }) {
+var TableCell = forwardRef14(function TableCell2({ numeric, truncate, mono, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx21(
     "td",
     {
+      ref,
       "data-numeric": numeric || void 0,
       "data-truncate": truncate || void 0,
       "data-mono": mono || void 0,
@@ -1737,7 +1739,7 @@ function TableCell({ numeric, truncate, mono, className, ...rest }) {
       ...rest
     }
   );
-}
+});
 function TableEmpty({ colSpan, children }) {
   return /* @__PURE__ */ jsx21("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx21("td", { colSpan, className: "cfi-ui-table__empty", children }) });
 }
@@ -1750,7 +1752,7 @@ import { forwardRef as forwardRef15 } from "react";
 import * as RadixTabs from "@radix-ui/react-tabs";
 
 // src/Tabs.css
-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");
+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__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    white-space: nowrap;\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");
 
 // src/Tabs.tsx
 import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -1773,7 +1775,7 @@ var TabsTrigger = forwardRef15(
   function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
     return /* @__PURE__ */ jsxs22(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
       icon && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-tabs__icon", children: icon }),
-      /* @__PURE__ */ jsx22("span", { children }),
+      /* @__PURE__ */ jsx22("span", { className: "cfi-ui-tabs__label", children }),
       count !== void 0 && /* @__PURE__ */ jsx22(CountBadge, { count, size: "sm" })
     ] });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
   "type": "module",
   "main": "dist/index.js",