@moduix/react 1.1.0

package/dist/components/table/Table.css

@@ -0,0 +1,162 @@
+@layer ui.components {
+  .YeBawq_scrollArea {
+    box-sizing: border-box;
+    isolation: isolate;
+    border: var(--table-scroll-area-border-width, var(--table-border-width, var(--border-width-sm)))
+      solid var(--table-scroll-area-border-color, var(--table-border-color, var(--color-border)));
+    border-radius: var(--table-scroll-area-radius, var(--radius-lg));
+    background-color: var(--table-scroll-area-bg, var(--color-card));
+    width: 100%;
+    min-width: 0;
+    box-shadow: var(--table-scroll-area-shadow, none);
+    position: relative;
+    overflow-x: auto;
+  }
+
+  .YeBawq_root {
+    --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-4));
+    --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-3));
+    --table-empty-padding-y-default: calc(var(--table-cell-padding-y-default) * 2);
+    box-sizing: border-box;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    color: var(--table-color, var(--color-foreground));
+    font-family: var(--table-font-family, inherit);
+    font-size: var(--table-font-size, var(--text-sm));
+    line-height: var(--table-line-height, var(--line-height-text-sm));
+    text-align: left;
+    isolation: isolate;
+
+    &[data-size="sm"] {
+      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-3));
+      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-2));
+      font-size: var(--table-font-size-sm, var(--text-xs));
+      line-height: var(--table-line-height-sm, var(--line-height-text-xs));
+    }
+
+    &[data-size="lg"] {
+      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-5));
+      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-4));
+      font-size: var(--table-font-size-lg, var(--text-md));
+      line-height: var(--table-line-height-lg, var(--line-height-text-md));
+    }
+
+    &[data-variant="outline"] {
+      border: var(--table-border-width, var(--border-width-sm)) solid
+        var(--table-border-color, var(--color-border));
+    }
+  }
+
+  .YeBawq_caption {
+    box-sizing: border-box;
+    color: var(--table-caption-color, var(--color-muted-foreground));
+    font-size: var(--table-caption-font-size, var(--text-sm));
+    line-height: var(--table-caption-line-height, var(--line-height-text-sm));
+    padding-inline: var(--table-caption-padding-x, var(--table-cell-padding-x-default));
+    text-align: left;
+    text-wrap: pretty;
+
+    &[data-side="top"] {
+      caption-side: top;
+      padding-block: var(--table-caption-padding-edge, var(--spacing-2))
+        var(--table-caption-padding-y, var(--spacing-3));
+    }
+
+    &[data-side="bottom"] {
+      caption-side: bottom;
+      padding-block: var(--table-caption-padding-y, var(--spacing-3))
+        var(--table-caption-padding-edge, var(--spacing-2));
+    }
+  }
+
+  .YeBawq_row {
+    transition: var(--table-row-transition, background-color var(--transition-default));
+  }
+
+  .YeBawq_header .YeBawq_row, .YeBawq_body .YeBawq_row {
+    border-bottom: var(--table-border-width, var(--border-width-sm)) solid
+      var(--table-border-color, var(--color-border));
+  }
+
+  .YeBawq_root[data-striped] .YeBawq_body .YeBawq_row:nth-child(2n):not(.YeBawq_emptyRow) {
+    background-color: var(--table-row-bg-striped, color-mix(in oklab, var(--color-muted) 35%, transparent));
+  }
+
+  .YeBawq_root[data-interactive] .YeBawq_body .YeBawq_row:not(.YeBawq_emptyRow):hover {
+    background-color: var(--table-row-bg-hover, var(--color-muted));
+  }
+
+  .YeBawq_root[data-show-column-border] :is(.YeBawq_columnHeader, .YeBawq_cell):not(:last-child) {
+    border-inline-end: var(--table-column-border-width, var(--table-border-width, var(--border-width-sm)))
+      solid var(--table-column-border-color, var(--table-border-color, var(--color-border)));
+  }
+
+  .YeBawq_root[data-sticky-header] .YeBawq_header {
+    z-index: var(--table-sticky-header-z-index, 3);
+    background-color: var(--table-sticky-header-bg, var(--table-scroll-area-bg, var(--color-card)));
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .YeBawq_body .YeBawq_row:last-child {
+    border-bottom: 0;
+  }
+
+  .YeBawq_footer {
+    border-top: var(--table-border-width, var(--border-width-sm)) solid
+      var(--table-border-color, var(--color-border));
+    background-color: var(--table-footer-bg, var(--color-muted));
+    color: var(--table-footer-color, var(--table-color, var(--color-foreground)));
+    font-weight: var(--table-footer-font-weight, var(--weight-medium));
+  }
+
+  .YeBawq_columnHeader, .YeBawq_cell {
+    z-index: 0;
+    padding-block: var(--table-cell-padding-y-default);
+    padding-inline: var(--table-cell-padding-x-default);
+    vertical-align: middle;
+    position: relative;
+
+    &[data-sticky="start"] {
+      z-index: var(--table-sticky-column-z-index, 2);
+      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
+      position: sticky;
+      inset-inline-start: 0;
+    }
+
+    &[data-sticky="end"] {
+      z-index: var(--table-sticky-column-z-index, 2);
+      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
+      position: sticky;
+      inset-inline-end: 0;
+    }
+  }
+
+  .YeBawq_root[data-sticky-header] .YeBawq_header .YeBawq_columnHeader[data-sticky] {
+    z-index: var(--table-sticky-intersection-z-index, 4);
+  }
+
+  .YeBawq_columnHeader {
+    color: var(--table-column-header-color, var(--color-muted-foreground));
+    font-weight: var(--table-column-header-font-weight, var(--weight-medium));
+    text-align: inherit;
+    white-space: nowrap;
+  }
+
+  .YeBawq_cell {
+    color: inherit;
+  }
+
+  .YeBawq_numeric {
+    text-align: right;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .YeBawq_empty {
+    padding-block: var(--table-empty-padding-y, var(--table-empty-padding-y-default));
+    color: var(--table-empty-color, var(--color-muted-foreground));
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,41 @@
+//#region src/components/table/Table.d.ts
+declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  interactive?: boolean;
+  showColumnBorder?: boolean;
+  size?: "sm" | "md" | "lg";
+  stickyHeader?: boolean;
+  striped?: boolean;
+  variant?: "line" | "outline";
+} & import("react").RefAttributes<HTMLTableElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    interactive?: boolean;
+    showColumnBorder?: boolean;
+    size?: "sm" | "md" | "lg";
+    stickyHeader?: boolean;
+    striped?: boolean;
+    variant?: "line" | "outline";
+  } & import("react").RefAttributes<HTMLTableElement>>;
+  ScrollArea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Caption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    side?: "top" | "bottom";
+  } & import("react").RefAttributes<HTMLTableCaptionElement>>;
+  ColumnGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLTableColElement>>;
+  Column: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    htmlWidth?: string | number;
+  } & import("react").RefAttributes<HTMLTableColElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+  Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+  Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLTableRowElement>>;
+  ColumnHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    numeric?: boolean;
+  } & import("react").RefAttributes<HTMLTableCellElement>>;
+  Cell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    numeric?: boolean;
+  } & import("react").RefAttributes<HTMLTableCellElement>>;
+  Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    colSpan: number;
+  } & import("react").RefAttributes<HTMLTableCellElement>>;
+};
+//#endregion
+export { Table };

package/dist/components/table/Table.js

@@ -0,0 +1,173 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Table_module_default from "./Table.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/table/Table.tsx
+const TableRoot = forwardRef(function TableRoot({ asChild, className, interactive = false, showColumnBorder = false, size = "md", stickyHeader = false, striped = false, variant = "line", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.table, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "root",
+		"data-slot": "table-root",
+		"data-interactive": interactive || void 0,
+		"data-show-column-border": showColumnBorder || void 0,
+		"data-size": size,
+		"data-sticky-header": stickyHeader || void 0,
+		"data-striped": striped || void 0,
+		"data-variant": variant,
+		className: clsx(Table_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TableScrollArea = forwardRef(function TableScrollArea({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "scroll-area",
+		"data-slot": "table-scroll-area",
+		className: clsx(Table_module_default.scrollArea, normalizeClassName(className)),
+		...props
+	});
+});
+const TableCaption = forwardRef(function TableCaption({ asChild, className, side = "bottom", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.caption, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "caption",
+		"data-side": side,
+		"data-slot": "table-caption",
+		className: clsx(Table_module_default.caption, normalizeClassName(className)),
+		...props
+	});
+});
+const TableColumnGroup = forwardRef(function TableColumnGroup({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.colgroup, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "column-group",
+		"data-slot": "table-column-group",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const TableColumn = forwardRef(function TableColumn({ asChild, className, htmlWidth, width, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.col, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "column",
+		"data-slot": "table-column",
+		width: htmlWidth ?? width,
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const TableHeader = forwardRef(function TableHeader({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.thead, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "header",
+		"data-slot": "table-header",
+		className: clsx(Table_module_default.header, normalizeClassName(className)),
+		...props
+	});
+});
+const TableBody = forwardRef(function TableBody({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.tbody, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "body",
+		"data-slot": "table-body",
+		className: clsx(Table_module_default.body, normalizeClassName(className)),
+		...props
+	});
+});
+const TableFooter = forwardRef(function TableFooter({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.tfoot, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "footer",
+		"data-slot": "table-footer",
+		className: clsx(Table_module_default.footer, normalizeClassName(className)),
+		...props
+	});
+});
+const TableRow = forwardRef(function TableRow({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.tr, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "row",
+		"data-slot": "table-row",
+		className: clsx(Table_module_default.row, normalizeClassName(className)),
+		...props
+	});
+});
+const TableColumnHeader = forwardRef(function TableColumnHeader({ asChild, className, numeric = false, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.th, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "column-header",
+		"data-numeric": numeric || void 0,
+		"data-slot": "table-column-header",
+		className: clsx(Table_module_default.columnHeader, numeric && Table_module_default.numeric, normalizeClassName(className)),
+		...props
+	});
+});
+const TableCell = forwardRef(function TableCell({ asChild, className, numeric = false, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.td, {
+		ref,
+		asChild,
+		"data-scope": "table",
+		"data-part": "cell",
+		"data-numeric": numeric || void 0,
+		"data-slot": "table-cell",
+		className: clsx(Table_module_default.cell, numeric && Table_module_default.numeric, normalizeClassName(className)),
+		...props
+	});
+});
+const TableEmpty = forwardRef(function TableEmpty({ asChild, children = "No results.", className, colSpan, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.tr, {
+		"data-scope": "table",
+		"data-part": "row",
+		"data-slot": "table-row",
+		className: clsx(Table_module_default.row, Table_module_default.emptyRow),
+		children: /* @__PURE__ */ jsx(ark.td, {
+			ref,
+			asChild,
+			"data-scope": "table",
+			"data-part": "empty",
+			"data-slot": "table-empty",
+			colSpan,
+			className: clsx(Table_module_default.cell, Table_module_default.empty, normalizeClassName(className)),
+			...props,
+			children
+		})
+	});
+});
+const Table = Object.assign(TableRoot, {
+	Root: TableRoot,
+	ScrollArea: TableScrollArea,
+	Caption: TableCaption,
+	ColumnGroup: TableColumnGroup,
+	Column: TableColumn,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	ColumnHeader: TableColumnHeader,
+	Cell: TableCell,
+	Empty: TableEmpty
+});
+//#endregion
+export { Table };

package/dist/components/table/Table.module.js

@@ -0,0 +1,18 @@
+import './Table.css';
+//#region src/components/table/Table.module.css
+var Table_module_default = {
+	"body": "YeBawq_body",
+	"caption": "YeBawq_caption",
+	"cell": "YeBawq_cell",
+	"columnHeader": "YeBawq_columnHeader",
+	"empty": "YeBawq_empty",
+	"emptyRow": "YeBawq_emptyRow",
+	"footer": "YeBawq_footer",
+	"header": "YeBawq_header",
+	"numeric": "YeBawq_numeric",
+	"root": "YeBawq_root",
+	"row": "YeBawq_row",
+	"scrollArea": "YeBawq_scrollArea"
+};
+//#endregion
+export { Table_module_default as default };

package/dist/components/tabs/Tabs.css

@@ -0,0 +1,186 @@
+@layer ui.components {
+  .Peepwa_root {
+    box-sizing: border-box;
+    gap: var(--tabs-gap, .75rem);
+    min-width: 0;
+    color: var(--tabs-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: row;
+      align-items: stretch;
+    }
+  }
+
+  .Peepwa_list {
+    box-sizing: border-box;
+    z-index: 0;
+    align-items: stretch;
+    gap: var(--tabs-list-gap, .25rem);
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--tabs-list-padding-y, var(--tabs-list-padding, .25rem))
+      var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem));
+    border: var(--tabs-list-border-width, var(--border-width-sm)) solid
+      var(--tabs-list-border-color, var(--color-border));
+    border-radius: var(--tabs-radius, var(--radius-lg));
+    background-color: var(--tabs-list-bg, var(--color-muted));
+    display: inline-flex;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      width: var(--tabs-vertical-list-width, 12rem);
+      min-width: var(--tabs-vertical-list-width, 12rem);
+      flex-direction: column;
+    }
+
+    .Peepwa_root[data-variant="line"] & {
+      border-width: 0 0 var(--tabs-list-border-width, var(--border-width-sm));
+      background-color: #0000;
+      border-radius: 0;
+      width: 100%;
+      padding-inline: 0;
+    }
+
+    .Peepwa_root[data-orientation="vertical"][data-variant="line"] & {
+      width: var(--tabs-vertical-list-width, 12rem);
+      border-width: 0 var(--tabs-list-border-width, var(--border-width-sm)) 0 0;
+    }
+  }
+
+  .Peepwa_trigger {
+    box-sizing: border-box;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+    gap: var(--tabs-tab-content-gap, .5rem);
+    height: var(--tabs-tab-height, 2rem);
+    appearance: none;
+    border-radius: var(--tabs-tab-radius, var(--radius-md));
+    padding-inline: var(--tabs-tab-padding-x, .625rem);
+    color: var(--tabs-tab-color, var(--color-muted-foreground));
+    font: inherit;
+    font-size: var(--tabs-tab-font-size, var(--text-sm));
+    font-weight: var(--tabs-tab-font-weight, var(--weight-medium));
+    line-height: var(--tabs-tab-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--tabs-tab-transition, var(--transition-default)),
+      opacity var(--tabs-tab-transition, var(--transition-default));
+    background: none;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+
+    &[data-selected] {
+      color: var(--tabs-tab-color-active, var(--color-foreground));
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--tabs-tab-color-hover, var(--tabs-tab-color-active, var(--color-foreground)));
+      }
+    }
+
+    &:focus-visible {
+      &:before {
+        content: "";
+        border-radius: inherit;
+        outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
+          var(--tabs-focus-ring-color, var(--color-ring));
+        outline-offset: var(--tabs-focus-ring-offset, 0);
+        position: absolute;
+        inset: 0;
+      }
+    }
+
+    &[disabled], &[data-disabled] {
+      cursor: default;
+      opacity: var(--tabs-tab-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    & > svg {
+      width: var(--tabs-tab-icon-size, 1rem);
+      height: var(--tabs-tab-icon-size, 1rem);
+      color: var(--tabs-tab-icon-color, currentColor);
+      flex-shrink: 0;
+    }
+  }
+
+  .Peepwa_indicator {
+    z-index: 0;
+    width: var(--width, 0);
+    height: var(--tabs-indicator-size, 2rem);
+    border-radius: var(--tabs-indicator-radius, var(--radius-md));
+    background-color: var(--tabs-indicator-bg, var(--color-background));
+    box-shadow: var(--tabs-indicator-shadow, var(--shadow-sm));
+    transition: width var(--tabs-indicator-transition, var(--transition-default)),
+      height var(--tabs-indicator-transition, var(--transition-default)),
+      top var(--tabs-indicator-transition, var(--transition-default)),
+      left var(--tabs-indicator-transition, var(--transition-default));
+    position: absolute;
+    top: 50%;
+    translate: 0 -50%;
+
+    .Peepwa_root[data-variant="line"] & {
+      height: var(--tabs-line-indicator-size, 2px);
+      border-radius: var(--tabs-line-indicator-radius, var(--radius-full));
+      background-color: var(--tabs-line-indicator-bg, var(--tabs-tab-color-active, var(--color-foreground)));
+      box-shadow: none;
+      transition: width var(--tabs-line-indicator-transition, var(--transition-default)),
+        height var(--tabs-line-indicator-transition, var(--transition-default)),
+        top var(--tabs-line-indicator-transition, var(--transition-default)),
+        left var(--tabs-line-indicator-transition, var(--transition-default));
+      top: auto;
+      bottom: 0;
+      translate: none;
+    }
+
+    &[data-orientation="vertical"] {
+      width: calc(100% - (var(--tabs-list-padding-x, var(--tabs-list-padding, .25rem)) * 2));
+      height: var(--height, 0);
+      left: 50%;
+      translate: -50%;
+
+      .Peepwa_root[data-variant="line"] & {
+        width: var(--tabs-line-indicator-size, 2px);
+        bottom: auto;
+        left: 0;
+        translate: none;
+      }
+    }
+  }
+
+  .Peepwa_content {
+    box-sizing: border-box;
+    border: var(--tabs-border-width, var(--border-width-sm)) solid
+      var(--tabs-border-color, var(--color-border));
+    border-radius: var(--tabs-radius, var(--radius-lg));
+    background-color: var(--tabs-bg, var(--color-background));
+    min-width: 0;
+    padding: var(--tabs-panel-padding, 1rem);
+    color: var(--tabs-panel-color, var(--tabs-color, var(--color-foreground)));
+    font-size: var(--tabs-panel-font-size, var(--text-sm));
+    line-height: var(--tabs-panel-line-height, var(--line-height-text-sm));
+    outline: 0;
+    flex: 1;
+    margin: 0;
+
+    &:focus-visible {
+      outline: var(--tabs-focus-ring-width, var(--border-width-sm)) solid
+        var(--tabs-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tabs-panel-focus-ring-offset, -1px);
+      border-radius: inherit;
+    }
+
+    &[hidden]:not([hidden="until-found"]) {
+      display: none;
+    }
+  }
+}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,20 @@
+import { Tabs } from "@ark-ui/react/tabs";
+
+//#region src/components/tabs/Tabs.d.ts
+type TabsVariant = 'default' | 'line';
+declare const Tabs$1: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProps & import("react").RefAttributes<HTMLDivElement> & {
+  variant?: TabsVariant;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProps & import("react").RefAttributes<HTMLDivElement> & {
+    variant?: TabsVariant;
+  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Tabs.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & {
+    variant?: TabsVariant;
+  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<Tabs.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Tabs.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Tabs.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Tabs.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,67 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Tabs_module_default from "./Tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Tabs } from "@ark-ui/react/tabs";
+//#region src/components/tabs/Tabs.tsx
+const TabsRoot = forwardRef(function TabsRoot({ className, variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		ref,
+		"data-slot": "tabs-root",
+		"data-variant": variant,
+		className: clsx(Tabs_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TabsRootProvider = forwardRef(function TabsRootProvider({ className, variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.RootProvider, {
+		ref,
+		"data-slot": "tabs-root-provider",
+		"data-variant": variant,
+		className: clsx(Tabs_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TabsList = forwardRef(function TabsList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		ref,
+		"data-slot": "tabs-list",
+		className: clsx(Tabs_module_default.list, normalizeClassName(className)),
+		...props
+	});
+});
+const TabsTrigger = forwardRef(function TabsTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+		ref,
+		"data-slot": "tabs-trigger",
+		className: clsx(Tabs_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const TabsIndicator = forwardRef(function TabsIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		ref,
+		"data-slot": "tabs-indicator",
+		className: clsx(Tabs_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const TabsContent = forwardRef(function TabsContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		ref,
+		"data-slot": "tabs-content",
+		className: clsx(Tabs_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const Tabs$1 = Object.assign(TabsRoot, {
+	Root: TabsRoot,
+	RootProvider: TabsRootProvider,
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Indicator: TabsIndicator,
+	Content: TabsContent
+});
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/tabs/Tabs.module.js

@@ -0,0 +1,11 @@
+import './Tabs.css';
+//#region src/components/tabs/Tabs.module.css
+var Tabs_module_default = {
+	"content": "Peepwa_content",
+	"indicator": "Peepwa_indicator",
+	"list": "Peepwa_list",
+	"root": "Peepwa_root",
+	"trigger": "Peepwa_trigger"
+};
+//#endregion
+export { Tabs_module_default as default };