@giddaa-housing/ui 0.1.0

package/dist/tab-list.js

@@ -0,0 +1,394 @@
+// src/components/ui/tab-list.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { useState as useState2 } from "react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/use-mobile.ts
+import * as React from "react";
+var DEFAULT_MOBILE_BREAKPOINT = 1024;
+function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setIsMobile(window.innerWidth < breakpoint);
+    update();
+    mediaQuery.addEventListener("change", update);
+    return () => mediaQuery.removeEventListener("change", update);
+  }, [breakpoint]);
+  return isMobile;
+}
+
+// src/components/ui/dropdown-menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva } from "class-variance-authority";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function SizeProvider({
+  children,
+  size
+}) {
+  if (!size) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
+}
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/dropdown-menu.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  children,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(SizeProvider, { size, children: /* @__PURE__ */ jsx2(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, children }) });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+var dropdownMenuContentVariants = cva(
+  "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+  {
+    variants: {
+      size: {
+        sm: "rounded-lg p-1",
+        md: "rounded-xl p-1.5",
+        lg: "rounded-[18px] p-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuItemVariants = cva(
+  "group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+        md: "gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+        lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuLabelVariants = cva(
+  "font-medium text-fg-secondary data-inset:pl-8",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-1 text-gdt-xs",
+        md: "px-3 py-1 text-gdt-xs",
+        lg: "px-4 py-1.5 text-gdt-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 6,
+  className,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx2(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+    MenuPrimitive.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx2(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          "data-size": resolvedSize,
+          className: cn(
+            dropdownMenuContentVariants({ size: resolvedSize }),
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      "data-variant": variant,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "data-inset:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveTabsListVariant(variant) {
+  return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
+}
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(
+        "group/tabs flex gap-3 data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva2(
+  "group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle",
+  {
+    variants: {
+      variant: {
+        underline: "rounded-none bg-transparent p-0",
+        secondary: "rounded-4xl bg-transparent p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "underline",
+  children,
+  ...props
+}) {
+  const resolvedVariant = resolveTabsListVariant(variant);
+  return /* @__PURE__ */ jsxs2(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": resolvedVariant,
+      className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(
+          TabsPrimitive.Indicator,
+          {
+            className: cn(
+              "pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out",
+              "group-data-[variant=secondary]/tabs-list:hidden",
+              "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none",
+              "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0",
+              "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  nativeButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      nativeButton,
+      className: cn(
+        "group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm",
+        "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsCount({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-slot": "tabs-count",
+      className: cn(
+        "inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]",
+        "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
+        "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tab-list.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function TabList({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "line",
+  maxVisibleMobile = 2,
+  maxVisibleDesktop = 4,
+  moreLabel = "More",
+  className,
+  listClassName,
+  children,
+  ...rootProps
+}) {
+  const isMobile = useIsMobile();
+  const [internalValue, setInternalValue] = useState2(
+    value ?? defaultValue ?? items[0]?.value
+  );
+  const currentValue = value ?? internalValue;
+  const selectValue = (next) => {
+    if (value === void 0) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const maxVisible = isMobile ? maxVisibleMobile : maxVisibleDesktop;
+  const visibleItems = items.slice(0, maxVisible);
+  const overflowItems = items.slice(maxVisible);
+  const isOverflowActive = overflowItems.some(
+    (item) => item.value === currentValue
+  );
+  return /* @__PURE__ */ jsxs3(
+    Tabs,
+    {
+      value: currentValue,
+      onValueChange: (next) => selectValue(next),
+      className,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsxs3(TabsList, { variant, className: listClassName, children: [
+          visibleItems.map((item) => /* @__PURE__ */ jsxs3(
+            TabsTrigger,
+            {
+              value: item.value,
+              disabled: item.disabled,
+              nativeButton: item.render ? false : void 0,
+              render: item.render,
+              children: [
+                item.label,
+                item.count != null && /* @__PURE__ */ jsx4(TabsCount, { children: item.count })
+              ]
+            },
+            item.value
+          )),
+          overflowItems.length > 0 && /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxs3(
+              DropdownMenuTrigger,
+              {
+                render: /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    "data-active": isOverflowActive || void 0,
+                    className: cn(
+                      "group/tab-list-more relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap border border-transparent px-4 py-3 text-gdt-md font-semibold text-fg-secondary outline-none transition-colors hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-active:text-fg-primary max-sm:px-3 max-sm:py-2.5 max-sm:text-gdt-sm"
+                    )
+                  }
+                ),
+                children: [
+                  moreLabel,
+                  /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-4 transition-transform duration-200 group-data-[popup-open]/tab-list-more:rotate-180" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx4(DropdownMenuContent, { align: "end", children: overflowItems.map((item) => /* @__PURE__ */ jsxs3(
+              DropdownMenuItem,
+              {
+                disabled: item.disabled,
+                "data-active": item.value === currentValue || void 0,
+                className: "justify-between gap-3 data-active:text-fg-brand",
+                render: item.render,
+                onClick: () => selectValue(item.value),
+                children: [
+                  item.label,
+                  item.count != null && /* @__PURE__ */ jsx4("span", { className: "ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-surface-raised px-1.5 py-0.5 text-[11px] leading-none font-semibold text-fg-secondary", children: item.count })
+                ]
+              },
+              item.value
+            )) })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+export {
+  TabList
+};
+//# sourceMappingURL=tab-list.js.map

package/dist/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/tab-list.tsx","../src/lib/cn.ts","../src/lib/use-mobile.ts","../src/components/ui/dropdown-menu.tsx","../src/components/ui/size-context.tsx","../src/components/ui/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useIsMobile } from \"../../lib/use-mobile\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport { Tabs, TabsCount, TabsList, TabsTrigger } from \"./tabs\";\n\ntype TabsListVariant = \"default\" | \"line\" | \"secondary\" | \"underline\";\n\ntype TabListItem = {\n\t/** Stable value used to match the active tab. */\n\tvalue: string;\n\t/** Visible label. */\n\tlabel: React.ReactNode;\n\t/** Optional count badge rendered after the label. */\n\tcount?: number;\n\tdisabled?: boolean;\n\t/**\n\t * Optional element to render the trigger as (e.g. a router `<Link>`).\n\t * Used for both the in-bar tab and its overflow menu item.\n\t */\n\trender?: React.ReactElement;\n};\n\ntype TabListProps = Omit<\n\tTabsPrimitive.Root.Props,\n\t\"children\" | \"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\titems: TabListItem[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tvariant?: TabsListVariant;\n\t/** Max tabs shown inline on small screens before collapsing into \"More\". */\n\tmaxVisibleMobile?: number;\n\t/** Max tabs shown inline on larger screens before collapsing into \"More\". */\n\tmaxVisibleDesktop?: number;\n\t/** Label for the overflow trigger. */\n\tmoreLabel?: React.ReactNode;\n\tclassName?: string;\n\tlistClassName?: string;\n\t/** Tab panels (`TabsContent`) to render under the bar. */\n\tchildren?: React.ReactNode;\n};\n\nfunction TabList({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tvariant = \"line\",\n\tmaxVisibleMobile = 2,\n\tmaxVisibleDesktop = 4,\n\tmoreLabel = \"More\",\n\tclassName,\n\tlistClassName,\n\tchildren,\n\t...rootProps\n}: TabListProps) {\n\tconst isMobile = useIsMobile();\n\tconst [internalValue, setInternalValue] = useState(\n\t\tvalue ?? defaultValue ?? items[0]?.value,\n\t);\n\n\tconst currentValue = value ?? internalValue;\n\n\tconst selectValue = (next: string) => {\n\t\tif (value === undefined) setInternalValue(next);\n\t\tonValueChange?.(next);\n\t};\n\n\tconst maxVisible = isMobile ? maxVisibleMobile : maxVisibleDesktop;\n\tconst visibleItems = items.slice(0, maxVisible);\n\tconst overflowItems = items.slice(maxVisible);\n\tconst isOverflowActive = overflowItems.some(\n\t\t(item) => item.value === currentValue,\n\t);\n\n\treturn (\n\t\t<Tabs\n\t\t\tvalue={currentValue}\n\t\t\tonValueChange={(next) => selectValue(next as string)}\n\t\t\tclassName={className}\n\t\t\t{...rootProps}\n\t\t>\n\t\t\t<TabsList variant={variant} className={listClassName}>\n\t\t\t\t{visibleItems.map((item) => (\n\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\tnativeButton={item.render ? false : undefined}\n\t\t\t\t\t\trender={item.render}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t{item.count != null && <TabsCount>{item.count}</TabsCount>}\n\t\t\t\t\t</TabsTrigger>\n\t\t\t\t))}\n\n\t\t\t\t{overflowItems.length > 0 && (\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenuTrigger\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdata-active={isOverflowActive || undefined}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"group/tab-list-more relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap border border-transparent px-4 py-3 text-gdt-md font-semibold text-fg-secondary outline-none transition-colors hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-active:text-fg-primary max-sm:px-3 max-sm:py-2.5 max-sm:text-gdt-sm\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{moreLabel}\n\t\t\t\t\t\t\t<ChevronDownIcon className=\"size-4 transition-transform duration-200 group-data-[popup-open]/tab-list-more:rotate-180\" />\n\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t<DropdownMenuContent align=\"end\">\n\t\t\t\t\t\t\t{overflowItems.map((item) => (\n\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\t\t\tdata-active={item.value === currentValue || undefined}\n\t\t\t\t\t\t\t\t\tclassName=\"justify-between gap-3 data-active:text-fg-brand\"\n\t\t\t\t\t\t\t\t\trender={item.render}\n\t\t\t\t\t\t\t\t\tonClick={() => selectValue(item.value)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t{item.count != null && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-surface-raised px-1.5 py-0.5 text-[11px] leading-none font-semibold text-fg-secondary\">\n\t\t\t\t\t\t\t\t\t\t\t{item.count}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t)}\n\t\t\t</TabsList>\n\n\t\t\t{children}\n\t\t</Tabs>\n\t);\n}\n\nexport { TabList, type TabListItem };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nconst DEFAULT_MOBILE_BREAKPOINT = 1024;\n\nfunction useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {\n\tconst [isMobile, setIsMobile] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tconst mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n\t\tconst update = () => setIsMobile(window.innerWidth < breakpoint);\n\n\t\tupdate();\n\t\tmediaQuery.addEventListener(\"change\", update);\n\n\t\treturn () => mediaQuery.removeEventListener(\"change\", update);\n\t}, [breakpoint]);\n\n\treturn isMobile;\n}\n\nexport { DEFAULT_MOBILE_BREAKPOINT, useIsMobile };\n","\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { cva } from \"class-variance-authority\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\ntype DropdownMenuSize = ComponentSize;\n\nfunction DropdownMenu({\n\tchildren,\n\tsize,\n\t...props\n}: MenuPrimitive.Root.Props & {\n\tsize?: DropdownMenuSize;\n}) {\n\treturn (\n\t\t<SizeProvider size={size}>\n\t\t\t<MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n\t\t\t\t{children}\n\t\t\t</MenuPrimitive.Root>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n\treturn <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n\treturn <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nconst dropdownMenuContentVariants = cva(\n\t\"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"rounded-lg p-1\",\n\t\t\t\tmd: \"rounded-xl p-1.5\",\n\t\t\t\tlg: \"rounded-[18px] p-2\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst dropdownMenuItemVariants = cva(\n\t\"group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\tmd: \"gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tlg: \"gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst dropdownMenuLabelVariants = cva(\n\t\"font-medium text-fg-secondary data-inset:pl-8\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"px-3 py-1 text-gdt-xs\",\n\t\t\t\tmd: \"px-3 py-1 text-gdt-xs\",\n\t\t\t\tlg: \"px-4 py-1.5 text-gdt-sm\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nfunction DropdownMenuContent({\n\talign = \"start\",\n\talignOffset = 0,\n\tside = \"bottom\",\n\tsideOffset = 6,\n\tclassName,\n\t...props\n}: MenuPrimitive.Popup.Props &\n\tPick<\n\t\tMenuPrimitive.Positioner.Props,\n\t\t\"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n\t>) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.Portal>\n\t\t\t<MenuPrimitive.Positioner\n\t\t\t\tclassName=\"isolate z-50 outline-none\"\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t>\n\t\t\t\t<MenuPrimitive.Popup\n\t\t\t\t\tdata-slot=\"dropdown-menu-content\"\n\t\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tdropdownMenuContentVariants({ size: resolvedSize }),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</MenuPrimitive.Positioner>\n\t\t</MenuPrimitive.Portal>\n\t);\n}\n\nfunction DropdownMenuGroup({ className, ...props }: MenuPrimitive.Group.Props) {\n\treturn (\n\t\t<MenuPrimitive.Group\n\t\t\tdata-slot=\"dropdown-menu-group\"\n\t\t\tclassName={cn(\"scroll-my-1 space-y-0.5\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\t...props\n}: MenuPrimitive.GroupLabel.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.GroupLabel\n\t\t\tdata-slot=\"dropdown-menu-label\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuLabelVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tvariant = \"default\",\n\t...props\n}: MenuPrimitive.Item.Props & {\n\tinset?: boolean;\n\tvariant?: \"default\" | \"destructive\";\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.Item\n\t\t\tdata-slot=\"dropdown-menu-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n\treturn <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\t...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.SubmenuTrigger\n\t\t\tdata-slot=\"dropdown-menu-sub-trigger\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"data-inset:pl-8 data-open:bg-surface data-open:text-fg-primary data-popup-open:bg-surface data-popup-open:text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n\t\t</MenuPrimitive.SubmenuTrigger>\n\t);\n}\n\nfunction DropdownMenuSubContent({\n\talign = \"start\",\n\talignOffset = -3,\n\tside = \"right\",\n\tsideOffset = 4,\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n\treturn (\n\t\t<DropdownMenuContent\n\t\t\tdata-slot=\"dropdown-menu-sub-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"w-auto min-w-28 shadow-(--elevation-e2-shadow)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\talign={align}\n\t\t\talignOffset={alignOffset}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tinset,\n\t...props\n}: MenuPrimitive.CheckboxItem.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"dropdown-menu-checkbox-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"pr-10 data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand\"\n\t\t\t\tdata-slot=\"dropdown-menu-checkbox-item-indicator\"\n\t\t\t>\n\t\t\t\t<MenuPrimitive.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.CheckboxItem>\n\t);\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n\treturn (\n\t\t<MenuPrimitive.RadioGroup\n\t\t\tdata-slot=\"dropdown-menu-radio-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tinset,\n\t...props\n}: MenuPrimitive.RadioItem.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.RadioItem\n\t\t\tdata-slot=\"dropdown-menu-radio-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"pr-10 data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand\"\n\t\t\t\tdata-slot=\"dropdown-menu-radio-item-indicator\"\n\t\t\t>\n\t\t\t\t<MenuPrimitive.RadioItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.RadioItem>\n\t);\n}\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\t...props\n}: MenuPrimitive.Separator.Props) {\n\treturn (\n\t\t<MenuPrimitive.Separator\n\t\t\tdata-slot=\"dropdown-menu-separator\"\n\t\t\tclassName={cn(\"pointer-events-none my-1 h-px bg-line-subtle\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"dropdown-menu-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-gdt-xs tracking-widest text-fg-secondary group-focus/dropdown-menu-item:text-fg-primary group-data-highlighted/dropdown-menu-item:text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuPortal,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuLabel,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuSubContent,\n\ttype DropdownMenuSize,\n};\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\ntype TabsListVariant = \"default\" | \"line\" | \"secondary\" | \"underline\";\n\nfunction resolveTabsListVariant(variant: TabsListVariant) {\n\treturn variant === \"default\"\n\t\t? \"secondary\"\n\t\t: variant === \"line\"\n\t\t\t? \"underline\"\n\t\t\t: variant;\n}\n\nfunction Tabs({\n\tclassName,\n\torientation = \"horizontal\",\n\t...props\n}: TabsPrimitive.Root.Props) {\n\treturn (\n\t\t<TabsPrimitive.Root\n\t\t\tdata-slot=\"tabs\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs flex gap-3 data-[orientation=horizontal]:flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst tabsListVariants = cva(\n\t\"group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tunderline: \"rounded-none bg-transparent p-0\",\n\t\t\t\tsecondary: \"rounded-4xl bg-transparent p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"underline\",\n\t\t},\n\t},\n);\n\nfunction TabsList({\n\tclassName,\n\tvariant = \"underline\",\n\tchildren,\n\t...props\n}: TabsPrimitive.List.Props & {\n\tvariant?: TabsListVariant;\n}) {\n\tconst resolvedVariant = resolveTabsListVariant(variant);\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tdata-variant={resolvedVariant}\n\t\t\tclassName={cn(tabsListVariants({ variant: resolvedVariant }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TabsPrimitive.Indicator\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out\",\n\t\t\t\t\t\"group-data-[variant=secondary]/tabs-list:hidden\",\n\t\t\t\t\t\"group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none\",\n\t\t\t\t\t\"group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0\",\n\t\t\t\t\t\"group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</TabsPrimitive.List>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tnativeButton = true,\n\t...props\n}: TabsPrimitive.Tab.Props) {\n\treturn (\n\t\t<TabsPrimitive.Tab\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tnativeButton={nativeButton}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsCount({ className, ...props }: ComponentPropsWithoutRef<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tabs-count\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n\treturn (\n\t\t<TabsPrimitive.Panel\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(\"flex-1 text-sm outline-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTabs,\n\tTabsList,\n\tTabsTrigger,\n\tTabsCount,\n\tTabsContent,\n\ttabsListVariants,\n};\n"],"mappings":"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","names":["useState","jsx","jsx","jsx","cva","jsx","jsxs","cva","jsx","jsxs","useState"]}

package/dist/table.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+/**
+ * Outer card wrapper.
+ *
+ * Tokens: bg-surface-overlay (container fill), border-line (container border).
+ * Pass `containerClassName` to override scroll, sizing, or rounding for
+ * individual call-sites (e.g. the data-table's max-height + rounded-[20px]).
+ */
+declare function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+/**
+ * Header band (thead).
+ *
+ * Token: bg-surface-raised (header fill).
+ * Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.
+ */
+declare function TableHeader({ className, sticky, ...props }: React.ComponentProps<"thead"> & {
+    sticky?: boolean;
+}): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+/**
+ * Footer band (tfoot).
+ *
+ * Shares the same raised surface as the header.
+ */
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+/**
+ * Table row (tr).
+ *
+ * Token: border-line-subtle (row divider). The last body row has no border
+ * via the [&_tr:last-child]:border-0 rule on TableBody.
+ */
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+/**
+ * Header cell (th).
+ *
+ * Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly
+ * cover scrolling content), text-fg-secondary, text-gdt-capitalized + uppercase
+ * for the tiny-caps column label style described in the design system.
+ */
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+/**
+ * Standard body cell (td).
+ *
+ * Token: text-fg-primary (body cell text), text-gdt-sm.
+ * Pass `pinned` when the column is sticky. Pinned cells get an opaque
+ * bg-canvas cover so scrolling content doesn't bleed through, and they
+ * mirror the parent row's hover/selected states via group variants.
+ * Non-pinned cells are left transparent so the parent row's surface shows through.
+ */
+declare function TableCell({ className, pinned, ...props }: React.ComponentProps<"td"> & {
+    pinned?: boolean;
+}): React.JSX.Element;
+/**
+ * Formatted cell title, for use within a TableCell
+ */
+declare function TableCellTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/**
+ * Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.
+ */
+declare function TableCellCaption({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/**
+ * Caption — rendered below the table, uses secondary text token.
+ */
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+
+export { Table, TableBody, TableCaption, TableCell, TableCellCaption, TableCellTitle, TableFooter, TableHead, TableHeader, TableRow };