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

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -1,20 +1,22 @@
-import { Table as e } from "../table/Table.js";
-import { SkeletonLoader as t } from "./Skeleton.js";
-import { Tile as n } from "../tile/Tile.js";
-import r from "clsx";
-import i from "react";
+import { Table } from "../table/Table.js";
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var a = ({ numberOfColumns: a = 4, numberOfRows: o = 4, columnWidth: s, containerCss: c }) => /* @__PURE__ */ i.createElement(n, { className: r("p-6", "flex-row", "gap-4", "relative", c) }, /* @__PURE__ */ i.createElement(e, { size: "md" }, /* @__PURE__ */ i.createElement(e.Header, { theme: "white" }, Array.from({ length: a }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.HeaderCell, { key: n }, /* @__PURE__ */ i.createElement(t, {
-	style: { "--width": s?.[n] || "100px" },
-	className: "h-4 w-(--width) rounded-xl"
-})))), /* @__PURE__ */ i.createElement(e.Body, { striped: !1 }, Array.from({ length: o }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.Row, { key: n }, Array.from({ length: a }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.Cell, {
-	key: n,
-	className: "border-none"
-}, /* @__PURE__ */ i.createElement(t, {
-	style: { "--width": s?.[n] || "100px" },
-	className: "bg-grey-200 h-4 w-(--width) rounded-xl"
-}))))))));
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, containerCss }) => {
+	return /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ React.createElement(Table, { size: "md" }, /* @__PURE__ */ React.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ React.createElement(SkeletonLoader, {
+		style: { "--width": columnWidth?.[columnIndex] || "100px" },
+		className: "h-4 w-(--width) rounded-xl"
+	})))), /* @__PURE__ */ React.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ React.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.Cell, {
+		key: columnIndex,
+		className: "border-none"
+	}, /* @__PURE__ */ React.createElement(SkeletonLoader, {
+		style: { "--width": columnWidth?.[columnIndex] || "100px" },
+		className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+	}))))))));
+};
 //#endregion
-export { a as SkeletonTable };
+export { SkeletonTable };
 
 //# sourceMappingURL=SkeletonTable.js.map

package/dist/components/skeleton-loader/SkeletonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  containerCss\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  containerCss?: string\n}) => {\n  return (\n    <Tile\n      className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n    >\n      <Table size=\"md\">\n        <Table.Header theme=\"white\">\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Header>\n        <Table.Body striped={false}>\n          {Array.from({ length: numberOfRows }, (_, index) => index).map(\n            (rowIndex) => (\n              <Table.Row key={rowIndex}>\n                {Array.from(\n                  { length: numberOfColumns },\n                  (_, index) => index\n                ).map((columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            )\n          )}\n        </Table.Body>\n      </Table>\n    </Tile>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAAiB,EAC5B,qBAAkB,GAClB,kBAAe,GACf,gBACA,sBAQE,kBAAA,cAAC,GAAD,EACE,WAAW,EAAK,OAAO,YAAY,SAAS,YAAY,EAAa,EAqChE,EAnCL,kBAAA,cAAC,GAAD,EAAO,MAAK,MAkCJ,EAjCN,kBAAA,cAAC,EAAM,QAAP,EAAc,OAAM,SAWL,EAVZ,MAAM,KAAK,EAAE,QAAQ,GAAiB,GAAG,GAAG,MAAU,EAAM,CAAC,KAC3D,MACC,kBAAA,cAAC,EAAM,YAAP,EAAkB,KAAK,GAKJ,EAJjB,kBAAA,cAAC,GAAD;CACE,OAAO,EAAE,WAAW,IAAc,MAAgB,SAAS;CAC3D,WAAU;CACV,CAAA,CACe,CAEtB,CACY,EACf,kBAAA,cAAC,EAAM,MAAP,EAAY,SAAS,IAoBR,EAnBV,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAU,EAAM,CAAC,KACxD,MACC,kBAAA,cAAC,EAAM,KAAP,EAAW,KAAK,GAcJ,EAbT,MAAM,KACL,EAAE,QAAQ,GAAiB,GAC1B,GAAG,MAAU,EACf,CAAC,KAAK,MACL,kBAAA,cAAC,EAAM,MAAP;CAAY,KAAK;CAAa,WAAU;CAO3B,EANX,kBAAA,cAAC,GAAD;CACE,OAAO,EACL,WAAW,IAAc,MAAgB,SAC1C;CACD,WAAU;CACV,CAAA,CACS,CACb,CACQ,CAEf,CACU,CACP,CACH"}
+{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  containerCss\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  containerCss?: string\n}) => {\n  return (\n    <Tile\n      className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n    >\n      <Table size=\"md\">\n        <Table.Header theme=\"white\">\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Header>\n        <Table.Body striped={false}>\n          {Array.from({ length: numberOfRows }, (_, index) => index).map(\n            (rowIndex) => (\n              <Table.Row key={rowIndex}>\n                {Array.from(\n                  { length: numberOfColumns },\n                  (_, index) => index\n                ).map((columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            )\n          )}\n        </Table.Body>\n      </Table>\n    </Tile>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,mBAMI;AACJ,QACE,sBAAA,cAAC,MAAD,EACE,WAAW,KAAK,OAAO,YAAY,SAAS,YAAY,aAAa,EAqChE,EAnCL,sBAAA,cAAC,OAAD,EAAO,MAAK,MAkCJ,EAjCN,sBAAA,cAAC,MAAM,QAAP,EAAc,OAAM,SAWL,EAVZ,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,UAAU,MAAM,CAAC,KAC3D,gBACC,sBAAA,cAAC,MAAM,YAAP,EAAkB,KAAK,aAKJ,EAJjB,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,SAAS;EAC3D,WAAU;EACV,CAAA,CACe,CAEtB,CACY,EACf,sBAAA,cAAC,MAAM,MAAP,EAAY,SAAS,OAoBR,EAnBV,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,aACC,sBAAA,cAAC,MAAM,KAAP,EAAW,KAAK,UAcJ,EAbT,MAAM,KACL,EAAE,QAAQ,iBAAiB,GAC1B,GAAG,UAAU,MACf,CAAC,KAAK,gBACL,sBAAA,cAAC,MAAM,MAAP;EAAY,KAAK;EAAa,WAAU;EAO3B,EANX,sBAAA,cAAC,gBAAD;EACE,OAAO,EACL,WAAW,cAAc,gBAAgB,SAC1C;EACD,WAAU;EACV,CAAA,CACS,CACb,CACQ,CAEf,CACU,CACP,CACH"}

package/dist/components/skeleton-loader/SkeletonTabs.js

@@ -1,13 +1,13 @@
-import { SkeletonLoader as e } from "./Skeleton.js";
-import { Tile as t } from "../tile/Tile.js";
-import n from "clsx";
-import r from "react";
+import { SkeletonLoader } from "./Skeleton.js";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var i = ({ numberOfTabs: i, containerCss: a, tabCss: o }) => /* @__PURE__ */ r.createElement(t, { className: n("p-6", "flex-row", "gap-4", a) }, Array.from({ length: i }, (e, t) => `tab_${t}`).map((t) => /* @__PURE__ */ r.createElement(e, {
-	key: t,
-	className: n("w-32", "h-6", "rounded-sm", o)
+var SkeletonTabs = ({ numberOfTabs, containerCss, tabCss }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", containerCss) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
+	key,
+	className: clsx("w-32", "h-6", "rounded-sm", tabCss)
 })));
 //#endregion
-export { i as SkeletonTabs };
+export { SkeletonTabs };
 
 //# sourceMappingURL=SkeletonTabs.js.map

package/dist/components/skeleton-loader/SkeletonTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,KAAgB,EAC3B,iBACA,iBACA,gBAMA,kBAAA,cAAC,GAAD,EAAM,WAAW,EAAK,OAAO,YAAY,SAAS,EAAa,EASxD,EARJ,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAU,OAAO,IAAQ,CAAC,KACjE,MACC,kBAAA,cAAC,GAAD;CACO;CACL,WAAW,EAAK,QAAQ,OAAO,cAAc,EAAO;CACpD,CAAA,CAEL,CACI"}
+{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,EAC3B,cACA,cACA,aAMA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,aAAa,EASxD,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,OAAO,QAAQ,CAAC,KACjE,QACC,sBAAA,cAAC,gBAAD;CACO;CACL,WAAW,KAAK,QAAQ,OAAO,cAAc,OAAO;CACpD,CAAA,CAEL,CACI"}

package/dist/components/skeleton-loader/index.js

@@ -1,22 +1,22 @@
-import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
-import { SkeletonLoader as t } from "./Skeleton.js";
-import { SkeletonHeading as n } from "./SkeletonHeading.js";
-import { SkeletonButton as r } from "./SkeletonButton.js";
-import { SkeletonTabs as i } from "./SkeletonTabs.js";
-import { SkeletonDoughnutChart as a } from "./SkeletonDoughnutChart.js";
-import { SkeletonTable as o } from "./SkeletonTable.js";
-import { SkeletonCard as s } from "./SkeletonCard.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SkeletonLoader } from "./Skeleton.js";
+import { SkeletonHeading } from "./SkeletonHeading.js";
+import { SkeletonButton } from "./SkeletonButton.js";
+import { SkeletonTabs } from "./SkeletonTabs.js";
+import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
+import { SkeletonTable } from "./SkeletonTable.js";
+import { SkeletonCard } from "./SkeletonCard.js";
 //#region src/components/skeleton-loader/index.ts
-var c = /* @__PURE__ */ e({
-	Button: () => r,
-	Card: () => s,
-	DoughnutChart: () => a,
-	Heading: () => n,
-	Loader: () => t,
-	Table: () => o,
-	Tabs: () => i
+var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
+	Button: () => SkeletonButton,
+	Card: () => SkeletonCard,
+	DoughnutChart: () => SkeletonDoughnutChart,
+	Heading: () => SkeletonHeading,
+	Loader: () => SkeletonLoader,
+	Table: () => SkeletonTable,
+	Tabs: () => SkeletonTabs
 });
 //#endregion
-export { c as skeleton_loader_exports };
+export { skeleton_loader_exports };
 
 //# sourceMappingURL=index.js.map

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