@edo-w/flatline-solid 0.2.0

package/dist/src/components/table/table-head.css

@@ -0,0 +1,16 @@
+@layer components {
+	.fl-table .fl-table_head {
+		/* spacing */
+		padding: var(--fl-size-2) var(--fl-size-3);
+
+		/* background */
+		background: color-mix(in oklab, var(--fl-body-bg-color), black 4%);
+		border-bottom: var(--fl-border-size, 1px) solid var(--fl-border-color);
+
+		/* text */
+		color: var(--fl-body-muted-text-color);
+		font-size: var(--fl-text-size-sm);
+		font-weight: var(--fl-font-weight-semibold);
+		text-align: left;
+	}
+}

package/dist/src/components/table/table-head.d.ts

@@ -0,0 +1,3 @@
+import type { TableHeadProps } from './types';
+import './table-head.css';
+export declare function TableHead(props: TableHeadProps): import("solid-js").JSX.Element;

package/dist/src/components/table/table-head.jsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { tableClass } from './class';
+import './table-head.css';
+export function TableHead(props) {
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    return (<th class={clsx(tableClass.head, local.class)} {...rest}>
+			{local.children}
+		</th>);
+}
+//# sourceMappingURL=table-head.jsx.map

package/dist/src/components/table/table-head.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC9C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,OAAO,CACN,CAAC,EAAE,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAC1C,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,EAAE,CAAC,CACL,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { tableClass } from './class';\nimport type { TableHeadProps } from './types';\nimport './table-head.css';\n\nexport function TableHead(props: TableHeadProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<th\n\t\t\tclass={clsx(tableClass.head, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</th>\n\t);\n}\n"]}

package/dist/src/components/table/table-header.d.ts

@@ -0,0 +1,2 @@
+import type { TableHeaderProps } from './types';
+export declare function TableHeader(props: TableHeaderProps): import("solid-js").JSX.Element;

package/dist/src/components/table/table-header.jsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { tableClass } from './class';
+export function TableHeader(props) {
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    return (<thead class={clsx(tableClass.header, local.class)} {...rest}>
+			{local.children}
+		</thead>);
+}
+//# sourceMappingURL=table-header.jsx.map

package/dist/src/components/table/table-header.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,MAAM,UAAU,WAAW,CAAC,KAAuB;IAClD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,OAAO,CACN,CAAC,KAAK,CACL,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAC5C,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,KAAK,CAAC,CACR,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { tableClass } from './class';\nimport type { TableHeaderProps } from './types';\n\nexport function TableHeader(props: TableHeaderProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<thead\n\t\t\tclass={clsx(tableClass.header, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</thead>\n\t);\n}\n"]}

package/dist/src/components/table/table-root.css

@@ -0,0 +1,12 @@
+@layer components {
+	.fl-table {
+		/* layout */
+		width: 100%;
+		border-collapse: separate;
+		border-spacing: 0;
+
+		/* text */
+		color: var(--fl-body-text-color);
+		font: inherit;
+	}
+}

package/dist/src/components/table/table-root.d.ts

@@ -0,0 +1,3 @@
+import type { TableProps } from './types';
+import './table-root.css';
+export declare function TableRoot(props: TableProps): import("solid-js").JSX.Element;

package/dist/src/components/table/table-root.jsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { tableClass } from './class';
+import './table-root.css';
+export function TableRoot(props) {
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    return (<table class={clsx(tableClass.root, local.class)} {...rest}>
+			{local.children}
+		</table>);
+}
+//# sourceMappingURL=table-root.jsx.map

package/dist/src/components/table/table-root.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-root.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-root.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,UAAU,SAAS,CAAC,KAAiB;IAC1C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,OAAO,CACN,CAAC,KAAK,CACL,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAC1C,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,KAAK,CAAC,CACR,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { tableClass } from './class';\nimport type { TableProps } from './types';\nimport './table-root.css';\n\nexport function TableRoot(props: TableProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<table\n\t\t\tclass={clsx(tableClass.root, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</table>\n\t);\n}\n"]}

package/dist/src/components/table/table-row.css

@@ -0,0 +1,6 @@
+@layer components {
+	.fl-table .fl-table_body .fl-table_row:hover {
+		/* background */
+		background: color-mix(in oklab, var(--fl-body-bg-color), var(--fl-primary-color) 3%);
+	}
+}

package/dist/src/components/table/table-row.d.ts

@@ -0,0 +1,3 @@
+import type { TableRowProps } from './types';
+import './table-row.css';
+export declare function TableRow(props: TableRowProps): import("solid-js").JSX.Element;

package/dist/src/components/table/table-row.jsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { tableClass } from './class';
+import './table-row.css';
+export function TableRow(props) {
+    const [local, rest] = splitProps(props, ['class', 'children']);
+    return (<tr class={clsx(tableClass.row, local.class)} {...rest}>
+			{local.children}
+		</tr>);
+}
+//# sourceMappingURL=table-row.jsx.map

package/dist/src/components/table/table-row.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC5C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,OAAO,CACN,CAAC,EAAE,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CACzC,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,EAAE,CAAC,CACL,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { tableClass } from './class';\nimport type { TableRowProps } from './types';\nimport './table-row.css';\n\nexport function TableRow(props: TableRowProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<tr\n\t\t\tclass={clsx(tableClass.row, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</tr>\n\t);\n}\n"]}

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

@@ -0,0 +1,23 @@
+import type { JSX } from 'solid-js';
+import { TableBody } from './table-body';
+import { TableCaption } from './table-caption';
+import { TableCell } from './table-cell';
+import { TableFooter } from './table-footer';
+import { TableHead } from './table-head';
+import { TableHeader } from './table-header';
+import { TableRoot } from './table-root';
+import { TableRow } from './table-row';
+import type { TableProps } from './types';
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeaderProps, TableHeadProps, TableProps, TableRowProps, } from './types';
+export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRoot, TableRow };
+export interface TableComponent {
+    (props: TableProps): JSX.Element;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Head: typeof TableHead;
+    Row: typeof TableRow;
+    Cell: typeof TableCell;
+    Caption: typeof TableCaption;
+}
+export declare const Table: TableComponent;

package/dist/src/components/table/table.jsx

@@ -0,0 +1,19 @@
+import { TableBody } from './table-body';
+import { TableCaption } from './table-caption';
+import { TableCell } from './table-cell';
+import { TableFooter } from './table-footer';
+import { TableHead } from './table-head';
+import { TableHeader } from './table-header';
+import { TableRoot } from './table-root';
+import { TableRow } from './table-row';
+export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRoot, TableRow };
+export const Table = Object.assign(TableRoot, {
+    Header: TableHeader,
+    Body: TableBody,
+    Footer: TableFooter,
+    Head: TableHead,
+    Row: TableRow,
+    Cell: TableCell,
+    Caption: TableCaption,
+});
+//# sourceMappingURL=table.jsx.map

package/dist/src/components/table/table.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.jsx","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAavC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAaxG,MAAM,CAAC,MAAM,KAAK,GAAmB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IAC7D,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,YAAY;CACrB,CAAC,CAAC","sourcesContent":["import type { JSX } from 'solid-js';\nimport { TableBody } from './table-body';\nimport { TableCaption } from './table-caption';\nimport { TableCell } from './table-cell';\nimport { TableFooter } from './table-footer';\nimport { TableHead } from './table-head';\nimport { TableHeader } from './table-header';\nimport { TableRoot } from './table-root';\nimport { TableRow } from './table-row';\nimport type { TableProps } from './types';\n\nexport type {\n\tTableBodyProps,\n\tTableCaptionProps,\n\tTableCellProps,\n\tTableFooterProps,\n\tTableHeaderProps,\n\tTableHeadProps,\n\tTableProps,\n\tTableRowProps,\n} from './types';\nexport { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRoot, TableRow };\n\nexport interface TableComponent {\n\t(props: TableProps): JSX.Element;\n\tHeader: typeof TableHeader;\n\tBody: typeof TableBody;\n\tFooter: typeof TableFooter;\n\tHead: typeof TableHead;\n\tRow: typeof TableRow;\n\tCell: typeof TableCell;\n\tCaption: typeof TableCaption;\n}\n\nexport const Table: TableComponent = Object.assign(TableRoot, {\n\tHeader: TableHeader,\n\tBody: TableBody,\n\tFooter: TableFooter,\n\tHead: TableHead,\n\tRow: TableRow,\n\tCell: TableCell,\n\tCaption: TableCaption,\n});\n"]}

package/dist/src/components/table/types.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+export type TableProps = JSX.HTMLAttributes<HTMLTableElement>;
+export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+export type TableFooterProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+export type TableHeadProps = JSX.ThHTMLAttributes<HTMLTableCellElement>;
+export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement>;
+export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement>;
+export type TableCaptionProps = JSX.HTMLAttributes<HTMLTableCaptionElement>;

package/dist/src/components/table/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/src/components/table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/table/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { JSX } from 'solid-js';\n\nexport type TableProps = JSX.HTMLAttributes<HTMLTableElement>;\nexport type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement>;\nexport type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement>;\nexport type TableFooterProps = JSX.HTMLAttributes<HTMLTableSectionElement>;\nexport type TableHeadProps = JSX.ThHTMLAttributes<HTMLTableCellElement>;\nexport type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement>;\nexport type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement>;\nexport type TableCaptionProps = JSX.HTMLAttributes<HTMLTableCaptionElement>;\n"]}

package/dist/src/components/tabs/class.d.ts

@@ -0,0 +1,12 @@
+export declare const tabsClass: {
+    readonly root: 'fl-tabs';
+    readonly list: 'fl-tabs_list';
+    readonly trigger: 'fl-tabs_trigger';
+    readonly indicator: 'fl-tabs_indicator';
+    readonly content: 'fl-tabs_content';
+    readonly color: {
+        readonly primary: '--color-primary';
+        readonly secondary: '--color-secondary';
+    };
+};
+export type TabsColor = keyof typeof tabsClass.color;

package/dist/src/components/tabs/class.js

@@ -0,0 +1,12 @@
+export const tabsClass = {
+    root: 'fl-tabs',
+    list: 'fl-tabs_list',
+    trigger: 'fl-tabs_trigger',
+    indicator: 'fl-tabs_indicator',
+    content: 'fl-tabs_content',
+    color: {
+        primary: '--color-primary',
+        secondary: '--color-secondary',
+    },
+};
+//# sourceMappingURL=class.js.map

package/dist/src/components/tabs/class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/tabs/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,OAAO,EAAE,iBAAiB;IAC1B,KAAK,EAAE;QACN,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,mBAAmB;KAC9B;CACQ,CAAC","sourcesContent":["export const tabsClass = {\n\troot: 'fl-tabs',\n\tlist: 'fl-tabs_list',\n\ttrigger: 'fl-tabs_trigger',\n\tindicator: 'fl-tabs_indicator',\n\tcontent: 'fl-tabs_content',\n\tcolor: {\n\t\tprimary: '--color-primary',\n\t\tsecondary: '--color-secondary',\n\t},\n} as const;\n\nexport type TabsColor = keyof typeof tabsClass.color;\n"]}

package/dist/src/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './class';
+export * from './tabs';

package/dist/src/components/tabs/index.js

@@ -0,0 +1,3 @@
+export * from './class';
+export * from './tabs';
+//# sourceMappingURL=index.js.map

package/dist/src/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC","sourcesContent":["export * from './class';\nexport * from './tabs';\n"]}

package/dist/src/components/tabs/tabs-content.css

@@ -0,0 +1,24 @@
+@layer components {
+	.fl-tabs .fl-tabs_content {
+		/* spacing */
+		padding: var(--fl-size-4);
+
+		/* text */
+		color: var(--fl-body-text-color);
+	}
+
+	/* focus-visible state */
+	.fl-tabs .fl-tabs_content:focus-visible {
+		outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+		outline-offset: var(--fl-focus-ring-offset);
+	}
+
+	/* vertical content */
+	.fl-tabs[data-orientation="vertical"] .fl-tabs_content {
+		/* layout */
+		flex: 1 1 auto;
+
+		/* spacing */
+		padding-top: 0;
+	}
+}

package/dist/src/components/tabs/tabs-indicator.css

@@ -0,0 +1,32 @@
+@layer components {
+	.fl-tabs .fl-tabs_indicator {
+		/* layout */
+		position: absolute;
+
+		/* background */
+		background-color: var(--fl-tabs-indicator-color);
+
+		/* effects */
+		transition: all var(--fl-animation-duration) ease-in-out;
+	}
+
+	/* horizontal indicator */
+	.fl-tabs .fl-tabs_indicator[data-orientation="horizontal"] {
+		/* layout */
+		bottom: calc(var(--fl-border-size, 1px) * -1);
+		height: var(--fl-tabs-indicator-size);
+
+		/* background */
+		border-radius: var(--fl-radius-full);
+	}
+
+	/* vertical indicator */
+	.fl-tabs .fl-tabs_indicator[data-orientation="vertical"] {
+		/* layout */
+		right: calc(var(--fl-border-size, 1px) * -1);
+		width: var(--fl-tabs-indicator-size);
+
+		/* background */
+		border-radius: var(--fl-radius-full);
+	}
+}

package/dist/src/components/tabs/tabs-list.css

@@ -0,0 +1,26 @@
+@layer components {
+	.fl-tabs .fl-tabs_list {
+		/* layout */
+		position: relative;
+		display: flex;
+	}
+
+	/* horizontal list */
+	.fl-tabs .fl-tabs_list[data-orientation="horizontal"] {
+		/* layout */
+		align-items: center;
+
+		/* background */
+		border-bottom: var(--fl-border-size, 1px) solid var(--fl-tabs-list-border-color);
+	}
+
+	/* vertical list */
+	.fl-tabs .fl-tabs_list[data-orientation="vertical"] {
+		/* layout */
+		flex-direction: column;
+		align-items: stretch;
+
+		/* background */
+		border-right: var(--fl-border-size, 1px) solid var(--fl-tabs-list-border-color);
+	}
+}

package/dist/src/components/tabs/tabs-root.css

@@ -0,0 +1,34 @@
+@layer components {
+	.fl-tabs {
+		--fl-tabs-indicator-size: 2px;
+		--fl-tabs-indicator-color: var(--fl-primary-color);
+		--fl-tabs-list-border-color: var(--fl-input-border-color, var(--fl-border-color));
+		--fl-tabs-trigger-hover-bg: var(--fl-input-bg-hover-color, color-mix(in oklab, white, black 5%));
+		--fl-tabs-trigger-focus-bg: color-mix(in oklab, var(--fl-input-bg-color, white), black 3%);
+
+		/* layout */
+		width: 100%;
+
+		/* text */
+		color: var(--fl-body-text-color);
+	}
+
+	/* primary color variant */
+	.fl-tabs.--color-primary {
+		--fl-tabs-indicator-color: var(--fl-primary-color);
+	}
+
+	/* secondary color variant */
+	.fl-tabs.--color-secondary {
+		--fl-tabs-indicator-color: var(--fl-secondary-text-color);
+	}
+
+	/* vertical orientation */
+	.fl-tabs[data-orientation="vertical"] {
+		/* layout */
+		display: flex;
+
+		/* spacing */
+		gap: var(--fl-size-4);
+	}
+}

package/dist/src/components/tabs/tabs-trigger.css

@@ -0,0 +1,58 @@
+@layer components {
+	.fl-tabs .fl-tabs_trigger {
+		/* reset */
+		appearance: none;
+
+		/* layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		/* spacing */
+		padding-inline: var(--fl-size-4);
+		padding-block: var(--fl-input-pad-y, var(--fl-size-1-5));
+
+		/* background */
+		border: 0;
+		background: transparent;
+
+		/* text */
+		color: var(--fl-body-text-color);
+		font: inherit;
+		font-weight: var(--fl-font-weight-medium);
+		white-space: nowrap;
+
+		/* pointer */
+		cursor: pointer;
+		user-select: none;
+
+		/* effects */
+		transition:
+			background-color 188ms ease-in-out,
+			color 188ms ease-in-out;
+	}
+
+	/* hover state */
+	.fl-tabs .fl-tabs_trigger:hover:not([data-disabled]) {
+		background-color: var(--fl-tabs-trigger-hover-bg);
+	}
+
+	/* focus-visible state */
+	.fl-tabs .fl-tabs_trigger:focus-visible {
+		outline: none;
+		background-color: var(--fl-tabs-trigger-focus-bg);
+	}
+
+	/* selected state */
+	.fl-tabs .fl-tabs_trigger[data-selected] {
+		color: var(--fl-tabs-indicator-color);
+	}
+
+	/* disabled state */
+	.fl-tabs .fl-tabs_trigger[data-disabled],
+	.fl-tabs .fl-tabs_trigger[data-disabled]:hover {
+		opacity: var(--fl-disabled-opacity);
+		background-color: transparent;
+		cursor: var(--fl-disabled-cursor);
+	}
+}

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

@@ -0,0 +1,27 @@
+import { type TabsContentProps as KTabsContentProps, type TabsIndicatorProps as KTabsIndicatorProps, type TabsListProps as KTabsListProps, type TabsRootProps as KTabsRootProps, type TabsTriggerProps as KTabsTriggerProps } from '@kobalte/core/tabs';
+import { type JSX } from 'solid-js';
+import { type TabsColor } from './class';
+import './tabs-root.css';
+import './tabs-list.css';
+import './tabs-trigger.css';
+import './tabs-indicator.css';
+import './tabs-content.css';
+export type TabsRootBaseProps = KTabsRootProps & JSX.HTMLAttributes<HTMLDivElement>;
+export interface TabsRootProps extends TabsRootBaseProps {
+    color?: TabsColor;
+}
+export type TabsListProps = KTabsListProps & JSX.HTMLAttributes<HTMLDivElement>;
+export type TabsTriggerProps = KTabsTriggerProps & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+export type TabsIndicatorProps = KTabsIndicatorProps & JSX.HTMLAttributes<HTMLDivElement>;
+export type TabsContentProps = KTabsContentProps & JSX.HTMLAttributes<HTMLDivElement>;
+export declare function TabsRoot(props: TabsRootProps): JSX.Element;
+export declare function TabsList(props: TabsListProps): JSX.Element;
+export declare function TabsTrigger(props: TabsTriggerProps): JSX.Element;
+export declare function TabsIndicator(props: TabsIndicatorProps): JSX.Element;
+export declare function TabsContent(props: TabsContentProps): JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Indicator: typeof TabsIndicator;
+    Content: typeof TabsContent;
+};

package/dist/src/components/tabs/tabs.jsx

@@ -0,0 +1,47 @@
+import { Tabs as KTabs, } from '@kobalte/core/tabs';
+import clsx from 'clsx/lite';
+import { mergeProps, splitProps } from 'solid-js';
+import { tabsClass } from './class';
+import './tabs-root.css';
+import './tabs-list.css';
+import './tabs-trigger.css';
+import './tabs-indicator.css';
+import './tabs-content.css';
+export function TabsRoot(props) {
+    const merged = mergeProps({
+        color: 'primary',
+    }, props);
+    const [local, rest] = splitProps(merged, ['class', 'color']);
+    const rootClass = () => {
+        const colorClass = tabsClass.color[local.color];
+        return clsx(tabsClass.root, colorClass, local.class);
+    };
+    return (<KTabs class={rootClass()} {...rest}/>);
+}
+export function TabsList(props) {
+    const [local, rest] = splitProps(props, ['class']);
+    const rootClass = () => clsx(tabsClass.list, local.class);
+    return (<KTabs.List class={rootClass()} {...rest}/>);
+}
+export function TabsTrigger(props) {
+    const [local, rest] = splitProps(props, ['class']);
+    const rootClass = () => clsx(tabsClass.trigger, local.class);
+    return (<KTabs.Trigger class={rootClass()} {...rest}/>);
+}
+export function TabsIndicator(props) {
+    const [local, rest] = splitProps(props, ['class']);
+    const rootClass = () => clsx(tabsClass.indicator, local.class);
+    return (<KTabs.Indicator class={rootClass()} {...rest}/>);
+}
+export function TabsContent(props) {
+    const [local, rest] = splitProps(props, ['class']);
+    const rootClass = () => clsx(tabsClass.content, local.class);
+    return (<KTabs.Content class={rootClass()} {...rest}/>);
+}
+export const Tabs = Object.assign(TabsRoot, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Indicator: TabsIndicator,
+    Content: TabsContent,
+});
+//# sourceMappingURL=tabs.jsx.map

package/dist/src/components/tabs/tabs.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.jsx","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tTabs as KTabs,\n\ttype TabsContentProps as KTabsContentProps,\n\ttype TabsIndicatorProps as KTabsIndicatorProps,\n\ttype TabsListProps as KTabsListProps,\n\ttype TabsRootProps as KTabsRootProps,\n\ttype TabsTriggerProps as KTabsTriggerProps,\n} from '@kobalte/core/tabs';\nimport clsx from 'clsx/lite';\nimport { type JSX, mergeProps, splitProps } from 'solid-js';\nimport { type TabsColor, tabsClass } from './class';\nimport './tabs-root.css';\nimport './tabs-list.css';\nimport './tabs-trigger.css';\nimport './tabs-indicator.css';\nimport './tabs-content.css';\n\nexport type TabsRootBaseProps = KTabsRootProps & JSX.HTMLAttributes<HTMLDivElement>;\n\nexport interface TabsRootProps extends TabsRootBaseProps {\n\tcolor?: TabsColor;\n}\n\nexport type TabsListProps = KTabsListProps & JSX.HTMLAttributes<HTMLDivElement>;\nexport type TabsTriggerProps = KTabsTriggerProps & JSX.ButtonHTMLAttributes<HTMLButtonElement>;\nexport type TabsIndicatorProps = KTabsIndicatorProps & JSX.HTMLAttributes<HTMLDivElement>;\nexport type TabsContentProps = KTabsContentProps & JSX.HTMLAttributes<HTMLDivElement>;\n\nexport function TabsRoot(props: TabsRootProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\tcolor: 'primary',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'color']);\n\n\tconst rootClass = () => {\n\t\tconst colorClass = tabsClass.color[local.color];\n\n\t\treturn clsx(tabsClass.root, colorClass, local.class);\n\t};\n\n\treturn (\n\t\t<KTabs\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsList(props: TabsListProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.list, local.class);\n\n\treturn (\n\t\t<KTabs.List\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsTrigger(props: TabsTriggerProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.trigger, local.class);\n\n\treturn (\n\t\t<KTabs.Trigger\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsIndicator(props: TabsIndicatorProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.indicator, local.class);\n\n\treturn (\n\t\t<KTabs.Indicator\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsContent(props: TabsContentProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.content, local.class);\n\n\treturn (\n\t\t<KTabs.Content\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n\tList: TabsList,\n\tTrigger: TabsTrigger,\n\tIndicator: TabsIndicator,\n\tContent: TabsContent,\n});\n"]}

package/dist/src/components/textarea/class.d.ts

@@ -0,0 +1,3 @@
+export declare const textAreaClass: {
+    readonly root: 'fl-textarea';
+};

package/dist/src/components/textarea/class.js

@@ -0,0 +1,4 @@
+export const textAreaClass = {
+    root: 'fl-textarea',
+};
+//# sourceMappingURL=class.js.map

package/dist/src/components/textarea/class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/textarea/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,IAAI,EAAE,aAAa;CACV,CAAC","sourcesContent":["export const textAreaClass = {\n\troot: 'fl-textarea',\n} as const;\n"]}

package/dist/src/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './class';
+export * from './textarea';

package/dist/src/components/textarea/index.js

@@ -0,0 +1,3 @@
+export * from './class';
+export * from './textarea';
+//# sourceMappingURL=index.js.map

package/dist/src/components/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC","sourcesContent":["export * from './class';\nexport * from './textarea';\n"]}

package/dist/src/components/textarea/textarea.css

@@ -0,0 +1,46 @@
+@layer components {
+	.fl-textarea {
+		/* reset */
+		appearance: initial;
+		outline: none;
+
+		/* layout */
+		display: block;
+		width: 100%;
+		min-width: 0;
+		min-height: var(--fl-size-24);
+
+		/* spacing */
+		padding-inline: var(--fl-input-pad-x);
+		padding-block: var(--fl-input-pad-y);
+
+		/* background */
+		background: var(--fl-input-bg-color);
+		border: var(--fl-input-border-size) solid var(--fl-input-border-color);
+		border-radius: var(--fl-input-border-radius);
+		box-shadow: var(--fl-input-shadow);
+
+		/* text */
+		color: var(--fl-input-text-color);
+		font: inherit;
+		line-height: 1.5;
+
+		/* pointer */
+		resize: vertical;
+	}
+
+	.fl-textarea::placeholder {
+		color: var(--fl-body-muted-text-color);
+	}
+
+	.fl-textarea:focus-visible:not(:disabled) {
+		border-color: var(--fl-input-border-focus-color);
+		outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+		outline-offset: 0;
+	}
+
+	.fl-textarea:disabled {
+		opacity: var(--fl-disabled-opacity);
+		cursor: var(--fl-disabled-cursor);
+	}
+}

package/dist/src/components/textarea/textarea.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from 'solid-js';
+import './textarea.css';
+export type TextAreaBaseProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface TextAreaProps extends TextAreaBaseProps {
+}
+export declare function TextArea(props: TextAreaProps): JSX.Element;

package/dist/src/components/textarea/textarea.jsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { textAreaClass } from './class';
+import './textarea.css';
+export function TextArea(props) {
+    const [local, rest] = splitProps(props, ['class']);
+    const rootClass = () => clsx(textAreaClass.root, local.class);
+    return (<textarea class={rootClass()} {...rest}/>);
+}
+//# sourceMappingURL=textarea.jsx.map

package/dist/src/components/textarea/textarea.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.jsx","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,gBAAgB,CAAC;AAMxB,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC5C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACN,CAAC,QAAQ,CACR,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,EACR,CACF,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { textAreaClass } from './class';\nimport './textarea.css';\n\nexport type TextAreaBaseProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextAreaProps extends TextAreaBaseProps {}\n\nexport function TextArea(props: TextAreaProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(textAreaClass.root, local.class);\n\n\treturn (\n\t\t<textarea\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"]}

package/dist/src/components/xstack/class.d.ts

@@ -0,0 +1,12 @@
+export declare const xstackClass: {
+    readonly root: 'fl-xstack';
+    readonly garVar: '--fl-gap';
+    readonly align: {
+        readonly top: '--align-top';
+        readonly center: '--align-center';
+        readonly bottom: '--align-bottom';
+        readonly stretch: '--align-stretch';
+        readonly baseline: '--align-baseline';
+    };
+};
+export type XStackAlign = keyof typeof xstackClass.align;