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

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

@@ -0,0 +1,6 @@
+import type { BlockRadioGroupProps, BlockRadioProps } from "./BlockRadio.types";
+/** A single native radio. Use inside `BlockRadioGroup` for shared state. */
+export declare const BlockRadio: import("react").ForwardRefExoticComponent<BlockRadioProps & import("react").RefAttributes<HTMLInputElement>>;
+/** Fieldset of radios with a legend. Arrow keys move between options natively. */
+export declare const BlockRadioGroup: import("react").ForwardRefExoticComponent<BlockRadioGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=BlockRadio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockRadio/BlockRadio.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGhF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,8GAsDrB,CAAC;AAEH,kFAAkF;AAClF,eAAO,MAAM,eAAe,sHA+E3B,CAAC"}

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

@@ -0,0 +1,122 @@
+import { cx } from "../../../utils/cx.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import BlockRadio_module_default from "./BlockRadio.module.js";
+import { RadioGroupContext, useRadioGroup } from "./context.js";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/BlockRadio/BlockRadio.tsx
+/** A single native radio. Use inside `BlockRadioGroup` for shared state. */
+var BlockRadio = forwardRef(function BlockRadio({ id, label, description, value, className, disabled, onChange, name, checked, ...rest }, ref) {
+	const group = useRadioGroup();
+	const generated = useId();
+	const inputId = id ?? `block-radio-${generated}`;
+	const descriptionId = description ? `${inputId}-description` : void 0;
+	const isDisabled = Boolean(disabled || group?.disabled);
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (event.target.checked) group?.onSelect(value);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(BlockRadio_module_default.radio, className),
+		"data-disabled": isDisabled || void 0,
+		"data-invalid": group?.invalid || void 0,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: BlockRadio_module_default.control,
+			children: [/* @__PURE__ */ jsx("input", {
+				ref,
+				id: inputId,
+				type: "radio",
+				name: group?.name ?? name,
+				value,
+				checked: group ? group.value === value : checked,
+				disabled: isDisabled,
+				required: group?.required,
+				"aria-describedby": descriptionId,
+				onChange: handleChange,
+				className: BlockRadio_module_default.input,
+				...rest
+			}), /* @__PURE__ */ jsx("span", {
+				className: BlockRadio_module_default.dot,
+				"aria-hidden": "true"
+			})]
+		}), label || description ? /* @__PURE__ */ jsxs("span", {
+			className: BlockRadio_module_default.text,
+			children: [label ? /* @__PURE__ */ jsx("label", {
+				htmlFor: inputId,
+				className: BlockRadio_module_default.label,
+				children: label
+			}) : null, description ? /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: BlockRadio_module_default.description,
+				children: description
+			}) : null]
+		}) : null]
+	});
+});
+/** Fieldset of radios with a legend. Arrow keys move between options natively. */
+var BlockRadioGroup = forwardRef(function BlockRadioGroup({ label, name, value, defaultValue = "", onValueChange, options, orientation = "vertical", error, helperText, required = false, disabled = false, className, children, ...rest }, ref) {
+	const generated = useId();
+	const groupName = name ?? `block-radio-group-${generated}`;
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const helperId = helperText ? `${groupName}-helper` : void 0;
+	const errorId = error ? `${groupName}-error` : void 0;
+	const context = useMemo(() => ({
+		name: groupName,
+		value: current,
+		disabled,
+		invalid: Boolean(error),
+		required,
+		onSelect: setCurrent
+	}), [
+		groupName,
+		current,
+		disabled,
+		error,
+		required,
+		setCurrent
+	]);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
+		disabled,
+		"aria-invalid": Boolean(error) || void 0,
+		"aria-describedby": cx(errorId, helperId) || void 0,
+		className: cx(BlockRadio_module_default.group, className),
+		...rest,
+		children: [
+			label ? /* @__PURE__ */ jsx("legend", {
+				className: BlockRadio_module_default.legend,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: cx(BlockRadio_module_default.options, orientation === "horizontal" && BlockRadio_module_default.horizontal),
+				children: /* @__PURE__ */ jsxs(RadioGroupContext.Provider, {
+					value: context,
+					children: [options?.map((option) => /* @__PURE__ */ jsx(BlockRadio, {
+						value: option.value,
+						label: option.label,
+						description: option.description,
+						disabled: option.disabled
+					}, option.value)), children]
+				})
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: BlockRadio_module_default.error,
+				children: error
+			}) : null,
+			helperText ? /* @__PURE__ */ jsx("p", {
+				id: helperId,
+				className: BlockRadio_module_default.helper,
+				children: helperText
+			}) : null
+		]
+	});
+});
+//#endregion
+export { BlockRadio, BlockRadioGroup };
+
+//# sourceMappingURL=BlockRadio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRadio.js","names":["styles"],"sources":["../../../../src/components/forms/BlockRadio/BlockRadio.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, type ChangeEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./BlockRadio.module.css\";\nimport type { BlockRadioGroupProps, BlockRadioProps } from \"./BlockRadio.types\";\nimport { RadioGroupContext, useRadioGroup, type RadioGroupContextValue } from \"./context\";\n\n/** A single native radio. Use inside `BlockRadioGroup` for shared state. */\nexport const BlockRadio = forwardRef<HTMLInputElement, BlockRadioProps>(function BlockRadio(\n  { id, label, description, value, className, disabled, onChange, name, checked, ...rest },\n  ref,\n) {\n  const group = useRadioGroup();\n  const generated = useId();\n  const inputId = id ?? `block-radio-${generated}`;\n  const descriptionId = description ? `${inputId}-description` : undefined;\n  const isDisabled = Boolean(disabled || group?.disabled);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.target.checked) group?.onSelect(value);\n  };\n\n  return (\n    <div\n      className={cx(styles.radio, className)}\n      data-disabled={isDisabled || undefined}\n      data-invalid={group?.invalid || undefined}\n    >\n      <span className={styles.control}>\n        <input\n          ref={ref}\n          id={inputId}\n          type=\"radio\"\n          name={group?.name ?? name}\n          value={value}\n          checked={group ? group.value === value : checked}\n          disabled={isDisabled}\n          required={group?.required}\n          aria-describedby={descriptionId}\n          onChange={handleChange}\n          className={styles.input}\n          {...rest}\n        />\n        <span className={styles.dot} aria-hidden=\"true\" />\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\n/** Fieldset of radios with a legend. Arrow keys move between options natively. */\nexport const BlockRadioGroup = forwardRef<HTMLFieldSetElement, BlockRadioGroupProps>(\n  function BlockRadioGroup(\n    {\n      label,\n      name,\n      value,\n      defaultValue = \"\",\n      onValueChange,\n      options,\n      orientation = \"vertical\",\n      error,\n      helperText,\n      required = false,\n      disabled = false,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const generated = useId();\n    const groupName = name ?? `block-radio-group-${generated}`;\n    const [current, setCurrent] = useControllableState({\n      value,\n      defaultValue,\n      onChange: onValueChange,\n    });\n    const helperId = helperText ? `${groupName}-helper` : undefined;\n    const errorId = error ? `${groupName}-error` : undefined;\n\n    const context = useMemo<RadioGroupContextValue>(\n      () => ({\n        name: groupName,\n        value: current,\n        disabled,\n        invalid: Boolean(error),\n        required,\n        onSelect: setCurrent,\n      }),\n      [groupName, current, disabled, error, required, setCurrent],\n    );\n\n    return (\n      <fieldset\n        ref={ref}\n        disabled={disabled}\n        aria-invalid={Boolean(error) || undefined}\n        aria-describedby={cx(errorId, helperId) || undefined}\n        className={cx(styles.group, className)}\n        {...rest}\n      >\n        {label ? <legend className={styles.legend}>{label}</legend> : null}\n        <div className={cx(styles.options, orientation === \"horizontal\" && styles.horizontal)}>\n          <RadioGroupContext.Provider value={context}>\n            {options?.map((option) => (\n              <BlockRadio\n                key={option.value}\n                value={option.value}\n                label={option.label}\n                description={option.description}\n                disabled={option.disabled}\n              />\n            ))}\n            {children}\n          </RadioGroupContext.Provider>\n        </div>\n        {error ? (\n          <p id={errorId} className={styles.error}>\n            {error}\n          </p>\n        ) : null}\n        {helperText ? (\n          <p id={helperId} className={styles.helper}>\n            {helperText}\n          </p>\n        ) : null}\n      </fieldset>\n    );\n  },\n);\n"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+//#region src/components/forms/BlockRadio/BlockRadio.module.css
+var group = "block-group-Q6sE6";
+var legend = "block-legend-UYbkM";
+var options = "block-options-sH-33";
+var horizontal = "block-horizontal-zVmM-";
+var radio = "block-radio-zzmzc";
+var control = "block-control--DUVX";
+var input = "block-input-h8Dzm";
+var dot = "block-dot-mhb3S";
+var text = "block-text-Jjo2b";
+var label = "block-label-La3hW";
+var description = "block-description-TyJNT";
+var helper = "block-helper-duhtD";
+var error = "block-error-WoO57";
+var BlockRadio_module_default = {
+	group,
+	legend,
+	options,
+	horizontal,
+	radio,
+	control,
+	input,
+	dot,
+	text,
+	label,
+	description,
+	helper,
+	error
+};
+//#endregion
+export { control, BlockRadio_module_default as default, description, dot, error, group, helper, horizontal, input, label, legend, options, radio, text };
+
+//# sourceMappingURL=BlockRadio.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRadio.module.js","names":[],"sources":["../../../../src/components/forms/BlockRadio/BlockRadio.module.css"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-2);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.legend {\n  margin-bottom: var(--block-space-2);\n  padding: 0;\n  font-size: var(--block-font-size-sm);\n  font-weight: var(--block-font-weight-medium);\n  color: var(--block-text);\n}\n\n.options {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-2);\n}\n\n.horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--block-space-2) var(--block-space-4);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--block-space-2);\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\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}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* Octagonal pixel \"circle\". */\n.dot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: var(--block-border);\n  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);\n  pointer-events: none;\n}\n\n.dot::before {\n  content: \"\";\n  position: absolute;\n  inset: 2px;\n  background-color: var(--block-slot);\n  clip-path: inherit;\n}\n\n.dot::after {\n  content: \"\";\n  position: absolute;\n  inset: 6px;\n  background-color: var(--block-primary);\n  opacity: 0;\n}\n\n.input:checked + .dot::after {\n  opacity: 1;\n}\n\n.input:hover:not(:disabled) + .dot {\n  filter: brightness(1.3);\n}\n\n.input:focus-visible + .dot {\n  background-color: var(--block-focus);\n}\n\n.radio[data-invalid] .dot,\n.input[aria-invalid=\"true\"] + .dot {\n  background-color: var(--block-redstone-light);\n}\n\n.input:disabled + .dot {\n  opacity: 0.5;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-top: 1px;\n}\n\n.label {\n  font-size: var(--block-font-size-md);\n  cursor: pointer;\n}\n\n.radio[data-disabled] .label {\n  color: var(--block-text-muted);\n  cursor: not-allowed;\n}\n\n.description,\n.helper {\n  margin: 0;\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.error {\n  margin: 0;\n  font-size: var(--block-font-size-xs);\n  font-weight: var(--block-font-weight-bold);\n  color: var(--block-redstone-light);\n}\n"],"mappings":""}

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

@@ -0,0 +1,29 @@
+import type { FieldsetHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+export interface BlockRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: ReactNode;
+    description?: ReactNode;
+    value: string;
+}
+export interface BlockRadioOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface BlockRadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+    /** Group label rendered as the `<legend>`. */
+    label?: ReactNode;
+    /** Shared `name` for the native radios. Generated when omitted. */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    options?: BlockRadioOption[];
+    /** @default "vertical" */
+    orientation?: "horizontal" | "vertical";
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    children?: ReactNode;
+}
+//# sourceMappingURL=BlockRadio.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRadio.types.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockRadio/BlockRadio.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,cAAc,CAC5B;IACC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

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

@@ -0,0 +1,11 @@
+export interface RadioGroupContextValue {
+    name: string;
+    value: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    onSelect: (value: string) => void;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare function useRadioGroup(): RadioGroupContextValue | null;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/BlockRadio/context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,iBAAiB,wDAAqD,CAAC;AAEpF,wBAAgB,aAAa,IAAI,sBAAsB,GAAG,IAAI,CAE7D"}

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":""}