@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

package/dist/components/radio-button/RadioButton.js

@@ -1,14 +1,43 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import * as n from "@radix-ui/react-radio-group";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-button/RadioButton.tsx
-var r = e(n.Item, {
-	base: /* @__PURE__ */ "items-center.appearance-none.bg-transparent.border.border-grey-800.rounded-full.text-white.cursor-pointer.flex.justify-center.p-0.size-4.transition-all.duration-50.ease-out.focus:outline-2.focus:outline-offset-1.focus:outline-primary-800.focus:outline-solid.data-[state=checked]:bg-primary-800.data-[state=checked]:border-primary-800.disabled:bg-grey-200.disabled:border-grey-800.disabled:cursor-not-allowed.disabled:text-grey-800.disabled:data-[state=checked]:bg-grey-800.disabled:data-[state=checked]:border-grey-800".split("."),
+var StyledRadioButton = styled(RadioGroup.Item, {
+	base: [
+		"items-center",
+		"appearance-none",
+		"bg-transparent",
+		"border",
+		"border-grey-800",
+		"rounded-full",
+		"text-white",
+		"cursor-pointer",
+		"flex",
+		"justify-center",
+		"p-0",
+		"size-4",
+		"transition-all",
+		"duration-50",
+		"ease-out",
+		"focus:outline-2",
+		"focus:outline-offset-1",
+		"focus:outline-primary-800",
+		"focus:outline-solid",
+		"data-[state=checked]:bg-primary-800",
+		"data-[state=checked]:border-primary-800",
+		"disabled:bg-grey-200",
+		"disabled:border-grey-800",
+		"disabled:cursor-not-allowed",
+		"disabled:text-grey-800",
+		"disabled:data-[state=checked]:bg-grey-800",
+		"disabled:data-[state=checked]:border-grey-800"
+	],
 	variants: { size: {
 		md: ["size-4"],
 		lg: ["-mt-1", "size-6"]
 	} }
-}, { enabledResponsiveVariants: !0 }), i = e(n.Indicator, {
+}, { enabledResponsiveVariants: true });
+var StyledIndicator = styled(RadioGroup.Indicator, {
 	base: [
 		"size-1.5",
 		"rounded-full",
@@ -19,12 +48,15 @@ var r = e(n.Item, {
 		md: ["size-1.5"],
 		lg: ["size-3"]
 	} }
-}, { enabledResponsiveVariants: !0 }), a = ({ size: e, ...n }) => /* @__PURE__ */ t.createElement(r, {
-	...n,
-	size: e
-}, /* @__PURE__ */ t.createElement(i, { size: e }));
-a.displayName = "RadioButton";
+}, { enabledResponsiveVariants: true });
+var RadioButton = ({ size, ...props }) => {
+	return /* @__PURE__ */ React$1.createElement(StyledRadioButton, {
+		...props,
+		size
+	}, /* @__PURE__ */ React$1.createElement(StyledIndicator, { size }));
+};
+RadioButton.displayName = "RadioButton";
 //#endregion
-export { a as RadioButton };
+export { RadioButton };
 
 //# sourceMappingURL=RadioButton.js.map

package/dist/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;AAMA,IAAM,IAAoB,EACxB,EAAW,MACX;CACE,MAAM,miBA4BL;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS,SAAS;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EACtB,EAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;EAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAWY,KAAe,EAAE,SAAM,GAAG,QAEnC,kBAAA,cAAC,GAAD;CAAmB,GAAI;CAAa;CAEhB,EADlB,kBAAA,cAAC,GAAD,EAAuB,SAAQ,CAAA,CACb;AAIxB,EAAY,cAAc"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    as?: never\n  } & {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n  return (\n    <StyledRadioButton {...props} size={size}>\n      <StyledIndicator size={size} />\n    </StyledRadioButton>\n  )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;AAMA,IAAM,oBAAoB,OACxB,WAAW,MACX;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS,SAAS;EACxB,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;EAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,SAAS;EACf,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAWD,IAAa,eAAe,EAAE,MAAM,GAAG,YAA8B;AACnE,QACE,wBAAA,cAAC,mBAAD;EAAmB,GAAI;EAAa;EAEhB,EADlB,wBAAA,cAAC,iBAAD,EAAuB,MAAQ,CAAA,CACb;;AAIxB,YAAY,cAAc"}

package/dist/components/radio-button/RadioButtonGroup.js

@@ -1,15 +1,15 @@
-import { styled as e } from "../../styled.js";
-import * as t from "@radix-ui/react-radio-group";
+import { styled } from "../../styled.js";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-button/RadioButtonGroup.tsx
-var n = e(t.Root, {
+var RadioButtonGroup = styled(RadioGroup.Root, {
 	base: ["flex", "flex-wrap"],
 	variants: { direction: {
 		row: ["*:not-last:mr-8", "flex-row"],
 		column: ["flex-col"]
 	} }
 });
-n.displayName = "RadioButtonGroup";
+RadioButtonGroup.displayName = "RadioButtonGroup";
 //#endregion
-export { n as RadioButtonGroup };
+export { RadioButtonGroup };
 
 //# sourceMappingURL=RadioButtonGroup.js.map

package/dist/components/radio-button/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","names":[],"sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '~/styled'\n\nexport const RadioButtonGroup = styled(RadioGroup.Root, {\n  base: ['flex', 'flex-wrap'],\n  variants: {\n    direction: {\n      row: ['*:not-last:mr-8', 'flex-row'],\n      column: ['flex-col']\n    }\n  }\n})\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"mappings":";;;AAIA,IAAa,IAAmB,EAAO,EAAW,MAAM;CACtD,MAAM,CAAC,QAAQ,YAAY;CAC3B,UAAU,EACR,WAAW;EACT,KAAK,CAAC,mBAAmB,WAAW;EACpC,QAAQ,CAAC,WAAW;EACrB,EACF;CACF,CAAC;AAEF,EAAiB,cAAc"}
+{"version":3,"file":"RadioButtonGroup.js","names":[],"sources":["../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\n\nimport { styled } from '~/styled'\n\nexport const RadioButtonGroup = styled(RadioGroup.Root, {\n  base: ['flex', 'flex-wrap'],\n  variants: {\n    direction: {\n      row: ['*:not-last:mr-8', 'flex-row'],\n      column: ['flex-col']\n    }\n  }\n})\n\nRadioButtonGroup.displayName = 'RadioButtonGroup'\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,WAAW,MAAM;CACtD,MAAM,CAAC,QAAQ,YAAY;CAC3B,UAAU,EACR,WAAW;EACT,KAAK,CAAC,mBAAmB,WAAW;EACpC,QAAQ,CAAC,WAAW;EACrB,EACF;CACF,CAAC;AAEF,iBAAiB,cAAc"}

package/dist/components/radio-button-field/RadioButtonField.js

@@ -1,44 +1,50 @@
-import { styled as e } from "../../styled.js";
-import { InlineMessage as t } from "../inline-message/InlineMessage.js";
-import { Label as n } from "../label/Label.js";
-import { Description as r } from "../field-wrapper/FieldDescription.js";
-import { useFieldError as i } from "../form/useFieldError.js";
-import { RadioButtonGroup as a } from "../radio-button/RadioButtonGroup.js";
-import { RadioField as o } from "./RadioField.js";
-import * as s from "react";
-import { useController as c, useFormContext as l } from "react-hook-form";
+import { styled } from "../../styled.js";
+import { InlineMessage } from "../inline-message/InlineMessage.js";
+import { Label } from "../label/Label.js";
+import { Description } from "../field-wrapper/FieldDescription.js";
+import { useFieldError } from "../form/useFieldError.js";
+import { RadioButtonGroup } from "../radio-button/RadioButtonGroup.js";
+import { RadioField } from "./RadioField.js";
+import * as React$1 from "react";
+import { useController, useFormContext } from "react-hook-form";
 //#region src/components/radio-button-field/RadioButtonField.tsx
-var u = e("fieldset", { base: [
+var Fieldset = styled("fieldset", { base: [
 	"border-0",
 	"p-0",
 	"m-0",
 	"min-w-0"
-] }), d = ({ children: e, className: o, direction: d = "column", defaultValue: f, value: p, description: m, label: h, name: g, validation: _, onValueChange: v, ...y }) => {
-	let { control: b } = l(), { field: { ref: x, onChange: S, value: C } } = c({
-		name: g,
-		control: b,
-		rules: _,
-		defaultValue: f
-	}), { error: w } = i(g);
-	return s.useEffect(() => {
-		p !== void 0 && S(p);
-	}, [p]), /* @__PURE__ */ s.createElement(u, { className: o }, /* @__PURE__ */ s.createElement(n, {
+] });
+var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...remainingProps }) => {
+	const { control } = useFormContext();
+	const { field: { ref, onChange, value: innerValue } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue
+	});
+	const { error } = useFieldError(name);
+	React$1.useEffect(() => {
+		if (typeof value !== "undefined") onChange(value);
+	}, [value]);
+	return /* @__PURE__ */ React$1.createElement(Fieldset, { className }, /* @__PURE__ */ React$1.createElement(Label, {
 		as: "legend",
-		required: !!_?.required,
+		required: Boolean(validation?.required),
 		className: "mb-3 p-0"
-	}, h), m && /* @__PURE__ */ s.createElement(r, { className: "mb-3" }, m), /* @__PURE__ */ s.createElement(a, {
-		ref: x,
-		direction: d,
-		defaultValue: f,
-		onValueChange: (e) => {
-			S(e), v?.(e);
+	}, label), description && /* @__PURE__ */ React$1.createElement(Description, { className: "mb-3" }, description), /* @__PURE__ */ React$1.createElement(RadioButtonGroup, {
+		ref,
+		direction,
+		defaultValue,
+		onValueChange: (newValue) => {
+			onChange(newValue);
+			onValueChange?.(newValue);
 		},
-		value: C,
-		...y
-	}, e), w && /* @__PURE__ */ s.createElement(t, { className: "mt-2" }, w));
-}, f = Object.assign(d, { Item: o });
-d.displayName = "RadioButtonField";
+		value: innerValue,
+		...remainingProps
+	}, children), error && /* @__PURE__ */ React$1.createElement(InlineMessage, { className: "mt-2" }, error));
+};
+var RadioButtonField = Object.assign(RadioButtonFieldComponent, { Item: RadioField });
+RadioButtonFieldComponent.displayName = "RadioButtonField";
 //#endregion
-export { f as RadioButtonField };
+export { RadioButtonField };
 
 //# sourceMappingURL=RadioButtonField.js.map

package/dist/components/radio-button-field/RadioButtonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAW,EAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;CAAU,EAC5C,CAAC,EAKI,KAA6B,EACjC,aACA,cACA,eAAY,UACZ,iBACA,UACA,gBACA,UACA,SACA,eACA,kBACA,GAAG,QACwB;CAC3B,IAAM,EAAE,eAAY,GAAgB,EAC9B,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,QAC7B,EAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC,EACI,EAAE,aAAU,EAAc,EAAK;AAOrC,QALA,EAAM,gBAAgB;AAEpB,EAAW,MAAU,UAAa,EAAS,EAAM;IAChD,CAAC,EAAM,CAAC,EAGT,kBAAA,cAAC,GAAD,EAAqB,cA2BV,EA1BT,kBAAA,cAAC,GAAD;EACE,IAAG;EACH,UAAU,EAAQ,GAAY;EAC9B,WAAU;EAGJ,EADL,EACK,EACP,KACC,kBAAA,cAAC,GAAD,EAAkB,WAAU,QAAuC,EAA/B,EAA+B,EAGrE,kBAAA,cAAC,GAAD;EACO;EACM;EACG;EACd,gBAAgB,MAAa;AAE3B,GADA,EAAS,EAAS,EAClB,IAAgB,EAAS;;EAE3B,OAAO;EACP,GAAI;EAGa,EADhB,EACgB,EAElB,KAAS,kBAAA,cAAC,GAAD,EAAe,WAAU,QAA8B,EAAtB,EAAsB,CACxD;GAIF,IAAmB,OAAO,OAAO,GAA2B,EACvE,MAAM,GACP,CAAC;AAEF,EAA0B,cAAc"}
+{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButtonGroup } from '~/components/radio-button/RadioButtonGroup'\nimport { styled } from '~/styled'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n  Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;CAAU,EAC5C,CAAC;AAKF,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;AAErC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,UAAD,EAAqB,WA2BV,EA1BT,wBAAA,cAAC,OAAD;EACE,IAAG;EACH,UAAU,QAAQ,YAAY,SAAS;EACvC,WAAU;EAGJ,EADL,MACK,EACP,eACC,wBAAA,cAAC,aAAD,EAAkB,WAAU,QAAuC,EAA/B,YAA+B,EAGrE,wBAAA,cAAC,kBAAD;EACO;EACM;EACG;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,GAAI;EAGa,EADhB,SACgB,EAElB,SAAS,wBAAA,cAAC,eAAD,EAAe,WAAU,QAA8B,EAAtB,MAAsB,CACxD;;AAIf,IAAa,mBAAmB,OAAO,OAAO,2BAA2B,EACvE,MAAM,YACP,CAAC;AAEF,0BAA0B,cAAc"}

package/dist/components/radio-button-field/RadioField.js

@@ -1,16 +1,16 @@
-import { RadioButton as e } from "../radio-button/RadioButton.js";
-import { InlineFieldWrapper as t } from "../field-wrapper/InlineFieldWrapper.js";
-import * as n from "react";
+import { RadioButton } from "../radio-button/RadioButton.js";
+import { InlineFieldWrapper } from "../field-wrapper/InlineFieldWrapper.js";
+import * as React$1 from "react";
 //#region src/components/radio-button-field/RadioField.tsx
-var r = ({ className: r, label: i, value: a, ...o }) => /* @__PURE__ */ n.createElement(t, {
-	className: r,
-	label: i
-}, /* @__PURE__ */ n.createElement(e, {
-	value: a,
-	...o
+var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(InlineFieldWrapper, {
+	className,
+	label
+}, /* @__PURE__ */ React$1.createElement(RadioButton, {
+	value,
+	...remainingProps
 }));
-r.displayName = "RadioField";
+RadioField.displayName = "RadioField";
 //#endregion
-export { r as RadioField };
+export { RadioField };
 
 //# sourceMappingURL=RadioField.js.map

package/dist/components/radio-button-field/RadioField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { ValidationOptions } from '~/components/form/validation'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;AAcA,IAAa,KAAc,EACzB,cACA,UACA,UACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CAA+B;CAAkB;CAE5B,EADnB,kBAAA,cAAC,GAAD;CAAoB;CAAO,GAAI;CAAkB,CAAA,CAC9B;AAGvB,EAAW,cAAc"}
+{"version":3,"file":"RadioField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioField.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { ValidationOptions } from '~/components/form/validation'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\ntype RadioFieldProps = {\n  className?: string\n  defaultChecked?: boolean\n  error?: string\n  label: string\n  validation?: ValidationOptions\n} & React.ComponentProps<typeof RadioButton>\n\nexport const RadioField = ({\n  className,\n  label,\n  value,\n  ...remainingProps\n}: RadioFieldProps) => (\n  <InlineFieldWrapper className={className} label={label}>\n    <RadioButton value={value} {...remainingProps} />\n  </InlineFieldWrapper>\n)\n\nRadioField.displayName = 'RadioField'\n"],"mappings":";;;;AAcA,IAAa,cAAc,EACzB,WACA,OACA,OACA,GAAG,qBAEH,wBAAA,cAAC,oBAAD;CAA+B;CAAkB;CAE5B,EADnB,wBAAA,cAAC,aAAD;CAAoB;CAAO,GAAI;CAAkB,CAAA,CAC9B;AAGvB,WAAW,cAAc"}

package/dist/components/radio-card/RadioCard.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import * as n from "@radix-ui/react-radio-group";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-card/RadioCard.tsx
-var r = e(n.Item, {
+var StyledRadioCard = styled(RadioGroup.Item, {
 	base: [
 		"items-center",
 		"bg-white",
@@ -31,7 +31,8 @@ var r = e(n.Item, {
 			false: ["w-max"]
 		}
 	}
-}), i = e("div", {
+});
+var RadioButton = styled("div", {
 	base: [
 		"items-center",
 		"appearance-none",
@@ -61,29 +62,31 @@ var r = e(n.Item, {
 		}
 	},
 	compoundVariants: [{
-		containerIsFullWidth: !0,
+		containerIsFullWidth: true,
 		align: "right",
 		class: ["ml-auto"]
 	}, {
-		containerIsFullWidth: !1,
+		containerIsFullWidth: false,
 		align: "right",
 		class: ["ml-4"]
 	}]
-}), a = e(n.Indicator, { base: [
+});
+var Indicator = styled(RadioGroup.Indicator, { base: [
 	"bg-white",
 	"rounded-full",
 	"absolute",
 	"size-1.5"
-] }), o = ({ children: e, isFullWidth: n = !1, size: o = "md", align: s = "left", ...c }) => /* @__PURE__ */ t.createElement(r, {
-	...c,
-	align: s,
-	isFullWidth: n,
-	size: o
-}, /* @__PURE__ */ t.createElement(i, {
-	align: s,
-	containerIsFullWidth: n
-}, /* @__PURE__ */ t.createElement(a, null)), /* @__PURE__ */ t.createElement("div", null, e));
+] });
+var RadioCard = ({ children, isFullWidth = false, size = "md", align = "left", ...rest }) => /* @__PURE__ */ React$1.createElement(StyledRadioCard, {
+	...rest,
+	align,
+	isFullWidth,
+	size
+}, /* @__PURE__ */ React$1.createElement(RadioButton, {
+	align,
+	containerIsFullWidth: isFullWidth
+}, /* @__PURE__ */ React$1.createElement(Indicator, null)), /* @__PURE__ */ React$1.createElement("div", null, children));
 //#endregion
-export { o as RadioCard };
+export { RadioCard };
 
 //# sourceMappingURL=RadioCard.js.map

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;AAKA,IAAM,IAAkB,EAAO,EAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,mBAAmB;GAC5B;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa;GACX,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACF,CAAC,EAEI,IAAc,EAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,sBAAsB;GACpB,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,OAAO;GACL,MAAM,CAAC,OAAO;GACd,OAAO,EAAE;GACV;EACF;CACD,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,UAAU;EACnB,EACD;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,OAAO;EAChB,CACF;CACF,CAAC,EAEI,IAAY,EAAO,EAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC,EAIW,KAAa,EACxB,aACA,iBAAc,IACd,UAAO,MACP,WAAQ,QACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACE,GAAI;CACG;CACM;CACP;CAMU,EAJhB,kBAAA,cAAC,GAAD;CAAoB;CAAO,sBAAsB;CAEnC,EADZ,kBAAA,cAAC,GAAA,KAAY,CACD,EACd,kBAAA,cAAC,OAAA,MAAK,EAAe,CACL"}
+{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,mBAAmB;GAC5B;EACD,MAAM;GACJ,IAAI,CAAC,QAAQ,OAAO;GACpB,IAAI,CAAC,QAAQ,OAAO;GACrB;EACD,aAAa;GACX,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,sBAAsB;GACpB,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,OAAO;GACL,MAAM,CAAC,OAAO;GACd,OAAO,EAAE;GACV;EACF;CACD,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,UAAU;EACnB,EACD;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,OAAO;EAChB,CACF;CACF,CAAC;AAEF,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;CAAW,EAC3D,CAAC;AAIF,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,wBAAA,cAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;CAMU,EAJhB,wBAAA,cAAC,aAAD;CAAoB;CAAO,sBAAsB;CAEnC,EADZ,wBAAA,cAAC,WAAA,KAAY,CACD,EACd,wBAAA,cAAC,OAAA,MAAK,SAAe,CACL"}

package/dist/components/radio-card/RadioCardGroup.js

@@ -1,14 +1,17 @@
-import { RadioCard as e } from "./RadioCard.js";
-import t from "clsx";
-import * as n from "react";
-import * as r from "@radix-ui/react-radio-group";
+import { RadioCard } from "./RadioCard.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-card/RadioCardGroup.tsx
-var i = ({ className: i, children: a, size: o, isFullWidth: s, align: c, ...l }) => /* @__PURE__ */ n.createElement(r.Root, l, /* @__PURE__ */ n.createElement("div", { className: t("flex", "flex-row", "flex-wrap", "gap-3", i) }, n.Children.map(a, (t) => n.isValidElement(t) && t?.type === e ? n.cloneElement(t, {
-	size: o,
-	isFullWidth: s,
-	align: c
-}) : t)));
+var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ React$1.createElement(RadioGroup.Root, rest, /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", "flex-row", "flex-wrap", "gap-3", className) }, React$1.Children.map(children, (child) => {
+	if (React$1.isValidElement(child) && child?.type === RadioCard) return React$1.cloneElement(child, {
+		size,
+		isFullWidth,
+		align
+	});
+	return child;
+})));
 //#endregion
-export { i as RadioCardGroup };
+export { RadioCardGroup };
 
 //# sourceMappingURL=RadioCardGroup.js.map

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={clsx('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;AAaA,IAAa,KAAkB,EAC7B,cACA,aACA,SACA,gBACA,UACA,GAAG,QAEH,kBAAA,cAAC,EAAW,MAAS,GACnB,kBAAA,cAAC,OAAD,EAAK,WAAW,EAAK,QAAQ,YAAY,aAAa,SAAS,EAAU,EAUnE,EATH,EAAM,SAAS,IAAI,IAAW,MACzB,EAAM,eAAe,EAAM,IAAI,GAAO,SAAS,IAC1C,EAAM,aACX,GACA;CAAE;CAAM;CAAa;CAAO,CAC7B,GAEI,EACP,CACE,CACU"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={clsx('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,wBAAA,cAAC,WAAW,MAAS,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAW,KAAK,QAAQ,YAAY,aAAa,SAAS,UAAU,EAUnE,EATH,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,KAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;EAAE;EAAM;EAAa;EAAO,CAC7B;AAEH,QAAO;EACP,CACE,CACU"}

package/dist/components/search-field/SearchField.js

@@ -1,33 +1,37 @@
-import { useFieldError as e } from "../form/useFieldError.js";
-import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
-import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
-import { SearchInput as r } from "../search-input/SearchInput.js";
-import * as i from "react";
-import { useFormContext as a } from "react-hook-form";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { SearchInput } from "../search-input/SearchInput.js";
+import * as React$1 from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/components/search-field/SearchField.tsx
-var o = ({ className: o, hideLabel: s, label: c, name: l, validation: u, prompt: d, description: f, appearance: p, ...m }) => {
-	let { register: h } = a(), g = n(), { error: _ } = e(l), v = u ? h(u) : h, y = g?.appearance || p;
-	return /* @__PURE__ */ i.createElement(t, {
-		className: o,
-		description: f,
-		error: _,
-		fieldId: l,
-		hideLabel: s,
-		label: c,
-		prompt: d,
-		required: !!u?.required,
-		appearance: y
-	}, /* @__PURE__ */ i.createElement(r, {
-		id: l,
-		name: l,
-		ref: v,
-		appearance: y,
-		..._ && { state: "error" },
-		...m
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+	const { register } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const ref = validation ? register(validation) : register;
+	const formAppearance = context?.appearance || appearance;
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance: formAppearance
+	}, /* @__PURE__ */ React$1.createElement(SearchInput, {
+		id: name,
+		name,
+		ref,
+		appearance: formAppearance,
+		...error && { state: "error" },
+		...remainingProps
 	}));
 };
-o.displayName = "SearchField";
+SearchField.displayName = "SearchField";
 //#endregion
-export { o as SearchField };
+export { SearchField };
 
 //# sourceMappingURL=SearchField.js.map

package/dist/components/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,KAAe,EAC1B,cACA,cACA,UACA,SACA,eACA,WACA,gBACA,eACA,GAAG,QACmB;CACtB,IAAM,EAAE,gBAAa,GAAgB,EAC/B,IAAU,GAAsB,EAChC,EAAE,aAAU,EAAc,EAAK,EAE/B,IAAM,IAAa,EAAS,EAAW,GAAG,GAC1C,IAAiB,GAAS,cAAc;AAE9C,QACE,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EAUC,EARb,kBAAA,cAAC,GAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,KAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,EAAY,cAAc"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n  SearchInput,\n  SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAUC,EARb,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}

package/dist/components/search-input/SearchInput.js

@@ -1,16 +1,19 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { useCallbackRef as r } from "../../utilities/hooks/useCallbackRef.js";
-import { InputBackground as i, InputText as a } from "../input/Input.js";
-import { getFieldIconSize as o } from "../../utilities/style/get-icon-size.js";
-import s from "clsx";
-import * as c from "react";
-import { Close as l, Search as u } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
+import { InputBackground, InputText } from "../input/Input.js";
+import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
-var d = /* @__PURE__ */ function(e) {
-	return e.SEARCH = "SEARCH", e.CLEAR = "CLEAR", e;
-}(d || {}), f = e(t, {
+var INPUT_ICON = /* @__PURE__ */ function(INPUT_ICON) {
+	INPUT_ICON["SEARCH"] = "SEARCH";
+	INPUT_ICON["CLEAR"] = "CLEAR";
+	return INPUT_ICON;
+}(INPUT_ICON || {});
+var StyledIcon = styled(Icon, {
 	base: [
 		"text-grey-700",
 		"absolute",
@@ -21,50 +24,64 @@ var d = /* @__PURE__ */ function(e) {
 		md: ["right-2.5", "size-5"],
 		lg: ["right-2.5", "size-5"]
 	} }
-}), p = c.forwardRef(({ size: e = "md", appearance: p = "standard", className: m, value: h, defaultValue: g = "", onValueChange: _, clearText: v = "Clear", onChange: y, ...b }, x) => {
-	let [S, C] = r(), [w, T] = c.useState(g), [E, D] = c.useState(g ? d.CLEAR : d.SEARCH);
-	c.useEffect(() => {
-		h !== void 0 && (T(h), D(h ? d.CLEAR : d.SEARCH));
-	}, [h]);
-	let O = c.useMemo(() => o(e), [e]);
-	c.useImperativeHandle(x, () => S.current);
-	let k = () => {
-		let e = S.current;
-		if (!e) return;
-		(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call?.(e, "");
-		let t = new Event("input", { bubbles: !0 });
-		e.dispatchEvent(t), e.focus(), _?.("");
-	}, A = (e) => {
-		y?.(e);
-		let t = e.target.value;
-		T(t), _?.(t), D(t ? d.CLEAR : d.SEARCH);
-	}, j = () => E === d.SEARCH ? /* @__PURE__ */ c.createElement(f, {
-		is: u,
-		size: e,
-		className: s(e == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
-	}) : /* @__PURE__ */ c.createElement(n, {
-		label: v,
-		theme: "neutral",
-		size: O,
-		onClick: k,
-		className: "absolute top-1/2 right-1 -translate-y-1/2"
-	}, /* @__PURE__ */ c.createElement(t, { is: l }));
-	return /* @__PURE__ */ c.createElement(i, {
-		size: e,
-		appearance: p,
-		className: s("relative", "w-auto", m)
-	}, /* @__PURE__ */ c.createElement(a, {
-		ref: C,
-		size: e,
+});
+var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+	const [inputElRef, setInputElRef] = useCallbackRef();
+	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
+	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	React$1.useEffect(() => {
+		if (typeof value === "undefined") return;
+		setInnerValue(value);
+		setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	}, [value]);
+	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	React$1.useImperativeHandle(ref, () => inputElRef.current);
+	const handleClear = () => {
+		const inputEl = inputElRef.current;
+		if (!inputEl) return;
+		(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call?.(inputEl, "");
+		const ev2 = new Event("input", { bubbles: true });
+		inputEl.dispatchEvent(ev2);
+		inputEl.focus();
+		onValueChange?.("");
+	};
+	const handleOnChange = (event) => {
+		onChange?.(event);
+		const newValue = event.target.value;
+		setInnerValue(newValue);
+		onValueChange?.(newValue);
+		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	};
+	const getIcon = () => {
+		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ React$1.createElement(StyledIcon, {
+			is: Search,
+			size,
+			className: clsx(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
+		});
+		return /* @__PURE__ */ React$1.createElement(ActionIcon, {
+			label: clearText,
+			theme: "neutral",
+			size: iconSize,
+			onClick: handleClear,
+			className: "absolute top-1/2 right-1 -translate-y-1/2"
+		}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close }));
+	};
+	return /* @__PURE__ */ React$1.createElement(InputBackground, {
+		size,
+		appearance,
+		className: clsx("relative", "w-auto", className)
+	}, /* @__PURE__ */ React$1.createElement(InputText, {
+		ref: setInputElRef,
+		size,
 		type: "search",
-		...b,
-		value: w,
-		onChange: A,
-		className: s(e === "sm" ? "pr-8" : "pr-10", "[-webkit-search-decoration:hidden]", "[-webkit-search-cancel-button:hidden]", "[-webkit-search-results-button:hidden]")
-	}), j());
+		...remainingProps,
+		value: innerValue,
+		onChange: handleOnChange,
+		className: clsx(size === "sm" ? "pr-8" : "pr-10", "[-webkit-search-decoration:hidden]", "[-webkit-search-cancel-button:hidden]", "[-webkit-search-results-button:hidden]")
+	}), getIcon());
 });
-p.displayName = "SearchInput";
+SearchInput.displayName = "SearchInput";
 //#endregion
-export { p as SearchInput };
+export { SearchInput };
 
 //# sourceMappingURL=SearchInput.js.map