@campfire-interactive/ui 0.9.0 → 0.9.1

package/dist/index.d.ts

@@ -41,9 +41,12 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * ones mostly chose styling. This is the spelling the fleet's vendored
      * shadcn buttons already use, so it needs no explaining at a call site.
      *
-     * The child must be a single element that accepts a ref. `leadingIcon`,
-     * `trailingIcon` and `loading` are ignored, because the child owns its own
-     * content — put the icon inside it.
+     * The child must be a single element that accepts a ref. `leadingIcon` and
+     * `trailingIcon` work here and render inside the child, same as on a real
+     * button — they used to be silently dropped, which took the icon off every
+     * link-button in the fleet while the plain buttons beside them kept theirs.
+     * `loading` is still ignored: a spinner belongs on a control that is doing
+     * something, and a link navigates.
      */
     asChild?: boolean;
     /**

package/dist/index.js

@@ -39,14 +39,14 @@ function cn(...values) {
 }
 
 // src/Button.tsx
-import { forwardRef } from "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { Slot } from "@radix-ui/react-slot";
 
 // src/Button.css
 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.cfi-ui-btn,\n  a.cfi-ui-btn:hover,\n  a.cfi-ui-btn:visited {\n    text-decoration: none;\n    color: inherit;\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");
 
 // src/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Button = forwardRef(function Button2({
   variant = "secondary",
   size = "md",
@@ -67,7 +67,16 @@ var Button = forwardRef(function Button2({
     className: cn("cfi-ui", "cfi-ui-btn", fullWidth && "cfi-ui-btn--full", className)
   };
   if (asChild) {
-    return /* @__PURE__ */ jsx(Slot, { ref, ...styling, ...rest, children });
+    const slotted = isValidElement(children) ? cloneElement(
+      children,
+      void 0,
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: leadingIcon }),
+        /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__label", children: children.props.children }),
+        trailingIcon && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: trailingIcon })
+      ] })
+    ) : children;
+    return /* @__PURE__ */ jsx(Slot, { ref, ...styling, ...rest, children: slotted });
   }
   return /* @__PURE__ */ jsxs(
     "button",
@@ -110,7 +119,7 @@ import { forwardRef as forwardRef3 } from "react";
 import { ChevronDown } from "lucide-react";
 
 // src/Menu.tsx
-import { Fragment, forwardRef as forwardRef2 } from "react";
+import { Fragment as Fragment2, forwardRef as forwardRef2 } from "react";
 import * as RadixMenu from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
 
@@ -193,7 +202,7 @@ var MenuSubContent = forwardRef2(function MenuSubContent2({ className, ...rest }
 function Menu({ trigger, items, align = "end", side = "bottom", className }) {
   return /* @__PURE__ */ jsxs2(MenuRoot, { children: [
     /* @__PURE__ */ jsx2(MenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx2(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
       item.separatorBefore && /* @__PURE__ */ jsx2(MenuSeparator, {}),
       /* @__PURE__ */ jsx2(
         MenuItem,
@@ -650,13 +659,13 @@ var Textarea = forwardRef8(function Textarea2({ invalid, className, rows = 3, ..
 });
 
 // src/Field.tsx
-import { Children, cloneElement, createContext, isValidElement, useContext, useId } from "react";
+import { Children, cloneElement as cloneElement2, createContext, isValidElement as isValidElement2, useContext, useId } from "react";
 
 // src/Field.css
 styleInject('@layer components {\n  .cfi-ui-label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-label__required {\n    color: var(--cfi-ui-error);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-field__label {\n    justify-self: start;\n  }\n  .cfi-ui-field__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n    min-width: 0;\n  }\n  .cfi-ui-field__hint,\n  .cfi-ui-field__error {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-field__hint {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-field__error {\n    color: var(--cfi-ui-error-text);\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-field[data-orientation=horizontal] {\n    grid-template-columns: minmax(8rem, 12rem) 1fr;\n    align-items: start;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n    padding-top: 0.4375rem;\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-field[data-orientation=horizontal] {\n      grid-template-columns: 1fr;\n      gap: var(--cfi-ui-space-xs);\n    }\n    .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n      padding-top: 0;\n    }\n  }\n  .cfi-ui-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .cfi-ui-fieldset__legend {\n    padding: 0 0 var(--cfi-ui-space-sm);\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-fieldset__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  @media (max-width: 720px) {\n    .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body,\n    .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n      grid-template-columns: 1fr;\n    }\n  }\n}\n');
 
 // src/Field.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function Label3({ required, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs10("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
     children,
@@ -693,11 +702,11 @@ function Field({
 }
 function FieldControl({ children }) {
   const ctx = useContext(FieldContext);
-  if (!ctx) return /* @__PURE__ */ jsx10(Fragment2, { children });
+  if (!ctx) return /* @__PURE__ */ jsx10(Fragment3, { children });
   const only = Children.count(children) === 1 ? Children.toArray(children)[0] : null;
-  if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx10(Fragment2, { children });
+  if (!only || !isValidElement2(only)) return /* @__PURE__ */ jsx10(Fragment3, { children });
   const props = only.props;
-  return cloneElement(only, {
+  return cloneElement2(only, {
     id: props.id ?? ctx.controlId,
     // A control that already declares its own description keeps it — the
     // field's id is appended rather than replacing it.
@@ -1078,7 +1087,7 @@ function CreatableSelect({
 }
 
 // src/Combobox.tsx
-import { Fragment as Fragment3, useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { Fragment as Fragment4, useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
 
 // src/Combobox.css
@@ -1302,7 +1311,7 @@ function Combobox({
                     option.value
                   );
                 });
-                if (!run.group) return /* @__PURE__ */ jsx15(Fragment3, { children: rows }, `ungrouped-${runIndex}`);
+                if (!run.group) return /* @__PURE__ */ jsx15(Fragment4, { children: rows }, `ungrouped-${runIndex}`);
                 return /* @__PURE__ */ jsxs15("div", { role: "group", "aria-label": run.group, children: [
                   /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__group-label", "aria-hidden": "true", children: run.group }),
                   rows
@@ -1320,7 +1329,7 @@ function Combobox({
 // src/Tooltip.tsx
 import { forwardRef as forwardRef12 } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var TooltipProvider = RadixTooltip.Provider;
 var TooltipRoot = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
@@ -1342,7 +1351,7 @@ var TooltipContent = forwardRef12(function TooltipContent2({ className, children
   ) });
 });
 function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
-  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment4, { children });
+  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment5, { children });
   return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs16(TooltipRoot, { children: [
     /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsx16(TooltipContent, { side, align, children: content })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "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",