@edo-w/flatline-solid 0.2.0

package/dist/src/components/slider/slider.css

@@ -0,0 +1,83 @@
+@layer components {
+	.fl-slider {
+		--fl-slider-track-height: var(--fl-size-1);
+		--fl-slider-thumb-size: var(--fl-size-4);
+
+		/* reset */
+		appearance: none;
+		outline: none;
+
+		/* layout */
+		width: 100%;
+		height: var(--fl-slider-thumb-size);
+
+		/* background */
+		background: transparent;
+
+		/* text */
+		accent-color: var(--fl-secondary-color);
+
+		/* pointer */
+		cursor: pointer;
+	}
+
+	.fl-slider::-webkit-slider-runnable-track {
+		height: var(--fl-slider-track-height);
+		background: color-mix(in oklab, var(--fl-body-bg-color), black 10%);
+		border-radius: var(--fl-border-radius);
+	}
+
+	.fl-slider::-webkit-slider-thumb {
+		/* reset */
+		appearance: none;
+		box-sizing: border-box;
+
+		/* layout */
+		margin-top: calc((var(--fl-slider-track-height) - var(--fl-slider-thumb-size)) / 2);
+		width: var(--fl-slider-thumb-size);
+		height: var(--fl-slider-thumb-size);
+
+		/* background */
+		background: var(--fl-secondary-color);
+		border: var(--fl-border-size, 1px) solid color-mix(in oklab, var(--fl-secondary-color), black 35%);
+		border-radius: var(--fl-radius-full);
+
+		/* effects */
+		box-shadow: var(--fl-shadow-sm);
+	}
+
+	.fl-slider::-moz-range-track {
+		height: var(--fl-slider-track-height);
+		background: color-mix(in oklab, var(--fl-body-bg-color), black 10%);
+		border: 0;
+		border-radius: var(--fl-border-radius);
+	}
+
+	.fl-slider::-moz-range-thumb {
+		/* reset */
+		box-sizing: border-box;
+
+		/* layout */
+		width: var(--fl-slider-thumb-size);
+		height: var(--fl-slider-thumb-size);
+
+		/* background */
+		background: var(--fl-secondary-color);
+		border: var(--fl-border-size, 1px) solid color-mix(in oklab, var(--fl-secondary-color), black 35%);
+		border-radius: var(--fl-radius-full);
+
+		/* effects */
+		box-shadow: var(--fl-shadow-sm);
+	}
+
+	.fl-slider:focus-visible {
+		outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+		outline-offset: var(--fl-focus-ring-offset);
+		border-radius: var(--fl-border-radius);
+	}
+
+	.fl-slider:disabled {
+		opacity: var(--fl-disabled-opacity);
+		cursor: var(--fl-disabled-cursor);
+	}
+}

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

@@ -0,0 +1,7 @@
+import { type JSX } from 'solid-js';
+import './slider.css';
+export type SliderBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+export interface SliderProps extends SliderBaseProps {
+    onChange?: (value: number) => void;
+}
+export declare function Slider(props: SliderProps): JSX.Element;

package/dist/src/components/slider/slider.jsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx/lite';
+import { splitProps } from 'solid-js';
+import { sliderClass } from './class';
+import './slider.css';
+export function Slider(props) {
+    const [local, rest] = splitProps(props, ['class', 'onChange', 'onInput']);
+    const rootClass = () => clsx(sliderClass.root, local.class);
+    const callInputHandler = (handler, event) => {
+        if (typeof handler === 'function') {
+            handler(event);
+        }
+    };
+    const handleInput = (event) => {
+        callInputHandler(local.onInput, event);
+        local.onChange?.(Number(event.currentTarget.value));
+    };
+    return (<input type="range" class={rootClass()} onInput={handleInput} {...rest}/>);
+}
+//# sourceMappingURL=slider.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.jsx","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,cAAc,CAAC;AAWtB,MAAM,UAAU,MAAM,CAAC,KAAkB;IACxC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,KAAiB,EAAE,EAAE;QAChE,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;YAClC,OAA8B,CAAC,KAAyB,CAAC,CAAC;QAC5D,CAAC;IACF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAwD,CAAC,KAAK,EAAE,EAAE;QAClF,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAEvC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,KAAK,CACL,IAAI,CAAC,OAAO,CACZ,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,IAAI,IAAI,CAAC,EACR,CACF,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { sliderClass } from './class';\nimport './slider.css';\n\nexport type SliderBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;\n\ntype SliderInputEvent = InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement };\ntype SliderInputHandler = (event: SliderInputEvent) => void;\n\nexport interface SliderProps extends SliderBaseProps {\n\tonChange?: (value: number) => void;\n}\n\nexport function Slider(props: SliderProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'onChange', 'onInput']);\n\n\tconst rootClass = () => clsx(sliderClass.root, local.class);\n\n\tconst callInputHandler = (handler: unknown, event: InputEvent) => {\n\t\tif (typeof handler === 'function') {\n\t\t\t(handler as SliderInputHandler)(event as SliderInputEvent);\n\t\t}\n\t};\n\n\tconst handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {\n\t\tcallInputHandler(local.onInput, event);\n\n\t\tlocal.onChange?.(Number(event.currentTarget.value));\n\t};\n\n\treturn (\n\t\t<input\n\t\t\ttype=\"range\"\n\t\t\tclass={rootClass()}\n\t\t\tonInput={handleInput}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"]}

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

@@ -0,0 +1,10 @@
+export declare const spinnerClass: {
+    readonly root: 'fl-spinner';
+    readonly svg: 'fl-spinner_svg';
+    readonly size: {
+        readonly sm: '--size-sm';
+        readonly md: '--size-md';
+        readonly lg: '--size-lg';
+    };
+};
+export type SpinnerSize = keyof typeof spinnerClass.size;

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

@@ -0,0 +1,10 @@
+export const spinnerClass = {
+    root: 'fl-spinner',
+    svg: 'fl-spinner_svg',
+    size: {
+        sm: '--size-sm',
+        md: '--size-md',
+        lg: '--size-lg',
+    },
+};
+//# sourceMappingURL=class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/spinner/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,gBAAgB;IACrB,IAAI,EAAE;QACL,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,WAAW;KACf;CACQ,CAAC","sourcesContent":["export const spinnerClass = {\n\troot: 'fl-spinner',\n\tsvg: 'fl-spinner_svg',\n\tsize: {\n\t\tsm: '--size-sm',\n\t\tmd: '--size-md',\n\t\tlg: '--size-lg',\n\t},\n} as const;\n\nexport type SpinnerSize = keyof typeof spinnerClass.size;\n"]}

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

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

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

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

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

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

package/dist/src/components/spinner/spinner.css

@@ -0,0 +1,51 @@
+@layer components {
+	.fl-spinner {
+		--fl-spinner-size: var(--fl-size-7);
+		--fl-spinner-color: var(--fl-primary-color);
+
+		/* layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--fl-spinner-size);
+		height: var(--fl-spinner-size);
+
+		/* text */
+		color: var(--fl-spinner-color);
+	}
+
+	.fl-spinner.--size-sm {
+		--fl-spinner-size: var(--fl-size-5);
+	}
+
+	.fl-spinner.--size-lg {
+		--fl-spinner-size: var(--fl-size-9);
+	}
+
+	.fl-spinner .fl-spinner_svg {
+		/* layout */
+		width: 100%;
+		height: 100%;
+
+		/* effects */
+		animation: fl-spinner-rotate 0.8s linear infinite;
+	}
+
+	.fl-spinner .fl-spinner_svg circle {
+		opacity: 0.2;
+	}
+
+	.fl-spinner .fl-spinner_svg path {
+		stroke-linecap: round;
+	}
+
+	@keyframes fl-spinner-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+}

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

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+import { type SpinnerSize } from './class';
+import './spinner.css';
+export type SpinnerBaseProps = JSX.HTMLAttributes<HTMLSpanElement>;
+export interface SpinnerProps extends SpinnerBaseProps {
+    size?: SpinnerSize;
+    label?: string;
+}
+export declare function Spinner(props: SpinnerProps): JSX.Element;

package/dist/src/components/spinner/spinner.jsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx/lite';
+import { mergeProps, splitProps } from 'solid-js';
+import { spinnerClass } from './class';
+import './spinner.css';
+export function Spinner(props) {
+    const merged = mergeProps({
+        size: 'md',
+        label: 'Loading',
+    }, props);
+    const [local, rest] = splitProps(merged, ['class', 'size', 'label']);
+    const rootClass = () => {
+        const sizeClass = spinnerClass.size[local.size];
+        return clsx(spinnerClass.root, sizeClass, local.class);
+    };
+    return (<span class={rootClass()} role="status" aria-label={local.label} {...rest}>
+			<svg class={spinnerClass.svg} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+				<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+				<path d="M12 3a9 9 0 0 1 9 9" stroke="currentColor" stroke-width="2"/>
+			</svg>
+		</span>);
+}
+//# sourceMappingURL=spinner.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.jsx","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAoB,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,eAAe,CAAC;AASvB,MAAM,UAAU,OAAO,CAAC,KAAmB;IAC1C,MAAM,MAAM,GAAG,UAAU,CACxB;QACC,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,SAAS;KACP,EACV,KAAK,CACL,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,IAAI,CACJ,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,CAAC,QAAQ,CACb,UAAU,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CACxB,OAAO,CAAC,WAAW,CACnB,IAAI,CAAC,MAAM,CACX,WAAW,CAAC,MAAM,CAElB;IAAA,CAAC,MAAM,CACN,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,GAAG,CACL,MAAM,CAAC,cAAc,CACrB,YAAY,CAAC,GAAG,EAEjB;IAAA,CAAC,IAAI,CACJ,CAAC,CAAC,qBAAqB,CACvB,MAAM,CAAC,cAAc,CACrB,YAAY,CAAC,GAAG,EAElB;GAAA,EAAE,GAAG,CACN;EAAA,EAAE,IAAI,CAAC,CACP,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, mergeProps, splitProps } from 'solid-js';\nimport { type SpinnerSize, spinnerClass } from './class';\nimport './spinner.css';\n\nexport type SpinnerBaseProps = JSX.HTMLAttributes<HTMLSpanElement>;\n\nexport interface SpinnerProps extends SpinnerBaseProps {\n\tsize?: SpinnerSize;\n\tlabel?: string;\n}\n\nexport function Spinner(props: SpinnerProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\tsize: 'md',\n\t\t\tlabel: 'Loading',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'size', 'label']);\n\n\tconst rootClass = () => {\n\t\tconst sizeClass = spinnerClass.size[local.size];\n\n\t\treturn clsx(spinnerClass.root, sizeClass, local.class);\n\t};\n\n\treturn (\n\t\t<span\n\t\t\tclass={rootClass()}\n\t\t\trole=\"status\"\n\t\t\taria-label={local.label}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<svg\n\t\t\t\tclass={spinnerClass.svg}\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tcx=\"12\"\n\t\t\t\t\tcy=\"12\"\n\t\t\t\t\tr=\"9\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M12 3a9 9 0 0 1 9 9\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</span>\n\t);\n}\n"]}

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

@@ -0,0 +1,7 @@
+export declare const switchClass: {
+    readonly root: 'fl-switch';
+    readonly input: 'fl-switch_input';
+    readonly control: 'fl-switch_control';
+    readonly thumb: 'fl-switch_thumb';
+    readonly label: 'fl-switch_label';
+};

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

@@ -0,0 +1,8 @@
+export const switchClass = {
+    root: 'fl-switch',
+    input: 'fl-switch_input',
+    control: 'fl-switch_control',
+    thumb: 'fl-switch_thumb',
+    label: 'fl-switch_label',
+};
+//# sourceMappingURL=class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/switch/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACf,CAAC","sourcesContent":["export const switchClass = {\n\troot: 'fl-switch',\n\tinput: 'fl-switch_input',\n\tcontrol: 'fl-switch_control',\n\tthumb: 'fl-switch_thumb',\n\tlabel: 'fl-switch_label',\n} as const;\n"]}

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

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

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

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

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

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

package/dist/src/components/switch/switch.css

@@ -0,0 +1,90 @@
+@layer components {
+	.fl-switch {
+		/* layout */
+		display: inline-flex;
+		align-items: center;
+
+		/* spacing */
+		gap: var(--fl-size-2);
+
+		/* pointer */
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.fl-switch[data-disabled] {
+		cursor: var(--fl-disabled-cursor);
+		opacity: var(--fl-disabled-opacity);
+	}
+
+	.fl-switch .fl-switch_input {
+		/* layout */
+		position: absolute;
+		opacity: 0;
+		width: 1px;
+		height: 1px;
+		pointer-events: none;
+	}
+
+	.fl-switch .fl-switch_control {
+		--fl-switch-track-width: var(--fl-size-10);
+		--fl-switch-track-height: var(--fl-size-6);
+		--fl-switch-thumb-size: calc(var(--fl-switch-track-height) - var(--fl-size-1));
+
+		/* layout */
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		width: var(--fl-switch-track-width);
+		height: var(--fl-switch-track-height);
+
+		/* spacing */
+		padding-inline: var(--fl-size-0-5);
+
+		/* background */
+		background: color-mix(in oklab, var(--fl-body-bg-color), black 12%);
+		border: var(--fl-border-size, 1px) solid color-mix(in oklab, var(--fl-body-bg-color), black 18%);
+		border-radius: var(--fl-radius-md);
+
+		/* effects */
+		box-shadow: var(--fl-shadow-xs);
+		transition:
+			background var(--fl-animation-duration) ease,
+			border-color var(--fl-animation-duration) ease;
+	}
+
+	.fl-switch .fl-switch_thumb {
+		/* layout */
+		width: var(--fl-switch-thumb-size);
+		height: var(--fl-switch-thumb-size);
+
+		/* background */
+		background: var(--fl-body-bg-color);
+		border-radius: var(--fl-radius-sm);
+
+		/* effects */
+		box-shadow: var(--fl-shadow-sm);
+		transition: transform var(--fl-animation-duration) ease;
+	}
+
+	.fl-switch .fl-switch_input:focus-visible + .fl-switch_control {
+		outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+		outline-offset: var(--fl-focus-ring-offset);
+	}
+
+	.fl-switch .fl-switch_input:checked + .fl-switch_control {
+		background: color-mix(in oklab, var(--fl-primary-color), white 15%);
+		border-color: color-mix(in oklab, var(--fl-primary-color), black 10%);
+	}
+
+	.fl-switch .fl-switch_input:checked + .fl-switch_control .fl-switch_thumb {
+		transform: translateX(calc(var(--fl-switch-track-width) - var(--fl-switch-thumb-size) - var(--fl-size-1)));
+	}
+
+	.fl-switch .fl-switch_label {
+		/* text */
+		color: var(--fl-body-text-color);
+		font-size: var(--fl-text-size-sm);
+		font-weight: var(--fl-font-weight-medium);
+	}
+}

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

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+import './switch.css';
+export type SwitchBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+export interface SwitchProps extends SwitchBaseProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare function Switch(props: SwitchProps): JSX.Element;

package/dist/src/components/switch/switch.jsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx/lite';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { switchClass } from './class';
+import './switch.css';
+export function Switch(props) {
+    const merged = mergeProps({
+        value: 'on',
+    }, props);
+    const [local, rest] = splitProps(merged, ['class', 'children', 'checked', 'defaultChecked', 'disabled', 'onChange']);
+    const [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));
+    const rootClass = () => clsx(switchClass.root, local.class);
+    const checked = () => local.checked ?? internalChecked();
+    const handleChange = (event) => {
+        const nextChecked = event.currentTarget.checked;
+        if (local.checked === undefined) {
+            setInternalChecked(nextChecked);
+        }
+        local.onChange?.(nextChecked);
+    };
+    return (<label class={rootClass()} data-disabled={local.disabled ? '' : undefined}>
+			<input type="checkbox" class={switchClass.input} checked={checked()} disabled={local.disabled} onChange={handleChange} {...rest}/>
+			<span class={switchClass.control}>
+				<span class={switchClass.thumb}/>
+			</span>
+			{local.children ? <span class={switchClass.label}>{local.children}</span> : null}
+		</label>);
+}
+//# sourceMappingURL=switch.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.jsx","sourceRoot":"","sources":["../../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAY,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,cAAc,CAAC;AAUtB,MAAM,UAAU,MAAM,CAAC,KAAkB;IACxC,MAAM,MAAM,GAAG,UAAU,CACxB;QACC,KAAK,EAAE,IAAI;KACF,EACV,KAAK,CACL,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;IAE1F,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,eAAe,EAAE,CAAC;IAEzD,MAAM,YAAY,GAAmD,CAAC,KAAK,EAAE,EAAE;QAC9E,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;QAEhD,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QACjC,CAAC;QAED,KAAK,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,KAAK,CACL,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,aAAa,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAE/C;GAAA,CAAC,KAAK,CACL,IAAI,CAAC,UAAU,CACf,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC,CACnB,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,IAAI,IAAI,CAAC,EAEV;GAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAChC;IAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,EAChC;GAAA,EAAE,IAAI,CACN;GAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CACjF;EAAA,EAAE,KAAK,CAAC,CACR,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { createSignal, type JSX, mergeProps, splitProps } from 'solid-js';\nimport { switchClass } from './class';\nimport './switch.css';\n\nexport type SwitchBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;\n\nexport interface SwitchProps extends SwitchBaseProps {\n\tchecked?: boolean;\n\tdefaultChecked?: boolean;\n\tonChange?: (checked: boolean) => void;\n}\n\nexport function Switch(props: SwitchProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\tvalue: 'on',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'children', 'checked', 'defaultChecked', 'disabled', 'onChange']);\n\tconst [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));\n\n\tconst rootClass = () => clsx(switchClass.root, local.class);\n\tconst checked = () => local.checked ?? internalChecked();\n\n\tconst handleChange: JSX.EventHandlerUnion<HTMLInputElement, Event> = (event) => {\n\t\tconst nextChecked = event.currentTarget.checked;\n\n\t\tif (local.checked === undefined) {\n\t\t\tsetInternalChecked(nextChecked);\n\t\t}\n\n\t\tlocal.onChange?.(nextChecked);\n\t};\n\n\treturn (\n\t\t<label\n\t\t\tclass={rootClass()}\n\t\t\tdata-disabled={local.disabled ? '' : undefined}\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass={switchClass.input}\n\t\t\t\tchecked={checked()}\n\t\t\t\tdisabled={local.disabled}\n\t\t\t\tonChange={handleChange}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t\t<span class={switchClass.control}>\n\t\t\t\t<span class={switchClass.thumb} />\n\t\t\t</span>\n\t\t\t{local.children ? <span class={switchClass.label}>{local.children}</span> : null}\n\t\t</label>\n\t);\n}\n"]}

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

@@ -0,0 +1,10 @@
+export declare const tableClass: {
+    readonly root: 'fl-table';
+    readonly header: 'fl-table_header';
+    readonly body: 'fl-table_body';
+    readonly footer: 'fl-table_footer';
+    readonly head: 'fl-table_head';
+    readonly row: 'fl-table_row';
+    readonly cell: 'fl-table_cell';
+    readonly caption: 'fl-table_caption';
+};

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

@@ -0,0 +1,11 @@
+export const tableClass = {
+    root: 'fl-table',
+    header: 'fl-table_header',
+    body: 'fl-table_body',
+    footer: 'fl-table_footer',
+    head: 'fl-table_head',
+    row: 'fl-table_row',
+    cell: 'fl-table_cell',
+    caption: 'fl-table_caption',
+};
+//# sourceMappingURL=class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/table/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACzB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,iBAAiB;IACzB,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,iBAAiB;IACzB,IAAI,EAAE,eAAe;IACrB,GAAG,EAAE,cAAc;IACnB,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,kBAAkB;CAClB,CAAC","sourcesContent":["export const tableClass = {\n\troot: 'fl-table',\n\theader: 'fl-table_header',\n\tbody: 'fl-table_body',\n\tfooter: 'fl-table_footer',\n\thead: 'fl-table_head',\n\trow: 'fl-table_row',\n\tcell: 'fl-table_cell',\n\tcaption: 'fl-table_caption',\n} as const;\n"]}

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

@@ -0,0 +1,11 @@
+export * from './class';
+export * from './table';
+export * from './table-body';
+export * from './table-caption';
+export * from './table-cell';
+export * from './table-footer';
+export * from './table-head';
+export * from './table-header';
+export * from './table-root';
+export * from './table-row';
+export * from './types';

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

@@ -0,0 +1,12 @@
+export * from './class';
+export * from './table';
+export * from './table-body';
+export * from './table-caption';
+export * from './table-cell';
+export * from './table-footer';
+export * from './table-head';
+export * from './table-header';
+export * from './table-root';
+export * from './table-row';
+export * from './types';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC","sourcesContent":["export * from './class';\nexport * from './table';\nexport * from './table-body';\nexport * from './table-caption';\nexport * from './table-cell';\nexport * from './table-footer';\nexport * from './table-head';\nexport * from './table-header';\nexport * from './table-root';\nexport * from './table-row';\nexport * from './types';\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-body.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-body.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,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,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 { TableBodyProps } from './types';\n\nexport function TableBody(props: TableBodyProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<tbody\n\t\t\tclass={clsx(tableClass.body, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</tbody>\n\t);\n}\n"]}

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

@@ -0,0 +1,11 @@
+@layer components {
+	.fl-table .fl-table_caption {
+		/* spacing */
+		padding: var(--fl-size-2);
+
+		/* text */
+		color: var(--fl-body-muted-text-color);
+		font-size: var(--fl-text-size-sm);
+		text-align: left;
+	}
+}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-caption.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-caption.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,qBAAqB,CAAC;AAE7B,MAAM,UAAU,YAAY,CAAC,KAAwB;IACpD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,OAAO,CACN,CAAC,OAAO,CACP,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAC7C,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,OAAO,CAAC,CACV,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { splitProps } from 'solid-js';\nimport { tableClass } from './class';\nimport type { TableCaptionProps } from './types';\nimport './table-caption.css';\n\nexport function TableCaption(props: TableCaptionProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<caption\n\t\t\tclass={clsx(tableClass.caption, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</caption>\n\t);\n}\n"]}

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

@@ -0,0 +1,12 @@
+@layer components {
+	.fl-table .fl-table_cell {
+		/* layout */
+		vertical-align: middle;
+
+		/* spacing */
+		padding: var(--fl-size-2) var(--fl-size-3);
+
+		/* background */
+		border-bottom: var(--fl-border-size, 1px) solid color-mix(in oklab, var(--fl-border-color), transparent 20%);
+	}
+}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-cell.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 { TableCellProps } from './types';\nimport './table-cell.css';\n\nexport function TableCell(props: TableCellProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<td\n\t\t\tclass={clsx(tableClass.cell, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</td>\n\t);\n}\n"]}

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

@@ -0,0 +1,15 @@
+@layer components {
+	.fl-table .fl-table_footer {
+		/* background */
+		background: color-mix(in oklab, var(--fl-body-bg-color), black 3%);
+	}
+
+	.fl-table .fl-table_footer .fl-table_cell,
+	.fl-table .fl-table_footer .fl-table_head {
+		/* background */
+		border-bottom: 0;
+
+		/* text */
+		font-weight: var(--fl-font-weight-medium);
+	}
+}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-footer.jsx","sourceRoot":"","sources":["../../../../src/components/table/table-footer.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,oBAAoB,CAAC;AAE5B,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 { TableFooterProps } from './types';\nimport './table-footer.css';\n\nexport function TableFooter(props: TableFooterProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\treturn (\n\t\t<tfoot\n\t\t\tclass={clsx(tableClass.footer, local.class)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</tfoot>\n\t);\n}\n"]}