@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/table.js

@@ -1,197 +1,129 @@
-// 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/components/ui/table.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
-function Table({
-  className,
-  containerClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "table-container",
-      className: cn(
-        "relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay",
-        containerClassName
-      ),
-      children: /* @__PURE__ */ jsx(
-        "table",
-        {
-          "data-slot": "table",
-          className: cn("min-w-full caption-bottom", className),
-          ...props
-        }
-      )
-    }
-  );
+//#region src/table.tsx
+/**
+* Outer card wrapper.
+*
+* Tokens: bg-canvas (container fill), border-line-subtle (container border).
+* Pass `containerClassName` to override scroll, sizing, or rounding for
+* individual call-sites (e.g. the data-table's max-height + rounded-[20px]).
+*/
+function Table({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: cn("relative w-full overflow-x-auto rounded-2xl border border-line-subtle bg-canvas", containerClassName),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("min-w-full caption-bottom", className),
+			...props
+		})
+	});
 }
-function TableHeader({
-  className,
-  sticky = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "thead",
-    {
-      "data-slot": "table-header",
-      className: cn(
-        "bg-surface-raised",
-        sticky && "sticky top-0 z-2 shadow-(--elevation-e2-shadow)",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* Header band (thead).
+*
+* Token: bg-surface-raised (header fill).
+* Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.
+*/
+function TableHeader({ className, sticky = false, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("bg-surface-raised", sticky && "sticky top-0 z-2 shadow-(--elevation-e2-shadow)", className),
+		...props
+	});
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tbody",
-    {
-      "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:border-0", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
 }
+/**
+* Footer band (tfoot).
+*
+* Shares the same raised surface as the header.
+*/
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tfoot",
-    {
-      "data-slot": "table-footer",
-      className: cn(
-        "border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
 }
+/**
+* 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.
+*/
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tr",
-    {
-      "data-slot": "table-row",
-      className: cn(
-        "group border-b border-line-subtle transition-colors",
-        "hover:bg-surface has-aria-expanded:bg-surface",
-        "data-[state=selected]:bg-surface-brand-subtle",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("group border-b border-line-subtle bg-canvas transition-[background-color,filter]", "hover:bg-surface active:bg-surface-raised has-aria-expanded:bg-surface", "data-[state=selected]:bg-surface-brand-subtle data-[state=selected]:hover:bg-surface-brand-subtle data-[state=selected]:hover:brightness-95 data-[state=selected]:active:brightness-90", className),
+		...props
+	});
 }
-function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "th",
-    {
-      "data-slot": "table-head",
-      className: cn(
-        "h-11 px-5 py-3.5 text-left align-middle bg-surface-raised",
-        "text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary",
-        "whitespace-nowrap has-[[role=checkbox]]:pr-0",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* Header cell (th).
+*
+* Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly
+* cover scrolling content), text-fg-secondary, text-gdt-sm semibold for the
+* table header style in Figma.
+*/
+function TableHead({ className, pinnedSide, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "whitespace-nowrap has-[[role=checkbox]]:pr-0", pinnedSide === "left" && "border-r-2 border-line", pinnedSide === "right" && "border-l-2 border-line", className),
+		...props
+	});
 }
-function TableCell({
-  className,
-  pinned = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "td",
-    {
-      "data-slot": "table-cell",
-      className: cn(
-        "px-5 py-3.5 align-middle text-gdt-sm text-fg-primary",
-        "whitespace-nowrap",
-        pinned && "bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* 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. Pass
+* `pinnedSide` to draw the 2px sticky-column divider from the Figma spec.
+* Non-pinned cells are left transparent so the parent row's surface shows through.
+*/
+function TableCell({ className, pinned = false, pinnedSide, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "whitespace-nowrap", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", pinnedSide === "left" && "border-r-2 border-line", pinnedSide === "right" && "border-l-2 border-line", className),
+		...props
+	});
 }
+/**
+* Formatted cell title, for use within a TableCell
+*/
 function TableCellTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "table-cell-title",
-      className: cn("text-gdt-sm font-semibold", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-cell-title",
+		className: cn("text-gdt-sm font-semibold", className),
+		...props
+	});
 }
-function TableCellCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "table-cell-caption",
-      className: cn("text-gdt-xs text-fg-secondary", className),
-      ...props
-    }
-  );
+/**
+* Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.
+*/
+function TableCellCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-cell-caption",
+		className: cn("text-gdt-xs text-fg-secondary", className),
+		...props
+	});
 }
-function TableCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "caption",
-    {
-      "data-slot": "table-caption",
-      className: cn("mt-4 text-gdt-sm text-fg-secondary", className),
-      ...props
-    }
-  );
+/**
+* Caption — rendered below the table, uses secondary text token.
+*/
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableCellCaption,
-  TableCellTitle,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow
-};
-//# sourceMappingURL=table.js.map
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableCellCaption, TableCellTitle, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tabs.d.ts

@@ -1,18 +1,26 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ComponentPropsWithoutRef } from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/tabs.d.ts
 type TabsListVariant = "default" | "line" | "secondary" | "underline";
-declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): React.JSX.Element;
+declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
+  size?: ComponentSize;
+}): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "secondary" | "underline" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "secondary" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, children, ...props }: Tabs$1.List.Props & {
-    variant?: TabsListVariant;
-}): React.JSX.Element;
-declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
-declare function TabsCount({ className, ...props }: ComponentPropsWithoutRef<"span">): React.JSX.Element;
-declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
-
-export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants };
+  variant?: TabsListVariant;
+}): import("react").JSX.Element;
+/**
+ * Trigger styling, exported so recipes (e.g. an overflow "More" button that
+ * isn't a real tab) can render the same look. Reads `variant` off the parent
+ * `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
+ * sync wherever it lives inside a `Tabs` tree.
+ */
+declare const tabsTriggerClassName: string;
+declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;
+declare function TabsCount({ className, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): import("react").JSX.Element;
+//#endregion
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };

package/dist/tabs.js

@@ -1,159 +1,72 @@
-// src/components/ui/tabs.tsx
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { cva } from "class-variance-authority";
-
-// 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/components/ui/tabs.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/tabs.tsx
+/**
+* Keep friendly aliases in the public API, but collapse to the two concrete
+* looks the design system ships: `underline` (Primary) and `secondary` (Pill).
+*/
 function resolveTabsListVariant(variant) {
-  return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
+	return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
 }
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Root,
-    {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: cn(
-        "group/tabs flex gap-3 data-[orientation=horizontal]:flex-col",
-        className
-      ),
-      ...props
-    }
-  );
+function Tabs({ className, orientation = "horizontal", size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		"data-size": resolvedSize,
+		className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
+		...props
+	});
 }
-var tabsListVariants = cva(
-  "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__ */ jsxs(
-    TabsPrimitive.List,
-    {
-      "data-slot": "tabs-list",
-      "data-variant": resolvedVariant,
-      className: cn(tabsListVariants({ variant: resolvedVariant }), className),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          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"
-            )
-          }
-        )
-      ]
-    }
-  );
+const tabsListVariants = cva(cn("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__ */ jsxs(Tabs$1.List, {
+		"data-slot": "tabs-list",
+		"data-variant": resolvedVariant,
+		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Tabs$1.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__ */ jsx(
-    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
-    }
-  );
+/**
+* Trigger styling, exported so recipes (e.g. an overflow "More" button that
+* isn't a real tab) can render the same look. Reads `variant` off the parent
+* `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
+* sync wherever it lives inside a `Tabs` tree.
+*/
+const tabsTriggerClassName = 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", "group-data-[size=sm]/tabs:px-3 group-data-[size=sm]/tabs:py-2 group-data-[size=sm]/tabs:text-gdt-xs group-data-[size=sm]/tabs:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs:px-4 group-data-[size=md]/tabs:py-2.5 group-data-[size=md]/tabs:text-gdt-sm group-data-[size=md]/tabs:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs:px-5 group-data-[size=lg]/tabs:py-3 group-data-[size=lg]/tabs:text-gdt-md group-data-[size=lg]/tabs:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none 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", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised 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");
+function TabsTrigger({ className, nativeButton = true, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		"data-slot": "tabs-trigger",
+		nativeButton,
+		className: cn(tabsTriggerClassName, className),
+		...props
+	});
 }
 function TabsCount({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "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
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tabs-count",
+		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs:h-4 group-data-[size=sm]/tabs:min-w-4 group-data-[size=sm]/tabs:px-1 group-data-[size=sm]/tabs:text-[10px]", "group-data-[size=md]/tabs:h-5 group-data-[size=md]/tabs:min-w-5 group-data-[size=md]/tabs:px-1 group-data-[size=md]/tabs:text-[11px]", "group-data-[size=lg]/tabs:h-5 group-data-[size=lg]/tabs:min-w-5 group-data-[size=lg]/tabs:px-1.5 group-data-[size=lg]/tabs:text-gdt-xs", "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
+	});
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Panel,
-    {
-      "data-slot": "tabs-content",
-      className: cn("flex-1 text-sm outline-none", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("flex-1 text-sm outline-none", className),
+		...props
+	});
 }
-export {
-  Tabs,
-  TabsContent,
-  TabsCount,
-  TabsList,
-  TabsTrigger,
-  tabsListVariants
-};
-//# sourceMappingURL=tabs.js.map
+//#endregion
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };

package/dist/tag.d.ts

@@ -1,25 +1,24 @@
-import * as React from 'react';
-import { ReactNode, MouseEvent } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
+//#region src/tag.d.ts
 declare const tagVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    border?: boolean | null | undefined;
-    clickable?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TagProps {
-    label: string;
-    leadingIcon?: ReactNode;
-    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    onClick?: () => void;
-    size?: ComponentSize;
-    border?: boolean;
-    clickable?: boolean;
-    disabled?: boolean;
-    className?: string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+  border?: boolean | null | undefined;
+  clickable?: boolean | null | undefined;
+  disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TagProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type"> {
+  label: string;
+  leadingIcon?: ReactNode;
+  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+  closeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type">;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  size?: ComponentSize;
+  shape?: "full" | "box";
+  border?: boolean;
+  clickable?: boolean;
+  disabled?: boolean;
 }
-declare function Tag({ label, leadingIcon, onClose, onClick, size, border, clickable, disabled, className, }: TagProps): React.JSX.Element;
-
-export { Tag, tagVariants };
+declare function Tag({ label, leadingIcon, onClose, closeButtonProps, onClick, size, shape, border, clickable, disabled, className, ...props }: TagProps): import("react").JSX.Element;
+//#endregion
+export { Tag, type TagProps, tagVariants };