silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-QSEDH7T2.js → chunk-5HPXUDX6.js}

@@ -67,9 +67,6 @@ function plainDateIsEqual(a, b) {
 function plainDateIsInRange(date, range) {
   return Temporal.PlainDate.compare(date, range[0]) >= 0 && Temporal.PlainDate.compare(date, range[1]) <= 0;
 }
-function plainDateSetStartOfWeek(date) {
-  return date.add({ days: -(date.dayOfWeek % 7) });
-}
 function plainDateGetWeekNumber(date) {
   const thursday = date.add({ days: 4 - date.dayOfWeek });
   const yearStart = plainDateCreate(thursday.year, 1, 1);
@@ -79,6 +76,6 @@ function plainDateFormat(date, options) {
   return date.toLocaleString(void 0, options);
 }
 
-export { DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_SHORT_WITH_YEAR, DATE_FORMAT_WITH_WEEKDAY, getDaysInMonth, plainDateCreate, plainDateDayOfWeek, plainDateFormat, plainDateFromInstant, plainDateFromUnixSeconds, plainDateGetWeekNumber, plainDateIsAfter, plainDateIsBefore, plainDateIsEqual, plainDateIsInRange, plainDateSetStartOfWeek, plainDateToInstant, plainDateToUnixSeconds, plainDateToday };
-//# sourceMappingURL=chunk-QSEDH7T2.js.map
-//# sourceMappingURL=chunk-QSEDH7T2.js.map
+export { DATE_FORMAT_LONG, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_SHORT_WITH_YEAR, DATE_FORMAT_WITH_WEEKDAY, getDaysInMonth, plainDateCreate, plainDateDayOfWeek, plainDateFormat, plainDateFromInstant, plainDateFromUnixSeconds, plainDateGetWeekNumber, plainDateIsAfter, plainDateIsBefore, plainDateIsEqual, plainDateIsInRange, plainDateToInstant, plainDateToUnixSeconds, plainDateToday };
+//# sourceMappingURL=chunk-5HPXUDX6.js.map
+//# sourceMappingURL=chunk-5HPXUDX6.js.map

package/dist/chunk-5HPXUDX6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/plainDate.ts"],"names":[],"mappings":"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","file":"chunk-5HPXUDX6.js","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport type {PlainDate} from 'internal/dateTypes';\n\nexport type {PlainDate} from 'internal/dateTypes';\n\nexport const DATE_FORMAT_WITH_WEEKDAY: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'long',\n  weekday: 'long',\n  year: 'numeric',\n};\n\nexport const DATE_FORMAT_LONG: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'long',\n  year: 'numeric',\n};\n\nexport const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions = {\n  month: 'long',\n  year: 'numeric',\n};\n\nexport const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'short',\n  year: 'numeric',\n};\n\nexport function getDaysInMonth(year: number, month: number): number {\n  return Temporal.PlainDate.from({year, month, day: 1}).daysInMonth;\n}\n\nexport function plainDateCreate(\n  year: number,\n  month: number,\n  day: number,\n): PlainDate {\n  if (!Number.isInteger(year) || year < 1) {\n    throw new RangeError(`year must be a positive integer, got ${year}`);\n  }\n\n  if (!Number.isInteger(month) || month < 1 || month > 12) {\n    throw new RangeError(`month must be 1-12, got ${month}`);\n  }\n\n  const maxDay = getDaysInMonth(year, month);\n  if (!Number.isInteger(day) || day < 1 || day > maxDay) {\n    throw new RangeError(`day must be 1-${maxDay}, got ${day}`);\n  }\n\n  return Temporal.PlainDate.from({year, month, day});\n}\n\nexport function plainDateFromInstant(\n  instant: number,\n  timezoneID: string,\n): PlainDate {\n  return Temporal.Instant.fromEpochMilliseconds(instant)\n    .toZonedDateTimeISO(timezoneID)\n    .toPlainDate();\n}\n\nexport function plainDateToInstant(\n  date: PlainDate,\n  timezoneID: string,\n): number {\n  return date.toZonedDateTime(timezoneID).epochMilliseconds;\n}\n\nexport function plainDateFromUnixSeconds(\n  unixSeconds: number,\n  timezoneID: string,\n): PlainDate {\n  return plainDateFromInstant(unixSeconds * 1000, timezoneID);\n}\n\nexport function plainDateToUnixSeconds(\n  date: PlainDate,\n  timezoneID: string,\n): number {\n  return Math.floor(plainDateToInstant(date, timezoneID) / 1000);\n}\n\nexport function plainDateToday(timezoneID: string): PlainDate {\n  return Temporal.Now.plainDateISO(timezoneID);\n}\n\nexport function plainDateDayOfWeek(date: PlainDate): number {\n  return date.dayOfWeek % 7;\n}\n\nexport function plainDateIsBefore(a: PlainDate, b: PlainDate): boolean {\n  return Temporal.PlainDate.compare(a, b) < 0;\n}\n\nexport function plainDateIsAfter(a: PlainDate, b: PlainDate): boolean {\n  return Temporal.PlainDate.compare(a, b) > 0;\n}\n\nexport function plainDateIsEqual(a: PlainDate, b: PlainDate): boolean {\n  return Temporal.PlainDate.compare(a, b) === 0;\n}\n\nexport function plainDateIsInRange(\n  date: PlainDate,\n  range: [PlainDate, PlainDate],\n): boolean {\n  return (\n    Temporal.PlainDate.compare(date, range[0]) >= 0 &&\n    Temporal.PlainDate.compare(date, range[1]) <= 0\n  );\n}\n\nexport function plainDateSetStartOfWeek(date: PlainDate): PlainDate {\n  return date.add({days: -(date.dayOfWeek % 7)});\n}\n\nexport function plainDateGetWeekNumber(date: PlainDate): number {\n  const thursday = date.add({days: 4 - date.dayOfWeek});\n  const yearStart = plainDateCreate(thursday.year, 1, 1);\n  return Math.ceil((yearStart.until(thursday).days + 1) / 7);\n}\n\nexport function plainDateFormat(\n  date: PlainDate,\n  options: Intl.DateTimeFormatOptions,\n): string {\n  return date.toLocaleString(undefined, options);\n}\n"]}

package/dist/chunk-5JROXZBG.cjs

@@ -0,0 +1,491 @@
+'use strict';
+
+var chunkRAMDISDK_cjs = require('./chunk-RAMDISDK.cjs');
+var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
+var chunkVPWNRWNO_cjs = require('./chunk-VPWNRWNO.cjs');
+var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+// src/components/Tabs/Tabs.recipe.ts
+var tabsRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: [
+    "root",
+    "tab",
+    "icon",
+    "label",
+    "labelText",
+    "labelSizer",
+    "endContent"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "stretch",
+      maxW: "full",
+      minW: 0
+    },
+    tab: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      mb: "-1px",
+      px: "3",
+      borderWidth: 0,
+      borderBottomWidth: "emphasized",
+      borderBottomStyle: "solid",
+      borderBottomColor: "transparent",
+      bg: "transparent",
+      color: "fg.muted",
+      cursor: "pointer",
+      fontFamily: "body",
+      fontSize: "md",
+      fontWeight: "normal",
+      lineHeight: "normal",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+      transitionProperty: "color, background-color, border-color",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      _hover: {
+        bg: "bg.subtle"
+      },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    },
+    label: {
+      display: "inline-grid"
+    },
+    labelText: {
+      gridRowStart: 1,
+      gridColumnStart: 1
+    },
+    labelSizer: {
+      gridRowStart: 1,
+      gridColumnStart: 1,
+      visibility: "hidden",
+      pointerEvents: "none",
+      fontWeight: "semibold"
+    },
+    endContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    size: {
+      sm: { tab: { h: "component.sm" } },
+      md: { tab: { h: "component.md" } },
+      lg: { tab: { h: "component.lg" } }
+    },
+    layout: {
+      hug: {},
+      fill: {
+        root: { w: "full" },
+        tab: { flex: 1 }
+      }
+    },
+    isSelected: {
+      true: {
+        tab: {
+          borderBottomColor: "fg",
+          color: "fg",
+          fontWeight: "semibold"
+        }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        tab: {
+          color: "fg.disabled",
+          cursor: "not-allowed",
+          _hover: {
+            bg: "transparent"
+          }
+        }
+      },
+      false: {}
+    },
+    hasDivider: {
+      true: {
+        root: {
+          borderBlockEndWidth: "default",
+          borderBlockEndStyle: "solid",
+          borderBlockEndColor: "border"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    layout: "hug",
+    isSelected: false,
+    isDisabled: false,
+    hasDivider: false
+  }
+});
+var TabsContext = react.createContext(null);
+TabsContext.displayName = "TabsContext";
+function useTabsContext() {
+  const context = react.use(TabsContext);
+  if (context == null) {
+    throw new Error("Tabs children must be used within a Tabs.");
+  }
+  return context;
+}
+function Tab({
+  as,
+  className,
+  "data-testid": dataTestId,
+  controls,
+  endContent,
+  href,
+  id,
+  icon,
+  isDisabled = false,
+  label,
+  ref,
+  selectedIcon,
+  style,
+  value
+}) {
+  const context = useTabsContext();
+  const isSelected = context.value === value;
+  const displayIcon = isSelected && selectedIcon != null ? selectedIcon : icon;
+  const classes = tabsRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected,
+    isDisabled
+  });
+  const rootClassName = chunkSPDVNY2Z_cjs.cx(classes.tab, className);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    displayIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: displayIcon, size: context.size }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.label, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.labelText, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.labelSizer, children: label })
+    ] }),
+    chunkQAO6QMNQ_cjs.isReactNode(endContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endContent, children: endContent }) : null
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkVPWNRWNO_cjs.ActionElement,
+    {
+      "aria-controls": controls,
+      "aria-disabled": href != null && isDisabled ? true : void 0,
+      "aria-selected": isSelected,
+      as,
+      className: rootClassName,
+      "data-tab-disabled": isDisabled ? "true" : void 0,
+      "data-tab-value": isDisabled ? void 0 : value,
+      "data-testid": dataTestId,
+      href,
+      id,
+      isDisabled: href == null ? isDisabled : void 0,
+      isLink: href != null,
+      onClick: (event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        context.onChange(value);
+      },
+      ref,
+      role: "tab",
+      style,
+      tabIndex: isSelected && !isDisabled ? 0 : -1,
+      type: "button",
+      children: content
+    }
+  );
+}
+Tab.displayName = "Tab";
+function Tabs({
+  children,
+  className,
+  "data-testid": dataTestId,
+  hasDivider = false,
+  label = "Tabs",
+  layout = "hug",
+  onChange,
+  ref,
+  size = "md",
+  style,
+  value
+}) {
+  const contextValue = react.useMemo(
+    () => ({ layout, onChange, size, value }),
+    [layout, onChange, size, value]
+  );
+  const classes = tabsRecipe({ hasDivider, layout });
+  const handleKeyDown = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
+      return;
+    }
+    const activeTab = event.target.closest(
+      '[role="tab"]'
+    );
+    if (activeTab == null || !event.currentTarget.contains(activeTab)) {
+      return;
+    }
+    const tabs = Array.from(
+      event.currentTarget.querySelectorAll(
+        '[role="tab"]:not([data-tab-disabled="true"])'
+      )
+    );
+    const currentIndex = tabs.indexOf(activeTab);
+    if (currentIndex === -1) {
+      return;
+    }
+    event.preventDefault();
+    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (currentIndex + 1) % tabs.length : (currentIndex - 1 + tabs.length) % tabs.length;
+    const nextTab = tabs[nextIndex];
+    nextTab.focus();
+    const nextValue = nextTab.dataset.tabValue;
+    if (nextValue != null) {
+      onChange(nextValue);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
+      "data-testid": dataTestId,
+      onKeyDown: handleKeyDown,
+      ref,
+      role: "tablist",
+      style,
+      tabIndex: -1,
+      children
+    }
+  ) });
+}
+Tabs.displayName = "Tabs";
+
+// src/components/Tabs/TabMenu.recipe.ts
+var tabMenuRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["chevron", "menu", "item", "itemContent", "itemIcon", "check"],
+  base: {
+    chevron: {
+      display: "inline-flex"
+    },
+    menu: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      minW: "40",
+      p: "1"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      w: "full",
+      px: "2",
+      py: "2",
+      borderWidth: 0,
+      borderRadius: "md",
+      bg: "transparent",
+      color: "fg",
+      cursor: "pointer",
+      fontFamily: "body",
+      textAlign: "start",
+      _hover: { bg: "bg.subtle" },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffsetTight"
+      }
+    },
+    itemContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      minW: 0
+    },
+    itemIcon: {
+      display: "inline-flex",
+      color: "fg.muted"
+    },
+    check: {
+      display: "inline-flex",
+      color: "primary"
+    }
+  },
+  variants: {
+    isOpen: {
+      true: { chevron: { transform: "rotate(180deg)" } },
+      false: {}
+    },
+    isItemSelected: {
+      true: { item: { fontWeight: "medium" } },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isOpen: false,
+    isItemSelected: false
+  }
+});
+function TabMenu({
+  className,
+  "data-testid": dataTestId,
+  id,
+  isDisabled = false,
+  label,
+  options,
+  ref,
+  style
+}) {
+  const context = useTabsContext();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const triggerRef = react.useRef(null);
+  const selectedOption = options.find((option) => option.value === context.value);
+  const triggerLabel = selectedOption?.label ?? label;
+  const hasSelectedOption = selectedOption != null;
+  const triggerClasses = tabsRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected: hasSelectedOption,
+    isDisabled
+  });
+  const classes = tabMenuRecipe({ isOpen });
+  const focusMenuItem = (event, nextIndex) => {
+    const menu = event.currentTarget.closest('[role="menu"]');
+    const items = Array.from(
+      menu?.querySelectorAll('[role="menuitem"]') ?? []
+    );
+    items[nextIndex]?.focus();
+  };
+  const handleMenuKeyDown = (event) => {
+    const menu = event.currentTarget.closest('[role="menu"]');
+    const items = Array.from(
+      menu?.querySelectorAll('[role="menuitem"]') ?? []
+    );
+    const activeIndex = items.indexOf(
+      document.activeElement
+    );
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setIsOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (items.length === 0) {
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusMenuItem(event, 0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusMenuItem(event, items.length - 1);
+      return;
+    }
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+      return;
+    }
+    event.preventDefault();
+    const currentIndex = activeIndex === -1 ? 0 : activeIndex;
+    const nextIndex = event.key === "ArrowDown" ? (currentIndex + 1) % items.length : (currentIndex - 1 + items.length) % items.length;
+    focusMenuItem(event, nextIndex);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkRAMDISDK_cjs.Popover,
+    {
+      content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.menu, children: options.map((option) => {
+        const isSelected = option.value === context.value;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            "aria-current": isSelected ? "true" : void 0,
+            className: tabMenuRecipe({ isItemSelected: isSelected }).item,
+            onClick: () => {
+              context.onChange(option.value);
+              setIsOpen(false);
+            },
+            onKeyDown: handleMenuKeyDown,
+            role: "menuitem",
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.itemContent, children: [
+                option.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.itemIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
+                option.label
+              ] }),
+              isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.check, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "accent", icon: lucideReact.Check, size: "sm" }) }) : null
+            ]
+          },
+          option.value
+        );
+      }) }),
+      hasAutoFocus: true,
+      hasCloseButton: false,
+      isEnabled: !isDisabled,
+      isOpen,
+      label,
+      onOpenChange: setIsOpen,
+      role: "menu",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          "aria-disabled": isDisabled || void 0,
+          "aria-selected": hasSelectedOption,
+          className: chunkSPDVNY2Z_cjs.cx(triggerClasses.tab, className),
+          "data-tab-disabled": isDisabled ? "true" : void 0,
+          "data-tab-value": hasSelectedOption && !isDisabled ? context.value : void 0,
+          "data-testid": dataTestId,
+          disabled: isDisabled,
+          id,
+          onKeyDown: (event) => {
+            if (event.key !== "ArrowDown") {
+              return;
+            }
+            event.preventDefault();
+            setIsOpen(true);
+          },
+          ref: chunk6SHL7FYO_cjs.mergeRefs(triggerRef, ref),
+          role: "tab",
+          style,
+          tabIndex: hasSelectedOption && !isDisabled ? 0 : -1,
+          type: "button",
+          children: [
+            triggerLabel,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.chevron, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) })
+          ]
+        }
+      )
+    }
+  );
+}
+TabMenu.displayName = "TabMenu";
+
+exports.Tab = Tab;
+exports.TabMenu = TabMenu;
+exports.Tabs = Tabs;
+exports.TabsContext = TabsContext;
+exports.useTabsContext = useTabsContext;
+//# sourceMappingURL=chunk-5JROXZBG.cjs.map
+//# sourceMappingURL=chunk-5JROXZBG.cjs.map

package/dist/chunk-5JROXZBG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tabs/Tabs.recipe.ts","../src/components/Tabs/TabsContext.ts","../src/components/Tabs/Tab.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/TabMenu.recipe.ts","../src/components/Tabs/TabMenu.tsx"],"names":["sva","createContext","use","cx","jsxs","Fragment","jsx","Icon","isReactNode","ActionElement","useMemo","useState","useRef","Popover","Check","mergeRefs","ChevronDown"],"mappings":"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","file":"chunk-5JROXZBG.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const tabsRecipe = sva({\n  slots: [\n    'root',\n    'tab',\n    'icon',\n    'label',\n    'labelText',\n    'labelSizer',\n    'endContent',\n  ],\n  base: {\n    root: {\n      display: 'flex',\n      alignItems: 'stretch',\n      maxW: 'full',\n      minW: 0,\n    },\n    tab: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: '1',\n      mb: '-1px',\n      px: '3',\n      borderWidth: 0,\n      borderBottomWidth: 'emphasized',\n      borderBottomStyle: 'solid',\n      borderBottomColor: 'transparent',\n      bg: 'transparent',\n      color: 'fg.muted',\n      cursor: 'pointer',\n      fontFamily: 'body',\n      fontSize: 'md',\n      fontWeight: 'normal',\n      lineHeight: 'normal',\n      textDecoration: 'none',\n      whiteSpace: 'nowrap',\n      transitionProperty: 'color, background-color, border-color',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      _hover: {\n        bg: 'bg.subtle',\n      },\n      _focusVisible: {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffset',\n      },\n    },\n    icon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    },\n    label: {\n      display: 'inline-grid',\n    },\n    labelText: {\n      gridRowStart: 1,\n      gridColumnStart: 1,\n    },\n    labelSizer: {\n      gridRowStart: 1,\n      gridColumnStart: 1,\n      visibility: 'hidden',\n      pointerEvents: 'none',\n      fontWeight: 'semibold',\n    },\n    endContent: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    size: {\n      sm: {tab: {h: 'component.sm'}},\n      md: {tab: {h: 'component.md'}},\n      lg: {tab: {h: 'component.lg'}},\n    },\n    layout: {\n      hug: {},\n      fill: {\n        root: {w: 'full'},\n        tab: {flex: 1},\n      },\n    },\n    isSelected: {\n      true: {\n        tab: {\n          borderBottomColor: 'fg',\n          color: 'fg',\n          fontWeight: 'semibold',\n        },\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        tab: {\n          color: 'fg.disabled',\n          cursor: 'not-allowed',\n          _hover: {\n            bg: 'transparent',\n          },\n        },\n      },\n      false: {},\n    },\n    hasDivider: {\n      true: {\n        root: {\n          borderBlockEndWidth: 'default',\n          borderBlockEndStyle: 'solid',\n          borderBlockEndColor: 'border',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    layout: 'hug',\n    isSelected: false,\n    isDisabled: false,\n    hasDivider: false,\n  },\n});\n\nexport type TabsVariants = RecipeVariantProps<typeof tabsRecipe>;\n","import {createContext, use} from 'react';\n\nexport type TabsSize = 'lg' | 'md' | 'sm';\nexport type TabsLayout = 'fill' | 'hug';\n\nexport interface TabsContextValue {\n  layout: TabsLayout;\n  onChange: (value: string) => void;\n  size: TabsSize;\n  value: string;\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\nexport function useTabsContext(): TabsContextValue {\n  const context = use(TabsContext);\n  if (context == null) {\n    throw new Error('Tabs children must be used within a Tabs.');\n  }\n  return context;\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport type {LinkComponent} from 'components/Link';\nimport {tabsRecipe} from 'components/Tabs/Tabs.recipe';\nimport {useTabsContext} from 'components/Tabs/TabsContext';\nimport {ActionElement} from 'internal/ActionElement';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport interface TabProps {\n  /**\n   * Custom link component used when href is set.\n   */\n  as?: LinkComponent;\n  /**\n   * Additional CSS class names applied to the tab.\n   */\n  className?: string;\n  /**\n   * ID of the tabpanel controlled by this tab. Use this for in-page tabs, and\n   * render the corresponding panel with `id={controls}`, `role=\"tabpanel\"`,\n   * and `aria-labelledby` pointing to this tab's `id`.\n   */\n  controls?: string;\n  /**\n   * Test ID applied to the tab.\n   */\n  'data-testid'?: string;\n  /**\n   * Content rendered after the label.\n   */\n  endContent?: ReactNode;\n  /**\n   * Optional link URL. When set, the tab renders as a link.\n   */\n  href?: string;\n  /**\n   * Icon shown before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * ID applied to the tab element. Provide this with `controls` when rendering\n   * your own tabpanel so the panel can reference the tab with\n   * `aria-labelledby`.\n   */\n  id?: string;\n  /**\n   * Whether the tab is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Visible tab label.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the tab root.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Icon shown when selected. Falls back to icon.\n   */\n  selectedIcon?: IconComponent;\n  /**\n   * Inline styles applied to the tab.\n   */\n  style?: CSSProperties;\n  /**\n   * Unique tab value.\n   */\n  value: string;\n}\n\n/**\n * A single tab inside `Tabs`.\n */\nexport function Tab({\n  as,\n  className,\n  'data-testid': dataTestId,\n  controls,\n  endContent,\n  href,\n  id,\n  icon,\n  isDisabled = false,\n  label,\n  ref,\n  selectedIcon,\n  style,\n  value,\n}: TabProps): React.JSX.Element {\n  const context = useTabsContext();\n  const isSelected = context.value === value;\n  const displayIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n  const classes = tabsRecipe({\n    size: context.size,\n    layout: context.layout,\n    isSelected,\n    isDisabled,\n  });\n  const rootClassName = cx(classes.tab, className);\n  const content = (\n    <>\n      {displayIcon != null ? (\n        <span className={classes.icon}>\n          <Icon icon={displayIcon} size={context.size} />\n        </span>\n      ) : null}\n      <span className={classes.label}>\n        <span className={classes.labelText}>{label}</span>\n        <span aria-hidden=\"true\" className={classes.labelSizer}>\n          {label}\n        </span>\n      </span>\n      {isReactNode(endContent) ? (\n        <span className={classes.endContent}>{endContent}</span>\n      ) : null}\n    </>\n  );\n\n  return (\n    <ActionElement\n      aria-controls={controls}\n      aria-disabled={href != null && isDisabled ? true : undefined}\n      aria-selected={isSelected}\n      as={as}\n      className={rootClassName}\n      data-tab-disabled={isDisabled ? 'true' : undefined}\n      data-tab-value={isDisabled ? undefined : value}\n      data-testid={dataTestId}\n      href={href}\n      id={id}\n      isDisabled={href == null ? isDisabled : undefined}\n      isLink={href != null}\n      onClick={event => {\n        if (isDisabled) {\n          event.preventDefault();\n          return;\n        }\n\n        context.onChange(value);\n      }}\n      ref={ref}\n      role=\"tab\"\n      style={style}\n      tabIndex={isSelected && !isDisabled ? 0 : -1}\n      type=\"button\">\n      {content}\n    </ActionElement>\n  );\n}\n\nTab.displayName = 'Tab';\n","import {\n  useMemo,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {tabsRecipe} from 'components/Tabs/Tabs.recipe';\nimport {\n  TabsContext,\n  type TabsLayout,\n  type TabsSize,\n} from 'components/Tabs/TabsContext';\nimport {cx} from 'internal/cx';\n\nexport interface TabsProps {\n  /**\n   * Tab and TabMenu children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the tablist element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the tablist element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether to show a bottom divider.\n   * @default false\n   */\n  hasDivider?: boolean;\n  /**\n   * Accessible label for the tabs.\n   * @default 'Tabs'\n   */\n  label?: string;\n  /**\n   * Tab layout mode.\n   * @default 'hug'\n   */\n  layout?: TabsLayout;\n  /**\n   * Called when a tab is selected.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Ref forwarded to the tablist element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Tab size.\n   * @default 'md'\n   */\n  size?: TabsSize;\n  /**\n   * Inline styles applied to the tablist element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current selected tab value.\n   */\n  value: string;\n}\n\n/**\n * Controlled tab wrapper.\n *\n * Uses `tablist` / `tabpanel` semantics, so reach for it when selecting an\n * option shows or hides associated content panels. To pick a value without\n * swapping panels — a styled radio group for filters, settings, or view modes —\n * use {@link SegmentedControl} instead.\n */\nexport function Tabs({\n  children,\n  className,\n  'data-testid': dataTestId,\n  hasDivider = false,\n  label = 'Tabs',\n  layout = 'hug',\n  onChange,\n  ref,\n  size = 'md',\n  style,\n  value,\n}: TabsProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({layout, onChange, size, value}),\n    [layout, onChange, size, value],\n  );\n  const classes = tabsRecipe({hasDivider, layout});\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (\n      event.key !== 'ArrowLeft' &&\n      event.key !== 'ArrowRight' &&\n      event.key !== 'Home' &&\n      event.key !== 'End'\n    ) {\n      return;\n    }\n\n    const activeTab = (event.target as HTMLElement).closest<HTMLElement>(\n      '[role=\"tab\"]',\n    );\n    if (activeTab == null || !event.currentTarget.contains(activeTab)) {\n      return;\n    }\n\n    const tabs = Array.from(\n      event.currentTarget.querySelectorAll<HTMLElement>(\n        '[role=\"tab\"]:not([data-tab-disabled=\"true\"])',\n      ),\n    );\n    const currentIndex = tabs.indexOf(activeTab);\n    if (currentIndex === -1) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const nextIndex =\n      event.key === 'Home'\n        ? 0\n        : event.key === 'End'\n          ? tabs.length - 1\n          : event.key === 'ArrowRight'\n            ? (currentIndex + 1) % tabs.length\n            : (currentIndex - 1 + tabs.length) % tabs.length;\n    const nextTab = tabs[nextIndex];\n    nextTab.focus();\n\n    const nextValue = nextTab.dataset.tabValue;\n    if (nextValue != null) {\n      onChange(nextValue);\n    }\n  };\n\n  return (\n    <TabsContext value={contextValue}>\n      <div\n        aria-label={label}\n        className={cx(classes.root, className)}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyDown}\n        ref={ref as Ref<HTMLDivElement>}\n        role=\"tablist\"\n        style={style}\n        tabIndex={-1}>\n        {children}\n      </div>\n    </TabsContext>\n  );\n}\n\nTabs.displayName = 'Tabs';\n","import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const tabMenuRecipe = sva({\n  slots: ['chevron', 'menu', 'item', 'itemContent', 'itemIcon', 'check'],\n  base: {\n    chevron: {\n      display: 'inline-flex',\n    },\n    menu: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5',\n      minW: '40',\n      p: '1',\n    },\n    item: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '2',\n      w: 'full',\n      px: '2',\n      py: '2',\n      borderWidth: 0,\n      borderRadius: 'md',\n      bg: 'transparent',\n      color: 'fg',\n      cursor: 'pointer',\n      fontFamily: 'body',\n      textAlign: 'start',\n      _hover: {bg: 'bg.subtle'},\n      _focusVisible: {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffsetTight',\n      },\n    },\n    itemContent: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '2',\n      minW: 0,\n    },\n    itemIcon: {\n      display: 'inline-flex',\n      color: 'fg.muted',\n    },\n    check: {\n      display: 'inline-flex',\n      color: 'primary',\n    },\n  },\n  variants: {\n    isOpen: {\n      true: {chevron: {transform: 'rotate(180deg)'}},\n      false: {},\n    },\n    isItemSelected: {\n      true: {item: {fontWeight: 'medium'}},\n      false: {},\n    },\n  },\n  defaultVariants: {\n    isOpen: false,\n    isItemSelected: false,\n  },\n});\n\nexport type TabMenuVariants = RecipeVariantProps<typeof tabMenuRecipe>;\n","import {Check, ChevronDown} from 'lucide-react';\nimport {\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type Ref,\n} from 'react';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Popover} from 'components/Popover';\nimport {tabMenuRecipe} from 'components/Tabs/TabMenu.recipe';\nimport {tabsRecipe} from 'components/Tabs/Tabs.recipe';\nimport {useTabsContext} from 'components/Tabs/TabsContext';\nimport {cx} from 'internal/cx';\nimport {mergeRefs} from 'internal/mergeRefs';\n\nexport interface TabMenuOption {\n  /**\n   * Icon rendered before the option label.\n   */\n  icon?: IconComponent;\n  /**\n   * Visible option label.\n   */\n  label: string;\n  /**\n   * Tab value selected by this option.\n   */\n  value: string;\n}\n\nexport interface TabMenuProps {\n  /**\n   * Additional CSS class names applied to the trigger.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the trigger.\n   */\n  'data-testid'?: string;\n  /**\n   * ID applied to the menu trigger tab.\n   */\n  id?: string;\n  /**\n   * Whether the menu trigger is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Trigger and menu heading label.\n   */\n  label: string;\n  /**\n   * Menu options.\n   */\n  options: ReadonlyArray<TabMenuOption>;\n  /**\n   * Ref forwarded to the trigger button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the trigger.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Overflow menu for additional tabs.\n */\nexport function TabMenu({\n  className,\n  'data-testid': dataTestId,\n  id,\n  isDisabled = false,\n  label,\n  options,\n  ref,\n  style,\n}: TabMenuProps): React.JSX.Element {\n  const context = useTabsContext();\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const selectedOption = options.find(option => option.value === context.value);\n  const triggerLabel = selectedOption?.label ?? label;\n  const hasSelectedOption = selectedOption != null;\n  const triggerClasses = tabsRecipe({\n    size: context.size,\n    layout: context.layout,\n    isSelected: hasSelectedOption,\n    isDisabled,\n  });\n  const classes = tabMenuRecipe({isOpen});\n\n  const focusMenuItem = (\n    event: KeyboardEvent<HTMLElement>,\n    nextIndex: number,\n  ) => {\n    const menu = event.currentTarget.closest<HTMLElement>('[role=\"menu\"]');\n    const items = Array.from(\n      menu?.querySelectorAll<HTMLButtonElement>('[role=\"menuitem\"]') ?? [],\n    );\n    items[nextIndex]?.focus();\n  };\n\n  const handleMenuKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const menu = event.currentTarget.closest<HTMLElement>('[role=\"menu\"]');\n    const items = Array.from(\n      menu?.querySelectorAll<HTMLButtonElement>('[role=\"menuitem\"]') ?? [],\n    );\n    const activeIndex = items.indexOf(\n      document.activeElement as HTMLButtonElement,\n    );\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      setIsOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n\n    if (items.length === 0) {\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusMenuItem(event, 0);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusMenuItem(event, items.length - 1);\n      return;\n    }\n\n    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {\n      return;\n    }\n\n    event.preventDefault();\n\n    const currentIndex = activeIndex === -1 ? 0 : activeIndex;\n    const nextIndex =\n      event.key === 'ArrowDown'\n        ? (currentIndex + 1) % items.length\n        : (currentIndex - 1 + items.length) % items.length;\n    focusMenuItem(event, nextIndex);\n  };\n\n  return (\n    <Popover\n      content={\n        <div className={classes.menu}>\n          {options.map(option => {\n            const isSelected = option.value === context.value;\n            return (\n              <button\n                aria-current={isSelected ? 'true' : undefined}\n                className={tabMenuRecipe({isItemSelected: isSelected}).item}\n                key={option.value}\n                onClick={() => {\n                  context.onChange(option.value);\n                  setIsOpen(false);\n                }}\n                onKeyDown={handleMenuKeyDown}\n                role=\"menuitem\"\n                type=\"button\">\n                <span className={classes.itemContent}>\n                  {option.icon != null ? (\n                    <span className={classes.itemIcon}>\n                      <Icon color=\"secondary\" icon={option.icon} size=\"sm\" />\n                    </span>\n                  ) : null}\n                  {option.label}\n                </span>\n                {isSelected ? (\n                  <span className={classes.check}>\n                    <Icon color=\"accent\" icon={Check} size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n      }\n      hasAutoFocus\n      hasCloseButton={false}\n      isEnabled={!isDisabled}\n      isOpen={isOpen}\n      label={label}\n      onOpenChange={setIsOpen}\n      role=\"menu\">\n      <button\n        aria-disabled={isDisabled || undefined}\n        aria-selected={hasSelectedOption}\n        className={cx(triggerClasses.tab, className)}\n        data-tab-disabled={isDisabled ? 'true' : undefined}\n        data-tab-value={\n          hasSelectedOption && !isDisabled ? context.value : undefined\n        }\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={id}\n        onKeyDown={event => {\n          if (event.key !== 'ArrowDown') {\n            return;\n          }\n\n          event.preventDefault();\n          setIsOpen(true);\n        }}\n        ref={mergeRefs(triggerRef, ref)}\n        role=\"tab\"\n        style={style}\n        tabIndex={hasSelectedOption && !isDisabled ? 0 : -1}\n        type=\"button\">\n        {triggerLabel}\n        <span className={classes.chevron}>\n          <Icon icon={ChevronDown} size=\"sm\" />\n        </span>\n      </button>\n    </Popover>\n  );\n}\n\nTabMenu.displayName = 'TabMenu';\n"]}