@edo-w/flatline-solid 0.2.0 → 0.3.0

package/dist/lite-CiFvU804.js

@@ -0,0 +1,9 @@
+//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/lite.mjs
+function clsx() {
+	for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
+	return e;
+}
+//#endregion
+export { clsx as t };
+
+//# sourceMappingURL=lite-CiFvU804.js.map

package/dist/lite-CiFvU804.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lite-CiFvU804.js","names":[],"sources":["../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/lite.mjs"],"sourcesContent":["export function clsx(){for(var t,r=0,e=\"\",n=arguments.length;r<n;r++)(t=arguments[r])&&\"string\"==typeof t&&(e+=(e&&\" \")+t);return e}export default clsx;"],"x_google_ignoreList":[0],"mappings":";AAAA,SAAgB,OAAM;AAAC,MAAI,IAAI,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,OAAK,YAAU,OAAO,MAAI,MAAI,KAAG,OAAK;AAAG,QAAO"}

package/dist/progress-bar/index.css

@@ -0,0 +1,34 @@
+@layer components {
+  .fl-progress-bar {
+    width: 100%;
+    height: var(--fl-size-2);
+    background: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
+    border-radius: 2px;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .fl-progress-bar .fl-progress-bar_indicator {
+    background: var(--fl-primary-color);
+    border-radius: inherit;
+    height: 100%;
+    transition: width var(--fl-animation-duration) ease;
+    display: block;
+  }
+
+  .fl-progress-bar[data-indeterminate] .fl-progress-bar_indicator {
+    animation: 1.2s ease-in-out infinite fl-progress-bar-indeterminate;
+    width: 35% !important;
+  }
+
+  @keyframes fl-progress-bar-indeterminate {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(300%);
+    }
+  }
+}

package/dist/progress-bar/index.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+
+//#region src/components/progress-bar/class.d.ts
+declare const progressBarClass: {
+  readonly root: "fl-progress-bar";
+  readonly indicator: "fl-progress-bar_indicator";
+};
+//#endregion
+//#region src/components/progress-bar/progress-bar.d.ts
+type ProgressBarBaseProps = JSX.HTMLAttributes<HTMLDivElement>;
+interface ProgressBarProps extends ProgressBarBaseProps {
+  value?: number;
+  max?: number;
+  indeterminate?: boolean;
+}
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+//#endregion
+export { ProgressBar, ProgressBarBaseProps, ProgressBarProps, progressBarClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/progress-bar/index.js

@@ -0,0 +1,61 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { className, effect, memo, mergeProps, spread, style, template } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+//#region src/components/progress-bar/class.ts
+const progressBarClass = {
+	root: "fl-progress-bar",
+	indicator: "fl-progress-bar_indicator"
+};
+//#endregion
+//#region src/components/progress-bar/progress-bar.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div role=progressbar aria-valuemin=0><span>`);
+function ProgressBar(props) {
+	const [local, rest] = splitProps(mergeProps$1({
+		max: 100,
+		value: 0,
+		indeterminate: false
+	}, props), [
+		"class",
+		"value",
+		"max",
+		"indeterminate"
+	]);
+	const clampedValue = () => Math.max(0, Math.min(local.value, local.max));
+	const percent = () => {
+		if (local.max <= 0) return 0;
+		return clampedValue() / local.max * 100;
+	};
+	const rootClass = () => clsx(progressBarClass.root, local.class);
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get ["aria-valuemax"]() {
+				return local.max;
+			},
+			get ["aria-valuenow"]() {
+				return memo(() => !!local.indeterminate)() ? void 0 : clampedValue();
+			},
+			get ["data-indeterminate"]() {
+				return local.indeterminate ? "" : void 0;
+			}
+		}, rest), false, true);
+		effect((_p$) => {
+			var _v$ = progressBarClass.indicator, _v$2 = local.indeterminate ? void 0 : { width: `${percent()}%` };
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_p$.t = style(_el$2, _v$2, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { ProgressBar, progressBarClass };
+
+//# sourceMappingURL=index.js.map

package/dist/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","mergeProps","splitProps","progressBarClass","ProgressBarBaseProps","HTMLAttributes","HTMLDivElement","ProgressBarProps","value","max","indeterminate","ProgressBar","props","merged","const","local","rest","clampedValue","Math","min","percent","rootClass","root","class","_el$","_tmpl$","_el$2","firstChild","_$spread","_$mergeProps","aria-valuemax","aria-valuenow","_$memo","undefined","data-indeterminate","_$effect","_p$","_v$","indicator","_v$2","width","e","_$className","t","_$style"],"sources":["../../src/components/progress-bar/class.ts","../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["export const progressBarClass = {\n\troot: 'fl-progress-bar',\n\tindicator: 'fl-progress-bar_indicator',\n} as const;\n","import clsx from 'clsx/lite';\nimport { type JSX, mergeProps, splitProps } from 'solid-js';\nimport { progressBarClass } from './class';\nimport './progress-bar.css';\n\nexport type ProgressBarBaseProps = JSX.HTMLAttributes<HTMLDivElement>;\n\nexport interface ProgressBarProps extends ProgressBarBaseProps {\n\tvalue?: number;\n\tmax?: number;\n\tindeterminate?: boolean;\n}\n\nexport function ProgressBar(props: ProgressBarProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\tmax: 100,\n\t\t\tvalue: 0,\n\t\t\tindeterminate: false,\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'value', 'max', 'indeterminate']);\n\n\tconst clampedValue = () => Math.max(0, Math.min(local.value, local.max));\n\tconst percent = () => {\n\t\tif (local.max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn (clampedValue() / local.max) * 100;\n\t};\n\tconst rootClass = () => clsx(progressBarClass.root, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\trole=\"progressbar\"\n\t\t\taria-valuemin={0}\n\t\t\taria-valuemax={local.max}\n\t\t\taria-valuenow={local.indeterminate ? undefined : clampedValue()}\n\t\t\tdata-indeterminate={local.indeterminate ? '' : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<span\n\t\t\t\tclass={progressBarClass.indicator}\n\t\t\t\tstyle={local.indeterminate ? undefined : { width: `${percent()}%` }}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAAA,MAAa,mBAAmB;CAC/B,MAAM;CACN,WAAW;CACX;;;;ACUD,SAAgBY,YAAYC,OAAyB;CASpD,MAAM,CAACG,OAAOC,QAAQd,WARPD,aACd;EACCQ,KAAK;EACLD,OAAO;EACPE,eAAe;EACf,EACDE,MACA,EACwC;EAAC;EAAS;EAAS;EAAO;EAAgB,CAAC;CAEpF,MAAMK,qBAAqBC,KAAKT,IAAI,GAAGS,KAAKC,IAAIJ,MAAMP,OAAOO,MAAMN,IAAI,CAAC;CACxE,MAAMW,gBAAgB;AACrB,MAAIL,MAAMN,OAAO,EAChB,QAAO;AAGR,SAAQQ,cAAc,GAAGF,MAAMN,MAAO;;CAEvC,MAAMY,kBAAkBtB,KAAKI,iBAAiBmB,MAAMP,MAAMQ,MAAM;AAEhE,eAAA;EAAA,IAAAC,OAAAC,QAAA,EAAAC,QAAAF,KAAAG;AAAAC,SAAAJ,MAAAK,WAAA;GAAA,KAAA,WAAA;AAAA,WAESR,WAAW;;GAAA,KAAA,mBAAA;AAAA,WAGHN,MAAMN;;GAAG,KAAA,mBAAA;AAAA,WACTuB,WAAA,CAAA,CAAAjB,MAAML,cAAa,EAAA,GAAGuB,KAAAA,IAAYhB,cAAc;;GAAA,KAAA,wBAAA;AAAA,WAC3CF,MAAML,gBAAgB,KAAKuB,KAAAA;;GAAS,EACpDjB,KAAI,EAAA,OAAA,KAAA;AAAAmB,UAAAC,QAAA;GAAA,IAAAC,MAGAlC,iBAAiBmC,WAASC,OAC1BxB,MAAML,gBAAgBuB,KAAAA,IAAY,EAAEO,OAAO,GAAGpB,SAAS,CAAA,IAAK;AAAAiB,WAAAD,IAAAK,KAAAC,UAAAhB,OAAAU,IAAAK,IAAAJ,IAAA;AAAAD,OAAAO,IAAAC,MAAAlB,OAAAa,MAAAH,IAAAO,EAAA;AAAA,UAAAP;KAAA;GAAAK,GAAAR,KAAAA;GAAAU,GAAAV,KAAAA;GAAA,CAAA;AAAA,SAAAT;KAAA"}

package/dist/radio/index.css

@@ -0,0 +1,64 @@
+@layer components {
+  .fl-radio-group {
+    gap: var(--fl-size-2);
+    display: grid;
+  }
+}
+@layer components {
+  .fl-radio {
+    align-items: center;
+    gap: var(--fl-size-2);
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+  }
+
+  .fl-radio[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+
+  .fl-radio .fl-radio_input {
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+  }
+
+  .fl-radio .fl-radio_control {
+    width: var(--fl-size-4);
+    height: var(--fl-size-4);
+    background: var(--fl-body-bg-color);
+    border: var(--fl-input-border-size, var(--fl-border-size, 1px)) solid
+			var(--fl-input-border-color, var(--fl-border-color));
+    border-radius: var(--fl-radius-full);
+    box-shadow: var(--fl-input-shadow);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fl-radio .fl-radio_indicator {
+    width: var(--fl-size-2);
+    height: var(--fl-size-2);
+    background: var(--fl-primary-color);
+    border-radius: var(--fl-radius-full);
+    transition: scale var(--fl-animation-duration) ease;
+    scale: 0;
+  }
+
+  .fl-radio .fl-radio_input:checked + .fl-radio_control .fl-radio_indicator {
+    scale: 1;
+  }
+
+  .fl-radio .fl-radio_input:focus-visible + .fl-radio_control {
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: var(--fl-focus-ring-offset);
+  }
+
+  .fl-radio .fl-radio_label {
+    color: var(--fl-body-text-color);
+    font-size: var(--fl-text-size-base);
+  }
+}

package/dist/radio/index.d.ts

@@ -0,0 +1,55 @@
+import * as _$solid_js0 from "solid-js";
+import { Accessor, JSX } from "solid-js";
+
+//#region src/components/radio/class.d.ts
+declare const radioClass: {
+  readonly group: "fl-radio-group";
+  readonly root: "fl-radio";
+  readonly input: "fl-radio_input";
+  readonly control: "fl-radio_control";
+  readonly indicator: "fl-radio_indicator";
+  readonly label: "fl-radio_label";
+};
+//#endregion
+//#region src/components/radio/context.d.ts
+interface RadioGroupContextValue {
+  name: Accessor<string>;
+  value: Accessor<string | undefined>;
+  setValue: (value: string) => void;
+  disabled: Accessor<boolean>;
+}
+declare const RadioGroupContext: _$solid_js0.Context<RadioGroupContextValue | undefined>;
+declare function useRadioGroupContext(): RadioGroupContextValue | undefined;
+//#endregion
+//#region src/components/radio/types.d.ts
+type RadioGroupBaseProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+interface RadioGroupProps extends RadioGroupBaseProps {
+  value?: string;
+  defaultValue?: string;
+  name?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
+type RadioBaseProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'>;
+interface RadioProps extends RadioBaseProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  value: string;
+  onChange?: (checked: boolean) => void;
+}
+//#endregion
+//#region src/components/radio/radio-group.d.ts
+declare function RadioGroup(props: RadioGroupProps): _$solid_js0.JSX.Element;
+//#endregion
+//#region src/components/radio/radio-root.d.ts
+declare function RadioRoot(props: RadioProps): JSX.Element;
+//#endregion
+//#region src/components/radio/radio.d.ts
+interface RadioComponent {
+  (props: RadioProps): JSX.Element;
+  Group: typeof RadioGroup;
+}
+declare const Radio: RadioComponent;
+//#endregion
+export { Radio, type RadioBaseProps, RadioComponent, RadioGroup, type RadioGroupBaseProps, RadioGroupContext, RadioGroupContextValue, type RadioGroupProps, type RadioProps, RadioRoot, radioClass, useRadioGroupContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/radio/index.js

@@ -0,0 +1,143 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createContext, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+//#region src/components/radio/class.ts
+const radioClass = {
+	group: "fl-radio-group",
+	root: "fl-radio",
+	input: "fl-radio_input",
+	control: "fl-radio_control",
+	indicator: "fl-radio_indicator",
+	label: "fl-radio_label"
+};
+//#endregion
+//#region src/components/radio/context.ts
+const RadioGroupContext = createContext();
+function useRadioGroupContext() {
+	return useContext(RadioGroupContext);
+}
+//#endregion
+//#region src/components/radio/radio-group.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div role=radiogroup>`);
+function RadioGroup(props) {
+	const generatedName = createUniqueId();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"value",
+		"defaultValue",
+		"name",
+		"disabled",
+		"onChange"
+	]);
+	const [internalValue, setInternalValue] = createSignal(local.defaultValue);
+	const value = () => local.value ?? internalValue();
+	const name = () => local.name ?? generatedName;
+	const disabled = () => Boolean(local.disabled);
+	const setValue = (nextValue) => {
+		if (local.value === void 0) setInternalValue(nextValue);
+		local.onChange?.(nextValue);
+	};
+	return createComponent(RadioGroupContext.Provider, {
+		value: {
+			name,
+			value,
+			setValue,
+			disabled
+		},
+		get children() {
+			var _el$ = _tmpl$$1();
+			spread(_el$, mergeProps({ get ["class"]() {
+				return clsx(radioClass.group, local.class);
+			} }, rest), false, true);
+			insert(_el$, () => local.children);
+			return _el$;
+		}
+	});
+}
+//#endregion
+//#region src/components/radio/radio-root.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label><input type=radio><span><span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function RadioRoot(props) {
+	const context = useRadioGroupContext();
+	const [local, rest] = splitProps(mergeProps$1({ type: "radio" }, props), [
+		"class",
+		"children",
+		"checked",
+		"defaultChecked",
+		"disabled",
+		"name",
+		"onChange",
+		"type",
+		"value"
+	]);
+	const [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));
+	const rootClass = () => clsx(radioClass.root, local.class);
+	const checked = () => {
+		if (context) return context.value() === local.value;
+		return local.checked ?? internalChecked();
+	};
+	const disabled = () => Boolean(context?.disabled() || local.disabled);
+	const name = () => context?.name() ?? local.name;
+	const handleChange = (event) => {
+		const nextChecked = event.currentTarget.checked;
+		local.onChange?.(nextChecked);
+		if (context && nextChecked) {
+			context.setValue(local.value);
+			return;
+		}
+		if (local.checked === void 0) setInternalChecked(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 radioClass.input;
+			},
+			get value() {
+				return local.value;
+			},
+			get name() {
+				return name();
+			},
+			get checked() {
+				return checked();
+			},
+			get disabled() {
+				return 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, radioClass.label));
+				return _el$5;
+			})() : null;
+		})(), null);
+		effect((_p$) => {
+			var _v$ = rootClass(), _v$2 = disabled() ? "" : void 0, _v$3 = radioClass.control, _v$4 = radioClass.indicator;
+			_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
+//#region src/components/radio/radio.tsx
+const Radio = Object.assign(RadioRoot, { Group: RadioGroup });
+//#endregion
+export { Radio, RadioGroup, RadioGroupContext, RadioRoot, radioClass, useRadioGroupContext };
+
+//# sourceMappingURL=index.js.map

package/dist/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","createSignal","createUniqueId","splitProps","radioClass","RadioGroupContext","RadioGroupProps","RadioGroup","props","generatedName","local","rest","internalValue","setInternalValue","defaultValue","value","name","disabled","Boolean","setValue","nextValue","undefined","onChange","_$createComponent","Provider","children","_el$","_tmpl$","_$spread","_$mergeProps","class","group","_$insert","clsx","createSignal","JSX","mergeProps","splitProps","radioClass","useRadioGroupContext","RadioProps","RadioRoot","props","context","merged","type","const","local","rest","internalChecked","setInternalChecked","Boolean","defaultChecked","rootClass","root","class","checked","value","disabled","name","handleChange","EventHandlerUnion","HTMLInputElement","Event","event","nextChecked","currentTarget","onChange","setValue","undefined","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","addEventListener","_$spread","_$mergeProps","input","_$insert","_c$","_$memo","children","_el$5","_tmpl$2","_$effect","_$className","label","_p$","_v$","_v$2","_v$3","control","_v$4","indicator","e","t","_$setAttribute","a","o","JSX","RadioGroup","RadioRoot","RadioProps","RadioBaseProps","RadioGroupBaseProps","RadioGroupProps","RadioComponent","props","Element","Group","Radio","Object","assign"],"sources":["../../src/components/radio/class.ts","../../src/components/radio/context.ts","../../src/components/radio/radio-group.tsx","../../src/components/radio/radio-root.tsx","../../src/components/radio/radio.tsx"],"sourcesContent":["export const radioClass = {\n\tgroup: 'fl-radio-group',\n\troot: 'fl-radio',\n\tinput: 'fl-radio_input',\n\tcontrol: 'fl-radio_control',\n\tindicator: 'fl-radio_indicator',\n\tlabel: 'fl-radio_label',\n} as const;\n","import { type Accessor, createContext, useContext } from 'solid-js';\n\nexport interface RadioGroupContextValue {\n\tname: Accessor<string>;\n\tvalue: Accessor<string | undefined>;\n\tsetValue: (value: string) => void;\n\tdisabled: Accessor<boolean>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>();\n\nexport function useRadioGroupContext() {\n\treturn useContext(RadioGroupContext);\n}\n","import clsx from 'clsx/lite';\nimport { createSignal, createUniqueId, splitProps } from 'solid-js';\nimport { radioClass } from './class';\nimport { RadioGroupContext } from './context';\nimport type { RadioGroupProps } from './types';\nimport './radio-group.css';\n\nexport function RadioGroup(props: RadioGroupProps) {\n\tconst generatedName = createUniqueId();\n\tconst [local, rest] = splitProps(props, [\n\t\t'class',\n\t\t'children',\n\t\t'value',\n\t\t'defaultValue',\n\t\t'name',\n\t\t'disabled',\n\t\t'onChange',\n\t]);\n\tconst [internalValue, setInternalValue] = createSignal(local.defaultValue);\n\n\tconst value = () => local.value ?? internalValue();\n\tconst name = () => local.name ?? generatedName;\n\tconst disabled = () => Boolean(local.disabled);\n\tconst setValue = (nextValue: string) => {\n\t\tif (local.value === undefined) {\n\t\t\tsetInternalValue(nextValue);\n\t\t}\n\n\t\tlocal.onChange?.(nextValue);\n\t};\n\n\treturn (\n\t\t<RadioGroupContext.Provider value={{ name, value, setValue, disabled }}>\n\t\t\t<div\n\t\t\t\tclass={clsx(radioClass.group, local.class)}\n\t\t\t\trole=\"radiogroup\"\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{local.children}\n\t\t\t</div>\n\t\t</RadioGroupContext.Provider>\n\t);\n}\n","import clsx from 'clsx/lite';\nimport { createSignal, type JSX, mergeProps, splitProps } from 'solid-js';\nimport { radioClass } from './class';\nimport { useRadioGroupContext } from './context';\nimport type { RadioProps } from './types';\nimport './radio-root.css';\n\nexport function RadioRoot(props: RadioProps) {\n\tconst context = useRadioGroupContext();\n\tconst merged = mergeProps(\n\t\t{\n\t\t\ttype: 'radio',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, [\n\t\t'class',\n\t\t'children',\n\t\t'checked',\n\t\t'defaultChecked',\n\t\t'disabled',\n\t\t'name',\n\t\t'onChange',\n\t\t'type',\n\t\t'value',\n\t]);\n\tconst [internalChecked, setInternalChecked] = createSignal(Boolean(local.defaultChecked));\n\tconst rootClass = () => clsx(radioClass.root, local.class);\n\tconst checked = () => {\n\t\tif (context) {\n\t\t\treturn context.value() === local.value;\n\t\t}\n\n\t\treturn local.checked ?? internalChecked();\n\t};\n\tconst disabled = () => Boolean(context?.disabled() || local.disabled);\n\tconst name = () => context?.name() ?? local.name;\n\n\tconst handleChange: JSX.EventHandlerUnion<HTMLInputElement, Event> = (event) => {\n\t\tconst nextChecked = event.currentTarget.checked;\n\t\tlocal.onChange?.(nextChecked);\n\n\t\tif (context && nextChecked) {\n\t\t\tcontext.setValue(local.value);\n\t\t\treturn;\n\t\t}\n\n\t\tif (local.checked === undefined) {\n\t\t\tsetInternalChecked(nextChecked);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label\n\t\t\tclass={rootClass()}\n\t\t\tdata-disabled={disabled() ? '' : undefined}\n\t\t>\n\t\t\t<input\n\t\t\t\tclass={radioClass.input}\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={local.value}\n\t\t\t\tname={name()}\n\t\t\t\tchecked={checked()}\n\t\t\t\tdisabled={disabled()}\n\t\t\t\tonChange={handleChange}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t\t<span class={radioClass.control}>\n\t\t\t\t<span class={radioClass.indicator} />\n\t\t\t</span>\n\t\t\t{local.children ? <span class={radioClass.label}>{local.children}</span> : null}\n\t\t</label>\n\t);\n}\n","import type { JSX } from 'solid-js';\nimport { RadioGroup } from './radio-group';\nimport { RadioRoot } from './radio-root';\nimport type { RadioProps } from './types';\n\nexport type { RadioBaseProps, RadioGroupBaseProps, RadioGroupProps, RadioProps } from './types';\nexport { RadioGroup, RadioRoot };\n\nexport interface RadioComponent {\n\t(props: RadioProps): JSX.Element;\n\tGroup: typeof RadioGroup;\n}\n\nexport const Radio: RadioComponent = Object.assign(RadioRoot, {\n\tGroup: RadioGroup,\n});\n"],"mappings":"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"}

package/dist/select/index.css

@@ -0,0 +1,53 @@
+@layer components {
+  .fl-select {
+    background: var(--fl-input-bg-color, var(--fl-body-bg-color));
+    border: var(--fl-input-border-size, var(--fl-border-size, 1px)) solid
+			var(--fl-input-border-color, var(--fl-border-color));
+    border-radius: var(--fl-input-border-radius, var(--fl-border-radius));
+    box-shadow: var(--fl-input-shadow);
+    align-items: stretch;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .fl-select:focus-within {
+    border-color: var(--fl-input-border-focus-color, var(--fl-focus-ring-color));
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: 0;
+  }
+
+  .fl-select[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+
+  .fl-select .fl-select_inner-select {
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--fl-input-pad-x, var(--fl-size-2));
+    padding-block: var(--fl-input-pad-y, var(--fl-size-1-5));
+    padding-right: calc(var(--fl-size-4) + var(--fl-size-4));
+    color: var(--fl-input-text-color, var(--fl-body-text-color));
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+  }
+
+  .fl-select[data-disabled] .fl-select_inner-select {
+    cursor: var(--fl-disabled-cursor);
+  }
+
+  .fl-select .fl-select_arrow {
+    right: var(--fl-size-2);
+    width: var(--fl-size-4);
+    height: var(--fl-size-4);
+    color: var(--fl-input-text-color, var(--fl-body-text-color));
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

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