@malilion/block-ui-react 0.0.0-stage → 0.1.0

package/dist/components/forms/BlockRadio/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+//#region src/components/forms/BlockRadio/context.ts
+var RadioGroupContext = createContext(null);
+function useRadioGroup() {
+	return useContext(RadioGroupContext);
+}
+//#endregion
+export { RadioGroupContext, useRadioGroup };
+
+//# sourceMappingURL=context.js.map

package/dist/components/forms/BlockRadio/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/forms/BlockRadio/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface RadioGroupContextValue {\n  name: string;\n  value: string;\n  disabled: boolean;\n  invalid: boolean;\n  required: boolean;\n  onSelect: (value: string) => void;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport function useRadioGroup(): RadioGroupContextValue | null {\n  return useContext(RadioGroupContext);\n}\n"],"mappings":";;AAWA,IAAa,oBAAoB,cAA6C,IAAI;AAElF,SAAgB,gBAA+C;CAC7D,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/components/forms/BlockRadio/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockRadio, BlockRadioGroup } from "./BlockRadio";
+export type { BlockRadioGroupProps, BlockRadioOption, BlockRadioProps } from "./BlockRadio.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/BlockRadio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockRadio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/forms/BlockSelect/BlockSelect.d.ts

@@ -0,0 +1,4 @@
+import type { BlockSelectProps } from "./BlockSelect.types";
+/** Native `<select>` with block styling — keeps platform keyboard and screen-reader support. */
+export declare const BlockSelect: import("react").ForwardRefExoticComponent<BlockSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=BlockSelect.d.ts.map

package/dist/components/forms/BlockSelect/BlockSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSelect/BlockSelect.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,gGAAgG;AAChG,eAAO,MAAM,WAAW,gHAmEtB,CAAC"}

package/dist/components/forms/BlockSelect/BlockSelect.js

@@ -0,0 +1,58 @@
+import { cx } from "../../../utils/cx.js";
+import { Field } from "../Field/Field.js";
+import control_module_default from "../Field/control.module.js";
+import BlockSelect_module_default from "./BlockSelect.module.js";
+import { forwardRef } from "react";
+import { ChevronDownIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/BlockSelect/BlockSelect.tsx
+/** Native `<select>` with block styling — keeps platform keyboard and screen-reader support. */
+var BlockSelect = forwardRef(function BlockSelect({ id, label, error, success, helperText, options, placeholder, className, wrapperClassName, disabled, required, children, defaultValue, value, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+	const placeholderDefault = placeholder && value === void 0 && defaultValue === void 0 ? "" : defaultValue;
+	return /* @__PURE__ */ jsx(Field, {
+		id,
+		label,
+		error,
+		success,
+		helperText,
+		disabled,
+		required,
+		className: wrapperClassName,
+		children: ({ inputId, describedBy, invalid }) => /* @__PURE__ */ jsxs("div", {
+			className: BlockSelect_module_default.wrapper,
+			children: [/* @__PURE__ */ jsxs("select", {
+				ref,
+				id: inputId,
+				disabled,
+				required,
+				value,
+				defaultValue: placeholderDefault,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": cx(describedBy, ariaDescribedBy) || void 0,
+				className: cx(control_module_default.control, BlockSelect_module_default.select, className),
+				...rest,
+				children: [
+					placeholder ? /* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: placeholder
+					}) : null,
+					options?.map((option) => /* @__PURE__ */ jsx("option", {
+						value: option.value,
+						disabled: option.disabled,
+						children: option.label
+					}, option.value)),
+					children
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: BlockSelect_module_default.chevron,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+			})]
+		})
+	});
+});
+//#endregion
+export { BlockSelect };
+
+//# sourceMappingURL=BlockSelect.js.map

package/dist/components/forms/BlockSelect/BlockSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSelect.js","names":["styles","control"],"sources":["../../../../src/components/forms/BlockSelect/BlockSelect.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { Field } from \"../Field/Field\";\nimport control from \"../Field/control.module.css\";\nimport styles from \"./BlockSelect.module.css\";\nimport type { BlockSelectProps } from \"./BlockSelect.types\";\n\n/** Native `<select>` with block styling — keeps platform keyboard and screen-reader support. */\nexport const BlockSelect = forwardRef<HTMLSelectElement, BlockSelectProps>(function BlockSelect(\n  {\n    id,\n    label,\n    error,\n    success,\n    helperText,\n    options,\n    placeholder,\n    className,\n    wrapperClassName,\n    disabled,\n    required,\n    children,\n    defaultValue,\n    value,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  },\n  ref,\n) {\n  const placeholderDefault =\n    placeholder && value === undefined && defaultValue === undefined ? \"\" : defaultValue;\n  return (\n    <Field\n      id={id}\n      label={label}\n      error={error}\n      success={success}\n      helperText={helperText}\n      disabled={disabled}\n      required={required}\n      className={wrapperClassName}\n    >\n      {({ inputId, describedBy, invalid }) => (\n        <div className={styles.wrapper}>\n          <select\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            required={required}\n            value={value}\n            defaultValue={placeholderDefault}\n            aria-invalid={invalid || undefined}\n            aria-describedby={cx(describedBy, ariaDescribedBy) || undefined}\n            className={cx(control.control, styles.select, className)}\n            {...rest}\n          >\n            {placeholder ? (\n              <option value=\"\" disabled>\n                {placeholder}\n              </option>\n            ) : null}\n            {options?.map((option) => (\n              <option key={option.value} value={option.value} disabled={option.disabled}>\n                {option.label}\n              </option>\n            ))}\n            {children}\n          </select>\n          <span className={styles.chevron} aria-hidden=\"true\">\n            <ChevronDownIcon size={16} />\n          </span>\n        </div>\n      )}\n    </Field>\n  );\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,cAAc,WAAgD,SAAS,YAClF,EACE,IACA,OACA,OACA,SACA,YACA,SACA,aACA,WACA,kBACA,UACA,UACA,UACA,cACA,OACA,oBAAoB,iBACpB,GAAG,QAEL,KACA;CACA,MAAM,qBACJ,eAAe,UAAU,KAAA,KAAa,iBAAiB,KAAA,IAAY,KAAK;CAC1E,OACE,oBAAC,OAAD;EACM;EACG;EACA;EACE;EACG;EACF;EACA;EACV,WAAW;EAET,WAAA,EAAE,SAAS,aAAa,cACxB,qBAAC,OAAD;GAAK,WAAWA,2BAAO;GAAvB,UAAA,CACE,qBAAC,UAAD;IACO;IACL,IAAI;IACM;IACA;IACH;IACP,cAAc;IACd,gBAAc,WAAW,KAAA;IACzB,oBAAkB,GAAG,aAAa,eAAe,KAAK,KAAA;IACtD,WAAW,GAAGC,uBAAQ,SAASD,2BAAO,QAAQ,SAAS;IACvD,GAAI;IAVN,UAAA;KAYG,cACC,oBAAC,UAAD;MAAQ,OAAM;MAAG,UAAA;MACd,UAAA;KACK,CAAA,IACN;KACH,SAAS,KAAK,WACb,oBAAC,UAAD;MAA2B,OAAO,OAAO;MAAO,UAAU,OAAO;MAC9D,UAAA,OAAO;KACF,GAFK,OAAO,KAEZ,CACT;KACA;IACK;GACR,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAS,eAAY;IAC3C,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;GACxB,CAAA,CACH;;CAEF,CAAA;AAEX,CAAC"}

package/dist/components/forms/BlockSelect/BlockSelect.module.js

@@ -0,0 +1,13 @@
+//#region src/components/forms/BlockSelect/BlockSelect.module.css
+var wrapper = "block-wrapper-9eKkr";
+var select = "block-select-z4le9";
+var chevron = "block-chevron-wsoE-";
+var BlockSelect_module_default = {
+	wrapper,
+	select,
+	chevron
+};
+//#endregion
+export { chevron, BlockSelect_module_default as default, select, wrapper };
+
+//# sourceMappingURL=BlockSelect.module.js.map

package/dist/components/forms/BlockSelect/BlockSelect.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSelect.module.js","names":[],"sources":["../../../../src/components/forms/BlockSelect/BlockSelect.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.select {\n  height: var(--block-size-control-md);\n  padding-right: calc(var(--block-space-3) + 24px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.select option {\n  color: var(--block-text);\n  background-color: var(--block-surface-alt);\n}\n\n.chevron {\n  position: absolute;\n  right: var(--block-space-3);\n  display: inline-flex;\n  color: var(--block-text);\n  pointer-events: none;\n}\n"],"mappings":""}

package/dist/components/forms/BlockSelect/BlockSelect.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, SelectHTMLAttributes } from "react";
+export interface BlockSelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface BlockSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    success?: boolean;
+    helperText?: string;
+    /** Options. Alternatively pass `<option>` children. */
+    options?: BlockSelectOption[];
+    /** Adds a disabled, empty first option. */
+    placeholder?: string;
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockSelect.types.d.ts.map

package/dist/components/forms/BlockSelect/BlockSelect.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSelect.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSelect/BlockSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/forms/BlockSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockSelect } from "./BlockSelect";
+export type { BlockSelectOption, BlockSelectProps } from "./BlockSelect.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/BlockSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/forms/BlockSlider/BlockSlider.d.ts

@@ -0,0 +1,7 @@
+import type { BlockSliderProps } from "./BlockSlider.types";
+/**
+ * Native range input with a pixel track and block thumb.
+ * The fill percentage is passed as a CSS custom property (dynamic value only).
+ */
+export declare const BlockSlider: import("react").ForwardRefExoticComponent<BlockSliderProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=BlockSlider.d.ts.map

package/dist/components/forms/BlockSlider/BlockSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSlider/BlockSlider.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,WAAW,+GAsEtB,CAAC"}

package/dist/components/forms/BlockSlider/BlockSlider.js

@@ -0,0 +1,60 @@
+import { cx } from "../../../utils/cx.js";
+import { Field } from "../Field/Field.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { clamp } from "../../../utils/number.js";
+import BlockSlider_module_default from "./BlockSlider.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/forms/BlockSlider/BlockSlider.tsx
+/**
+* Native range input with a pixel track and block thumb.
+* The fill percentage is passed as a CSS custom property (dynamic value only).
+*/
+var BlockSlider = forwardRef(function BlockSlider({ id, label, value, defaultValue, onValueChange, onChange, min = 0, max = 100, step = 1, showValue = true, formatValue = String, variant = "primary", error, helperText, className, wrapperClassName, disabled, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? min,
+		onChange: onValueChange
+	});
+	const safe = clamp(current, min, max);
+	const percent = max > min ? (safe - min) / (max - min) * 100 : 0;
+	const text = formatValue(safe);
+	const handleChange = (event) => {
+		onChange?.(event);
+		setCurrent(Number(event.target.value));
+	};
+	return /* @__PURE__ */ jsx(Field, {
+		id,
+		label,
+		error,
+		helperText,
+		disabled,
+		className: wrapperClassName,
+		labelAside: showValue ? /* @__PURE__ */ jsx("output", {
+			"aria-hidden": "true",
+			children: text
+		}) : void 0,
+		children: ({ inputId, describedBy, invalid }) => /* @__PURE__ */ jsx("input", {
+			ref,
+			id: inputId,
+			type: "range",
+			min,
+			max,
+			step,
+			value: safe,
+			disabled,
+			onChange: handleChange,
+			"aria-valuetext": text,
+			"aria-invalid": invalid || void 0,
+			"aria-describedby": cx(describedBy, ariaDescribedBy) || void 0,
+			"data-material": variant,
+			className: cx(BlockSlider_module_default.slider, className),
+			style: { "--block-slider-fill": `${percent}%` },
+			...rest
+		})
+	});
+});
+//#endregion
+export { BlockSlider };
+
+//# sourceMappingURL=BlockSlider.js.map

package/dist/components/forms/BlockSlider/BlockSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSlider.js","names":["styles"],"sources":["../../../../src/components/forms/BlockSlider/BlockSlider.tsx"],"sourcesContent":["import { forwardRef, type ChangeEvent, type CSSProperties } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { clamp } from \"../../../utils/number\";\nimport { Field } from \"../Field/Field\";\nimport styles from \"./BlockSlider.module.css\";\nimport type { BlockSliderProps } from \"./BlockSlider.types\";\n\n/**\n * Native range input with a pixel track and block thumb.\n * The fill percentage is passed as a CSS custom property (dynamic value only).\n */\nexport const BlockSlider = forwardRef<HTMLInputElement, BlockSliderProps>(function BlockSlider(\n  {\n    id,\n    label,\n    value,\n    defaultValue,\n    onValueChange,\n    onChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    showValue = true,\n    formatValue = String,\n    variant = \"primary\",\n    error,\n    helperText,\n    className,\n    wrapperClassName,\n    disabled,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  },\n  ref,\n) {\n  const [current, setCurrent] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? min,\n    onChange: onValueChange,\n  });\n  const safe = clamp(current, min, max);\n  const percent = max > min ? ((safe - min) / (max - min)) * 100 : 0;\n  const text = formatValue(safe);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    setCurrent(Number(event.target.value));\n  };\n\n  return (\n    <Field\n      id={id}\n      label={label}\n      error={error}\n      helperText={helperText}\n      disabled={disabled}\n      className={wrapperClassName}\n      labelAside={showValue ? <output aria-hidden=\"true\">{text}</output> : undefined}\n    >\n      {({ inputId, describedBy, invalid }) => (\n        <input\n          ref={ref}\n          id={inputId}\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={safe}\n          disabled={disabled}\n          onChange={handleChange}\n          aria-valuetext={text}\n          aria-invalid={invalid || undefined}\n          aria-describedby={cx(describedBy, ariaDescribedBy) || undefined}\n          data-material={variant}\n          className={cx(styles.slider, className)}\n          style={{ \"--block-slider-fill\": `${percent}%` } as CSSProperties}\n          {...rest}\n        />\n      )}\n    </Field>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,cAAc,WAA+C,SAAS,YACjF,EACE,IACA,OACA,OACA,cACA,eACA,UACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,YAAY,MACZ,cAAc,QACd,UAAU,WACV,OACA,YACA,WACA,kBACA,UACA,oBAAoB,iBACpB,GAAG,QAEL,KACA;CACA,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD;EACA,cAAc,gBAAgB;EAC9B,UAAU;CACZ,CAAC;CACD,MAAM,OAAO,MAAM,SAAS,KAAK,GAAG;CACpC,MAAM,UAAU,MAAM,OAAQ,OAAO,QAAQ,MAAM,OAAQ,MAAM;CACjE,MAAM,OAAO,YAAY,IAAI;CAE7B,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,KAAK;EAChB,WAAW,OAAO,MAAM,OAAO,KAAK,CAAC;CACvC;CAEA,OACE,oBAAC,OAAD;EACM;EACG;EACA;EACK;EACF;EACV,WAAW;EACX,YAAY,YAAY,oBAAC,UAAD;GAAQ,eAAY;GAAQ,UAAA;EAAa,CAAA,IAAI,KAAA;EAEnE,WAAA,EAAE,SAAS,aAAa,cACxB,oBAAC,SAAD;GACO;GACL,IAAI;GACJ,MAAK;GACA;GACA;GACC;GACN,OAAO;GACG;GACV,UAAU;GACV,kBAAgB;GAChB,gBAAc,WAAW,KAAA;GACzB,oBAAkB,GAAG,aAAa,eAAe,KAAK,KAAA;GACtD,iBAAe;GACf,WAAW,GAAGA,2BAAO,QAAQ,SAAS;GACtC,OAAO,EAAE,uBAAuB,GAAG,QAAQ,GAAG;GAC9C,GAAI;EACL,CAAA;CAEE,CAAA;AAEX,CAAC"}

package/dist/components/forms/BlockSlider/BlockSlider.module.js

@@ -0,0 +1,7 @@
+//#region src/components/forms/BlockSlider/BlockSlider.module.css
+var slider = "block-slider-RnmGA";
+var BlockSlider_module_default = { slider };
+//#endregion
+export { BlockSlider_module_default as default, slider };
+
+//# sourceMappingURL=BlockSlider.module.js.map

package/dist/components/forms/BlockSlider/BlockSlider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSlider.module.js","names":[],"sources":["../../../../src/components/forms/BlockSlider/BlockSlider.module.css"],"sourcesContent":[".slider {\n  --track-h: 14px;\n  --thumb-w: 16px;\n  --thumb-h: 26px;\n\n  width: 100%;\n  height: var(--thumb-h);\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  cursor: pointer;\n}\n\n.slider:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.slider:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 4px;\n}\n\n.slider::-webkit-slider-runnable-track {\n  height: var(--track-h);\n  background: linear-gradient(\n    to right,\n    var(--block-mat) 0 var(--block-slider-fill),\n    var(--block-slot) var(--block-slider-fill) 100%\n  );\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: inset 0 3px 0 var(--block-shadow-bevel-dark);\n}\n\n.slider::-moz-range-track {\n  height: var(--track-h);\n  background: var(--block-slot);\n  border: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.slider::-moz-range-progress {\n  height: var(--track-h);\n  background: var(--block-mat);\n}\n\n.slider::-webkit-slider-thumb {\n  width: var(--thumb-w);\n  height: var(--thumb-h);\n  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2 - 2px);\n  background-color: var(--block-mat);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  border-radius: 0;\n  box-shadow:\n    inset 2px 2px 0 var(--block-mat-light),\n    inset -2px -2px 0 var(--block-mat-dark);\n  appearance: none;\n}\n\n.slider::-moz-range-thumb {\n  width: var(--thumb-w);\n  height: var(--thumb-h);\n  background-color: var(--block-mat);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  border-radius: 0;\n  box-shadow:\n    inset 2px 2px 0 var(--block-mat-light),\n    inset -2px -2px 0 var(--block-mat-dark);\n}\n\n.slider:active::-webkit-slider-thumb {\n  filter: brightness(1.15);\n}\n"],"mappings":""}

package/dist/components/forms/BlockSlider/BlockSlider.types.d.ts

@@ -0,0 +1,25 @@
+import type { InputHTMLAttributes } from "react";
+export type BlockSliderVariant = "grass" | "water" | "diamond" | "emerald" | "gold" | "redstone" | "primary";
+export interface BlockSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "size"> {
+    label?: string;
+    value?: number;
+    defaultValue?: number;
+    /** Called with the numeric value. */
+    onValueChange?: (value: number) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** Show the current value next to the label. @default true */
+    showValue?: boolean;
+    /** Formats the displayed value and `aria-valuetext`. */
+    formatValue?: (value: number) => string;
+    /** Fill material. @default "primary" */
+    variant?: BlockSliderVariant;
+    error?: string;
+    helperText?: string;
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockSlider.types.d.ts.map

package/dist/components/forms/BlockSlider/BlockSlider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockSlider.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSlider/BlockSlider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAC5B,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;AAE9E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,CAC3C;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,wCAAwC;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/forms/BlockSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockSlider } from "./BlockSlider";
+export type { BlockSliderProps, BlockSliderVariant } from "./BlockSlider.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/BlockSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockSlider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/forms/BlockTextarea/BlockTextarea.d.ts

@@ -0,0 +1,4 @@
+import type { BlockTextareaProps } from "./BlockTextarea.types";
+/** Multi-line text field in a sunken slot well. */
+export declare const BlockTextarea: import("react").ForwardRefExoticComponent<BlockTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=BlockTextarea.d.ts.map

package/dist/components/forms/BlockTextarea/BlockTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTextarea.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockTextarea/BlockTextarea.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,mDAAmD;AACnD,eAAO,MAAM,aAAa,oHAwEzB,CAAC"}

package/dist/components/forms/BlockTextarea/BlockTextarea.js

@@ -0,0 +1,53 @@
+import { cx } from "../../../utils/cx.js";
+import { Field } from "../Field/Field.js";
+import control_module_default from "../Field/control.module.js";
+import BlockTextarea_module_default from "./BlockTextarea.module.js";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/BlockTextarea/BlockTextarea.tsx
+/** Multi-line text field in a sunken slot well. */
+var BlockTextarea = forwardRef(function BlockTextarea({ id, label, error, success, helperText, showCount = true, className, wrapperClassName, disabled, required, rows = 4, maxLength, value, defaultValue, onChange, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+	const [uncontrolledLength, setUncontrolledLength] = useState(typeof defaultValue === "string" ? defaultValue.length : 0);
+	const length = typeof value === "string" ? value.length : uncontrolledLength;
+	const handleChange = (event) => {
+		setUncontrolledLength(event.target.value.length);
+		onChange?.(event);
+	};
+	return /* @__PURE__ */ jsx(Field, {
+		id,
+		label,
+		error,
+		success,
+		helperText,
+		disabled,
+		required,
+		className: wrapperClassName,
+		labelAside: showCount && maxLength !== void 0 ? /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			children: [
+				length,
+				" / ",
+				maxLength
+			]
+		}) : void 0,
+		children: ({ inputId, describedBy, invalid }) => /* @__PURE__ */ jsx("textarea", {
+			ref,
+			id: inputId,
+			rows,
+			disabled,
+			required,
+			maxLength,
+			value,
+			defaultValue,
+			onChange: handleChange,
+			"aria-invalid": invalid || void 0,
+			"aria-describedby": cx(describedBy, ariaDescribedBy) || void 0,
+			className: cx(control_module_default.control, BlockTextarea_module_default.textarea, className),
+			...rest
+		})
+	});
+});
+//#endregion
+export { BlockTextarea };
+
+//# sourceMappingURL=BlockTextarea.js.map

package/dist/components/forms/BlockTextarea/BlockTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTextarea.js","names":["control","styles"],"sources":["../../../../src/components/forms/BlockTextarea/BlockTextarea.tsx"],"sourcesContent":["import { forwardRef, useState, type ChangeEvent } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { Field } from \"../Field/Field\";\nimport control from \"../Field/control.module.css\";\nimport styles from \"./BlockTextarea.module.css\";\nimport type { BlockTextareaProps } from \"./BlockTextarea.types\";\n\n/** Multi-line text field in a sunken slot well. */\nexport const BlockTextarea = forwardRef<HTMLTextAreaElement, BlockTextareaProps>(\n  function BlockTextarea(\n    {\n      id,\n      label,\n      error,\n      success,\n      helperText,\n      showCount = true,\n      className,\n      wrapperClassName,\n      disabled,\n      required,\n      rows = 4,\n      maxLength,\n      value,\n      defaultValue,\n      onChange,\n      \"aria-describedby\": ariaDescribedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const [uncontrolledLength, setUncontrolledLength] = useState(\n      typeof defaultValue === \"string\" ? defaultValue.length : 0,\n    );\n    const length = typeof value === \"string\" ? value.length : uncontrolledLength;\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      setUncontrolledLength(event.target.value.length);\n      onChange?.(event);\n    };\n\n    const counter =\n      showCount && maxLength !== undefined ? (\n        <span aria-hidden=\"true\">\n          {length} / {maxLength}\n        </span>\n      ) : undefined;\n\n    return (\n      <Field\n        id={id}\n        label={label}\n        error={error}\n        success={success}\n        helperText={helperText}\n        disabled={disabled}\n        required={required}\n        className={wrapperClassName}\n        labelAside={counter}\n      >\n        {({ inputId, describedBy, invalid }) => (\n          <textarea\n            ref={ref}\n            id={inputId}\n            rows={rows}\n            disabled={disabled}\n            required={required}\n            maxLength={maxLength}\n            value={value}\n            defaultValue={defaultValue}\n            onChange={handleChange}\n            aria-invalid={invalid || undefined}\n            aria-describedby={cx(describedBy, ariaDescribedBy) || undefined}\n            className={cx(control.control, styles.textarea, className)}\n            {...rest}\n          />\n        )}\n      </Field>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,WAC3B,SAAS,cACP,EACE,IACA,OACA,OACA,SACA,YACA,YAAY,MACZ,WACA,kBACA,UACA,UACA,OAAO,GACP,WACA,OACA,cACA,UACA,oBAAoB,iBACpB,GAAG,QAEL,KACA;CACA,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,OAAO,iBAAiB,WAAW,aAAa,SAAS,CAC3D;CACA,MAAM,SAAS,OAAO,UAAU,WAAW,MAAM,SAAS;CAE1D,MAAM,gBAAgB,UAA4C;EAChE,sBAAsB,MAAM,OAAO,MAAM,MAAM;EAC/C,WAAW,KAAK;CAClB;CASA,OACE,oBAAC,OAAD;EACM;EACG;EACA;EACE;EACG;EACF;EACA;EACV,WAAW;EACX,YAhBF,aAAa,cAAc,KAAA,IACzB,qBAAC,QAAD;GAAM,eAAY;GAAlB,UAAA;IACG;IAAO;IAAI;GACR;EACJ,CAAA,IAAA,KAAA;EAcA,WAAA,EAAE,SAAS,aAAa,cACxB,oBAAC,YAAD;GACO;GACL,IAAI;GACE;GACI;GACA;GACC;GACJ;GACO;GACd,UAAU;GACV,gBAAc,WAAW,KAAA;GACzB,oBAAkB,GAAG,aAAa,eAAe,KAAK,KAAA;GACtD,WAAW,GAAGA,uBAAQ,SAASC,6BAAO,UAAU,SAAS;GACzD,GAAI;EACL,CAAA;CAEE,CAAA;AAEX,CACF"}

package/dist/components/forms/BlockTextarea/BlockTextarea.module.js

@@ -0,0 +1,7 @@
+//#region src/components/forms/BlockTextarea/BlockTextarea.module.css
+var textarea = "block-textarea-8EsNy";
+var BlockTextarea_module_default = { textarea };
+//#endregion
+export { BlockTextarea_module_default as default, textarea };
+
+//# sourceMappingURL=BlockTextarea.module.js.map

package/dist/components/forms/BlockTextarea/BlockTextarea.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTextarea.module.js","names":[],"sources":["../../../../src/components/forms/BlockTextarea/BlockTextarea.module.css"],"sourcesContent":[".textarea {\n  display: block;\n  min-height: 96px;\n  resize: vertical;\n  line-height: var(--block-line-height-normal);\n}\n"],"mappings":""}

package/dist/components/forms/BlockTextarea/BlockTextarea.types.d.ts

@@ -0,0 +1,11 @@
+import type { TextareaHTMLAttributes } from "react";
+export interface BlockTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    success?: boolean;
+    helperText?: string;
+    /** Show a live `count / maxLength` counter when `maxLength` is set. @default true */
+    showCount?: boolean;
+    wrapperClassName?: string;
+}
+//# sourceMappingURL=BlockTextarea.types.d.ts.map

package/dist/components/forms/BlockTextarea/BlockTextarea.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTextarea.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockTextarea/BlockTextarea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/forms/BlockTextarea/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockTextarea } from "./BlockTextarea";
+export type { BlockTextareaProps } from "./BlockTextarea.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/BlockTextarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockTextarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/forms/BlockToggle/BlockToggle.d.ts

@@ -0,0 +1,4 @@
+import type { BlockToggleProps } from "./BlockToggle.types";
+/** On/off switch — a native checkbox with `role="switch"` and a sliding block knob. */
+export declare const BlockToggle: import("react").ForwardRefExoticComponent<BlockToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=BlockToggle.d.ts.map

package/dist/components/forms/BlockToggle/BlockToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockToggle/BlockToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,uFAAuF;AACvF,eAAO,MAAM,WAAW,+GAkEtB,CAAC"}

package/dist/components/forms/BlockToggle/BlockToggle.js

@@ -0,0 +1,52 @@
+import { cx } from "../../../utils/cx.js";
+import BlockToggle_module_default from "./BlockToggle.module.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/BlockToggle/BlockToggle.tsx
+/** On/off switch — a native checkbox with `role="switch"` and a sliding block knob. */
+var BlockToggle = forwardRef(function BlockToggle({ id, label, description, onCheckedChange, onChange, size = "md", labelPosition = "end", className, disabled, ...rest }, ref) {
+	const generated = useId();
+	const inputId = id ?? `block-toggle-${generated}`;
+	const descriptionId = description ? `${inputId}-description` : void 0;
+	const handleChange = (event) => {
+		onChange?.(event);
+		onCheckedChange?.(event.target.checked);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(BlockToggle_module_default.root, BlockToggle_module_default[size], labelPosition === "start" && BlockToggle_module_default.start, className),
+		"data-disabled": disabled || void 0,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: BlockToggle_module_default.control,
+			children: [/* @__PURE__ */ jsx("input", {
+				ref,
+				id: inputId,
+				type: "checkbox",
+				role: "switch",
+				disabled,
+				"aria-describedby": descriptionId,
+				onChange: handleChange,
+				className: BlockToggle_module_default.input,
+				...rest
+			}), /* @__PURE__ */ jsx("span", {
+				className: BlockToggle_module_default.track,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", { className: BlockToggle_module_default.knob })
+			})]
+		}), label || description ? /* @__PURE__ */ jsxs("span", {
+			className: BlockToggle_module_default.text,
+			children: [label ? /* @__PURE__ */ jsx("label", {
+				htmlFor: inputId,
+				className: BlockToggle_module_default.label,
+				children: label
+			}) : null, description ? /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: BlockToggle_module_default.description,
+				children: description
+			}) : null]
+		}) : null]
+	});
+});
+//#endregion
+export { BlockToggle };
+
+//# sourceMappingURL=BlockToggle.js.map

package/dist/components/forms/BlockToggle/BlockToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockToggle.js","names":["styles"],"sources":["../../../../src/components/forms/BlockToggle/BlockToggle.tsx"],"sourcesContent":["import { forwardRef, useId, type ChangeEvent } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockToggle.module.css\";\nimport type { BlockToggleProps } from \"./BlockToggle.types\";\n\n/** On/off switch — a native checkbox with `role=\"switch\"` and a sliding block knob. */\nexport const BlockToggle = forwardRef<HTMLInputElement, BlockToggleProps>(function BlockToggle(\n  {\n    id,\n    label,\n    description,\n    onCheckedChange,\n    onChange,\n    size = \"md\",\n    labelPosition = \"end\",\n    className,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? `block-toggle-${generated}`;\n  const descriptionId = description ? `${inputId}-description` : undefined;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    onCheckedChange?.(event.target.checked);\n  };\n\n  return (\n    <div\n      className={cx(\n        styles.root,\n        styles[size],\n        labelPosition === \"start\" && styles.start,\n        className,\n      )}\n      data-disabled={disabled || undefined}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          id={inputId}\n          type=\"checkbox\"\n          role=\"switch\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n          onChange={handleChange}\n          className={styles.input}\n          {...rest}\n        />\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.knob} />\n        </span>\n      </span>\n      {label || description ? (\n        <span className={styles.text}>\n          {label ? (\n            <label htmlFor={inputId} className={styles.label}>\n              {label}\n            </label>\n          ) : null}\n          {description ? (\n            <span id={descriptionId} className={styles.description}>\n              {description}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;AAMA,IAAa,cAAc,WAA+C,SAAS,YACjF,EACE,IACA,OACA,aACA,iBACA,UACA,OAAO,MACP,gBAAgB,OAChB,WACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,MAAM,gBAAgB;CACtC,MAAM,gBAAgB,cAAc,GAAG,QAAQ,gBAAgB,KAAA;CAE/D,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,KAAK;EAChB,kBAAkB,MAAM,OAAO,OAAO;CACxC;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GACTA,2BAAO,MACPA,2BAAO,OACP,kBAAkB,WAAWA,2BAAO,OACpC,SACF;EACA,iBAAe,YAAY,KAAA;EAP7B,UAAA,CASE,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAxB,UAAA,CACE,oBAAC,SAAD;IACO;IACL,IAAI;IACJ,MAAK;IACL,MAAK;IACK;IACV,oBAAkB;IAClB,UAAU;IACV,WAAWA,2BAAO;IAClB,GAAI;GACL,CAAA,GACD,oBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAO,eAAY;IACzC,UAAA,oBAAC,QAAD,EAAM,WAAWA,2BAAO,KAAO,CAAA;GAC3B,CAAA,CACF;EACL,CAAA,GAAA,SAAS,cACR,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAxB,UAAA,CACG,QACC,oBAAC,SAAD;IAAO,SAAS;IAAS,WAAWA,2BAAO;IACxC,UAAA;GACI,CAAA,IACL,MACH,cACC,oBAAC,QAAD;IAAM,IAAI;IAAe,WAAWA,2BAAO;IACxC,UAAA;GACG,CAAA,IACJ,IACA;EACJ,CAAA,IAAA,IACD;;AAET,CAAC"}

package/dist/components/forms/BlockToggle/BlockToggle.module.js

@@ -0,0 +1,27 @@
+//#region src/components/forms/BlockToggle/BlockToggle.module.css
+var root = "block-root-92m2B";
+var sm = "block-sm-g6r0z";
+var start = "block-start-G6xwo";
+var control = "block-control-p-xER";
+var input = "block-input-J3ZTP";
+var track = "block-track-YiTW6";
+var knob = "block-knob-X9jrz";
+var text = "block-text-T6VPC";
+var label = "block-label-3xhbG";
+var description = "block-description-G4vSR";
+var BlockToggle_module_default = {
+	root,
+	sm,
+	start,
+	control,
+	input,
+	track,
+	knob,
+	text,
+	label,
+	description
+};
+//#endregion
+export { control, BlockToggle_module_default as default, description, input, knob, label, root, sm, start, text, track };
+
+//# sourceMappingURL=BlockToggle.module.js.map

package/dist/components/forms/BlockToggle/BlockToggle.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockToggle.module.js","names":[],"sources":["../../../../src/components/forms/BlockToggle/BlockToggle.module.css"],"sourcesContent":[".root {\n  --toggle-w: 56px;\n  --toggle-h: 28px;\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--block-space-3);\n}\n\n.sm {\n  --toggle-w: 44px;\n  --toggle-h: 22px;\n}\n\n.start {\n  flex-direction: row-reverse;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--toggle-w);\n  height: var(--toggle-h);\n}\n\n.input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n  transition: background-color var(--block-duration-fast) var(--block-ease-step);\n}\n\n.knob {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: calc(var(--toggle-h) - 6px);\n  height: calc(var(--toggle-h) - 6px);\n  background-color: var(--block-stone-light);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow:\n    inset 2px 2px 0 var(--block-shadow-bevel-light),\n    inset -2px -2px 0 var(--block-shadow-bevel-dark);\n  transition: transform var(--block-duration-fast) var(--block-ease-step);\n}\n\n.input:checked + .track {\n  background-color: var(--block-primary);\n  box-shadow:\n    inset 2px 2px 0 var(--block-primary-dark),\n    inset -2px -2px 0 var(--block-primary-light);\n}\n\n.input:checked + .track .knob {\n  transform: translateX(calc(var(--toggle-w) - var(--toggle-h)));\n  background-color: var(--block-white);\n}\n\n.input:hover:not(:disabled) + .track {\n  filter: brightness(1.12);\n}\n\n.input:focus-visible + .track {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.input:disabled + .track {\n  opacity: 0.5;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.label {\n  font-size: var(--block-font-size-md);\n  cursor: pointer;\n}\n\n.root[data-disabled] .label {\n  color: var(--block-text-muted);\n  cursor: not-allowed;\n}\n\n.description {\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n"],"mappings":""}

package/dist/components/forms/BlockToggle/BlockToggle.types.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export interface BlockToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "role"> {
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Called with the new checked state. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** Put the label before the switch. */
+    labelPosition?: "start" | "end";
+}
+//# sourceMappingURL=BlockToggle.types.d.ts.map

package/dist/components/forms/BlockToggle/BlockToggle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockToggle/BlockToggle.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,MAAM,CACzB;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yCAAyC;IACzC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACjC"}

package/dist/components/forms/BlockToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { BlockToggle } from "./BlockToggle";
+export type { BlockToggleProps } from "./BlockToggle.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/BlockToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/forms/Field/Field.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export interface FieldIds {
+    inputId: string;
+    describedBy: string | undefined;
+    invalid: boolean;
+}
+export interface FieldProps {
+    id?: string | undefined;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    success?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    className?: string | undefined;
+    /** Extra content on the label row (e.g. the slider value). */
+    labelAside?: ReactNode;
+    children: (ids: FieldIds) => ReactNode;
+}
+/**
+ * Internal wrapper shared by text-like controls: label, helper text and error
+ * message, wired up with `aria-describedby` / `aria-invalid`.
+ */
+export declare function Field({ id, label, helperText, error, success, disabled, required, className, labelAside, children, }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=Field.d.ts.map

package/dist/components/forms/Field/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,QAAQ,GACT,EAAE,UAAU,+BA2CZ"}