@cloudflare/kumo 2.1.0 → 2.2.0

package/dist/chunks/tabs-fdkhdhv8kvnpp8nt.js

@@ -1,92 +0,0 @@
-"use client";
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { bd as x, be as T, bf as w, bg as N } from "./vendor-base-ui-epfrwb4nfbd4btaz.js";
-const V = {
-  variant: "segmented"
-};
-function z({
-  tabs: u,
-  value: n,
-  selectedValue: m,
-  onValueChange: c,
-  activateOnFocus: b,
-  className: g,
-  listClassName: f,
-  indicatorClassName: h,
-  variant: i = V.variant
-}) {
-  const o = u ?? [];
-  if (o.length === 0)
-    return null;
-  const v = o[0]?.value, l = n !== void 0, p = {
-    value: l ? n : void 0,
-    defaultValue: l ? void 0 : m ?? v
-  }, t = i === "segmented", r = i === "underline";
-  return /* @__PURE__ */ d(
-    x,
-    {
-      ...p,
-      className: s("relative isolate min-w-0 font-medium", g),
-      onValueChange: (e) => {
-        const k = String(e);
-        c?.(k);
-      },
-      children: [
-        t && /* @__PURE__ */ a("div", { className: "absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed" }),
-        /* @__PURE__ */ d(
-          T,
-          {
-            activateOnFocus: b,
-            className: s(
-              "scrollbar-hide relative flex min-w-0 shrink items-stretch",
-              t && "h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70",
-              r && "h-7 gap-4 border-b border-kumo-hairline pb-2",
-              f
-            ),
-            children: [
-              o.map((e) => /* @__PURE__ */ a(
-                w,
-                {
-                  value: e.value,
-                  render: e.render,
-                  className: s(
-                    "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
-                    t && "my-0.5 rounded-md px-2.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
-                    r && "px-2 py-2.5 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
-                    e.className
-                  ),
-                  children: e.label
-                },
-                e.value
-              )),
-              /* @__PURE__ */ a(
-                N,
-                {
-                  render: (e) => /* @__PURE__ */ a(
-                    "div",
-                    {
-                      ...e,
-                      className: s(
-                        "absolute z-1 left-0",
-                        "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
-                        "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
-                        t && "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line",
-                        r && "bottom-0 h-0.5 bg-kumo-brand",
-                        h
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  z as T
-};
-//# sourceMappingURL=tabs-fdkhdhv8kvnpp8nt.js.map

package/dist/chunks/tabs-fdkhdhv8kvnpp8nt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-fdkhdhv8kvnpp8nt.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative isolate min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className=\"absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-hairline pb-2\",\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              isSegmented &&\n                \"my-0.5 rounded-md px-2.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isUnderline &&\n                \"px-2 py-2.5 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  \"top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line\",\n                isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props"],"mappings":";;;;AAUO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AAuGO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,wCAAwCZ,CAAS;AAAA,MAC/D,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QAEnG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,QAAQA,EAAI;AAAA,kBACZ,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAZAA,EAAI;AAAA,cAAA,CAcZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,QAAQ,CAACC,MACP,gBAAAL;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAGK;AAAA,sBACJ,WAAWR;AAAA,wBACT;AAAA,wBACA;AAAA,wBACA;AAAA,wBACAJ,KACE;AAAA,wBACFC,KAAe;AAAA,wBACfP;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}