@campfire-interactive/ui 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1168,20 +1168,27 @@ declare function TableCaption({ className, ...rest }: React.HTMLAttributes<HTMLT
 declare const Tabs: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
 /** @deprecated Use `Tabs`. Kept so existing imports keep working. */
 declare const TabsRoot: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
-interface TabsListProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.List> {
-    /**
-     * `pill` is a segmented control — a rounded tray with the active tab raised.
-     * `underline` is the page-level look: a row of tabs under a heading with the
-     * active one underscored.
-     *
-     * Defaults to `pill` because that is what the vendored shadcn TabsList
-     * rendered, and eleven apps use `<TabsList>` bare. Defaulting to `underline`
-     * would restyle every tab row in the fleet on adoption — a design decision
-     * dressed up as a migration. Opt into `underline` per call site.
-     */
-    variant?: 'pill' | 'underline';
-}
-declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * THERE IS ONE TAB LOOK: the segmented pill tray, with the active tab raised
+ * on white.
+ *
+ * There were two. `underline` — a row of tabs under a heading with the active
+ * one underscored — shipped alongside it as an opt-in for page-level strips,
+ * and the fleet answered by never opting in. A sweep found exactly one caller
+ * in one app (pm's Timeline sub-tabs), where its only effect was to make two
+ * of the four strips on those pages disagree with the other two. Nine repos
+ * are not on this package and carry their own vendored pill-only tabs;
+ * master-data's twelve `TabSet` call sites and analytics' two all took the
+ * default. A variant that one screen in the fleet used, and used to look
+ * inconsistent with its neighbours, is not a variant — it is a way to get the
+ * design wrong, so it is gone rather than deprecated.
+ *
+ * `data-variant="pill"` stays on the element. Nothing reads it as a choice any
+ * more, but the stylesheet still selects on it, and rewriting every selector
+ * to drop one attribute would risk the look this change is meant to preserve.
+ */
+type TabsListProps = React.ComponentPropsWithoutRef<typeof RadixTabs.List>;
+declare const TabsList: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
     icon?: React.ReactNode;
     /** A count beside the label — rows in the tab, unread items. Hidden at zero. */
@@ -1202,7 +1209,6 @@ interface TabSetProps {
     value?: string;
     onValueChange?: (value: string) => void;
     defaultValue?: string;
-    variant?: 'pill' | 'underline';
     className?: string;
 }
 /**
@@ -1215,7 +1221,7 @@ interface TabSetProps {
  * `defaultValue` falls back to the first tab: Radix renders no panel at all
  * when neither is set, which reads as a blank screen.
  */
-declare function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }: TabSetProps): react.JSX.Element;
+declare function TabSet({ tabs, value, onValueChange, defaultValue, className }: TabSetProps): react.JSX.Element;
 
 interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     orientation?: 'horizontal' | 'vertical';

package/dist/index.js

@@ -1726,19 +1726,19 @@ 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=underline] {\n    gap: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger {\n    padding: 0.5rem 0.125rem;\n    border-bottom: 2px solid transparent;\n    margin-bottom: -1px;\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger[data-state=active] {\n    color: var(--cfi-ui-content);\n    border-bottom-color: var(--cfi-ui-accent);\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__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";
 var Tabs = RadixTabs.Root;
 var TabsRoot = RadixTabs.Root;
 var TabsList = forwardRef15(
-  function TabsList2({ variant = "pill", className, ...rest }, ref) {
+  function TabsList2({ className, ...rest }, ref) {
     return /* @__PURE__ */ jsx22(
       RadixTabs.List,
       {
         ref,
-        "data-variant": variant,
+        "data-variant": "pill",
         className: cn("cfi-ui", "cfi-ui-tabs__list", className),
         ...rest
       }
@@ -1757,7 +1757,7 @@ var TabsTrigger = forwardRef15(
 var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
   return /* @__PURE__ */ jsx22(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
 });
-function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
+function TabSet({ tabs, value, onValueChange, defaultValue, className }) {
   return /* @__PURE__ */ jsxs22(
     Tabs,
     {
@@ -1766,7 +1766,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
       defaultValue: defaultValue ?? tabs[0]?.value,
       className: cn("cfi-ui", "cfi-ui-tabs", className),
       children: [
-        /* @__PURE__ */ jsx22(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx22(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsx22(
           TabsTrigger,
           {
             value: tab.value,

package/package.json

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