@atom-learning/components 6.5.4 → 6.5.5

package/dist/components/slider/Slider.js

@@ -1,11 +1,11 @@
-import { styled as e } from "../../styled.js";
-import { CSSWrapper as t } from "../../utilities/css-wrapper/CSSWrapper.js";
-import { SliderSteps as n } from "./SliderSteps.js";
-import { SliderValue as r } from "./SliderValue.js";
-import * as i from "react";
-import { Range as a, Root as o, Thumb as s, Track as c } from "@radix-ui/react-slider";
+import { styled } from "../../styled.js";
+import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
+import { SliderSteps } from "./SliderSteps.js";
+import { SliderValue } from "./SliderValue.js";
+import * as React$1 from "react";
+import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
 //#region src/components/slider/Slider.tsx
-var l = e(c, {
+var StyledTrack = styled(Track, {
 	base: [
 		"rounded-full",
 		"grow",
@@ -17,7 +17,8 @@ var l = e(c, {
 		light: ["bg-white"],
 		tonal: ["bg-grey-600"]
 	} }
-}), u = e(o, { base: [
+});
+var StyledSlider = styled(Root, { base: [
 	"items-center",
 	"flex",
 	"relative",
@@ -29,14 +30,16 @@ var l = e(c, {
 	"data-[orientation=vertical]:w-4",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
-] }), d = e(a, { base: [
+] });
+var StyledRange = styled(Range, { base: [
 	"bg-primary-800",
 	"rounded-full",
 	"h-full",
 	"absolute",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
-] }), f = e(s, { base: [
+] });
+var StyledThumb = styled(Thumb, { base: [
 	"bg-primary-900",
 	"rounded-full",
 	"block",
@@ -48,19 +51,22 @@ var l = e(c, {
 	"focus:outline-solid",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
-] }), p = i.forwardRef(({ value: e, defaultValue: n, min: r = 0, max: a = 100, theme: o = "tonal", className: s, children: c, ...p }, m) => {
-	let h = e || n;
-	return /* @__PURE__ */ i.createElement(t, { className: s }, /* @__PURE__ */ i.createElement(u, {
-		defaultValue: n,
-		value: e,
-		min: r,
-		max: a,
-		ref: m,
-		...p
-	}, /* @__PURE__ */ i.createElement(l, { theme: o }, /* @__PURE__ */ i.createElement(d, null)), h?.length && h.map((e, t) => /* @__PURE__ */ i.createElement(f, { key: `thumb${t}` }))), c);
+] });
+var Slider = React$1.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...remainingProps }, ref) => {
+	const values = value || defaultValue;
+	return /* @__PURE__ */ React$1.createElement(CSSWrapper, { className }, /* @__PURE__ */ React$1.createElement(StyledSlider, {
+		defaultValue,
+		value,
+		min,
+		max,
+		ref,
+		...remainingProps
+	}, /* @__PURE__ */ React$1.createElement(StyledTrack, { theme }, /* @__PURE__ */ React$1.createElement(StyledRange, null)), values?.length && values.map((_, i) => /* @__PURE__ */ React$1.createElement(StyledThumb, { key: `thumb${i}` }))), children);
 });
-p.Value = r, p.Steps = n, p.displayName = "Slider";
+Slider.Value = SliderValue;
+Slider.Steps = SliderSteps;
+Slider.displayName = "Slider";
 //#endregion
-export { p as Slider };
+export { Slider };
 
 //# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;AASA,IAAM,IAAc,EAAO,GAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC,EAEI,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAYW,IAAS,EAAM,YAExB,EACE,UACA,iBACA,SAAM,GACN,SAAM,KACN,WAAQ,SACR,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAS,KAAS;AACxB,QACE,kBAAA,cAAC,GAAD,EAAuB,cAgBV,EAfX,kBAAA,cAAC,GAAD;EACgB;EACP;EACF;EACA;EACA;EACL,GAAI;EAOS,EALb,kBAAA,cAAC,GAAD,EAAoB,UAEN,EADZ,kBAAA,cAAC,GAAA,KAAc,CACH,EACb,GAAQ,UACP,EAAO,KAAK,GAAG,MAAM,kBAAA,cAAC,GAAD,EAAa,KAAK,QAAQ,KAAO,CAAA,CAAC,CAC5C,EACd,EACU;EAGlB;AAED,EAAO,QAAQ,GACf,EAAO,QAAQ,GAEf,EAAO,cAAc"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;AASA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAYF,IAAa,SAAS,QAAM,YAExB,EACE,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,kBAEL,QACG;CACH,MAAM,SAAS,SAAS;AACxB,QACE,wBAAA,cAAC,YAAD,EAAuB,WAgBV,EAfX,wBAAA,cAAC,cAAD;EACgB;EACP;EACF;EACA;EACA;EACL,GAAI;EAOS,EALb,wBAAA,cAAC,aAAD,EAAoB,OAEN,EADZ,wBAAA,cAAC,aAAA,KAAc,CACH,EACb,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,wBAAA,cAAC,aAAD,EAAa,KAAK,QAAQ,KAAO,CAAA,CAAC,CAC5C,EACd,SACU;EAGlB;AAED,OAAO,QAAQ;AACf,OAAO,QAAQ;AAEf,OAAO,cAAc"}

package/dist/components/slider/SliderSteps.js

@@ -1,19 +1,28 @@
-import { Text as e } from "../text/Text.js";
-import * as t from "react";
+import { Text } from "../text/Text.js";
+import * as React$1 from "react";
 //#region src/components/slider/SliderSteps.tsx
-var n = (e, t, n) => (e - t) / (n - t) * 100, r = (e, t, r) => {
-	let i = n(e, t, r);
-	return i <= 10 ? 0 : i >= 90 ? 100 : 50;
-}, i = ({ min: i, max: a, steps: o = [] }) => o.length === 0 ? null : /* @__PURE__ */ t.createElement("div", { className: "relative mt-3 h-3 w-full" }, o.map((o) => /* @__PURE__ */ t.createElement(e, {
-	as: "span",
-	key: o.value,
-	style: {
-		"--left": `${n(o.value, i, a)}%`,
-		"--translate-x": `-${r(o.value, i, a)}%`
-	},
-	className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)"
-}, o.label)));
+var getPercentValue = (value, min, max) => {
+	return (value - min) / (max - min) * 100;
+};
+var getTransformValue = (value, min, max) => {
+	const percentage = getPercentValue(value, min, max);
+	if (percentage <= 10) return 0;
+	if (percentage >= 90) return 100;
+	return 50;
+};
+var SliderSteps = ({ min, max, steps = [] }) => {
+	if (steps.length === 0) return null;
+	return /* @__PURE__ */ React$1.createElement("div", { className: "relative mt-3 h-3 w-full" }, steps.map((step) => /* @__PURE__ */ React$1.createElement(Text, {
+		as: "span",
+		key: step.value,
+		style: {
+			"--left": `${getPercentValue(step.value, min, max)}%`,
+			"--translate-x": `-${getTransformValue(step.value, min, max)}%`
+		},
+		className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)"
+	}, step.label)));
+};
 //#endregion
-export { i as SliderSteps };
+export { SliderSteps };
 
 //# sourceMappingURL=SliderSteps.js.map

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;AAaA,IAAM,KAAmB,GAAe,GAAa,OAC1C,IAAQ,MAAQ,IAAM,KAAQ,KAGnC,KAAqB,GAAe,GAAa,MAAwB;CAC7E,IAAM,IAAa,EAAgB,GAAO,GAAK,EAAI;AAInD,QAFI,KAAc,KAAW,IACzB,KAAc,KAAW,MACtB;GAGI,KAAe,EAAE,QAAK,QAAK,WAAQ,EAAE,OAC5C,EAAM,WAAW,IAAU,OAG7B,kBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,EAAM,KAAK,MACV,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,KAAK,EAAK;CACV,OAAO;EACL,UAAU,GAAG,EAAgB,EAAK,OAAO,GAAK,EAAI,CAAC;EACnD,iBAAiB,IAAI,EAAkB,EAAK,OAAO,GAAK,EAAI,CAAC;EAC9D;CACD,WAAU;CAGL,EADJ,EAAK,MACD,CACP,CACE"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;AAC3E,SAAS,QAAQ,QAAQ,MAAM,OAAQ;;AAGzC,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,IAAI;AAEnD,KAAI,cAAc,GAAI,QAAO;AAC7B,KAAI,cAAc,GAAI,QAAO;AAC7B,QAAO;;AAGT,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,EAAE,OAAyB;AACzE,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,wBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,MAAM,KAAK,SACV,wBAAA,cAAC,MAAD;EACE,IAAG;EACH,KAAK,KAAK;EACV,OAAO;GACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,IAAI,CAAC;GACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,IAAI,CAAC;GAC9D;EACD,WAAU;EAGL,EADJ,KAAK,MACD,CACP,CACE"}

package/dist/components/slider/SliderValue.js

@@ -1,8 +1,10 @@
-import { Text as e } from "../text/Text.js";
-import * as t from "react";
+import { Text } from "../text/Text.js";
+import * as React$1 from "react";
 //#region src/components/slider/SliderValue.tsx
-var n = ({ value: n = [], outputLabel: r = (e) => `Current value is ${e}` }) => /* @__PURE__ */ t.createElement(e, { className: "text-grey-700 mt-4 w-full" }, r(n.length === 1 ? n[0] : n));
+var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => {
+	return /* @__PURE__ */ React$1.createElement(Text, { className: "text-grey-700 mt-4 w-full" }, outputLabel(value.length === 1 ? value[0] : value));
+};
 //#endregion
-export { n as SliderValue };
+export { SliderValue };
 
 //# sourceMappingURL=SliderValue.js.map

package/dist/components/slider/SliderValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;AAYA,IAAa,KAAe,EAC1B,WAAQ,EAAE,EACV,kBAAe,MAAU,oBAAoB,UAG3C,kBAAA,cAAC,GAAD,EAAM,WAAU,6BAET,EADJ,EAAY,EAAM,WAAW,IAAI,EAAM,KAAK,EAAM,CAC9C"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;AAYA,IAAa,eAAe,EAC1B,QAAQ,EAAE,EACV,eAAe,UAAU,oBAAoB,cACvB;AACtB,QACE,wBAAA,cAAC,MAAD,EAAM,WAAU,6BAET,EADJ,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,MAAM,CAC9C"}

package/dist/components/slider-field/SliderField.js

@@ -1,41 +1,43 @@
-import { FieldWrapper as e } from "../field-wrapper/FieldWrapper.js";
-import { Slider as t } from "../slider/Slider.js";
-import n from "react";
-import { useController as r, useFormContext as i } from "react-hook-form";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { Slider } from "../slider/Slider.js";
+import React from "react";
+import { useController, useFormContext } from "react-hook-form";
 //#region src/components/slider-field/SliderField.tsx
-var a = ({ className: a, hideLabel: o, label: s, name: c, defaultValue: l, value: u, validation: d, outputLabel: f, min: p = 0, max: m = 100, steps: h = [], ...g }) => {
-	let { control: _ } = i(), { field: { ref: v, onChange: y, value: b, name: x } } = r({
-		name: c,
-		control: _,
-		rules: d,
-		defaultValue: l
+var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...remainingProps }) => {
+	const { control } = useFormContext();
+	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue
 	});
-	return n.useEffect(() => {
-		u?.length && y(u);
-	}, [JSON.stringify(u)]), /* @__PURE__ */ n.createElement(e, {
-		className: a,
-		fieldId: c,
-		label: s,
-		hideLabel: o
-	}, /* @__PURE__ */ n.createElement(t, {
-		ref: v,
-		name: x,
-		onValueChange: y,
-		value: b,
-		min: p,
-		max: m,
-		...g
-	}, /* @__PURE__ */ n.createElement(t.Steps, {
-		min: p,
-		max: m,
-		steps: h
-	}), /* @__PURE__ */ n.createElement(t.Value, {
-		value: b,
-		outputLabel: f
+	React.useEffect(() => {
+		if (value?.length) onChange(value);
+	}, [JSON.stringify(value)]);
+	return /* @__PURE__ */ React.createElement(FieldWrapper, {
+		className,
+		fieldId: name,
+		label,
+		hideLabel
+	}, /* @__PURE__ */ React.createElement(Slider, {
+		ref,
+		name: innerName,
+		onValueChange: onChange,
+		value: innerValue,
+		min,
+		max,
+		...remainingProps
+	}, /* @__PURE__ */ React.createElement(Slider.Steps, {
+		min,
+		max,
+		steps
+	}), /* @__PURE__ */ React.createElement(Slider.Value, {
+		value: innerValue,
+		outputLabel
 	})));
 };
-a.displayName = "SliderField";
+SliderField.displayName = "SliderField";
 //#endregion
-export { a as SliderField };
+export { SliderField };
 
 //# sourceMappingURL=SliderField.js.map

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;AAiBA,IAAa,KAAe,EAC1B,cACA,cACA,UACA,SACA,iBACA,UACA,eACA,gBACA,SAAM,GACN,SAAM,KACN,WAAQ,EAAE,EACV,GAAG,QACmB;CACtB,IAAM,EAAE,eAAY,GAAgB,EAC9B,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,GAAY,MAAM,QAC/C,EAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAOF,QALA,EAAM,gBAAgB;AAEpB,EAAI,GAAO,UAAQ,EAAS,EAAM;IACjC,CAAC,KAAK,UAAU,EAAM,CAAC,CAAC,EAGzB,kBAAA,cAAC,GAAD;EACa;EACX,SAAS;EACF;EACI;EAeE,EAbb,kBAAA,cAAC,GAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;EAKG,EAHP,kBAAA,cAAC,EAAO,OAAR;EAAmB;EAAU;EAAY;EAAS,CAAA,EAElD,kBAAA,cAAC,EAAO,OAAR;EAAc,OAAO;EAAyB;EAAe,CAAA,CACtD,CACI;;AAInB,EAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,EAAE,EACV,GAAG,qBACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAEF,OAAM,gBAAgB;AAEpB,MAAI,OAAO,OAAQ,UAAS,MAAM;IACjC,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE3B,QACE,sBAAA,cAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;EAeE,EAbb,sBAAA,cAAC,QAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;EAKG,EAHP,sBAAA,cAAC,OAAO,OAAR;EAAmB;EAAU;EAAY;EAAS,CAAA,EAElD,sBAAA,cAAC,OAAO,OAAR;EAAc,OAAO;EAAyB;EAAe,CAAA,CACtD,CACI;;AAInB,YAAY,cAAc"}

package/dist/components/sortable/Handle.js

@@ -1,10 +1,10 @@
-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 * as r from "react";
-import { DragHandle as i } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import * as React$1 from "react";
+import { DragHandle } from "@atom-learning/icons";
 //#region src/components/sortable/Handle.tsx
-var a = e(n, {
+var StyledHandle = styled(ActionIcon, {
 	base: [
 		"text-inherit!",
 		"fill-current",
@@ -16,16 +16,19 @@ var a = e(n, {
 		true: ["cursor-grabbing"],
 		false: ["cursor-grab"]
 	} }
-}), o = r.forwardRef(({ isDragging: e, size: n, ...o }, s) => /* @__PURE__ */ r.createElement(a, {
-	ref: s,
-	isDragging: e,
-	appearance: "simple",
-	hasTooltip: !1,
-	size: n,
-	...o
-}, /* @__PURE__ */ r.createElement(t, { is: i })));
-o.displayName = "Handle";
+});
+var Handle = React$1.forwardRef(({ isDragging, size, ...rest }, ref) => {
+	return /* @__PURE__ */ React$1.createElement(StyledHandle, {
+		ref,
+		isDragging,
+		appearance: "simple",
+		hasTooltip: false,
+		size,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: DragHandle }));
+});
+Handle.displayName = "Handle";
 //#endregion
-export { o as Handle };
+export { Handle };
 
 //# sourceMappingURL=Handle.js.map

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,IAAe,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC,EAQW,IAAS,EAAM,YACzB,EAAE,eAAY,SAAM,GAAG,KAAQ,MAE5B,kBAAA,cAAC,GAAD;CACO;CACO;CACZ,YAAW;CACX,YAAY;CACN;CACN,GAAI;CAGS,EADb,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAc,CAAA,CACX,CAGpB;AAED,EAAO,cAAc"}
+{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC;AAQF,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAAQ;AACtC,QACE,wBAAA,cAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;EAGS,EADb,wBAAA,cAAC,MAAD,EAAM,IAAI,YAAc,CAAA,CACX;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/sortable/SortableHandle.js

@@ -1,21 +1,21 @@
-import { Handle as e } from "./Handle.js";
-import * as t from "react";
-import { useSortable as n } from "@dnd-kit/sortable";
+import { Handle } from "./Handle.js";
+import * as React$1 from "react";
+import { useSortable } from "@dnd-kit/sortable";
 //#region src/components/sortable/SortableHandle.tsx
-var r = ({ targetId: r, disabled: i = !1, label: a = "drag handle", ...o }) => {
-	let { attributes: s, listeners: c, isDragging: l, setActivatorNodeRef: u } = n({ id: r });
-	return /* @__PURE__ */ t.createElement(e, {
-		ref: u,
-		isDragging: l,
-		label: a,
-		disabled: i,
-		...i ? {} : c,
-		...i ? {} : s,
-		...o
+var SortableHandle = ({ targetId, disabled = false, label = "drag handle", ...rest }) => {
+	const { attributes, listeners, isDragging, setActivatorNodeRef } = useSortable({ id: targetId });
+	return /* @__PURE__ */ React$1.createElement(Handle, {
+		ref: setActivatorNodeRef,
+		isDragging,
+		label,
+		disabled,
+		...!disabled ? listeners : {},
+		...!disabled ? attributes : {},
+		...rest
 	});
 };
-r.displayName = "SortableHandle";
+SortableHandle.displayName = "SortableHandle";
 //#endregion
-export { r as SortableHandle };
+export { SortableHandle };
 
 //# sourceMappingURL=SortableHandle.js.map

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,KAAkB,EAC7B,aACA,cAAW,IACX,WAAQ,eACR,GAAG,QACuB;CAC1B,IAAM,EAAE,eAAY,cAAW,eAAY,2BACzC,EAAY,EAAE,IAAI,GAAU,CAAC;AAE/B,QACE,kBAAA,cAAC,GAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAM,IAAuB,EAAE,GAAd;EACjB,GAAM,IAAwB,EAAE,GAAf;EACjB,GAAI;EACJ,CAAA;;AAIN,EAAe,cAAc"}
+{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/B,QACE,wBAAA,cAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,EAAE;EAC/B,GAAK,CAAC,WAAW,aAAa,EAAE;EAChC,GAAI;EACJ,CAAA;;AAIN,eAAe,cAAc"}

package/dist/components/sortable/SortableItem.js

@@ -1,28 +1,29 @@
-import e from "clsx";
-import * as t from "react";
-import { Slot as n } from "@radix-ui/react-slot";
-import { useSortable as r } from "@dnd-kit/sortable";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { useSortable } from "@dnd-kit/sortable";
 //#region src/components/sortable/SortableItem.tsx
-var i = ({ id: i, asChild: a = !1, className: o, style: s, isDragHandle: c = !1, disabled: l, ...u }) => {
-	let { transform: d, setNodeRef: f, isDragging: p, listeners: m, attributes: h } = r({ id: i }), g = a ? n : "div";
-	return /* @__PURE__ */ t.createElement(g, {
-		ref: f,
+var SortableItem = ({ id, asChild = false, className, style, isDragHandle = false, disabled, ...rest }) => {
+	const { transform, setNodeRef, isDragging, listeners, attributes } = useSortable({ id });
+	const Component = asChild ? Slot : "div";
+	return /* @__PURE__ */ React$1.createElement(Component, {
+		ref: setNodeRef,
 		style: {
-			...s,
+			...style,
 			"--scale": 1,
-			"--translate-x": d?.x || 0,
-			"--translate-y": d?.y || 0
+			"--translate-x": transform?.x || 0,
+			"--translate-y": transform?.y || 0
 		},
-		"data-dragging": p,
-		"data-disabled": l,
-		...c && !l ? m : {},
-		...c && !l ? h : {},
-		...u,
-		className: e("translate-x-[calc(var(--translate-x)*1px)]", "translate-y-[calc(var(--translate-y)*1px)]", "scale-(--scale)", p && "z-5", "disabled:**:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-30", c && (p ? "cursor-grabbing" : "cursor-grab"), o)
+		"data-dragging": isDragging,
+		"data-disabled": disabled,
+		...isDragHandle && !disabled ? listeners : {},
+		...isDragHandle && !disabled ? attributes : {},
+		...rest,
+		className: clsx("translate-x-[calc(var(--translate-x)*1px)]", "translate-y-[calc(var(--translate-y)*1px)]", "scale-(--scale)", isDragging && "z-5", "disabled:**:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-30", isDragHandle && (isDragging ? "cursor-grabbing" : "cursor-grab"), className)
 	});
 };
-i.displayName = "SortableItem";
+SortableItem.displayName = "SortableItem";
 //#endregion
-export { i as SortableItem };
+export { SortableItem };
 
 //# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAeA,IAAa,KAAgB,EAC3B,OACA,aAAU,IACV,cACA,UACA,kBAAe,IACf,aACA,GAAG,QAC8C;CACjD,IAAM,EAAE,cAAW,eAAY,eAAY,cAAW,kBACpD,EAAY,EAAE,OAAI,CAAC,EAEf,IAAY,IAAU,IAAO;AACnC,QACE,kBAAA,cAAC,GAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,GAAW,KAAK;GACjC,iBAAiB,GAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,KAAgB,CAAC,IAAW,IAAY,EAAE;EAC/C,GAAK,KAAgB,CAAC,IAAW,IAAa,EAAE;EAChD,GAAI;EACJ,WAAW,EACT,8CACA,8CACA,mBACA,KAAc,OACd,mCACA,+BACA,uBACA,MAAiB,IAAa,oBAAoB,gBAClD,EACD;EACD,CAAA;;AAIN,EAAa,cAAc"}
+{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAeA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,IAAI,CAAC;CAErB,MAAM,YAAY,UAAU,OAAO;AACnC,QACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,EAAE;EAC/C,GAAK,gBAAgB,CAAC,WAAW,aAAa,EAAE;EAChD,GAAI;EACJ,WAAW,KACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,UACD;EACD,CAAA;;AAIN,aAAa,cAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -1,31 +1,35 @@
-import * as e from "react";
-import { SortableContext as t, arrayMove as n, sortableKeyboardCoordinates as r } from "@dnd-kit/sortable";
-import { DndContext as i, KeyboardSensor as a, PointerSensor as o, closestCenter as s, useSensor as c, useSensors as l } from "@dnd-kit/core";
+import * as React$1 from "react";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 //#region src/components/sortable/SortableRoot.tsx
-var u = ({ sortableIds: u, onSortChange: d, children: f }) => {
-	let [p, m] = e.useState(u);
-	e.useEffect(() => {
-		m(u);
-	}, [u]);
-	let h = l(c(o), c(a, { coordinateGetter: r }));
-	return /* @__PURE__ */ e.createElement(i, {
-		sensors: h,
-		collisionDetection: s,
-		onDragEnd: (e) => {
-			let { active: t, over: r } = e;
-			t.id && r?.id && t.id !== r?.id && m((e) => {
-				let i = e.indexOf(t.id), a = e.indexOf(r.id), o = n(e, i, a);
-				return d({
-					order: o,
-					oldIndex: i,
-					newIndex: a
-				}), o;
+var SortableRoot = ({ sortableIds, onSortChange, children }) => {
+	const [order, setOrder] = React$1.useState(sortableIds);
+	React$1.useEffect(() => {
+		setOrder(sortableIds);
+	}, [sortableIds]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (active.id && over?.id && active.id !== over?.id) setOrder((order) => {
+			const oldIndex = order.indexOf(active.id);
+			const newIndex = order.indexOf(over.id);
+			const newOrder = arrayMove(order, oldIndex, newIndex);
+			onSortChange({
+				order: newOrder,
+				oldIndex,
+				newIndex
 			});
-		}
-	}, /* @__PURE__ */ e.createElement(t, { items: p }, f));
+			return newOrder;
+		});
+	};
+	return /* @__PURE__ */ React$1.createElement(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd
+	}, /* @__PURE__ */ React$1.createElement(SortableContext, { items: order }, children));
 };
-u.displayName = "SortableRoot";
+SortableRoot.displayName = "SortableRoot";
 //#endregion
-export { u as SortableRoot };
+export { SortableRoot };
 
 //# sourceMappingURL=SortableRoot.js.map

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,KAAgB,EAC3B,gBACA,iBACA,kBACiD;CACjD,IAAM,CAAC,GAAO,KAAY,EAAM,SAA4B,EAAY;AACxE,GAAM,gBAAgB;AACpB,IAAS,EAAY;IACpB,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAU,EACd,EAAU,EAAc,EACxB,EAAU,GAAgB,EACxB,kBAAkB,GACnB,CAAC,CACH;AAeD,QACE,kBAAA,cAAC,GAAD;EACW;EACT,oBAAoB;EACpB,YAjBmB,MAAwB;GAC7C,IAAM,EAAE,WAAQ,YAAS;AACzB,GAAI,EAAO,MAAM,GAAM,MAAM,EAAO,OAAO,GAAM,MAC/C,GAAU,MAAU;IAClB,IAAM,IAAW,EAAM,QAAQ,EAAO,GAAG,EACnC,IAAW,EAAM,QAAQ,EAAK,GAAG,EACjC,IAAW,EAAU,GAAO,GAAU,EAAS;AAErD,WADA,EAAa;KAAE,OAAO;KAAU;KAAU;KAAU,CAAC,EAC9C;KACP;;EAWS,EADX,kBAAA,cAAC,GAAD,EAAiB,OAAO,GAAmC,EAA3B,EAA2B,CAChD;;AAIjB,EAAa,cAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA4B,YAAY;AACxE,SAAM,gBAAgB;AACpB,WAAS,YAAY;IACpB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,GAC/C,WAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG;GACzC,MAAM,WAAW,MAAM,QAAQ,KAAK,GAAG;GACvC,MAAM,WAAW,UAAU,OAAO,UAAU,SAAS;AACrD,gBAAa;IAAE,OAAO;IAAU;IAAU;IAAU,CAAC;AACrD,UAAO;IACP;;AAIN,QACE,wBAAA,cAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;EAGA,EADX,wBAAA,cAAC,iBAAD,EAAiB,OAAO,OAAmC,EAA3B,SAA2B,CAChD;;AAIjB,aAAa,cAAc"}

package/dist/components/sortable/index.js

@@ -1,14 +1,14 @@
-import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
-import { SortableHandle as t } from "./SortableHandle.js";
-import { SortableItem as n } from "./SortableItem.js";
-import { SortableRoot as r } from "./SortableRoot.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SortableHandle } from "./SortableHandle.js";
+import { SortableItem } from "./SortableItem.js";
+import { SortableRoot } from "./SortableRoot.js";
 //#region src/components/sortable/index.ts
-var i = /* @__PURE__ */ e({
-	Handle: () => t,
-	Item: () => n,
-	Root: () => r
+var sortable_exports = /* @__PURE__ */ __exportAll({
+	Handle: () => SortableHandle,
+	Item: () => SortableItem,
+	Root: () => SortableRoot
 });
 //#endregion
-export { i as sortable_exports };
+export { sortable_exports };
 
 //# sourceMappingURL=index.js.map

package/dist/components/spacer/Spacer.js

@@ -1,12 +1,16 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/spacer/Spacer.tsx
-var t = e("div", { base: [
+/**
+* A flexible flex spacer that expands along the major axis of its containing flex layout.
+* It renders a `div` by default, and takes up any available space.
+*/
+var Spacer = styled("div", { base: [
 	"flex-1",
 	"justify-self-stretch",
 	"self-stretch"
 ] });
-t.displayName = "Spacer";
+Spacer.displayName = "Spacer";
 //#endregion
-export { t as Spacer };
+export { Spacer };
 
 //# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;AAMA,IAAa,IAAS,EAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,EAAO,cAAc"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,OAAO,cAAc"}