@kavagy/react 0.1.1

package/dist/table/index.d.ts

@@ -0,0 +1,2 @@
+import { Table, TableCard, TableCellProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowActionsDropdown, TableRowProps } from "./table.js";
+export { Table, TableCard, type TableCellProps, type TableHeadProps, type TableHeaderProps, type TableRootProps, TableRowActionsDropdown, type TableRowProps };

package/dist/table/index.js

@@ -0,0 +1,2 @@
+import { Table, TableCard, TableRowActionsDropdown } from "./table.js";
+export { Table, TableCard, TableRowActionsDropdown };

package/dist/table/table.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPropsWithRef, HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
+import { CellProps, ColumnProps, RowProps, TableBody, TableHeaderProps as TableHeaderProps$1, TableProps } from "react-aria-components";
+//#region src/table/table.d.ts
+export declare const TableRowActionsDropdown: () => import("react").JSX.Element;
+interface TableCardHeaderProps {
+  /** The title of the table card header. */
+  title: string;
+  /** The badge displayed next to the title. String renders as a plain pill; pass a node for full control. */
+  badge?: ReactNode;
+  /** The description of the table card header. */
+  description?: string;
+  /** The content displayed after the title and badge. */
+  contentTrailing?: ReactNode;
+  /** The class name of the table card header. */
+  className?: string;
+}
+export interface TableRootProps extends TableProps, Omit<ComponentPropsWithRef<'table'>, 'className' | 'slot' | 'style'> {
+  size?: 'sm' | 'md';
+}
+declare const TableRoot: import("react").ForwardRefExoticComponent<Omit<TableRootProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export interface TableHeaderProps<T extends object> extends TableHeaderProps$1<T>, Omit<ComponentPropsWithRef<'thead'>, 'children' | 'className' | 'slot' | 'style'> {
+  bordered?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const TableHeader$1: {
+  <T extends object>({ columns, children, bordered, className, size: sizeProp, ...props }: TableHeaderProps<T>): import("react").JSX.Element;
+  displayName: string;
+};
+export interface TableHeadProps extends ColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {
+  label?: string;
+  tooltip?: string;
+}
+declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export interface TableRowProps<T extends object> extends RowProps<T>, Omit<ComponentPropsWithRef<'tr'>, 'children' | 'className' | 'onClick' | 'slot' | 'style' | 'id'> {
+  highlightSelectedRow?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const TableRow: {
+  <T extends object>({ columns, children, className, highlightSelectedRow, size: sizeProp, ...props }: TableRowProps<T>): import("react").JSX.Element;
+  displayName: string;
+};
+export interface TableCellProps extends CellProps, Omit<TdHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {
+  size?: 'sm' | 'md';
+}
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+declare const TableCard: {
+  Root: ({ children, className, size, ...props }: HTMLAttributes<HTMLDivElement> & {
+    size?: "sm" | "md";
+  }) => import("react").JSX.Element;
+  Header: ({ title, badge, description, contentTrailing, className }: TableCardHeaderProps) => import("react").JSX.Element;
+};
+declare const Table: typeof TableRoot & {
+  Body: typeof TableBody;
+  Cell: typeof TableCell;
+  Head: typeof TableHead;
+  Header: typeof TableHeader$1;
+  Row: typeof TableRow;
+};
+//#endregion
+export { Table, TableCard };
+//# sourceMappingURL=table.d.ts.map

package/dist/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../src/table/table.tsx"],"mappings":";;;qBA6Ca,+CAAuB,IAAA;UA2C1B;;EAER;;EAEA,QAAQ;;EAER;;EAEA,kBAAkB;;EAElB;;iBAuCe,uBACP,YACN,KAAK;EACP;;cAGI,2BAAS,0BAAA,KAAA,yCAAA,cAAA;iBAyBE,iBAAiB,0BACxB,mBAAqB,IAC3B,KAAK;EACP;EACA;;cAGI;GAAe,oBAAgB,SAAA,UAAA,UAAA,WAAA,MAAA,aAAA,SAOlC,iBAAiB,qBAAE,IAAA;;;iBAoCL,uBACP,aACN,KAAK,iBAAiB;EACxB;EACA;;cAGI,2BAAS,0BAAA,iCAAA,cAAA;iBA+DE,cAAc,0BACrB,SAAa,IACnB,KACE;EAGJ;EACA;;cAGI;GAAY,oBAAgB,SAAA,UAAA,WAAA,sBAAA,MAAA,aAAA,SAO/B,cAAc,qBAAE,IAAA;;;iBAgCF,uBACP,WACN,KAAK,iBAAiB;EACxB;;cAGI,2BAAS,0BAAA,iCAAA,cAAA;cA6BT;EA5SH,SAAA,UAAA,WAAA,SAAA,SAAA,eAAe;IAAoB;wBAAoB,IAAA;EAmCvD,WAAA,OAAA,OAAA,aAAA,iBAAA,aAAA,yCAAoB,IAAA;;cA8QjB,cAA4B;EAChC,aAAa;EACb,aAAa;EACb,aAAa;EACb,eAAe;EACf,YAAY"}

package/dist/table/table.js

@@ -0,0 +1,208 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { Badge } from "../badges/badges.js";
+import "../badges/index.js";
+import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { Checkbox as Checkbox$1 } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
+import { Dropdown } from "../dropdown/dropdown.js";
+import { ArrowDown, ChevronSelectorVertical, Copy01, Edit01, HelpCircle, Trash01 } from "@kavagy/icons";
+import { createContext, forwardRef, isValidElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Collection, Column, Group, Row, Table as Table$1, TableBody, TableHeader, useTableOptions } from "react-aria-components";
+//#region src/table/table.tsx
+const TableRowActionsDropdown = () => /* @__PURE__ */ jsxs(Dropdown.Root, { children: [/* @__PURE__ */ jsx(Dropdown.DotsButton, {}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+	className: "w-min",
+	children: /* @__PURE__ */ jsxs(Dropdown.Menu, {
+		"aria-label": "Row actions",
+		children: [
+			/* @__PURE__ */ jsx(Dropdown.Item, {
+				icon: Edit01,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "pr-4",
+					children: "Edit"
+				})
+			}),
+			/* @__PURE__ */ jsx(Dropdown.Item, {
+				icon: Copy01,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "pr-4",
+					children: "Copy link"
+				})
+			}),
+			/* @__PURE__ */ jsx(Dropdown.Item, {
+				icon: Trash01,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "pr-4",
+					children: "Delete"
+				})
+			})
+		]
+	})
+})] });
+const TableContext = createContext({ size: "md" });
+const TableCardRoot = ({ children, className, size = "md", ...props }) => {
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className: cx("overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className),
+			children
+		})
+	});
+};
+const TableCardHeader = ({ title, badge, description, contentTrailing, className }) => {
+	const { size } = useContext(TableContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row", size === "sm" ? "py-4 md:px-5" : "py-5 md:px-6", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-md font-semibold text-primary",
+					children: title
+				}), badge != null && (isValidElement(badge) ? badge : /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					color: "gray",
+					children: badge
+				}))]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-tertiary",
+				children: description
+			})]
+		}), contentTrailing]
+	});
+};
+const TableRoot = forwardRef(function TableRoot({ className, size = "md", ...props }, ref) {
+	const context = useContext(TableContext);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: { size: context?.size ?? size },
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsx(Table$1, {
+				...props,
+				ref,
+				className: (state) => cx("w-full overflow-x-hidden", typeof className === "function" ? className(state) : className)
+			})
+		})
+	});
+});
+TableRoot.displayName = "Table";
+const TableHeader$1 = ({ columns, children, bordered = true, className, size: sizeProp, ...props }) => {
+	const context = useContext(TableContext);
+	const { selectionBehavior, selectionMode } = useTableOptions();
+	const size = sizeProp ?? context.size;
+	return /* @__PURE__ */ jsxs(TableHeader, {
+		...props,
+		className: (state) => cx("relative bg-secondary", size === "sm" ? "h-9" : "h-11", bordered && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-secondary [&>tr>th]:focus-visible:after:bg-transparent", typeof className === "function" ? className(state) : className),
+		children: [selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, {
+			className: cx("relative py-2 pr-0 pl-4", size === "sm" ? "w-9 md:pl-5" : "w-11 md:pl-6"),
+			children: selectionMode === "multiple" && /* @__PURE__ */ jsx("div", {
+				className: "flex items-start",
+				children: /* @__PURE__ */ jsx(Checkbox$1, {
+					slot: "selection",
+					size: "md"
+				})
+			})
+		}), /* @__PURE__ */ jsx(Collection, {
+			items: columns,
+			children
+		})]
+	});
+};
+TableHeader$1.displayName = "TableHeader";
+const TableHead = forwardRef(function TableHead({ className, tooltip, label, children, ...props }, ref) {
+	const { selectionBehavior } = useTableOptions();
+	return /* @__PURE__ */ jsx(Column, {
+		...props,
+		ref,
+		className: (state) => cx("relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:ring-inset", selectionBehavior === "toggle" && "nth-2:pl-3", state.allowsSorting && "cursor-pointer", typeof className === "function" ? className(state) : className),
+		children: (state) => /* @__PURE__ */ jsxs(Group, {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [label && /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-semibold whitespace-nowrap text-quaternary",
+						children: label
+					}), typeof children === "function" ? children(state) : children]
+				}),
+				tooltip && /* @__PURE__ */ jsx(Tooltip$1, {
+					title: tooltip,
+					placement: "top",
+					children: /* @__PURE__ */ jsxs(TooltipTrigger$1, {
+						className: "cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+						children: [/* @__PURE__ */ jsx(HelpCircle, {
+							"aria-hidden": "true",
+							className: "size-4"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: tooltip
+						})]
+					})
+				}),
+				state.allowsSorting && (state.sortDirection ? /* @__PURE__ */ jsx(ArrowDown, {
+					"aria-hidden": "true",
+					className: cx("size-3 stroke-[3px] text-fg-quaternary", state.sortDirection === "ascending" && "rotate-180")
+				}) : /* @__PURE__ */ jsx(ChevronSelectorVertical, {
+					"aria-hidden": "true",
+					size: 12,
+					strokeWidth: 3,
+					className: "text-fg-quaternary"
+				}))
+			]
+		})
+	});
+});
+TableHead.displayName = "TableHead";
+const TableRow = ({ columns, children, className, highlightSelectedRow = true, size: sizeProp, ...props }) => {
+	const context = useContext(TableContext);
+	const { selectionBehavior } = useTableOptions();
+	const size = sizeProp ?? context.size;
+	return /* @__PURE__ */ jsxs(Row, {
+		...props,
+		className: (state) => cx("relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2", size === "sm" ? "h-14" : "h-18", highlightSelectedRow && "selected:bg-secondary", "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-secondary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0", typeof className === "function" ? className(state) : className),
+		children: [selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, {
+			className: cx("relative py-2 pr-0 pl-4", size === "sm" ? "md:pl-5" : "md:pl-6"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex items-end",
+				children: /* @__PURE__ */ jsx(Checkbox$1, {
+					slot: "selection",
+					size: "md"
+				})
+			})
+		}), /* @__PURE__ */ jsx(Collection, {
+			items: columns,
+			children
+		})]
+	});
+};
+TableRow.displayName = "TableRow";
+const TableCell = forwardRef(function TableCell({ className, children, size: sizeProp, ...props }, ref) {
+	const context = useContext(TableContext);
+	const { selectionBehavior } = useTableOptions();
+	const size = sizeProp ?? context.size;
+	return /* @__PURE__ */ jsx(Cell, {
+		...props,
+		ref,
+		className: (state) => cx("relative text-sm text-tertiary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2", size === "sm" && "px-5 py-3", size === "md" && "px-6 py-4", selectionBehavior === "toggle" && "nth-2:pl-3", typeof className === "function" ? className(state) : className),
+		children
+	});
+});
+TableCell.displayName = "TableCell";
+const TableCard = {
+	Root: TableCardRoot,
+	Header: TableCardHeader
+};
+const Table = TableRoot;
+Table.Body = TableBody;
+Table.Cell = TableCell;
+Table.Head = TableHead;
+Table.Header = TableHeader$1;
+Table.Row = TableRow;
+//#endregion
+export { Table, TableCard, TableRowActionsDropdown };
+
+//# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":["AriaTable","TableHeader","AriaTableHeader","AriaColumn","Checkbox","AriaCollection","AriaGroup","Tooltip","TooltipTrigger","AriaRow","AriaCell","AriaTableBody"],"sources":["../../src/table/table.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/application/table/table.tsx */\n\nimport {\n  ArrowDown,\n  ChevronSelectorVertical,\n  Copy01,\n  Edit01,\n  HelpCircle,\n  Trash01,\n} from '@kavagy/icons';\nimport type {\n  ComponentPropsWithRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  TdHTMLAttributes,\n  ThHTMLAttributes,\n} from 'react';\nimport { createContext, forwardRef, isValidElement, useContext } from 'react';\nimport type {\n  CellProps as AriaCellProps,\n  ColumnProps as AriaColumnProps,\n  RowProps as AriaRowProps,\n  TableHeaderProps as AriaTableHeaderProps,\n  TableProps as AriaTableProps,\n} from 'react-aria-components';\nimport {\n  Cell as AriaCell,\n  Collection as AriaCollection,\n  Column as AriaColumn,\n  Group as AriaGroup,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableHeader as AriaTableHeader,\n  useTableOptions,\n} from 'react-aria-components';\nimport { Badge } from '../badges';\nimport { Checkbox } from '../checkbox';\nimport { Dropdown } from '../dropdown/dropdown';\nimport { Tooltip, TooltipTrigger } from '../tooltip';\nimport { cx } from '../utils/cx';\n\nexport const TableRowActionsDropdown = () => (\n  <Dropdown.Root>\n    <Dropdown.DotsButton />\n\n    <Dropdown.Popover className=\"w-min\">\n      <Dropdown.Menu aria-label=\"Row actions\">\n        <Dropdown.Item icon={Edit01}>\n          <span className=\"pr-4\">Edit</span>\n        </Dropdown.Item>\n        <Dropdown.Item icon={Copy01}>\n          <span className=\"pr-4\">Copy link</span>\n        </Dropdown.Item>\n        <Dropdown.Item icon={Trash01}>\n          <span className=\"pr-4\">Delete</span>\n        </Dropdown.Item>\n      </Dropdown.Menu>\n    </Dropdown.Popover>\n  </Dropdown.Root>\n);\n\nconst TableContext = createContext<{ size: 'sm' | 'md' }>({ size: 'md' });\n\nconst TableCardRoot = ({\n  children,\n  className,\n  size = 'md',\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { size?: 'sm' | 'md' }) => {\n  return (\n    <TableContext.Provider value={{ size }}>\n      <div\n        {...props}\n        className={cx(\n          'overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </TableContext.Provider>\n  );\n};\n\ninterface TableCardHeaderProps {\n  /** The title of the table card header. */\n  title: string;\n  /** The badge displayed next to the title. String renders as a plain pill; pass a node for full control. */\n  badge?: ReactNode;\n  /** The description of the table card header. */\n  description?: string;\n  /** The content displayed after the title and badge. */\n  contentTrailing?: ReactNode;\n  /** The class name of the table card header. */\n  className?: string;\n}\n\nconst TableCardHeader = ({\n  title,\n  badge,\n  description,\n  contentTrailing,\n  className,\n}: TableCardHeaderProps) => {\n  const { size } = useContext(TableContext);\n\n  return (\n    <div\n      className={cx(\n        'relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row',\n        size === 'sm' ? 'py-4 md:px-5' : 'py-5 md:px-6',\n        className,\n      )}\n    >\n      <div className=\"flex flex-1 flex-col gap-0.5\">\n        <div className=\"flex items-center gap-2\">\n          <h2 className=\"text-md font-semibold text-primary\">{title}</h2>\n          {badge != null &&\n            (isValidElement(badge) ? (\n              badge\n            ) : (\n              <Badge size=\"sm\" color=\"gray\">\n                {badge}\n              </Badge>\n            ))}\n        </div>\n        {description && <p className=\"text-sm text-tertiary\">{description}</p>}\n      </div>\n      {contentTrailing}\n    </div>\n  );\n};\n\nexport interface TableRootProps\n  extends AriaTableProps,\n    Omit<ComponentPropsWithRef<'table'>, 'className' | 'slot' | 'style'> {\n  size?: 'sm' | 'md';\n}\n\nconst TableRoot = forwardRef<HTMLTableElement, TableRootProps>(function TableRoot(\n  { className, size = 'md', ...props },\n  ref,\n) {\n  const context = useContext(TableContext);\n\n  return (\n    <TableContext.Provider value={{ size: context?.size ?? size }}>\n      <div className=\"overflow-x-auto\">\n        <AriaTable\n          {...props}\n          ref={ref}\n          className={(state) =>\n            cx(\n              'w-full overflow-x-hidden',\n              typeof className === 'function' ? className(state) : className,\n            )\n          }\n        />\n      </div>\n    </TableContext.Provider>\n  );\n});\nTableRoot.displayName = 'Table';\n\nexport interface TableHeaderProps<T extends object>\n  extends AriaTableHeaderProps<T>,\n    Omit<ComponentPropsWithRef<'thead'>, 'children' | 'className' | 'slot' | 'style'> {\n  bordered?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableHeader = <T extends object>({\n  columns,\n  children,\n  bordered = true,\n  className,\n  size: sizeProp,\n  ...props\n}: TableHeaderProps<T>) => {\n  const context = useContext(TableContext);\n  const { selectionBehavior, selectionMode } = useTableOptions();\n\n  const size = sizeProp ?? context.size;\n\n  return (\n    <AriaTableHeader\n      {...props}\n      className={(state) =>\n        cx(\n          'relative bg-secondary',\n          size === 'sm' ? 'h-9' : 'h-11',\n          bordered &&\n            '[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-secondary [&>tr>th]:focus-visible:after:bg-transparent',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {selectionBehavior === 'toggle' && (\n        <AriaColumn\n          className={cx('relative py-2 pr-0 pl-4', size === 'sm' ? 'w-9 md:pl-5' : 'w-11 md:pl-6')}\n        >\n          {selectionMode === 'multiple' && (\n            <div className=\"flex items-start\">\n              <Checkbox slot=\"selection\" size=\"md\" />\n            </div>\n          )}\n        </AriaColumn>\n      )}\n      <AriaCollection items={columns}>{children}</AriaCollection>\n    </AriaTableHeader>\n  );\n};\nTableHeader.displayName = 'TableHeader';\n\nexport interface TableHeadProps\n  extends AriaColumnProps,\n    Omit<ThHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {\n  label?: string;\n  tooltip?: string;\n}\n\nconst TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, tooltip, label, children, ...props },\n  ref,\n) {\n  const { selectionBehavior } = useTableOptions();\n\n  return (\n    <AriaColumn\n      {...props}\n      ref={ref}\n      className={(state) =>\n        cx(\n          'relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:ring-inset',\n          selectionBehavior === 'toggle' && 'nth-2:pl-3',\n          state.allowsSorting && 'cursor-pointer',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {(state) => (\n        <AriaGroup className=\"flex items-center gap-1\">\n          <div className=\"flex items-center gap-1\">\n            {label && (\n              <span className=\"text-xs font-semibold whitespace-nowrap text-quaternary\">\n                {label}\n              </span>\n            )}\n            {typeof children === 'function' ? children(state) : children}\n          </div>\n\n          {tooltip && (\n            <Tooltip title={tooltip} placement=\"top\">\n              <TooltipTrigger className=\"cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\">\n                <HelpCircle aria-hidden=\"true\" className=\"size-4\" />\n                <span className=\"sr-only\">{tooltip}</span>\n              </TooltipTrigger>\n            </Tooltip>\n          )}\n\n          {state.allowsSorting &&\n            (state.sortDirection ? (\n              <ArrowDown\n                aria-hidden=\"true\"\n                className={cx(\n                  'size-3 stroke-[3px] text-fg-quaternary',\n                  state.sortDirection === 'ascending' && 'rotate-180',\n                )}\n              />\n            ) : (\n              <ChevronSelectorVertical\n                aria-hidden=\"true\"\n                size={12}\n                strokeWidth={3}\n                className=\"text-fg-quaternary\"\n              />\n            ))}\n        </AriaGroup>\n      )}\n    </AriaColumn>\n  );\n});\nTableHead.displayName = 'TableHead';\n\nexport interface TableRowProps<T extends object>\n  extends AriaRowProps<T>,\n    Omit<\n      ComponentPropsWithRef<'tr'>,\n      'children' | 'className' | 'onClick' | 'slot' | 'style' | 'id'\n    > {\n  highlightSelectedRow?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableRow = <T extends object>({\n  columns,\n  children,\n  className,\n  highlightSelectedRow = true,\n  size: sizeProp,\n  ...props\n}: TableRowProps<T>) => {\n  const context = useContext(TableContext);\n  const { selectionBehavior } = useTableOptions();\n\n  const size = sizeProp ?? context.size;\n\n  return (\n    <AriaRow\n      {...props}\n      className={(state) =>\n        cx(\n          'relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2',\n          size === 'sm' ? 'h-14' : 'h-18',\n          highlightSelectedRow && 'selected:bg-secondary',\n          '[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-secondary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {selectionBehavior === 'toggle' && (\n        <AriaCell className={cx('relative py-2 pr-0 pl-4', size === 'sm' ? 'md:pl-5' : 'md:pl-6')}>\n          <div className=\"flex items-end\">\n            <Checkbox slot=\"selection\" size=\"md\" />\n          </div>\n        </AriaCell>\n      )}\n      <AriaCollection items={columns}>{children}</AriaCollection>\n    </AriaRow>\n  );\n};\nTableRow.displayName = 'TableRow';\n\nexport interface TableCellProps\n  extends AriaCellProps,\n    Omit<TdHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {\n  size?: 'sm' | 'md';\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { className, children, size: sizeProp, ...props },\n  ref,\n) {\n  const context = useContext(TableContext);\n  const { selectionBehavior } = useTableOptions();\n\n  const size = sizeProp ?? context.size;\n\n  return (\n    <AriaCell\n      {...props}\n      ref={ref as Ref<HTMLTableCellElement>}\n      className={(state) =>\n        cx(\n          'relative text-sm text-tertiary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2',\n          size === 'sm' && 'px-5 py-3',\n          size === 'md' && 'px-6 py-4',\n          selectionBehavior === 'toggle' && 'nth-2:pl-3',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    >\n      {children}\n    </AriaCell>\n  );\n});\nTableCell.displayName = 'TableCell';\n\nconst TableCard = {\n  Root: TableCardRoot,\n  Header: TableCardHeader,\n};\n\nconst Table = TableRoot as typeof TableRoot & {\n  Body: typeof AriaTableBody;\n  Cell: typeof TableCell;\n  Head: typeof TableHead;\n  Header: typeof TableHeader;\n  Row: typeof TableRow;\n};\nTable.Body = AriaTableBody;\nTable.Cell = TableCell;\nTable.Head = TableHead;\nTable.Header = TableHeader;\nTable.Row = TableRow;\n\nexport { Table, TableCard };\n"],"mappings":"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"}

package/dist/tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
+export { Tab, TabList, TabPanel, Tabs };

package/dist/tabs/index.js

@@ -0,0 +1,2 @@
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
+export { Tab, TabList, TabPanel, Tabs };

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+import { TabListProps, TabProps, TabRenderProps, Tabs as Tabs$1 } from "react-aria-components";
+//#region src/tabs/tabs.d.ts
+type Orientation = 'horizontal' | 'vertical';
+type HorizontalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'underline';
+type VerticalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'line';
+type TabTypeColors<T> = T extends 'horizontal' ? HorizontalTypes : VerticalTypes;
+declare const sizes: {
+  sm: {
+    base: string;
+    'button-brand': string;
+    'button-gray': string;
+    'button-border': string;
+    'button-minimal': string;
+    underline: string;
+    line: string;
+  };
+  md: {
+    base: string;
+    'button-brand': string;
+    'button-gray': string;
+    'button-border': string;
+    'button-minimal': string;
+    underline: string;
+    line: string;
+  };
+};
+interface TabListComponentProps<T extends object, K extends Orientation> extends Omit<TabListProps<T>, 'items'> {
+  /** The size of the tab list. */
+  size?: keyof typeof sizes;
+  /** The type of the tab list. */
+  type?: TabTypeColors<K>;
+  /** The orientation of the tab list. */
+  orientation?: K;
+  /** The items of the tab list. When provided, tabs are rendered automatically via the render function in children. */
+  items?: T[];
+  /** Whether the tab list is full width. */
+  fullWidth?: boolean;
+}
+export declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react").JSX.Element;
+export declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<import("react-aria-components").TabPanelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface TabComponentProps extends TabProps {
+  /** The label of the tab. */
+  label?: ReactNode;
+  /** The children of the tab. */
+  children?: ReactNode | ((props: TabRenderProps) => ReactNode);
+  /** Icon component or element to show before the text */
+  icon?: FC<{
+    className?: string;
+  }> | ReactNode;
+  /** The badge displayed next to the label. */
+  badge?: number | string;
+}
+export declare const Tab: ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => import("react").JSX.Element;
+export declare const Tabs: typeof Tabs$1 & {
+  displayName?: string;
+  Panel: typeof TabPanel;
+  List: typeof TabList;
+  Item: typeof Tab;
+};
+//#endregion
+//# sourceMappingURL=tabs.d.ts.map

package/dist/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;KAuBK;KAEA;KAMA;KACA,cAAc,KAAK,yBAAyB,kBAAkB;cAyC7D;;;;;;;;;;;;;;;;;;;;UAiCI,sBAAsB,kBAAkB,UAAU,qBAClD,KAAK,aAAiB;;EAE9B,oBAAoB;;EAEpB,OAAO,cAAc;;EAErB,cAAc;;EAEd,QAAQ;;EAER;;qBAUW,UAAW,UAAU,eAAa,MAAA,MAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,cAQ5C,sBAAsB,mBAAmB,uBAAE,IAAA;qBA4BjC,0BAAQ,0BAAA,qCAAA,gCAAA,cAAA,0CAAA,cAAA;UAkBX,0BAA0B;;EAElC,QAAQ;;EAER,WAAW,cAAc,OAAO,mBAAuB;;EAEvD,OAAO;IAAK;OAAwB;;EAEpC;;qBAGW,QAAO,OAAA,UAAA,OAAA,MAAA,MAAA,cAAA,cAOjB,sCAAiB,IAAA;qBAiDP,aAaU;EACrB;EACA,cAAc;EACd,aAAa;EACb,aAAa"}

package/dist/tabs/tabs.js

@@ -0,0 +1,120 @@
+"use client";
+import { cx } from "../utils/cx.js";
+import { isReactComponent } from "../utils/is-react-component.js";
+import { Badge } from "../badges/badges.js";
+import "../badges/index.js";
+import { createContext, forwardRef, isValidElement, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TabsContext, useSlottedContext } from "react-aria-components";
+//#region src/tabs/tabs.tsx
+const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
+	"button-brand": cx("outline-focus-ring *:data-icon:text-fg-quaternary", isFocusVisible && "outline-2 -outline-offset-2", (isSelected || isHovered) && "bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover"),
+	"button-gray": cx("outline-focus-ring *:data-icon:text-fg-quaternary", isHovered && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover", isFocusVisible && "outline-2 -outline-offset-2", isSelected && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover"),
+	"button-border": cx("outline-focus-ring *:data-icon:text-fg-quaternary", isFocusVisible && "outline-2 -outline-offset-2", (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover"),
+	"button-minimal": cx("rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary", isFocusVisible && "outline-2 -outline-offset-2", (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover"),
+	underline: cx("rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary", isFocusVisible && "outline-2 -outline-offset-2", (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover"),
+	line: cx("rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary", isFocusVisible && "outline-2 -outline-offset-2", (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover")
+});
+const sizes = {
+	sm: {
+		base: "text-sm font-semibold gap-1 *:data-icon:size-4",
+		"button-brand": "py-2 px-2.5",
+		"button-gray": "py-2 px-2.5",
+		"button-border": "py-2 px-2.5",
+		"button-minimal": "py-2 px-2.5",
+		underline: "px-0.5 pb-2.5 pt-0",
+		line: "pl-2.5 pr-3 py-0.5"
+	},
+	md: {
+		base: "text-md font-semibold gap-1.5 *:data-icon:size-5",
+		"button-brand": "py-2.5 px-2.5",
+		"button-gray": "py-2.5 px-2.5",
+		"button-border": "py-2.5 px-2.5",
+		"button-minimal": "py-2.5 px-2.5",
+		underline: "px-0.5 pb-2.5 pt-0",
+		line: "pr-3.5 pl-3 py-1"
+	}
+};
+const getHorizontalStyles = ({ size, fullWidth }) => ({
+	"button-brand": "gap-1",
+	"button-gray": "gap-1",
+	"button-border": cx("gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset", size === "md" && "rounded-xl p-1.5"),
+	"button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
+	underline: cx("gap-3", fullWidth && "w-full gap-4"),
+	line: "gap-2"
+});
+const TabListContext = createContext({
+	size: "sm",
+	type: "button-brand"
+});
+const TabList = ({ size = "sm", type = "button-brand", orientation: orientationProp, fullWidth, className, children, ...otherProps }) => {
+	const context = useSlottedContext(TabsContext);
+	const orientation = orientationProp ?? context?.orientation ?? "horizontal";
+	return /* @__PURE__ */ jsx(TabListContext.Provider, {
+		value: {
+			size,
+			type,
+			orientation,
+			fullWidth
+		},
+		children: /* @__PURE__ */ jsx(TabList$1, {
+			...otherProps,
+			className: (state) => cx("group flex", getHorizontalStyles({
+				size,
+				fullWidth
+			})[type], orientation === "vertical" && "w-max flex-col", orientation === "horizontal" && type === "underline" && "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary", typeof className === "function" ? className(state) : className),
+			children: children ?? (otherProps.items ? (item) => /* @__PURE__ */ jsx(Tab, {
+				...item,
+				children: item.children
+			}) : void 0)
+		})
+	});
+};
+const TabPanel = forwardRef(function TabPanel(props, ref) {
+	return /* @__PURE__ */ jsx(TabPanel$1, {
+		...props,
+		ref,
+		className: (state) => cx("outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", typeof props.className === "function" ? props.className(state) : props.className)
+	});
+});
+TabPanel.displayName = "TabPanel";
+const Tab = ({ label, children, badge, icon: Icon, className, ...otherProps }) => {
+	const { size = "sm", type = "button-brand", fullWidth } = useContext(TabListContext);
+	const showPillColorBadge = type === "underline" || type === "line" || type === "button-brand";
+	return /* @__PURE__ */ jsx(Tab$1, {
+		...otherProps,
+		className: (prop) => cx("z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear", "group-orientation-vertical:justify-start", fullWidth && "w-full flex-1", sizes[size].base, sizes[size][type], getTabStyles(prop)[type], typeof className === "function" ? className(prop) : className),
+		children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			isValidElement(Icon) && Icon,
+			isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, {
+				"data-icon": true,
+				className: "transition-inherit-all"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cx("flex items-center gap-1.5", type !== "line" && "px-0.5"),
+				children: [typeof children === "function" ? children(state) : children || label, badge !== void 0 && /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					color: showPillColorBadge && (state.isHovered || state.isSelected) ? "brand" : "gray",
+					className: cx("hidden transition-inherit-all md:inline-flex", size === "sm" && "-my-px"),
+					children: badge
+				})]
+			})
+		] })
+	});
+};
+const Tabs = forwardRef(function Tabs({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs$1, {
+		keyboardActivation: "manual",
+		...props,
+		ref,
+		className: (state) => cx("flex w-full flex-col", typeof className === "function" ? className(state) : className)
+	});
+});
+Tabs.displayName = "Tabs";
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Item = Tab;
+//#endregion
+export { Tab, TabList, TabPanel, Tabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["AriaTabList","AriaTabPanel","AriaTab","AriaTabs"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["'use client';\n\n/* @kavagy-source: untitledui/application/tabs/tabs.tsx */\n\nimport type { ComponentPropsWithRef, FC, ReactNode } from 'react';\nimport { createContext, forwardRef, isValidElement, useContext } from 'react';\nimport type {\n  TabListProps as AriaTabListProps,\n  TabProps as AriaTabProps,\n  TabRenderProps as AriaTabRenderProps,\n} from 'react-aria-components';\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  TabsContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { Badge } from '../badges';\nimport { cx } from '../utils/cx';\nimport { isReactComponent } from '../utils/is-react-component';\n\ntype Orientation = 'horizontal' | 'vertical';\n\ntype HorizontalTypes =\n  | 'button-brand'\n  | 'button-gray'\n  | 'button-border'\n  | 'button-minimal'\n  | 'underline';\ntype VerticalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'line';\ntype TabTypeColors<T> = T extends 'horizontal' ? HorizontalTypes : VerticalTypes;\n\nconst getTabStyles = ({ isFocusVisible, isSelected, isHovered }: AriaTabRenderProps) => ({\n  'button-brand': cx(\n    'outline-focus-ring *:data-icon:text-fg-quaternary',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    (isSelected || isHovered) &&\n      'bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover',\n  ),\n  'button-gray': cx(\n    'outline-focus-ring *:data-icon:text-fg-quaternary',\n    isHovered && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    isSelected && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover',\n  ),\n  'button-border': cx(\n    'outline-focus-ring *:data-icon:text-fg-quaternary',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    (isSelected || isHovered) &&\n      'bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover',\n  ),\n  'button-minimal': cx(\n    'rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    (isSelected || isHovered) &&\n      'bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover',\n  ),\n  underline: cx(\n    'rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    (isSelected || isHovered) &&\n      'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover',\n  ),\n  line: cx(\n    'rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary',\n    isFocusVisible && 'outline-2 -outline-offset-2',\n    (isSelected || isHovered) &&\n      'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover',\n  ),\n});\n\nconst sizes = {\n  sm: {\n    base: 'text-sm font-semibold gap-1 *:data-icon:size-4',\n    'button-brand': 'py-2 px-2.5',\n    'button-gray': 'py-2 px-2.5',\n    'button-border': 'py-2 px-2.5',\n    'button-minimal': 'py-2 px-2.5',\n    underline: 'px-0.5 pb-2.5 pt-0',\n    line: 'pl-2.5 pr-3 py-0.5',\n  },\n  md: {\n    base: 'text-md font-semibold gap-1.5 *:data-icon:size-5',\n    'button-brand': 'py-2.5 px-2.5',\n    'button-gray': 'py-2.5 px-2.5',\n    'button-border': 'py-2.5 px-2.5',\n    'button-minimal': 'py-2.5 px-2.5',\n    underline: 'px-0.5 pb-2.5 pt-0',\n    line: 'pr-3.5 pl-3 py-1',\n  },\n};\n\nconst getHorizontalStyles = ({ size, fullWidth }: { size?: 'sm' | 'md'; fullWidth?: boolean }) => ({\n  'button-brand': 'gap-1',\n  'button-gray': 'gap-1',\n  'button-border': cx(\n    'gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset',\n    size === 'md' && 'rounded-xl p-1.5',\n  ),\n  'button-minimal': 'gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary',\n  underline: cx('gap-3', fullWidth && 'w-full gap-4'),\n  line: 'gap-2',\n});\n\ninterface TabListComponentProps<T extends object, K extends Orientation>\n  extends Omit<AriaTabListProps<T>, 'items'> {\n  /** The size of the tab list. */\n  size?: keyof typeof sizes;\n  /** The type of the tab list. */\n  type?: TabTypeColors<K>;\n  /** The orientation of the tab list. */\n  orientation?: K;\n  /** The items of the tab list. When provided, tabs are rendered automatically via the render function in children. */\n  items?: T[];\n  /** Whether the tab list is full width. */\n  fullWidth?: boolean;\n}\n\nconst TabListContext = createContext<\n  Omit<TabListComponentProps<TabComponentProps, Orientation>, 'items'>\n>({\n  size: 'sm',\n  type: 'button-brand',\n});\n\nexport const TabList = <T extends Orientation>({\n  size = 'sm',\n  type = 'button-brand',\n  orientation: orientationProp,\n  fullWidth,\n  className,\n  children,\n  ...otherProps\n}: TabListComponentProps<TabComponentProps, T>) => {\n  const context = useSlottedContext(TabsContext);\n\n  const orientation = orientationProp ?? context?.orientation ?? 'horizontal';\n\n  return (\n    <TabListContext.Provider value={{ size, type, orientation, fullWidth }}>\n      <AriaTabList\n        {...otherProps}\n        className={(state) =>\n          cx(\n            'group flex',\n            getHorizontalStyles({ size, fullWidth })[type as HorizontalTypes],\n            orientation === 'vertical' && 'w-max flex-col',\n            orientation === 'horizontal' &&\n              type === 'underline' &&\n              'relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary',\n            typeof className === 'function' ? className(state) : className,\n          )\n        }\n      >\n        {children ??\n          (otherProps.items ? (item) => <Tab {...item}>{item.children}</Tab> : undefined)}\n      </AriaTabList>\n    </TabListContext.Provider>\n  );\n};\n\nexport const TabPanel = forwardRef<HTMLDivElement, ComponentPropsWithRef<typeof AriaTabPanel>>(\n  function TabPanel(props, ref) {\n    return (\n      <AriaTabPanel\n        {...props}\n        ref={ref}\n        className={(state) =>\n          cx(\n            'outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2',\n            typeof props.className === 'function' ? props.className(state) : props.className,\n          )\n        }\n      />\n    );\n  },\n);\nTabPanel.displayName = 'TabPanel';\n\ninterface TabComponentProps extends AriaTabProps {\n  /** The label of the tab. */\n  label?: ReactNode;\n  /** The children of the tab. */\n  children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);\n  /** Icon component or element to show before the text */\n  icon?: FC<{ className?: string }> | ReactNode;\n  /** The badge displayed next to the label. */\n  badge?: number | string;\n}\n\nexport const Tab = ({\n  label,\n  children,\n  badge,\n  icon: Icon,\n  className,\n  ...otherProps\n}: TabComponentProps) => {\n  const { size = 'sm', type = 'button-brand', fullWidth } = useContext(TabListContext);\n\n  const showPillColorBadge = type === 'underline' || type === 'line' || type === 'button-brand';\n\n  return (\n    <AriaTab\n      {...otherProps}\n      className={(prop) =>\n        cx(\n          'z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear',\n          'group-orientation-vertical:justify-start',\n          fullWidth && 'w-full flex-1',\n          sizes[size].base,\n          sizes[size][type],\n          getTabStyles(prop)[type],\n          typeof className === 'function' ? className(prop) : className,\n        )\n      }\n    >\n      {(state) => (\n        <>\n          {isValidElement(Icon) && Icon}\n          {isReactComponent(Icon) && <Icon data-icon className=\"transition-inherit-all\" />}\n\n          <span className={cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5')}>\n            {typeof children === 'function' ? children(state) : children || label}\n\n            {badge !== undefined && (\n              <Badge\n                size=\"sm\"\n                color={\n                  showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray'\n                }\n                className={cx(\n                  'hidden transition-inherit-all md:inline-flex',\n                  size === 'sm' && '-my-px',\n                )}\n              >\n                {badge}\n              </Badge>\n            )}\n          </span>\n        </>\n      )}\n    </AriaTab>\n  );\n};\n\nexport const Tabs = forwardRef<HTMLDivElement, ComponentPropsWithRef<typeof AriaTabs>>(\n  function Tabs({ className, ...props }, ref) {\n    return (\n      <AriaTabs\n        keyboardActivation=\"manual\"\n        {...props}\n        ref={ref}\n        className={(state) =>\n          cx('flex w-full flex-col', typeof className === 'function' ? className(state) : className)\n        }\n      />\n    );\n  },\n) as unknown as typeof AriaTabs & {\n  displayName?: string;\n  Panel: typeof TabPanel;\n  List: typeof TabList;\n  Item: typeof Tab;\n};\n\nTabs.displayName = 'Tabs';\nTabs.Panel = TabPanel;\nTabs.List = TabList;\nTabs.Item = Tab;\n"],"mappings":"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"}

package/dist/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { TextArea, TextAreaBase, TextAreaBaseProps, TextAreaProps } from "./textarea.js";
+export { TextArea, TextAreaBase, type TextAreaBaseProps, type TextAreaProps };

package/dist/textarea/index.js

@@ -0,0 +1,2 @@
+import { TextArea, TextAreaBase } from "./textarea.js";
+export { TextArea, TextAreaBase };

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,26 @@
+import { TooltipProps as TooltipProps$1 } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { ReactNode } from "react";
+import { TextAreaProps as TextAreaProps$1, TextFieldProps } from "react-aria-components";
+//#region src/textarea/textarea.d.ts
+export interface TextAreaBaseProps extends TextAreaProps$1 {
+  size?: 'sm' | 'md';
+}
+export declare const TextAreaBase: import("react").ForwardRefExoticComponent<TextAreaBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export interface TextAreaProps extends TextFieldProps {
+  label?: string;
+  hint?: ReactNode;
+  size?: TextAreaBaseProps['size'];
+  textAreaClassName?: TextAreaBaseProps['className'];
+  hideRequiredIndicator?: boolean;
+  placeholder?: string;
+  rows?: number;
+  cols?: number;
+  /** Tooltip content displayed next to the label. */
+  tooltip?: ReactNode;
+  /** Placement of the tooltip. @default 'top' */
+  tooltipPlacement?: TooltipProps$1['placement'];
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+//# sourceMappingURL=textarea.d.ts.map

package/dist/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","names":[],"sources":["../../src/textarea/textarea.tsx"],"mappings":";;;;;iBAuBiB,0BAA0B;EACzC;;qBAGW,8BAAY,0BAAA,oCAAA,cAAA;iBAiCR,sBAAsB;EACrC;EACA,OAAO;EACP,OAAO;EACP,oBAAoB;EACpB;EACA;EACA;EACA;;EAEA,UAAU;;EAEV,mBAAmB;;qBAGR,0BAAQ,0BAAA,gCAAA,cAAA"}