@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/ui/components/ui/table.d.ts

@@ -1,14 +1,154 @@
 import * as React from 'react';
 /**
- * Table Component
- * テーブルコンポーネント
- */
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+ * Wraps a native table in a horizontal overflow container.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Table composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function Table({ ref, className, ...props }: React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>): React.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+/**
+ * Renders the native table header section with row borders.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableHeader composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableHeader({ ref, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>): React.JSX.Element;
+declare namespace TableHeader {
+    var displayName: string;
+}
+/**
+ * Renders the native table body section.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableBody composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableBody({ ref, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>): React.JSX.Element;
+declare namespace TableBody {
+    var displayName: string;
+}
+/**
+ * Renders the native table footer section with muted styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableFooter composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableFooter({ ref, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>): React.JSX.Element;
+declare namespace TableFooter {
+    var displayName: string;
+}
+/**
+ * Renders a native table row with hover and optional selected-state styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableRow composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableRow({ ref, className, ...props }: React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>): React.JSX.Element;
+declare namespace TableRow {
+    var displayName: string;
+}
+/**
+ * Renders a native table heading cell.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableHead composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableHead({ ref, className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>): React.JSX.Element;
+declare namespace TableHead {
+    var displayName: string;
+}
+/**
+ * Renders a native table data cell.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableCell composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableCell({ ref, className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>): React.JSX.Element;
+declare namespace TableCell {
+    var displayName: string;
+}
+/**
+ * Renders the native table caption below the table content.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered TableCaption composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope="col">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);
+ * }
+ * ```
+ */
+declare function TableCaption({ ref, className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>): React.JSX.Element;
+declare namespace TableCaption {
+    var displayName: string;
+}
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/ui/components/ui/table.js

@@ -1,69 +1,85 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
+import "react";
 //#region src/ui/components/ui/table.tsx
-var r = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("div", {
-	"data-slot": "table-container",
-	className: "relative w-full overflow-x-auto",
-	children: /* @__PURE__ */ t("table", {
-		ref: i,
-		"data-slot": "table",
-		className: e("w-full caption-bottom text-sm", n),
-		...r
-	})
-}));
-r.displayName = "Table";
-var i = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("thead", {
-	ref: i,
-	"data-slot": "table-header",
-	className: e("[&_tr]:border-b", n),
-	...r
-}));
-i.displayName = "TableHeader";
-var a = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("tbody", {
-	ref: i,
-	"data-slot": "table-body",
-	className: e("[&_tr:last-child]:border-0", n),
-	...r
-}));
-a.displayName = "TableBody";
-var o = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("tfoot", {
-	ref: i,
-	"data-slot": "table-footer",
-	className: e("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", n),
-	...r
-}));
-o.displayName = "TableFooter";
-var s = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("tr", {
-	ref: i,
-	"data-slot": "table-row",
-	className: e("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", n),
-	...r
-}));
-s.displayName = "TableRow";
-var c = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("th", {
-	ref: i,
-	"data-slot": "table-head",
-	className: e("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 dark:bg-secondary dark:text-secondary-foreground bg-muted/30", n),
-	...r
-}));
-c.displayName = "TableHead";
-var l = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("td", {
-	ref: i,
-	"data-slot": "table-cell",
-	className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", n),
-	...r
-}));
-l.displayName = "TableCell";
-var u = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("caption", {
-	ref: i,
-	"data-slot": "table-caption",
-	className: e("text-muted-foreground mt-4 text-sm", n),
-	...r
-}));
-u.displayName = "TableCaption";
+function n({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ t("table", {
+			ref: n,
+			"data-slot": "table",
+			className: e("w-full caption-bottom text-sm", r),
+			...i
+		})
+	});
+}
+n.displayName = "Table";
+function r({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("thead", {
+		ref: n,
+		"data-slot": "table-header",
+		className: e("[&_tr]:border-b", r),
+		...i
+	});
+}
+r.displayName = "TableHeader";
+function i({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("tbody", {
+		ref: n,
+		"data-slot": "table-body",
+		className: e("[&_tr:last-child]:border-0", r),
+		...i
+	});
+}
+i.displayName = "TableBody";
+function a({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("tfoot", {
+		ref: n,
+		"data-slot": "table-footer",
+		className: e("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", r),
+		...i
+	});
+}
+a.displayName = "TableFooter";
+function o({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("tr", {
+		ref: n,
+		"data-slot": "table-row",
+		className: e("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", r),
+		...i
+	});
+}
+o.displayName = "TableRow";
+function s({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("th", {
+		ref: n,
+		"data-slot": "table-head",
+		className: e("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 dark:bg-secondary dark:text-secondary-foreground bg-muted/30", r),
+		...i
+	});
+}
+s.displayName = "TableHead";
+function c({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("td", {
+		ref: n,
+		"data-slot": "table-cell",
+		className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", r),
+		...i
+	});
+}
+c.displayName = "TableCell";
+function l({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("caption", {
+		ref: n,
+		"data-slot": "table-caption",
+		className: e("text-muted-foreground mt-4 text-sm", r),
+		...i
+	});
+}
+l.displayName = "TableCaption";
 //#endregion
-export { r as Table, a as TableBody, u as TableCaption, l as TableCell, o as TableFooter, c as TableHead, i as TableHeader, s as TableRow };
+export { n as Table, i as TableBody, l as TableCaption, c as TableCell, a as TableFooter, s as TableHead, r as TableHeader, o as TableRow };
 
 //# sourceMappingURL=table.js.map

package/dist/ui/components/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["React","React$1","Table","props","cn","className","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"sources":["../../../../src/ui/components/ui/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Table Component\n * テーブルコンポーネント\n */\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n  ({ className, ...props }, ref) => (\n    <div data-slot='table-container' className='relative w-full overflow-x-auto'>\n      <table\n        ref={ref}\n        data-slot='table'\n        className={cn('w-full caption-bottom text-sm', className)}\n        {...props}\n      />\n    </div>\n  ),\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    data-slot='table-header'\n    className={cn('[&_tr]:border-b', className)}\n    {...props}\n  />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    data-slot='table-body'\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    data-slot='table-footer'\n    className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-slot='table-row'\n      className={cn(\n        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    data-slot='table-head'\n    className={cn(\n      'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 dark:bg-secondary dark:text-secondary-foreground bg-muted/30',\n      className,\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    data-slot='table-cell'\n    className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    data-slot='table-caption'\n    className={cn('text-muted-foreground mt-4 text-sm', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;;AAQA,IAAME,IAAQF,EAAM,YACjB,EAAE,cAAW,GAAGG,KAAS,MACxB,kBAAC,OAAD;CAAK,aAAU;CAAkB,WAAU;CACzC,UAAA,kBAAC,SAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,iCAAiCC,CAAS;EACxD,GAAIF;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAMG,IAAcN,EAAM,YAGvB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EAAG,mBAAmBC,CAAS;CAC1C,GAAIF;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAMI,IAAYP,EAAM,YAGrB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EAAG,8BAA8BC,CAAS;CACrD,GAAIF;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAMK,IAAcR,EAAM,YAGvB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EAAG,2DAA2DC,CAAS;CAClF,GAAIF;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAMM,IAAWT,EAAM,YACpB,EAAE,cAAW,GAAGG,KAAS,MACxB,kBAAC,MAAD;CACO;CACL,aAAU;CACV,WAAWC,EACT,+EACAC,CACF;CACA,GAAIF;AACL,CAAA,CAEL;AACA,EAAS,cAAc;AAEvB,IAAMO,IAAYV,EAAM,YAGrB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,aAAU;CACV,WAAWC,EACT,6KACAC,CACF;CACA,GAAIF;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAMQ,IAAYX,EAAM,YAGrB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,aAAU;CACV,WAAWC,EAAG,oEAAoEC,CAAS;CAC3F,GAAIF;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAMS,IAAeZ,EAAM,YAGxB,EAAE,cAAW,GAAGG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,aAAU;CACV,WAAWC,EAAG,sCAAsCC,CAAS;CAC7D,GAAIF;AACL,CAAA,CACF;AACD,EAAa,cAAc"}
+{"version":3,"file":"table.js","names":["Table","props","cn","className","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"sources":["../../../../src/ui/components/ui/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Wraps a native table in a horizontal overflow container.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Table composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction Table({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>) {\n  return (\n    <div data-slot='table-container' className='relative w-full overflow-x-auto'>\n      <table\n        ref={ref}\n        data-slot='table'\n        className={cn('w-full caption-bottom text-sm', className)}\n        {...props}\n      />\n    </div>\n  );\n}\nTable.displayName = 'Table';\n\n/**\n * Renders the native table header section with row borders.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableHeader({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>) {\n  return (\n    <thead\n      ref={ref}\n      data-slot='table-header'\n      className={cn('[&_tr]:border-b', className)}\n      {...props}\n    />\n  );\n}\nTableHeader.displayName = 'TableHeader';\n\n/**\n * Renders the native table body section.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableBody composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableBody({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>) {\n  return (\n    <tbody\n      ref={ref}\n      data-slot='table-body'\n      className={cn('[&_tr:last-child]:border-0', className)}\n      {...props}\n    />\n  );\n}\nTableBody.displayName = 'TableBody';\n\n/**\n * Renders the native table footer section with muted styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableFooter({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>) {\n  return (\n    <tfoot\n      ref={ref}\n      data-slot='table-footer'\n      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\nTableFooter.displayName = 'TableFooter';\n\n/**\n * Renders a native table row with hover and optional selected-state styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableRow composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableRow({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>) {\n  return (\n    <tr\n      ref={ref}\n      data-slot='table-row'\n      className={cn(\n        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nTableRow.displayName = 'TableRow';\n\n/**\n * Renders a native table heading cell.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableHead composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableHead({\n  ref,\n  className,\n  ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>) {\n  return (\n    <th\n      ref={ref}\n      data-slot='table-head'\n      className={cn(\n        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 dark:bg-secondary dark:text-secondary-foreground bg-muted/30',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nTableHead.displayName = 'TableHead';\n\n/**\n * Renders a native table data cell.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableCell composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableCell({\n  ref,\n  className,\n  ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>) {\n  return (\n    <td\n      ref={ref}\n      data-slot='table-cell'\n      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}\n      {...props}\n    />\n  );\n}\nTableCell.displayName = 'TableCell';\n\n/**\n * Renders the native table caption below the table content.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered TableCaption composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use valid native table nesting. Table className/props/ref target the table, not its outer overflow div. These wrappers do not sort, paginate or manage selection; data-state=selected affects only row styling. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Table><TableCaption>Documents</TableCaption><TableHeader><TableRow><TableHead scope=\"col\">Title</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Draft</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>1 document</TableCell></TableRow></TableFooter></Table>);\n * }\n * ```\n */\nfunction TableCaption({\n  ref,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>) {\n  return (\n    <caption\n      ref={ref}\n      data-slot='table-caption'\n      className={cn('text-muted-foreground mt-4 text-sm', className)}\n      {...props}\n    />\n  );\n}\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;;AAmBA,SAASA,EAAM,EACb,QACA,cACA,GAAGC,KAC8E;CACjF,OACE,kBAAC,OAAD;EAAK,aAAU;EAAkB,WAAU;EACzC,UAAA,kBAAC,SAAD;GACO;GACL,aAAU;GACV,WAAWC,EAAG,iCAAiCC,CAAS;GACxD,GAAIF;EACL,CAAA;CACE,CAAA;AAET;AACA,EAAM,cAAc;AAiBpB,SAASG,EAAY,EACnB,QACA,cACA,GAAGH,KAC4F;CAC/F,OACE,kBAAC,SAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,mBAAmBC,CAAS;EAC1C,GAAIF;CACL,CAAA;AAEL;AACA,EAAY,cAAc;AAiB1B,SAASI,EAAU,EACjB,QACA,cACA,GAAGJ,KAC4F;CAC/F,OACE,kBAAC,SAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,8BAA8BC,CAAS;EACrD,GAAIF;CACL,CAAA;AAEL;AACA,EAAU,cAAc;AAiBxB,SAASK,EAAY,EACnB,QACA,cACA,GAAGL,KAC4F;CAC/F,OACE,kBAAC,SAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,2DAA2DC,CAAS;EAClF,GAAIF;CACL,CAAA;AAEL;AACA,EAAY,cAAc;AAiB1B,SAASM,EAAS,EAChB,QACA,cACA,GAAGN,KACoF;CACvF,OACE,kBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAWC,EACT,+EACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AACA,EAAS,cAAc;AAiBvB,SAASO,EAAU,EACjB,QACA,cACA,GAAGP,KACwF;CAC3F,OACE,kBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAWC,EACT,6KACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AACA,EAAU,cAAc;AAiBxB,SAASQ,EAAU,EACjB,QACA,cACA,GAAGR,KACwF;CAC3F,OACE,kBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,oEAAoEC,CAAS;EAC3F,GAAIF;CACL,CAAA;AAEL;AACA,EAAU,cAAc;AAiBxB,SAASS,EAAa,EACpB,QACA,cACA,GAAGT,KAC4F;CAC/F,OACE,kBAAC,WAAD;EACO;EACL,aAAU;EACV,WAAWC,EAAG,sCAAsCC,CAAS;EAC7D,GAAIF;CACL,CAAA;AAEL;AACA,EAAa,cAAc"}

package/dist/ui/components/ui/tabs-components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-components.cjs","names":["TabsPrimitive","cn","tabsListVariants","require_ui_lib_utils","require_ui_components_ui_tabs_variants","react_jsx_runtime","_base_ui_react_tabs","Tabs","props","orientation","className","TabsList","variant","TabsTrigger","TabsContent"],"sources":["../../../../src/ui/components/ui/tabs-components.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { tabsListVariants } from './tabs-variants';\n\n/**\n * タブによる画面表示の切り替えを行うためのルートコンポーネント。\n */\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot='tabs'\n      data-orientation={orientation}\n      className={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * TabsList component\n * @param {string} variant - Visual style of the tabs. Options: \"default\" | \"line\" | \"primary\"\n */\nfunction TabsList({\n  className,\n  variant = 'default',\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot='tabs-list'\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 各タブを選択・アクティブにするためのトリガーボタン。\n */\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot='tabs-trigger'\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',\n        'group-data-[variant=primary]/tabs-list:data-active:bg-primary group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground group-data-[variant=primary]/tabs-list:text-primary/70 group-data-[variant=primary]/tabs-list:hover:text-primary',\n        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アクティブなタブに対応するコンテンツを表示するパネル領域。\n */\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot='tabs-content'\n      className={cn('text-sm flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":"A,yOAWA,SAASO,EAAK,CAAE,YAAW,cAAc,aAAc,GAAGC,GAAmC,CAC3F,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,KAAf,CACE,YAAU,OACV,mBAAkBS,EAClB,UAAWR,EAAAA,GAAG,+DAAgES,CAAS,EACvF,GAAIF,CACL,CAAA,CAEL,CAMA,SAASG,EAAS,CAChB,YACA,UAAU,UACV,GAAGH,GACgE,CACnE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,KAAf,CACE,YAAU,YACV,eAAcY,EACd,UAAWX,EAAAA,GAAGC,EAAAA,iBAAiB,CAAE,SAAQ,CAAC,EAAGQ,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,CAKA,SAASK,EAAY,CAAE,YAAW,GAAGL,GAAkC,CACrE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,IAAf,CACE,YAAU,eACV,UAAWC,EAAAA,GACT,4vBACA,gQACA,oJACA,4PACA,2dACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAKA,SAASM,EAAY,CAAE,YAAW,GAAGN,GAAoC,CACvE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,MAAf,CACE,YAAU,eACV,UAAWC,EAAAA,GAAG,8BAA+BS,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,C"}
+{"version":3,"file":"tabs-components.cjs","names":["TabsPrimitive","cn","tabsListVariants","require_ui_lib_utils","require_ui_components_ui_tabs_variants","react_jsx_runtime","_base_ui_react_tabs","Tabs","props","orientation","className","TabsList","variant","TabsTrigger","TabsContent"],"sources":["../../../../src/ui/components/ui/tabs-components.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { tabsListVariants } from './tabs-variants';\n\n/**\n * Coordinates selection and orientation for a set of tabbed panels.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='horizontal'.\n * @returns The rendered Tabs composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot='tabs'\n      data-orientation={orientation}\n      className={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the tab strip with default, line or primary visual treatment.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered TabsList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsList({\n  className,\n  variant = 'default',\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot='tabs-list'\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a tab that selects its corresponding panel value.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered TabsTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot='tabs-trigger'\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',\n        'group-data-[variant=primary]/tabs-list:data-active:bg-primary group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground group-data-[variant=primary]/tabs-list:text-primary/70 group-data-[variant=primary]/tabs-list:hover:text-primary',\n        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the panel associated with one tab value.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered TabsContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot='tabs-content'\n      className={cn('text-sm flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":"A,yOAuBA,SAASO,EAAK,CAAE,YAAW,cAAc,aAAc,GAAGC,GAAmC,CAC3F,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,KAAf,CACE,YAAU,OACV,mBAAkBS,EAClB,UAAWR,EAAAA,GAAG,+DAAgES,CAAS,EACvF,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASG,EAAS,CAChB,YACA,UAAU,UACV,GAAGH,GACgE,CACnE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,KAAf,CACE,YAAU,YACV,eAAcY,EACd,UAAWX,EAAAA,GAAGC,EAAAA,iBAAiB,CAAE,SAAQ,CAAC,EAAGQ,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASK,EAAY,CAAE,YAAW,GAAGL,GAAkC,CACrE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,IAAf,CACE,YAAU,eACV,UAAWC,EAAAA,GACT,4vBACA,gQACA,oJACA,4PACA,2dACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASM,EAAY,CAAE,YAAW,GAAGN,GAAoC,CACvE,OACE,EAAAH,EAAA,IAAA,CAACL,EAAAA,KAAc,MAAf,CACE,YAAU,eACV,UAAWC,EAAAA,GAAG,8BAA+BS,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,C"}

package/dist/ui/components/ui/tabs-components.d.cts

@@ -2,20 +2,67 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 import { tabsListVariants } from './tabs-variants.cjs';
 /**
- * タブによる画面表示の切り替えを行うためのルートコンポーネント。
+ * Coordinates selection and orientation for a set of tabbed panels.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='horizontal'.
+ * @returns The rendered Tabs composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import('react').JSX.Element;
 /**
- * TabsList component
- * @param {string} variant - Visual style of the tabs. Options: "default" | "line" | "primary"
+ * Renders the tab strip with default, line or primary visual treatment.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered TabsList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import('react').JSX.Element;
 /**
- * 各タブを選択・アクティブにするためのトリガーボタン。
+ * Renders a tab that selects its corresponding panel value.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered TabsTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import('react').JSX.Element;
 /**
- * アクティブなタブに対応するコンテンツを表示するパネル領域。
+ * Renders the panel associated with one tab value.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered TabsContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import('react').JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/components/ui/tabs-components.d.ts

@@ -2,20 +2,67 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 import { tabsListVariants } from './tabs-variants.js';
 /**
- * タブによる画面表示の切り替えを行うためのルートコンポーネント。
+ * Coordinates selection and orientation for a set of tabbed panels.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='horizontal'.
+ * @returns The rendered Tabs composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import('react').JSX.Element;
 /**
- * TabsList component
- * @param {string} variant - Visual style of the tabs. Options: "default" | "line" | "primary"
+ * Renders the tab strip with default, line or primary visual treatment.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered TabsList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import('react').JSX.Element;
 /**
- * 各タブを選択・アクティブにするためのトリガーボタン。
+ * Renders a tab that selects its corresponding panel value.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered TabsTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import('react').JSX.Element;
 /**
- * アクティブなタブに対応するコンテンツを表示するパネル領域。
+ * Renders the panel associated with one tab value.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered TabsContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Tabs defaultValue="overview"><TabsList aria-label="Project sections"><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsContent value="overview">Project overview</TabsContent><TabsContent value="activity">Recent activity</TabsContent></Tabs>);
+ * }
+ * ```
  */
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import('react').JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/components/ui/tabs-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-components.js","names":["TabsPrimitive","Tabs$1","Tabs","props","orientation","cn","className","TabsList","variant","tabsListVariants","TabsTrigger","TabsContent"],"sources":["../../../../src/ui/components/ui/tabs-components.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { tabsListVariants } from './tabs-variants';\n\n/**\n * タブによる画面表示の切り替えを行うためのルートコンポーネント。\n */\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot='tabs'\n      data-orientation={orientation}\n      className={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * TabsList component\n * @param {string} variant - Visual style of the tabs. Options: \"default\" | \"line\" | \"primary\"\n */\nfunction TabsList({\n  className,\n  variant = 'default',\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot='tabs-list'\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 各タブを選択・アクティブにするためのトリガーボタン。\n */\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot='tabs-trigger'\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',\n        'group-data-[variant=primary]/tabs-list:data-active:bg-primary group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground group-data-[variant=primary]/tabs-list:text-primary/70 group-data-[variant=primary]/tabs-list:hover:text-primary',\n        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アクティブなタブに対応するコンテンツを表示するパネル領域。\n */\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot='tabs-content'\n      className={cn('text-sm flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":";;;;;;;AAWA,SAASE,EAAK,EAAE,cAAW,iBAAc,cAAc,GAAGC,KAAmC;CAC3F,OACE,kBAACH,EAAc,MAAf;EACE,aAAU;EACV,oBAAkBI;EAClB,WAAWC,EAAG,gEAAgEC,CAAS;EACvF,GAAIH;CACL,CAAA;AAEL;AAMA,SAASI,EAAS,EAChB,cACA,aAAU,WACV,GAAGJ,KACgE;CACnE,OACE,kBAACH,EAAc,MAAf;EACE,aAAU;EACV,gBAAcQ;EACd,WAAWH,EAAGI,EAAiB,EAAE,WAAQ,CAAC,GAAGH,CAAS;EACtD,GAAIH;CACL,CAAA;AAEL;AAKA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAkC;CACrE,OACE,kBAACH,EAAc,KAAf;EACE,aAAU;EACV,WAAWK,EACT,6vBACA,iQACA,qJACA,6PACA,4dACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAKA,SAASQ,EAAY,EAAE,cAAW,GAAGR,KAAoC;CACvE,OACE,kBAACH,EAAc,OAAf;EACE,aAAU;EACV,WAAWK,EAAG,+BAA+BC,CAAS;EACtD,GAAIH;CACL,CAAA;AAEL"}
+{"version":3,"file":"tabs-components.js","names":["TabsPrimitive","Tabs$1","Tabs","props","orientation","cn","className","TabsList","variant","tabsListVariants","TabsTrigger","TabsContent"],"sources":["../../../../src/ui/components/ui/tabs-components.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { tabsListVariants } from './tabs-variants';\n\n/**\n * Coordinates selection and orientation for a set of tabbed panels.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='horizontal'.\n * @returns The rendered Tabs composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot='tabs'\n      data-orientation={orientation}\n      className={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the tab strip with default, line or primary visual treatment.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered TabsList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsList({\n  className,\n  variant = 'default',\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot='tabs-list'\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a tab that selects its corresponding panel value.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered TabsTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot='tabs-trigger'\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',\n        'group-data-[variant=primary]/tabs-list:data-active:bg-primary group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground group-data-[variant=primary]/tabs-list:text-primary/70 group-data-[variant=primary]/tabs-list:hover:text-primary',\n        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders the panel associated with one tab value.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered TabsContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. List/Trigger/Content require Tabs context. Match trigger and panel value strings. orientation defaults to horizontal; TabsList variant defaults to default. Base UI owns activation, keyboard navigation and controlled/default selection.\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Tabs defaultValue=\"overview\"><TabsList aria-label=\"Project sections\"><TabsTrigger value=\"overview\">Overview</TabsTrigger><TabsTrigger value=\"activity\">Activity</TabsTrigger></TabsList><TabsContent value=\"overview\">Project overview</TabsContent><TabsContent value=\"activity\">Recent activity</TabsContent></Tabs>);\n * }\n * ```\n */\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot='tabs-content'\n      className={cn('text-sm flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":";;;;;;;AAuBA,SAASE,EAAK,EAAE,cAAW,iBAAc,cAAc,GAAGC,KAAmC;CAC3F,OACE,kBAACH,EAAc,MAAf;EACE,aAAU;EACV,oBAAkBI;EAClB,WAAWC,EAAG,gEAAgEC,CAAS;EACvF,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASI,EAAS,EAChB,cACA,aAAU,WACV,GAAGJ,KACgE;CACnE,OACE,kBAACH,EAAc,MAAf;EACE,aAAU;EACV,gBAAcQ;EACd,WAAWH,EAAGI,EAAiB,EAAE,WAAQ,CAAC,GAAGH,CAAS;EACtD,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAkC;CACrE,OACE,kBAACH,EAAc,KAAf;EACE,aAAU;EACV,WAAWK,EACT,6vBACA,iQACA,qJACA,6PACA,4dACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASQ,EAAY,EAAE,cAAW,GAAGR,KAAoC;CACvE,OACE,kBAACH,EAAc,OAAf;EACE,aAAU;EACV,WAAWK,EAAG,+BAA+BC,CAAS;EACtD,GAAIH;CACL,CAAA;AAEL"}