@edo-w/flatline-solid 0.2.1 → 0.3.1

package/dist/select/index.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from "solid-js";
+
+//#region src/components/select/class.d.ts
+declare const selectClass: {
+  readonly root: "fl-select";
+  readonly innerSelect: "fl-select_inner-select";
+  readonly arrow: "fl-select_arrow";
+};
+//#endregion
+//#region src/components/select/select.d.ts
+type SelectBaseProps = JSX.SelectHTMLAttributes<HTMLSelectElement>;
+interface SelectProps extends SelectBaseProps {}
+declare function Select(props: SelectProps): JSX.Element;
+//#endregion
+export { Select, SelectBaseProps, SelectProps, selectClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/select/index.js

@@ -0,0 +1,51 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { t as ChevronDownIcon } from "../icons-CH4ghH8L.js";
+import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/select/class.ts
+const selectClass = {
+	root: "fl-select",
+	innerSelect: "fl-select_inner-select",
+	arrow: "fl-select_arrow"
+};
+//#endregion
+//#region src/components/select/select.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><select>`);
+function Select(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"disabled"
+	]);
+	const rootClass = () => clsx(selectClass.root, local.class);
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$2, mergeProps({
+			get ["class"]() {
+				return selectClass.innerSelect;
+			},
+			get disabled() {
+				return local.disabled;
+			}
+		}, rest), false, true);
+		insert(_el$2, () => local.children);
+		insert(_el$, createComponent(ChevronDownIcon, { get ["class"]() {
+			return selectClass.arrow;
+		} }), null);
+		effect((_p$) => {
+			var _v$ = rootClass(), _v$2 = local.disabled ? "" : void 0;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { Select, selectClass };
+
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","splitProps","ChevronDownIcon","selectClass","SelectBaseProps","SelectHTMLAttributes","HTMLSelectElement","SelectProps","Select","props","local","rest","rootClass","root","class","_el$","_tmpl$","_el$2","firstChild","_$spread","_$mergeProps","innerSelect","disabled","_$insert","children","_$createComponent","arrow","_$effect","_p$","_v$","_v$2","undefined","e","_$className","t","_$setAttribute"],"sources":["../../src/components/select/class.ts","../../src/components/select/select.tsx"],"sourcesContent":["export const selectClass = {\n\troot: 'fl-select',\n\tinnerSelect: 'fl-select_inner-select',\n\tarrow: 'fl-select_arrow',\n} as const;\n","import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { ChevronDownIcon } from '#src/icons';\nimport { selectClass } from './class';\nimport './select.css';\n\nexport type SelectBaseProps = JSX.SelectHTMLAttributes<HTMLSelectElement>;\n\nexport interface SelectProps extends SelectBaseProps {}\n\nexport function Select(props: SelectProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'disabled']);\n\n\tconst rootClass = () => clsx(selectClass.root, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\tdata-disabled={local.disabled ? '' : undefined}\n\t\t>\n\t\t\t<select\n\t\t\t\tclass={selectClass.innerSelect}\n\t\t\t\tdisabled={local.disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</select>\n\t\t\t<ChevronDownIcon class={selectClass.arrow} />\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAAA,MAAa,cAAc;CAC1B,MAAM;CACN,aAAa;CACb,OAAO;CACP;;;;ACMD,SAAgBS,OAAOC,OAAoB;CAC1C,MAAM,CAACC,OAAOC,QAAQV,WAAWQ,OAAO;EAAC;EAAS;EAAY;EAAW,CAAC;CAE1E,MAAMG,kBAAkBb,KAAKI,YAAYU,MAAMH,MAAMI,MAAM;AAE3D,eAAA;EAAA,IAAAC,OAAAC,QAAA,EAAAC,QAAAF,KAAAG;AAAAC,SAAAF,OAAAG,WAAA;GAAA,KAAA,WAAA;AAAA,WAMUjB,YAAYkB;;GAAW,IAC9BC,WAAQ;AAAA,WAAEZ,MAAMY;;GAAQ,EACpBX,KAAI,EAAA,OAAA,KAAA;AAAAY,SAAAN,aAEPP,MAAMc,SAAQ;AAAAD,SAAAR,MAAAU,gBAEfvB,iBAAe,EAAA,KAAA,WAAA;AAAA,UAAQC,YAAYuB;KAAK,CAAA,EAAA,KAAA;AAAAC,UAAAC,QAAA;GAAA,IAAAC,MAVlCjB,WAAW,EAAAkB,OACHpB,MAAMY,WAAW,KAAKS,KAAAA;AAASF,WAAAD,IAAAI,KAAAC,UAAAlB,MAAAa,IAAAI,IAAAH,IAAA;AAAAC,YAAAF,IAAAM,KAAAC,aAAApB,MAAA,iBAAAa,IAAAM,IAAAJ,KAAA;AAAA,UAAAF;KAAA;GAAAI,GAAAD,KAAAA;GAAAG,GAAAH,KAAAA;GAAA,CAAA;AAAA,SAAAhB;KAAA"}

package/dist/slider/index.css

@@ -0,0 +1,59 @@
+@layer components {
+  .fl-slider {
+    --fl-slider-track-height: var(--fl-size-1);
+    --fl-slider-thumb-size: var(--fl-size-4);
+    appearance: none;
+    width: 100%;
+    height: var(--fl-slider-thumb-size);
+    accent-color: var(--fl-secondary-color);
+    cursor: pointer;
+    background: none;
+    outline: none;
+  }
+
+  .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 {
+    appearance: none;
+    box-sizing: border-box;
+    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: 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);
+    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-radius: var(--fl-border-radius);
+    border: 0;
+  }
+
+  .fl-slider::-moz-range-thumb {
+    box-sizing: border-box;
+    width: var(--fl-slider-thumb-size);
+    height: var(--fl-slider-thumb-size);
+    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);
+    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/slider/index.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from "solid-js";
+
+//#region src/components/slider/class.d.ts
+declare const sliderClass: {
+  readonly root: "fl-slider";
+};
+//#endregion
+//#region src/components/slider/slider.d.ts
+type SliderBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+interface SliderProps extends SliderBaseProps {
+  onChange?: (value: number) => void;
+}
+declare function Slider(props: SliderProps): JSX.Element;
+//#endregion
+export { Slider, SliderBaseProps, SliderProps, sliderClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/slider/index.js

@@ -0,0 +1,37 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { delegateEvents, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/slider/class.ts
+const sliderClass = { root: "fl-slider" };
+//#endregion
+//#region src/components/slider/slider.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input type=range>`);
+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 (() => {
+		var _el$ = _tmpl$();
+		_el$.$$input = handleInput;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+delegateEvents(["input"]);
+//#endregion
+export { Slider, sliderClass };
+
+//# sourceMappingURL=index.js.map

package/dist/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","splitProps","sliderClass","SliderBaseProps","Omit","InputHTMLAttributes","HTMLInputElement","SliderInputEvent","InputEvent","currentTarget","target","SliderInputHandler","event","SliderProps","onChange","value","Slider","props","local","rest","rootClass","root","class","callInputHandler","handler","handleInput","EventHandlerUnion","onInput","Number","_el$","_tmpl$","$$input","_$spread","_$mergeProps","_$delegateEvents"],"sources":["../../src/components/slider/class.ts","../../src/components/slider/slider.tsx"],"sourcesContent":["export const sliderClass = {\n\troot: 'fl-slider',\n} as const;\n","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"],"mappings":";;;;AAAA,MAAa,cAAc,EAC1B,MAAM,aACN;;;;ACYD,SAAgBiB,OAAOC,OAAoB;CAC1C,MAAM,CAACC,OAAOC,QAAQlB,WAAWgB,OAAO;EAAC;EAAS;EAAY;EAAU,CAAC;CAEzE,MAAMG,kBAAkBrB,KAAKG,YAAYmB,MAAMH,MAAMI,MAAM;CAE3D,MAAMC,oBAAoBC,SAAkBZ,UAAsB;AACjE,MAAI,OAAOY,YAAY,WACrBA,SAA+BZ,MAA0B;;CAI5D,MAAMa,eAAoEb,UAAU;AACnFW,mBAAiBL,MAAMS,SAASf,MAAM;AAEtCM,QAAMJ,WAAWc,OAAOhB,MAAMH,cAAcM,MAAM,CAAC;;AAGpD,eAAA;EAAA,IAAAc,OAAAC,QAAA;AAAAD,OAAAE,UAIWN;AAAWO,SAAAH,MAAAI,WAAA,EAAA,KAAA,WAAA;AAAA,UADbb,WAAW;KAAA,EAEdD,KAAI,EAAA,OAAA,MAAA;AAAA,SAAAU;KAAA;;AAGVK,eAAA,CAAA,QAAA,CAAA"}

package/dist/spinner/index.css

@@ -0,0 +1,44 @@
+@layer components {
+  .fl-spinner {
+    --fl-spinner-size: var(--fl-size-7);
+    --fl-spinner-color: var(--fl-primary-color);
+    width: var(--fl-spinner-size);
+    height: var(--fl-spinner-size);
+    color: var(--fl-spinner-color);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .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 {
+    width: 100%;
+    height: 100%;
+    animation: .8s linear infinite fl-spinner-rotate;
+  }
+
+  .fl-spinner .fl-spinner_svg circle {
+    opacity: .2;
+  }
+
+  .fl-spinner .fl-spinner_svg path {
+    stroke-linecap: round;
+  }
+
+  @keyframes fl-spinner-rotate {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/spinner/index.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from "solid-js";
+
+//#region src/components/spinner/class.d.ts
+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";
+  };
+};
+type SpinnerSize = keyof typeof spinnerClass.size;
+//#endregion
+//#region src/components/spinner/spinner.d.ts
+type SpinnerBaseProps = JSX.HTMLAttributes<HTMLSpanElement>;
+interface SpinnerProps extends SpinnerBaseProps {
+  size?: SpinnerSize;
+  label?: string;
+}
+declare function Spinner(props: SpinnerProps): JSX.Element;
+//#endregion
+export { Spinner, SpinnerBaseProps, SpinnerProps, SpinnerSize, spinnerClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/spinner/index.js

@@ -0,0 +1,48 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { effect, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+//#region src/components/spinner/class.ts
+const spinnerClass = {
+	root: "fl-spinner",
+	svg: "fl-spinner_svg",
+	size: {
+		sm: "--size-sm",
+		md: "--size-md",
+		lg: "--size-lg"
+	}
+};
+//#endregion
+//#region src/components/spinner/spinner.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span role=status><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-width=2></circle><path d="M12 3a9 9 0 0 1 9 9"stroke=currentColor stroke-width=2>`);
+function Spinner(props) {
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		label: "Loading"
+	}, props), [
+		"class",
+		"size",
+		"label"
+	]);
+	const rootClass = () => {
+		const sizeClass = spinnerClass.size[local.size];
+		return clsx(spinnerClass.root, sizeClass, local.class);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get ["aria-label"]() {
+				return local.label;
+			}
+		}, rest), false, true);
+		effect(() => setAttribute(_el$2, "class", spinnerClass.svg));
+		return _el$;
+	})();
+}
+//#endregion
+export { Spinner, spinnerClass };
+
+//# sourceMappingURL=index.js.map

package/dist/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","mergeProps","splitProps","SpinnerSize","spinnerClass","SpinnerBaseProps","HTMLAttributes","HTMLSpanElement","SpinnerProps","size","label","Spinner","props","merged","const","local","rest","rootClass","sizeClass","root","class","_el$","_tmpl$","_el$2","firstChild","_$spread","_$mergeProps","aria-label","_$effect","_$setAttribute","svg"],"sources":["../../src/components/spinner/class.ts","../../src/components/spinner/spinner.tsx"],"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","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"],"mappings":";;;;AAAA,MAAa,eAAe;CAC3B,MAAM;CACN,KAAK;CACL,MAAM;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ;CACD;;;;ACID,SAAgBY,QAAQC,OAAqB;CAQ5C,MAAM,CAACG,OAAOC,QAAQd,WAPPD,aACd;EACCQ,MAAM;EACNC,OAAO;EACP,EACDE,MACA,EACwC;EAAC;EAAS;EAAQ;EAAQ,CAAC;CAEpE,MAAMK,kBAAkB;EACvB,MAAMC,YAAYd,aAAaK,KAAKM,MAAMN;AAE1C,SAAOV,KAAKK,aAAae,MAAMD,WAAWH,MAAMK,MAAM;;AAGvD,eAAA;EAAA,IAAAC,OAAAC,QAAA,EAAAC,QAAAF,KAAAG;AAAAC,SAAAJ,MAAAK,WAAA;GAAA,KAAA,WAAA;AAAA,WAEST,WAAW;;GAAA,KAAA,gBAAA;AAAA,WAENF,MAAML;;GAAK,EACnBM,KAAI,EAAA,OAAA,KAAA;AAAAY,eAAAC,aAAAN,OAAA,SAGAnB,aAAa0B,IAAG,CAAA;AAAA,SAAAT;KAAA"}

package/dist/{src/style → style}/flatline.css

@@ -1,5 +1,4 @@
 @layer reset, base, components, utilities;
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
 @import "./reset.css";
 @import "./colors.css";
 @import "./tokens.css";

package/dist/switch/index.css

@@ -0,0 +1,69 @@
+@layer components {
+  .fl-switch {
+    align-items: center;
+    gap: var(--fl-size-2);
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+  }
+
+  .fl-switch[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+
+  .fl-switch .fl-switch_input {
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+  }
+
+  .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));
+    width: var(--fl-switch-track-width);
+    height: var(--fl-switch-track-height);
+    padding-inline: var(--fl-size-0-5);
+    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);
+    box-shadow: var(--fl-shadow-xs);
+    transition: background var(--fl-animation-duration) ease,
+			border-color var(--fl-animation-duration) ease;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .fl-switch .fl-switch_thumb {
+    width: var(--fl-switch-thumb-size);
+    height: var(--fl-switch-thumb-size);
+    background: var(--fl-body-bg-color);
+    border-radius: var(--fl-radius-sm);
+    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 {
+    color: var(--fl-body-text-color);
+    font-size: var(--fl-text-size-sm);
+    font-weight: var(--fl-font-weight-medium);
+  }
+}

package/dist/switch/index.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from "solid-js";
+
+//#region src/components/switch/class.d.ts
+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";
+};
+//#endregion
+//#region src/components/switch/switch.d.ts
+type SwitchBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+interface SwitchProps extends SwitchBaseProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+declare function Switch(props: SwitchProps): JSX.Element;
+//#endregion
+export { Switch, SwitchBaseProps, SwitchProps, switchClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/switch/index.js

@@ -0,0 +1,75 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { className, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createSignal, mergeProps as mergeProps$1, splitProps } from "solid-js";
+//#region src/components/switch/class.ts
+const switchClass = {
+	root: "fl-switch",
+	input: "fl-switch_input",
+	control: "fl-switch_control",
+	thumb: "fl-switch_thumb",
+	label: "fl-switch_label"
+};
+//#endregion
+//#region src/components/switch/switch.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label><input type=checkbox><span><span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function Switch(props) {
+	const [local, rest] = splitProps(mergeProps$1({ value: "on" }, props), [
+		"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 === void 0) setInternalChecked(nextChecked);
+		local.onChange?.(nextChecked);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+		_el$2.addEventListener("change", handleChange);
+		spread(_el$2, mergeProps({
+			get ["class"]() {
+				return switchClass.input;
+			},
+			get checked() {
+				return checked();
+			},
+			get disabled() {
+				return local.disabled;
+			}
+		}, rest), false, false);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!local.children);
+			return () => _c$() ? (() => {
+				var _el$5 = _tmpl$2();
+				insert(_el$5, () => local.children);
+				effect(() => className(_el$5, switchClass.label));
+				return _el$5;
+			})() : null;
+		})(), null);
+		effect((_p$) => {
+			var _v$ = rootClass(), _v$2 = local.disabled ? "" : void 0, _v$3 = switchClass.control, _v$4 = switchClass.thumb;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { Switch, switchClass };
+
+//# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","createSignal","JSX","mergeProps","splitProps","switchClass","SwitchBaseProps","Omit","InputHTMLAttributes","HTMLInputElement","SwitchProps","checked","defaultChecked","onChange","Switch","props","merged","value","const","local","rest","internalChecked","setInternalChecked","Boolean","rootClass","root","class","handleChange","EventHandlerUnion","Event","event","nextChecked","currentTarget","undefined","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","addEventListener","_$spread","_$mergeProps","input","disabled","_$insert","_c$","_$memo","children","_el$5","_tmpl$2","_$effect","_$className","label","_p$","_v$","_v$2","_v$3","control","_v$4","thumb","e","t","_$setAttribute","a","o"],"sources":["../../src/components/switch/class.ts","../../src/components/switch/switch.tsx"],"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","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"],"mappings":";;;;AAAA,MAAa,cAAc;CAC1B,MAAM;CACN,OAAO;CACP,SAAS;CACT,OAAO;CACP,OAAO;CACP;;;;ACOD,SAAgBc,OAAOC,OAAoB;CAO1C,MAAM,CAACI,OAAOC,QAAQhB,WANPD,aACd,EACCc,OAAO,MACP,EACDF,MACA,EACwC;EAAC;EAAS;EAAY;EAAW;EAAkB;EAAY;EAAW,CAAC;CACpH,MAAM,CAACM,iBAAiBC,sBAAsBrB,aAAasB,QAAQJ,MAAMP,eAAe,CAAC;CAEzF,MAAMY,kBAAkBxB,KAAKK,YAAYoB,MAAMN,MAAMO,MAAM;CAC3D,MAAMf,gBAAgBQ,MAAMR,WAAWU,iBAAiB;CAExD,MAAMM,gBAAgEG,UAAU;EAC/E,MAAMC,cAAcD,MAAME,cAAcrB;AAExC,MAAIQ,MAAMR,YAAYsB,KAAAA,EACrBX,oBAAmBS,YAAY;AAGhCZ,QAAMN,WAAWkB,YAAY;;AAG9B,eAAA;EAAA,IAAAG,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD;AAAAD,QAAAK,iBAAA,UAUad,aAAY;AAAAe,SAAAN,OAAAO,WAAA;GAAA,KAAA,WAAA;AAAA,WAHftC,YAAYuC;;GAAK,IACxBjC,UAAO;AAAA,WAAEA,SAAS;;GAAA,IAClBkC,WAAQ;AAAA,WAAE1B,MAAM0B;;GAAQ,EAEpBzB,KAAI,EAAA,OAAA,MAAA;AAAA0B,SAAAZ,aAAA;GAAA,IAAAa,MAAAC,WAAA,CAAA,CAKR7B,MAAM8B,SAAQ;AAAA,gBAAdF,KAAA,UAAA;IAAA,IAAAG,QAAAC,SAAA;AAAAL,WAAAI,aAAkD/B,MAAM8B,SAAQ;AAAAG,iBAAAC,UAAAH,OAAlC7C,YAAYiD,MAAK,CAAA;AAAA,WAAAJ;OAAA,GAA4B;MAAI,EAAA,KAAA;AAAAE,UAAAG,QAAA;GAAA,IAAAC,MAdzEhC,WAAW,EAAAiC,OACHtC,MAAM0B,WAAW,KAAKZ,KAAAA,GAASyB,OAUjCrD,YAAYsD,SAAOC,OAClBvD,YAAYwD;AAAKL,WAAAD,IAAAO,KAAAT,UAAAnB,MAAAqB,IAAAO,IAAAN,IAAA;AAAAC,YAAAF,IAAAQ,KAAAC,aAAA9B,MAAA,iBAAAqB,IAAAQ,IAAAN,KAAA;AAAAC,YAAAH,IAAAU,KAAAZ,UAAAf,OAAAiB,IAAAU,IAAAP,KAAA;AAAAE,YAAAL,IAAAW,KAAAb,UAAAb,OAAAe,IAAAW,IAAAN,KAAA;AAAA,UAAAL;KAAA;GAAAO,GAAA7B,KAAAA;GAAA8B,GAAA9B,KAAAA;GAAAgC,GAAAhC,KAAAA;GAAAiC,GAAAjC,KAAAA;GAAA,CAAA;AAAA,SAAAC;KAAA"}

package/dist/table/index.css

@@ -0,0 +1,50 @@
+@layer components {
+  .fl-table .fl-table_caption {
+    padding: var(--fl-size-2);
+    color: var(--fl-body-muted-text-color);
+    font-size: var(--fl-text-size-sm);
+    text-align: left;
+  }
+}
+@layer components {
+  .fl-table .fl-table_cell {
+    vertical-align: middle;
+    padding: var(--fl-size-2) var(--fl-size-3);
+    border-bottom: var(--fl-border-size, 1px) solid color-mix(in oklab, var(--fl-border-color), transparent 20%);
+  }
+}
+@layer components {
+  .fl-table .fl-table_footer {
+    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 {
+    font-weight: var(--fl-font-weight-medium);
+    border-bottom: 0;
+  }
+}
+@layer components {
+  .fl-table .fl-table_head {
+    padding: var(--fl-size-2) var(--fl-size-3);
+    background: color-mix(in oklab, var(--fl-body-bg-color), black 4%);
+    border-bottom: var(--fl-border-size, 1px) solid var(--fl-border-color);
+    color: var(--fl-body-muted-text-color);
+    font-size: var(--fl-text-size-sm);
+    font-weight: var(--fl-font-weight-semibold);
+    text-align: left;
+  }
+}
+@layer components {
+  .fl-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    color: var(--fl-body-text-color);
+    font: inherit;
+  }
+}
+@layer components {
+  .fl-table .fl-table_body .fl-table_row:hover {
+    background: color-mix(in oklab, var(--fl-body-bg-color), var(--fl-primary-color) 3%);
+  }
+}

package/dist/table/index.d.ts

@@ -0,0 +1,64 @@
+import * as _$solid_js0 from "solid-js";
+import { JSX } from "solid-js";
+
+//#region src/components/table/class.d.ts
+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";
+};
+//#endregion
+//#region src/components/table/types.d.ts
+type TableProps = JSX.HTMLAttributes<HTMLTableElement>;
+type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+type TableFooterProps = JSX.HTMLAttributes<HTMLTableSectionElement>;
+type TableHeadProps = JSX.ThHTMLAttributes<HTMLTableCellElement>;
+type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement>;
+type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement>;
+type TableCaptionProps = JSX.HTMLAttributes<HTMLTableCaptionElement>;
+//#endregion
+//#region src/components/table/table-body.d.ts
+declare function TableBody(props: TableBodyProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-caption.d.ts
+declare function TableCaption(props: TableCaptionProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-cell.d.ts
+declare function TableCell(props: TableCellProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-footer.d.ts
+declare function TableFooter(props: TableFooterProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-head.d.ts
+declare function TableHead(props: TableHeadProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-header.d.ts
+declare function TableHeader(props: TableHeaderProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-root.d.ts
+declare function TableRoot(props: TableProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table-row.d.ts
+declare function TableRow(props: TableRowProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/table/table.d.ts
+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;
+}
+declare const Table: TableComponent;
+//#endregion
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableComponent, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRoot, TableRow, type TableRowProps, tableClass };
+//# sourceMappingURL=index.d.ts.map