@neut/ui 0.0.8 → 0.0.10

package/dist/components/scroll-area/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":["createSignal","onCleanup","splitProps","ScrollAreaProps","ScrollMetrics","clsx","ScrollBar","ScrollAreaContext","computeMetrics","ScrollArea","props","viewportRef","HTMLDivElement","local","others","hovering","setHovering","dragging","setDragging","verticalMetrics","setVerticalMetrics","thumbRatio","thumbOffset","scrollable","horizontalMetrics","setHorizontalMetrics","updateMetrics","el","HTMLElement","clientHeight","scrollTop","scrollHeight","clientWidth","scrollLeft","scrollWidth","setup","update","ro","ResizeObserver","observe","firstElementChild","addEventListener","passive","disconnect","removeEventListener","_el$","_tmpl$2","_$spread","_$mergeProps","class","_$insert","_$createComponent","Provider","value","vertical","horizontal","children","_el$2","_tmpl$","_ref$","_$use","_$effect","_p$","_v$","_v$2","orientation","e","_$setAttribute","t","_$className","undefined"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { createSignal, onCleanup, splitProps } from \"solid-js\";\nimport type { ScrollAreaProps, ScrollMetrics } from \"./ScrollArea.types\";\nimport { clsx } from \"~/utils\";\nimport { ScrollBar } from \"../ScrollBar\";\nimport { ScrollAreaContext } from \"./ScrollArea.context\";\nimport { computeMetrics } from \"./ScrollArea.utils\";\n\nexport const ScrollArea = (props: ScrollAreaProps) => {\n  let viewportRef: HTMLDivElement | undefined;\n\n  const [local, others] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"aria-label\",\n  ]);\n\n  const [hovering, setHovering] = createSignal(false);\n  const [dragging, setDragging] = createSignal<\n    \"vertical\" | \"horizontal\" | null\n  >(null);\n\n  const [verticalMetrics, setVerticalMetrics] = createSignal<ScrollMetrics>({\n    thumbRatio: 1,\n    thumbOffset: 0,\n    scrollable: false,\n  });\n  const [horizontalMetrics, setHorizontalMetrics] = createSignal<ScrollMetrics>(\n    {\n      thumbRatio: 1,\n      thumbOffset: 0,\n      scrollable: false,\n    },\n  );\n\n  function updateMetrics(el: HTMLElement) {\n    setVerticalMetrics(\n      computeMetrics(el.clientHeight, el.scrollTop, el.scrollHeight),\n    );\n    setHorizontalMetrics(\n      computeMetrics(el.clientWidth, el.scrollLeft, el.scrollWidth),\n    );\n  }\n\n  function setup(el: HTMLDivElement) {\n    viewportRef = el; // ref 赋值\n\n    updateMetrics(el);\n\n    const update = () => updateMetrics(el);\n\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n\n    if (el.firstElementChild) {\n      ro.observe(el.firstElementChild);\n    }\n\n    el.addEventListener(\"scroll\", update, { passive: true });\n\n    onCleanup(() => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", update);\n    });\n  }\n\n  return (\n    <div\n      data-slot=\"scroll-area\"\n      class={clsx(\"relative\", local.class)}\n      onMouseEnter={() => setHovering(true)}\n      onMouseLeave={() => setHovering(false)}\n      {...others}\n    >\n      <ScrollAreaContext.Provider\n        value={{\n          hovering,\n          viewportRef: () => viewportRef,\n          dragging,\n          setDragging,\n          vertical: verticalMetrics,\n          horizontal: horizontalMetrics,\n        }}\n      >\n        <div\n          ref={setup}\n          data-slot=\"scroll-area-viewport\"\n          role=\"region\"\n          aria-label={local[\"aria-label\"] ?? \"Scrollable content\"}\n          class={clsx(\n            // \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-neutral-400/50 dark:focus-visible:ring-neutral-500/50 focus-visible:outline-1\",\n            // \"overflow-scroll\",\n            // \"[scrollbar-width:none]\",\n            \"size-full rounded-[inherit] outline-none\",\n            // Native scrollbars hidden via CSS; custom ones provided below\n            \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n            // Focus ring — meets WCAG 2.4.7\n            \"focus-visible:ring-2 focus-visible:ring-offset-1\",\n            \"focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n            // Overflow based on which scrollbars are active\n            local.orientation === \"vertical\"\n              ? \"overflow-y-scroll overflow-x-hidden\"\n              : local.orientation === \"horizontal\"\n                ? \"overflow-x-scroll overflow-y-hidden\"\n                : \"overflow-scroll\",\n          )}\n        >\n          {local.children}\n        </div>\n        <ScrollBar orientation={local.orientation} />\n      </ScrollAreaContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;qIAOaS,KAAcC,MAA2B;CACpD,IAAIC,GAEE,CAACE,GAAOC,KAAUZ,EAAWQ,GAAO;EACxC;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,CAACK,GAAUC,KAAehB,EAAa,GAAM,EAC7C,CAACiB,GAAUC,KAAelB,EAE9B,KAAK,EAED,CAACmB,GAAiBC,KAAsBpB,EAA4B;EACxEqB,YAAY;EACZC,aAAa;EACbC,YAAY;EACb,CAAC,EACI,CAACC,GAAmBC,KAAwBzB,EAChD;EACEqB,YAAY;EACZC,aAAa;EACbC,YAAY;EAEhB,CAAC;CAED,SAASG,EAAcC,GAAiB;AAItCF,EAHAL,EACEZ,EAAemB,EAAGE,cAAcF,EAAGG,WAAWH,EAAGI,aACnD,CAAC,EACDN,EACEjB,EAAemB,EAAGK,aAAaL,EAAGM,YAAYN,EAAGO,YACnD,CAAC;;CAGH,SAASC,EAAMR,GAAoB;AAGjCD,EAFAf,IAAcgB,GAEdD,EAAcC,EAAG;EAEjB,IAAMS,UAAeV,EAAcC,EAAG,EAEhCU,IAAK,IAAIC,eAAeF,EAAO;AASrCnC,EARAoC,EAAGE,QAAQZ,EAAG,EAEVA,EAAGa,qBACLH,EAAGE,QAAQZ,EAAGa,kBAAkB,EAGlCb,EAAGc,iBAAiB,UAAUL,GAAQ,EAAEM,SAAS,IAAM,CAAC,EAExDzC,QAAgB;AAEd0B,GADAU,EAAGM,YAAY,EACfhB,EAAGiB,oBAAoB,UAAUR,EAAO;IACxC;;AAGJ,eAAA;EAAA,IAAAS,IAAAC,GAAA;AA2C+C,SA3C/CD,EAAAJ,iBAAA,oBAKwBzB,EAAY,GAAM,CAAA,EAAA6B,EAAAJ,iBAAA,oBADlBzB,EAAY,GAAK,CAAA,EAAA+B,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,UAD9B3C,EAAK,YAAYQ,EAAMoC,MAAM;KAAA,EAGhCnC,EAAM,EAAA,IAAA,GAAA,EAAAoC,EAAAL,GAAAM,EAET5C,EAAkB6C,UAAQ;GACzBC,OAAO;IACLtC;IACAJ,mBAAmBA;IACnBM;IACAC;IACAoC,UAAUnC;IACVoC,YAAY/B;IACb;GAAA,IAAAgC,WAAA;AAAA,WAAA,QAAA;KAAA,IAAAC,IAAAC,GAAA,EAAAC,IAGMxB;AAoBJ,YApBS,OAAAwB,KAAA,aAAAC,EAAAD,GAAAF,EAAA,GAALtB,IAAKsB,GAAAP,EAAAO,SAsBT5C,EAAM2C,SAAQ,EAAAK,GAAAC,MAAA;MAAA,IAAAC,IAnBHlD,EAAM,iBAAiB,sBAAoBmD,IAChD3D,EAIL,4CAEA,wDAEA,oDACA,4EAEAQ,EAAMoD,gBAAgB,aAClB,wCACApD,EAAMoD,gBAAgB,eACpB,wCACA,kBACP;AAAA,aAAAF,MAAAD,EAAAI,KAAAC,EAAAV,GAAA,cAAAK,EAAAI,IAAAH,EAAA,EAAAC,MAAAF,EAAAM,KAAAC,EAAAZ,GAAAK,EAAAM,IAAAJ,EAAA,EAAAF;QAAA;MAAAI,GAAAI,KAAAA;MAAAF,GAAAE,KAAAA;MAAA,CAAA,EAAAb;QAAA,EAAAN,EAIF7C,GAAS,EAAA,IAAC2D,cAAW;AAAA,YAAEpD,EAAMoD;OAAW,CAAA,CAAA;;GAAA,CAAA,CAAA,EAAApB;KAAA"}
+{"version":3,"file":"ScrollArea.js","names":["createSignal","onCleanup","splitProps","ScrollAreaProps","ScrollMetrics","clsx","ScrollBar","ScrollAreaContext","computeMetrics","ScrollArea","props","viewportRef","HTMLDivElement","local","others","hovering","setHovering","dragging","setDragging","verticalMetrics","setVerticalMetrics","thumbRatio","thumbOffset","scrollable","horizontalMetrics","setHorizontalMetrics","updateMetrics","el","HTMLElement","clientHeight","scrollTop","scrollHeight","clientWidth","scrollLeft","scrollWidth","setup","update","ro","ResizeObserver","observe","firstElementChild","addEventListener","passive","disconnect","removeEventListener","_el$","_tmpl$2","_$spread","_$mergeProps","class","_$insert","_$createComponent","Provider","value","vertical","horizontal","children","_el$2","_tmpl$","_ref$","_$use","_$effect","_p$","_v$","_v$2","orientation","e","_$setAttribute","t","_$className","undefined"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { createSignal, onCleanup, splitProps } from \"solid-js\";\nimport type { ScrollAreaProps, ScrollMetrics } from \"./ScrollArea.types\";\nimport { clsx } from \"~/utils\";\nimport { ScrollBar } from \"../ScrollBar\";\nimport { ScrollAreaContext } from \"./ScrollArea.context\";\nimport { computeMetrics } from \"./ScrollArea.utils\";\n\nexport const ScrollArea = (props: ScrollAreaProps) => {\n  let viewportRef: HTMLDivElement | undefined;\n\n  const [local, others] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n    \"children\",\n    \"aria-label\",\n  ]);\n\n  const [hovering, setHovering] = createSignal(false);\n  const [dragging, setDragging] = createSignal<\n    \"vertical\" | \"horizontal\" | null\n  >(null);\n\n  const [verticalMetrics, setVerticalMetrics] = createSignal<ScrollMetrics>({\n    thumbRatio: 1,\n    thumbOffset: 0,\n    scrollable: false,\n  });\n  const [horizontalMetrics, setHorizontalMetrics] = createSignal<ScrollMetrics>(\n    {\n      thumbRatio: 1,\n      thumbOffset: 0,\n      scrollable: false,\n    },\n  );\n\n  function updateMetrics(el: HTMLElement) {\n    setVerticalMetrics(\n      computeMetrics(el.clientHeight, el.scrollTop, el.scrollHeight),\n    );\n    setHorizontalMetrics(\n      computeMetrics(el.clientWidth, el.scrollLeft, el.scrollWidth),\n    );\n  }\n\n  function setup(el: HTMLDivElement) {\n    viewportRef = el; // ref 赋值\n\n    updateMetrics(el);\n\n    const update = () => updateMetrics(el);\n\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n\n    if (el.firstElementChild) {\n      ro.observe(el.firstElementChild);\n    }\n\n    el.addEventListener(\"scroll\", update, { passive: true });\n\n    onCleanup(() => {\n      ro.disconnect();\n      el.removeEventListener(\"scroll\", update);\n    });\n  }\n\n  return (\n    <div\n      data-slot=\"scroll-area\"\n      class={clsx(\"relative\", local.class)}\n      onMouseEnter={() => setHovering(true)}\n      onMouseLeave={() => setHovering(false)}\n      {...others}\n    >\n      <ScrollAreaContext.Provider\n        value={{\n          hovering,\n          viewportRef: () => viewportRef,\n          dragging,\n          setDragging,\n          vertical: verticalMetrics,\n          horizontal: horizontalMetrics,\n        }}\n      >\n        <div\n          ref={setup}\n          data-slot=\"scroll-area-viewport\"\n          role=\"region\"\n          aria-label={local[\"aria-label\"] ?? \"Scrollable content\"}\n          class={clsx(\n            // \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-neutral-400/50 dark:focus-visible:ring-neutral-500/50 focus-visible:outline-1\",\n            // \"overflow-scroll\",\n            // \"[scrollbar-width:none]\",\n            \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\",\n            // Native scrollbars hidden via CSS; custom ones provided below\n            \"scrollbar-none [&::-webkit-scrollbar]:hidden\",\n            // Focus ring — meets WCAG 2.4.7\n            \"focus-visible:ring-2 focus-visible:ring-offset-1\",\n            \"focus-visible:ring-ring/50\",\n            // Overflow based on which scrollbars are active\n            local.orientation === \"vertical\"\n              ? \"overflow-y-scroll overflow-x-hidden\"\n              : local.orientation === \"horizontal\"\n                ? \"overflow-x-scroll overflow-y-hidden\"\n                : \"overflow-scroll\",\n          )}\n        >\n          {local.children}\n        </div>\n        <ScrollBar orientation={local.orientation} />\n      </ScrollAreaContext.Provider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;iIAOaS,KAAcC,MAA2B;CACpD,IAAIC,GAEE,CAACE,GAAOC,KAAUZ,EAAWQ,GAAO;EACxC;EACA;EACA;EACA;EACA;CAAY,CACb,GAEK,CAACK,GAAUC,KAAehB,EAAa,EAAK,GAC5C,CAACiB,GAAUC,KAAelB,EAE9B,IAAI,GAEA,CAACmB,GAAiBC,KAAsBpB,EAA4B;EACxEqB,YAAY;EACZC,aAAa;EACbC,YAAY;CACd,CAAC,GACK,CAACC,GAAmBC,KAAwBzB,EAChD;EACEqB,YAAY;EACZC,aAAa;EACbC,YAAY;CACd,CACF;CAEA,SAASG,EAAcC,GAAiB;EAItCF,AAHAL,EACEZ,EAAemB,EAAGE,cAAcF,EAAGG,WAAWH,EAAGI,YAAY,CAC/D,GACAN,EACEjB,EAAemB,EAAGK,aAAaL,EAAGM,YAAYN,EAAGO,WAAW,CAC9D;CACF;CAEA,SAASC,EAAMR,GAAoB;EAGjCD,AAFAf,IAAcgB,GAEdD,EAAcC,CAAE;EAEhB,IAAMS,UAAeV,EAAcC,CAAE,GAE/BU,IAAK,IAAIC,eAAeF,CAAM;EASpCnC,AARAoC,EAAGE,QAAQZ,CAAE,GAETA,EAAGa,qBACLH,EAAGE,QAAQZ,EAAGa,iBAAiB,GAGjCb,EAAGc,iBAAiB,UAAUL,GAAQ,EAAEM,SAAS,GAAK,CAAC,GAEvDzC,QAAgB;GAEd0B,AADAU,EAAGM,WAAW,GACdhB,EAAGiB,oBAAoB,UAAUR,CAAM;EACzC,CAAC;CACH;CAEA,cAAA;EAAA,IAAAS,IAAAC,EAAA;EA2C+C,OA3C/CD,EAAAJ,iBAAA,oBAKwBzB,EAAY,EAAK,CAAC,GAAA6B,EAAAJ,iBAAA,oBADlBzB,EAAY,EAAI,CAAC,GAAA+B,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAD9B3C,EAAK,YAAYQ,EAAMoC,KAAK;EAAC,EAAA,GAGhCnC,CAAM,GAAA,IAAA,EAAA,GAAAoC,EAAAL,GAAAM,EAET5C,EAAkB6C,UAAQ;GACzBC,OAAO;IACLtC;IACAJ,mBAAmBA;IACnBM;IACAC;IACAoC,UAAUnC;IACVoC,YAAY/B;GACd;GAAC,IAAAgC,WAAA;IAAA,OAAA,QAAA;KAAA,IAAAC,IAAAC,EAAA,GAAAC,IAGMxB;KAoBJ,OApBS,OAAAwB,KAAA,aAAAC,EAAAD,GAAAF,CAAA,IAALtB,IAAKsB,GAAAP,EAAAO,SAsBT5C,EAAM2C,QAAQ,GAAAK,GAAAC,MAAA;MAAA,IAAAC,IAnBHlD,EAAM,iBAAiB,sBAAoBmD,IAChD3D,EAIL,0EAEA,gDAEA,oDACA,8BAEAQ,EAAMoD,gBAAgB,aAClB,wCACApD,EAAMoD,gBAAgB,eACpB,wCACA,iBACR;MAAC,OAAAF,MAAAD,EAAAI,KAAAC,EAAAV,GAAA,cAAAK,EAAAI,IAAAH,CAAA,GAAAC,MAAAF,EAAAM,KAAAC,EAAAZ,GAAAK,EAAAM,IAAAJ,CAAA,GAAAF;KAAA,GAAA;MAAAI,GAAAI,KAAAA;MAAAF,GAAAE,KAAAA;KAAA,CAAA,GAAAb;IAAA,EAAA,CAAA,GAAAN,EAIF7C,GAAS,EAAA,IAAC2D,cAAW;KAAA,OAAEpD,EAAMoD;IAAW,EAAA,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,GAAApB;CAAA,EAAA,CAAA;AAIjD"}

package/dist/components/scroll-area/ScrollArea/ScrollArea.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.utils.js","names":[],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.utils.ts"],"sourcesContent":["import type { ScrollMetrics } from \"./ScrollArea.types\";\n\nexport function computeMetrics(\n  client: number,\n  scroll: number,\n  scrollSize: number,\n): ScrollMetrics {\n  const scrollable = scrollSize > client + 1; // +1 to absorb sub-pixel rounding\n  if (!scrollable) return { thumbRatio: 1, thumbOffset: 0, scrollable: false };\n  const thumbRatio = client / scrollSize;\n  const maxScroll = scrollSize - client;\n  const thumbOffset = maxScroll > 0 ? scroll / maxScroll : 0;\n  return { thumbRatio, thumbOffset, scrollable };\n}\n"],"mappings":";AAEA,SAAgB,EACd,GACA,GACA,GACe;CACf,IAAM,IAAa,IAAa,IAAS;AACzC,KAAI,CAAC,EAAY,QAAO;EAAE,YAAY;EAAG,aAAa;EAAG,YAAY;EAAO;CAC5E,IAAM,IAAa,IAAS,GACtB,IAAY,IAAa;AAE/B,QAAO;EAAE;EAAY,aADD,IAAY,IAAI,IAAS,IAAY;EACvB;EAAY"}
+{"version":3,"file":"ScrollArea.utils.js","names":[],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.utils.ts"],"sourcesContent":["import type { ScrollMetrics } from \"./ScrollArea.types\";\n\nexport function computeMetrics(\n  client: number,\n  scroll: number,\n  scrollSize: number,\n): ScrollMetrics {\n  const scrollable = scrollSize > client + 1; // +1 to absorb sub-pixel rounding\n  if (!scrollable) return { thumbRatio: 1, thumbOffset: 0, scrollable: false };\n  const thumbRatio = client / scrollSize;\n  const maxScroll = scrollSize - client;\n  const thumbOffset = maxScroll > 0 ? scroll / maxScroll : 0;\n  return { thumbRatio, thumbOffset, scrollable };\n}\n"],"mappings":";AAEA,SAAgB,EACd,GACA,GACA,GACe;CACf,IAAM,IAAa,IAAa,IAAS;CACzC,IAAI,CAAC,GAAY,OAAO;EAAE,YAAY;EAAG,aAAa;EAAG,YAAY;CAAM;CAC3E,IAAM,IAAa,IAAS,GACtB,IAAY,IAAa;CAE/B,OAAO;EAAE;EAAY,aADD,IAAY,IAAI,IAAS,IAAY;EACvB;CAAW;AAC/C"}

package/dist/components/scroll-area/ScrollBar/ScrollBar.js

@@ -3,52 +3,52 @@ import { useScrollAreaContext as t } from "../ScrollArea/ScrollArea.context.js";
 import { className as n, delegateEvents as r, effect as i, mergeProps as a, setAttribute as o, spread as s, style as c, template as l, use as u } from "solid-js/web";
 import { createMemo as d, createSignal as f, mergeProps as p, onCleanup as m, splitProps as h } from "solid-js";
 //#region src/components/scroll-area/ScrollBar/ScrollBar.tsx
-var g = /* @__PURE__ */ l("<div data-slot=scroll-area-scrollbar role=scrollbar aria-controls=scroll-area-viewport aria-valuemin=0 aria-valuemax=100 tabindex=0><div data-slot=scroll-area-thumb>"), _ = 20, v = (r) => {
-	let l = t(), v, [y, b] = h(p({ orientation: "vertical" }, r), [
+var g = /*#__PURE__*/ l("<div data-slot=scroll-area-scrollbar role=scrollbar aria-controls=scroll-area-viewport aria-valuemin=0 aria-valuemax=100 tabindex=0><div data-slot=scroll-area-thumb>"), _ = 20, v = (r) => {
+	let l = t(), v, y = p({ orientation: "vertical" }, r), [b, x] = h(y, [
 		"orientation",
 		"class",
 		"classList"
-	]), [x, S] = f(!1), C = () => y.orientation === "vertical", w = d(() => C() ? l.vertical() : l.horizontal()), T = d(() => {
-		let e = w(), t = (C() ? v?.clientHeight ?? 0 : v?.clientWidth ?? 0) - 2, n = t * e.thumbRatio, r = Math.max(n, _), i = Math.max(0, t - r) * e.thumbOffset;
-		return C() ? {
+	]), [S, C] = f(!1), w = () => b.orientation === "vertical", T = d(() => w() ? l.vertical() : l.horizontal()), E = d(() => {
+		let e = T(), t = (w() ? v?.clientHeight ?? 0 : v?.clientWidth ?? 0) - 2, n = t * e.thumbRatio, r = Math.max(n, _), i = Math.max(0, t - r) * e.thumbOffset;
+		return w() ? {
 			height: `${r}px`,
 			transform: `translateY(${i}px)`
 		} : {
 			width: `${r}px`,
 			transform: `translateX(${i}px)`
 		};
-	}), E = d(() => Math.round(w().thumbOffset * 100));
-	function D(e) {
+	}), D = d(() => Math.round(T().thumbOffset * 100));
+	function O(e) {
 		e.preventDefault(), e.stopPropagation();
 		let t = l.viewportRef();
 		if (!t) return;
-		l.setDragging(y.orientation), S(!0);
-		let n = C() ? e.clientY : e.clientX, r = C() ? t.scrollTop : t.scrollLeft, i = C() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth, a = i / ((C() ? v.clientHeight : v.clientWidth) - 2 - (C() ? e.currentTarget.clientHeight : e.currentTarget.clientWidth));
+		l.setDragging(b.orientation), C(!0);
+		let n = w() ? e.clientY : e.clientX, r = w() ? t.scrollTop : t.scrollLeft, i = w() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth, a = i / ((w() ? v.clientHeight : v.clientWidth) - 2 - (w() ? e.currentTarget.clientHeight : e.currentTarget.clientWidth));
 		function o(e) {
-			let o = (C() ? e.clientY : e.clientX) - n, s = Math.max(0, Math.min(i, r + o * a));
-			C() ? t.scrollTop = s : t.scrollLeft = s;
+			let o = (w() ? e.clientY : e.clientX) - n, s = Math.max(0, Math.min(i, r + o * a));
+			w() ? t.scrollTop = s : t.scrollLeft = s;
 		}
 		function s() {
-			l.setDragging(null), S(!1), window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s);
+			l.setDragging(null), C(!1), window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s);
 		}
 		window.addEventListener("pointermove", o), window.addEventListener("pointerup", s), m(() => {
 			window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s);
 		});
 	}
-	function O(e) {
+	function k(e) {
 		if (e.target.dataset.slot === "scroll-area-thumb") return;
 		let t = l.viewportRef();
 		if (!t) return;
-		let n = v.getBoundingClientRect(), r = (C() ? (e.clientY - n.top) / n.height : (e.clientX - n.left) / n.width) * (C() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth);
+		let n = v.getBoundingClientRect(), r = (w() ? (e.clientY - n.top) / n.height : (e.clientX - n.left) / n.width) * (w() ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth);
 		t.scrollTo({
-			[C() ? "top" : "left"]: r,
+			[w() ? "top" : "left"]: r,
 			behavior: "smooth"
 		});
 	}
-	function k(e) {
+	function A(e) {
 		let t = l.viewportRef();
 		if (!t) return;
-		let n = C() ? t.clientHeight : t.clientWidth, r = {
+		let n = w() ? t.clientHeight : t.clientWidth, r = {
 			ArrowDown: 40,
 			ArrowRight: 40,
 			ArrowUp: -40,
@@ -58,31 +58,31 @@ var g = /* @__PURE__ */ l("<div data-slot=scroll-area-scrollbar role=scrollbar a
 			Home: -Infinity,
 			End: Infinity
 		}[e.key];
-		r !== void 0 && (e.preventDefault(), C() ? t.scrollTop = Math.max(0, Math.min(t.scrollHeight - t.clientHeight, r === Infinity ? t.scrollHeight : r === -Infinity ? 0 : t.scrollTop + r)) : t.scrollLeft = Math.max(0, Math.min(t.scrollWidth - t.clientWidth, r === Infinity ? t.scrollWidth : r === -Infinity ? 0 : t.scrollLeft + r)));
+		r !== void 0 && (e.preventDefault(), w() ? t.scrollTop = Math.max(0, Math.min(t.scrollHeight - t.clientHeight, r === Infinity ? t.scrollHeight : r === -Infinity ? 0 : t.scrollTop + r)) : t.scrollLeft = Math.max(0, Math.min(t.scrollWidth - t.clientWidth, r === Infinity ? t.scrollWidth : r === -Infinity ? 0 : t.scrollLeft + r)));
 	}
-	let A = d(() => l.hovering() || l.dragging() === r.orientation || x());
+	let j = d(() => l.hovering() || l.dragging() === r.orientation || S());
 	return (() => {
 		var t = g(), r = t.firstChild;
-		t.$$keydown = k, t.$$pointerdown = O;
+		t.$$keydown = A, t.$$pointerdown = k;
 		var d = v;
 		return typeof d == "function" ? u(d, t) : v = t, s(t, a({
 			get "aria-orientation"() {
-				return y.orientation;
+				return b.orientation;
 			},
 			get "aria-valuenow"() {
-				return E();
+				return D();
 			},
 			get "data-orientation"() {
-				return y.orientation;
+				return b.orientation;
 			},
 			get "data-hovering"() {
 				return l.hovering() ? "" : void 0;
 			},
 			get class() {
-				return e("absolute touch-none select-none transition-opacity duration-150", A() ? "opacity-100" : "opacity-0", C() ? "right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col" : "bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row", "outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70", y.class);
+				return e("absolute touch-none select-none transition-opacity duration-150", j() ? "opacity-100" : "opacity-0", w() ? "right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col" : "bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row", "outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70", b.class);
 			}
-		}, b), !1, !0), r.$$pointerdown = D, i((t) => {
-			var i = y.orientation, a = e("relative rounded-full", "bg-neutral-300 dark:bg-white/20", "hover:bg-neutral-400 dark:hover:bg-white/30", x() ? "bg-neutral-500 dark:bg-white/40" : "", "transition-colors duration-100", C() ? "min-h-5 w-full" : "min-w-5 h-full"), s = T();
+		}, x), !1, !0), r.$$pointerdown = O, i((t) => {
+			var i = b.orientation, a = e("relative rounded-full bg-border", "hover:bg-neutral-400 dark:hover:bg-white/30", S() ? "bg-neutral-500 dark:bg-white/40" : "", "transition-colors duration-100", w() ? "min-h-5 w-full" : "min-w-5 h-full"), s = E();
 			return i !== t.e && o(r, "data-orientation", t.e = i), a !== t.t && n(r, t.t = a), t.a = c(r, s, t.a), t;
 		}, {
 			e: void 0,

package/dist/components/scroll-area/ScrollBar/ScrollBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","onCleanup","splitProps","ScrollBarProps","clsx","useScrollAreaContext","MIN_THUMB_PX","ScrollBar","props","ctx","trackEl","HTMLDivElement","merged","orientation","const","local","others","active","setActive","isVertical","metrics","vertical","horizontal","thumbStyle","m","trackSize","clientHeight","clientWidth","trackInnerSize","rawThumbSize","thumbRatio","thumbSize","Math","max","maxOffset","offset","thumbOffset","height","transform","width","ariaValueNow","round","onThumbPointerDown","e","PointerEvent","preventDefault","stopPropagation","viewport","viewportRef","setDragging","startPointer","clientY","clientX","startScroll","scrollTop","scrollLeft","maxScroll","scrollHeight","scrollWidth","currentTarget","scrollRatio","onMove","me","delta","newScroll","min","onUp","window","removeEventListener","addEventListener","onTrackPointerDown","target","HTMLElement","dataset","slot","rect","getBoundingClientRect","clickPos","top","left","scrollTo","behavior","onKeyDown","KeyboardEvent","step","pageSize","keyMap","Record","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","PageDown","PageUp","Home","Infinity","End","key","undefined","visible","hovering","dragging","_el$","_tmpl$","_el$2","firstChild","$$keydown","$$pointerdown","_ref$","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","data-orientation","data-hovering","class","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","_$className","a","_$style","_$delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\n\n// Minimum thumb length in px so it's always clickable\nconst MIN_THUMB_PX = 20;\n\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  let trackEl!: HTMLDivElement;\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [active, setActive] = createSignal(false);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  const metrics = createMemo(() =>\n    isVertical() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /**\n   * Compute thumb CSS: we clamp to MIN_THUMB_PX, then shift the offset so the\n   * thumb never overflows the track.\n   */\n  const thumbStyle = createMemo(() => {\n    const m = metrics();\n\n    const trackSize = isVertical()\n      ? (trackEl?.clientHeight ?? 0)\n      : (trackEl?.clientWidth ?? 0);\n\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const rawThumbSize = trackInnerSize * m.thumbRatio;\n    const thumbSize = Math.max(rawThumbSize, MIN_THUMB_PX);\n\n    // Adjust offset to account for clamping\n    const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n    const offset = maxOffset * m.thumbOffset;\n\n    if (isVertical()) {\n      return {\n        height: `${thumbSize}px`,\n        transform: `translateY(${offset}px)`,\n      };\n    }\n    return {\n      width: `${thumbSize}px`,\n      transform: `translateX(${offset}px)`,\n    };\n  });\n\n  // ARIA value: 0–100 integer representing scroll position\n  const ariaValueNow = createMemo(() =>\n    Math.round(metrics().thumbOffset * 100),\n  );\n\n  // ── Drag handling ─────────────────────────────────────────────────────────\n  function onThumbPointerDown(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    ctx.setDragging(local.orientation);\n    setActive(true);\n\n    const startPointer = isVertical() ? e.clientY : e.clientX;\n    const startScroll = isVertical() ? viewport.scrollTop : viewport.scrollLeft;\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const trackSize = isVertical() ? trackEl.clientHeight : trackEl.clientWidth;\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const thumbSize = isVertical()\n      ? (e.currentTarget as HTMLDivElement).clientHeight\n      : (e.currentTarget as HTMLDivElement).clientWidth;\n    const scrollRatio = maxScroll / (trackInnerSize - thumbSize);\n\n    function onMove(me: PointerEvent) {\n      const delta = (isVertical() ? me.clientY : me.clientX) - startPointer;\n\n      const newScroll = Math.max(\n        0,\n        Math.min(maxScroll, startScroll + delta * scrollRatio),\n      );\n      if (isVertical()) {\n        viewport!.scrollTop = newScroll;\n      } else {\n        viewport!.scrollLeft = newScroll;\n      }\n    }\n\n    function onUp() {\n      ctx.setDragging(null);\n      setActive(false);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    }\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n\n    onCleanup(() => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    });\n  }\n\n  // ── Track click: page-scroll (click above/below thumb) ───────────────────\n  function onTrackPointerDown(e: PointerEvent) {\n    // Ignore if the target is the thumb itself\n    if ((e.target as HTMLElement).dataset.slot === \"scroll-area-thumb\") return;\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const rect = trackEl.getBoundingClientRect();\n    const clickPos = isVertical()\n      ? (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const target = clickPos * maxScroll;\n\n    viewport.scrollTo({\n      [isVertical() ? \"top\" : \"left\"]: target,\n      behavior: \"smooth\",\n    });\n  }\n\n  // ── Keyboard scrolling on the scrollbar track ─────────────────────────────\n  function onKeyDown(e: KeyboardEvent) {\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const step = 40; // px per keypress\n    const pageSize = isVertical()\n      ? viewport.clientHeight\n      : viewport.clientWidth;\n\n    const keyMap: Record<string, number> = {\n      ArrowDown: step,\n      ArrowRight: step,\n      ArrowUp: -step,\n      ArrowLeft: -step,\n      PageDown: pageSize,\n      PageUp: -pageSize,\n      Home: -Infinity,\n      End: Infinity,\n    };\n\n    const delta = keyMap[e.key];\n    if (delta === undefined) return;\n\n    e.preventDefault();\n\n    if (isVertical()) {\n      viewport.scrollTop = Math.max(\n        0,\n        Math.min(\n          viewport.scrollHeight - viewport.clientHeight,\n          delta === Infinity\n            ? viewport.scrollHeight\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollTop + delta,\n        ),\n      );\n    } else {\n      viewport.scrollLeft = Math.max(\n        0,\n        Math.min(\n          viewport.scrollWidth - viewport.clientWidth,\n          delta === Infinity\n            ? viewport.scrollWidth\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollLeft + delta,\n        ),\n      );\n    }\n  }\n\n  // ── Visibility: show while hovering or dragging ───────────────────────────\n  const visible = createMemo(\n    () => ctx.hovering() || ctx.dragging() === props.orientation || active(),\n  );\n\n  return (\n    <div\n      ref={trackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={local.orientation}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={onTrackPointerDown}\n      onKeyDown={onKeyDown}\n      data-orientation={local.orientation}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVertical()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n      )}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={onThumbPointerDown}\n        data-orientation={local.orientation}\n        class={clsx(\n          \"relative rounded-full\",\n          // Thumb colour\n          \"bg-neutral-300 dark:bg-white/20\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVertical() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;oMAYMQ,IAAe,IAERC,KAAaC,MAA0B;CAClD,IAAMC,IAAMJ,GAAsB,EAE9BK,GAIE,CAACK,GAAOC,KAAUd,EAFTF,EAAW,EAAEa,aAAa,YAAY,EAAWL,EAAM,EAE3B;EACzC;EACA;EACA;EACD,CAAC,EAEI,CAACS,GAAQC,KAAanB,EAAa,GAAM,EACzCoB,UAAmBJ,EAAMF,gBAAgB,YAEzCO,IAAUtB,QACdqB,GAAY,GAAGV,EAAIY,UAAU,GAAGZ,EAAIa,YACtC,CAAC,EAMKC,IAAazB,QAAiB;EAClC,IAAM0B,IAAIJ,GAAS,EAMbQ,KAJYT,GAAY,GACzBT,GAASgB,gBAAgB,IACzBhB,GAASiB,eAAe,KAEM,GAE7BE,IAAeD,IAAiBJ,EAAEM,YAClCC,IAAYC,KAAKC,IAAIJ,GAAcvB,EAAa,EAIhD6B,IADYH,KAAKC,IAAI,GAAGL,IAAiBG,EAAU,GAC9BP,EAAEY;AAQ7B,SANIjB,GAAY,GACP;GACLkB,QAAQ,GAAGN,EAAS;GACpBO,WAAW,cAAcH,EAAM;GAChC,GAEI;GACLI,OAAO,GAAGR,EAAS;GACnBO,WAAW,cAAcH,EAAM;GAChC;GACD,EAGIK,IAAe1C,QACnBkC,KAAKS,MAAMrB,GAAS,CAACgB,cAAc,IACrC,CAAC;CAGD,SAASM,EAAmBC,GAAiB;AAE3CA,EADAA,EAAEE,gBAAgB,EAClBF,EAAEG,iBAAiB;EAEnB,IAAMC,IAAWtC,EAAIuC,aAAa;AAClC,MAAI,CAACD,EAAU;AAGf7B,EADAT,EAAIwC,YAAYlC,EAAMF,YAAY,EAClCK,EAAU,GAAK;EAEf,IAAMgC,IAAe/B,GAAY,GAAGwB,EAAEQ,UAAUR,EAAES,SAC5CC,IAAclC,GAAY,GAAG4B,EAASO,YAAYP,EAASQ,YAC3DC,IAAYrC,GAAY,GAC1B4B,EAASU,eAAeV,EAASrB,eACjCqB,EAASW,cAAcX,EAASpB,aAQ9BiC,IAAcJ,MANFrC,GAAY,GAAGT,EAAQgB,eAAehB,EAAQiB,eAC7B,KAEjBR,GAAY,GACzBwB,EAAEgB,cAAiCjC,eACnCiB,EAAEgB,cAAiChC;EAGxC,SAASkC,EAAOC,GAAkB;GAChC,IAAMC,KAAS5C,GAAY,GAAG2C,EAAGX,UAAUW,EAAGV,WAAWF,GAEnDc,IAAYhC,KAAKC,IACrB,GACAD,KAAKiC,IAAIT,GAAWH,IAAcU,IAAQH,EAC5C,CAAC;AACD,GAAIzC,GAAY,GACd4B,EAAUO,YAAYU,IAEtBjB,EAAUQ,aAAaS;;EAI3B,SAASE,IAAO;AAIdC,GAHA1D,EAAIwC,YAAY,KAAK,EACrB/B,EAAU,GAAM,EAChBiD,OAAOC,oBAAoB,eAAeP,EAAO,EACjDM,OAAOC,oBAAoB,aAAaF,EAAK;;AAM/CjE,EAHAkE,OAAOE,iBAAiB,eAAeR,EAAO,EAC9CM,OAAOE,iBAAiB,aAAaH,EAAK,EAE1CjE,QAAgB;AAEdkE,GADAA,OAAOC,oBAAoB,eAAeP,EAAO,EACjDM,OAAOC,oBAAoB,aAAaF,EAAK;IAC7C;;CAIJ,SAASI,EAAmB3B,GAAiB;AAE3C,MAAKA,EAAE4B,OAAuBE,QAAQC,SAAS,oBAAqB;EAEpE,IAAM3B,IAAWtC,EAAIuC,aAAa;AAClC,MAAI,CAACD,EAAU;EAEf,IAAM4B,IAAOjE,EAAQkE,uBAAuB,EAStCL,KARWpD,GAAY,IACxBwB,EAAEQ,UAAUwB,EAAKG,OAAOH,EAAKtC,UAC7BM,EAAES,UAAUuB,EAAKI,QAAQJ,EAAKpC,UAEjBpB,GAAY,GAC1B4B,EAASU,eAAeV,EAASrB,eACjCqB,EAASW,cAAcX,EAASpB;AAIpCoB,IAASiC,SAAS;IACf7D,GAAY,GAAG,QAAQ,SAASoD;GACjCU,UAAU;GACX,CAAC;;CAIJ,SAASC,EAAUvC,GAAkB;EACnC,IAAMI,IAAWtC,EAAIuC,aAAa;AAClC,MAAI,CAACD,EAAU;EAEf,IACMsC,IAAWlE,GAAY,GACzB4B,EAASrB,eACTqB,EAASpB,aAaPoC,IAXiC;GACrCyB,WAAWJ;GACXK,YAAYL;GACZM,SAAS;GACTC,WAAW;GACXC,UAAUP;GACVQ,QAAQ,CAACR;GACTS,MAAM;GACNE,KAAKD;GACN,CAEoBpD,EAAEsD;AACnBlC,QAAUmC,KAAAA,MAEdvD,EAAEE,gBAAgB,EAEd1B,GAAY,GACd4B,EAASO,YAAYtB,KAAKC,IACxB,GACAD,KAAKiC,IACHlB,EAASU,eAAeV,EAASrB,cACjCqC,MAAUgC,WACNhD,EAASU,eACTM,MAAU,YACR,IACAhB,EAASO,YAAYS,EAE/B,CAAC,GAEDhB,EAASQ,aAAavB,KAAKC,IACzB,GACAD,KAAKiC,IACHlB,EAASW,cAAcX,EAASpB,aAChCoC,MAAUgC,WACNhD,EAASW,cACTK,MAAU,YACR,IACAhB,EAASQ,aAAaQ,EAEhC,CAAC;;CAKL,IAAMoC,IAAUrG,QACRW,EAAI2F,UAAU,IAAI3F,EAAI4F,UAAU,KAAK7F,EAAMK,eAAeI,GAClE,CAAC;AAED,eAAA;EAAA,IAAAqF,IAAAC,GAAA,EAAAC,IAAAF,EAAAG;AAawBH,EAbxBA,EAAAI,YAaexB,GAASoB,EAAAK,gBADLrC;EAAkB,IAAAsC,IAV5BlG;AA4CgB,SA5CT,OAAAkG,KAAA,aAAAC,EAAAD,GAAAN,EAAA,GAAP5F,IAAO4F,GAAAQ,EAAAR,GAAAS,EAAA;GAAA,IAAA,qBAAA;AAAA,WAKMhG,EAAMF;;GAAW,IAAA,kBAAA;AAAA,WACpB2B,GAAc;;GAAA,IAAA,qBAAA;AAAA,WAMXzB,EAAMF;;GAAW,IAAA,kBAAA;AAAA,WACpBJ,EAAI2F,UAAU,GAAG,KAAKF,KAAAA;;GAAS,IAAA,QAAA;AAAA,WACvC9F,EAEL,mEAEA+F,GAAS,GAAG,gBAAgB,aAE5BhF,GAAY,GACR,gFACA,iFAEJ,8GACAJ,EAAMqG,MACP;;GAAA,EACGpG,EAAM,EAAA,IAAA,GAAA,EAAAwF,EAAAG,gBAIOjE,GAAkB2E,GAAAC,MAAA;GAAA,IAAAC,IACfxG,EAAMF,aAAW2G,IAC5BpH,EACL,yBAEA,mCAEA,+CACAa,GAAQ,GAAG,oCAAoC,IAC/C,kCAEAE,GAAY,GAAG,mBAAmB,iBACnC,EAAAsG,IACMlG,GAAY;AAAA,UAAAgG,MAAAD,EAAA3E,KAAA+E,EAAAlB,GAAA,oBAAAc,EAAA3E,IAAA4E,EAAA,EAAAC,MAAAF,EAAAK,KAAAC,EAAApB,GAAAc,EAAAK,IAAAH,EAAA,EAAAF,EAAAO,IAAAC,EAAAtB,GAAAiB,GAAAH,EAAAO,EAAA,EAAAP;KAAA;GAAA3E,GAAAuD,KAAAA;GAAAyB,GAAAzB,KAAAA;GAAA2B,GAAA3B,KAAAA;GAAA,CAAA,EAAAI;KAAA;;AAIzByB,EAAA,CAAA,eAAA,UAAA,CAAA"}
+{"version":3,"file":"ScrollBar.js","names":["createMemo","createSignal","mergeProps","onCleanup","splitProps","ScrollBarProps","clsx","useScrollAreaContext","MIN_THUMB_PX","ScrollBar","props","ctx","trackEl","HTMLDivElement","merged","orientation","const","local","others","active","setActive","isVertical","metrics","vertical","horizontal","thumbStyle","m","trackSize","clientHeight","clientWidth","trackInnerSize","rawThumbSize","thumbRatio","thumbSize","Math","max","maxOffset","offset","thumbOffset","height","transform","width","ariaValueNow","round","onThumbPointerDown","e","PointerEvent","preventDefault","stopPropagation","viewport","viewportRef","setDragging","startPointer","clientY","clientX","startScroll","scrollTop","scrollLeft","maxScroll","scrollHeight","scrollWidth","currentTarget","scrollRatio","onMove","me","delta","newScroll","min","onUp","window","removeEventListener","addEventListener","onTrackPointerDown","target","HTMLElement","dataset","slot","rect","getBoundingClientRect","clickPos","top","left","scrollTo","behavior","onKeyDown","KeyboardEvent","step","pageSize","keyMap","Record","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","PageDown","PageUp","Home","Infinity","End","key","undefined","visible","hovering","dragging","_el$","_tmpl$","_el$2","firstChild","$$keydown","$$pointerdown","_ref$","_$use","_$spread","_$mergeProps","aria-orientation","aria-valuenow","data-orientation","data-hovering","class","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","_$className","a","_$style","_$delegateEvents"],"sources":["../../../../src/components/scroll-area/ScrollBar/ScrollBar.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport type { ScrollBarProps } from \"./ScrollBar.types\";\nimport { clsx } from \"~/utils\";\nimport { useScrollAreaContext } from \"../ScrollArea\";\n\n// Minimum thumb length in px so it's always clickable\nconst MIN_THUMB_PX = 20;\n\nexport const ScrollBar = (props: ScrollBarProps) => {\n  const ctx = useScrollAreaContext();\n\n  let trackEl!: HTMLDivElement;\n\n  const merged = mergeProps({ orientation: \"vertical\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  const [active, setActive] = createSignal(false);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  const metrics = createMemo(() =>\n    isVertical() ? ctx.vertical() : ctx.horizontal(),\n  );\n\n  /**\n   * Compute thumb CSS: we clamp to MIN_THUMB_PX, then shift the offset so the\n   * thumb never overflows the track.\n   */\n  const thumbStyle = createMemo(() => {\n    const m = metrics();\n\n    const trackSize = isVertical()\n      ? (trackEl?.clientHeight ?? 0)\n      : (trackEl?.clientWidth ?? 0);\n\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const rawThumbSize = trackInnerSize * m.thumbRatio;\n    const thumbSize = Math.max(rawThumbSize, MIN_THUMB_PX);\n\n    // Adjust offset to account for clamping\n    const maxOffset = Math.max(0, trackInnerSize - thumbSize);\n    const offset = maxOffset * m.thumbOffset;\n\n    if (isVertical()) {\n      return {\n        height: `${thumbSize}px`,\n        transform: `translateY(${offset}px)`,\n      };\n    }\n    return {\n      width: `${thumbSize}px`,\n      transform: `translateX(${offset}px)`,\n    };\n  });\n\n  // ARIA value: 0–100 integer representing scroll position\n  const ariaValueNow = createMemo(() =>\n    Math.round(metrics().thumbOffset * 100),\n  );\n\n  // ── Drag handling ─────────────────────────────────────────────────────────\n  function onThumbPointerDown(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    ctx.setDragging(local.orientation);\n    setActive(true);\n\n    const startPointer = isVertical() ? e.clientY : e.clientX;\n    const startScroll = isVertical() ? viewport.scrollTop : viewport.scrollLeft;\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const trackSize = isVertical() ? trackEl.clientHeight : trackEl.clientWidth;\n    const trackInnerSize = trackSize - 2; // track有内边距\n\n    const thumbSize = isVertical()\n      ? (e.currentTarget as HTMLDivElement).clientHeight\n      : (e.currentTarget as HTMLDivElement).clientWidth;\n    const scrollRatio = maxScroll / (trackInnerSize - thumbSize);\n\n    function onMove(me: PointerEvent) {\n      const delta = (isVertical() ? me.clientY : me.clientX) - startPointer;\n\n      const newScroll = Math.max(\n        0,\n        Math.min(maxScroll, startScroll + delta * scrollRatio),\n      );\n      if (isVertical()) {\n        viewport!.scrollTop = newScroll;\n      } else {\n        viewport!.scrollLeft = newScroll;\n      }\n    }\n\n    function onUp() {\n      ctx.setDragging(null);\n      setActive(false);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    }\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n\n    onCleanup(() => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    });\n  }\n\n  // ── Track click: page-scroll (click above/below thumb) ───────────────────\n  function onTrackPointerDown(e: PointerEvent) {\n    // Ignore if the target is the thumb itself\n    if ((e.target as HTMLElement).dataset.slot === \"scroll-area-thumb\") return;\n\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const rect = trackEl.getBoundingClientRect();\n    const clickPos = isVertical()\n      ? (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const maxScroll = isVertical()\n      ? viewport.scrollHeight - viewport.clientHeight\n      : viewport.scrollWidth - viewport.clientWidth;\n\n    const target = clickPos * maxScroll;\n\n    viewport.scrollTo({\n      [isVertical() ? \"top\" : \"left\"]: target,\n      behavior: \"smooth\",\n    });\n  }\n\n  // ── Keyboard scrolling on the scrollbar track ─────────────────────────────\n  function onKeyDown(e: KeyboardEvent) {\n    const viewport = ctx.viewportRef();\n    if (!viewport) return;\n\n    const step = 40; // px per keypress\n    const pageSize = isVertical()\n      ? viewport.clientHeight\n      : viewport.clientWidth;\n\n    const keyMap: Record<string, number> = {\n      ArrowDown: step,\n      ArrowRight: step,\n      ArrowUp: -step,\n      ArrowLeft: -step,\n      PageDown: pageSize,\n      PageUp: -pageSize,\n      Home: -Infinity,\n      End: Infinity,\n    };\n\n    const delta = keyMap[e.key];\n    if (delta === undefined) return;\n\n    e.preventDefault();\n\n    if (isVertical()) {\n      viewport.scrollTop = Math.max(\n        0,\n        Math.min(\n          viewport.scrollHeight - viewport.clientHeight,\n          delta === Infinity\n            ? viewport.scrollHeight\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollTop + delta,\n        ),\n      );\n    } else {\n      viewport.scrollLeft = Math.max(\n        0,\n        Math.min(\n          viewport.scrollWidth - viewport.clientWidth,\n          delta === Infinity\n            ? viewport.scrollWidth\n            : delta === -Infinity\n              ? 0\n              : viewport.scrollLeft + delta,\n        ),\n      );\n    }\n  }\n\n  // ── Visibility: show while hovering or dragging ───────────────────────────\n  const visible = createMemo(\n    () => ctx.hovering() || ctx.dragging() === props.orientation || active(),\n  );\n\n  return (\n    <div\n      ref={trackEl}\n      data-slot=\"scroll-area-scrollbar\"\n      // WCAG 4.1.2: expose as scrollbar widget\n      role=\"scrollbar\"\n      aria-controls=\"scroll-area-viewport\"\n      aria-orientation={local.orientation}\n      aria-valuenow={ariaValueNow()}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      tabIndex={0}\n      onPointerDown={onTrackPointerDown}\n      onKeyDown={onKeyDown}\n      data-orientation={local.orientation}\n      data-hovering={ctx.hovering() ? \"\" : undefined}\n      class={clsx(\n        // Layout\n        \"absolute touch-none select-none transition-opacity duration-150\",\n        // Opacity — visible on hover/drag, hidden otherwise\n        visible() ? \"opacity-100\" : \"opacity-0\",\n        // Axis-specific positioning & size\n        isVertical()\n          ? \"right-0 top-0 h-full w-2.5 border-l border-l-transparent p-px flex flex-col\"\n          : \"bottom-0 left-0 w-full h-2.5 border-t border-t-transparent p-px flex flex-row\",\n        // Keyboard focus ring\n        \"outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/70 dark:focus-visible:ring-neutral-500/70\",\n        local.class,\n      )}\n      {...others}\n    >\n      <div\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={onThumbPointerDown}\n        data-orientation={local.orientation}\n        class={clsx(\n          \"relative rounded-full bg-border\",\n          // Hover / active state\n          \"hover:bg-neutral-400 dark:hover:bg-white/30\",\n          active() ? \"bg-neutral-500 dark:bg-white/40\" : \"\",\n          \"transition-colors duration-100\",\n          // Ensure thumb is always reachable\n          isVertical() ? \"min-h-5 w-full\" : \"min-w-5 h-full\",\n        )}\n        style={thumbStyle()}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/separator/Separator.js

@@ -3,8 +3,8 @@ import { classes as t } from "./Separator.styles.js";
 import { mergeProps as n, spread as r, template as i } from "solid-js/web";
 import { mergeProps as a, splitProps as o } from "solid-js";
 //#region src/components/separator/Separator.tsx
-var s = /* @__PURE__ */ i("<div data-slot=separator>"), c = (i) => {
-	let [c, l] = o(a({ orientation: "horizontal" }, i), [
+var s = /*#__PURE__*/ i("<div data-slot=separator>"), c = (i) => {
+	let c = a({ orientation: "horizontal" }, i), [l, u] = o(c, [
 		"orientation",
 		"class",
 		"classList"
@@ -13,18 +13,18 @@ var s = /* @__PURE__ */ i("<div data-slot=separator>"), c = (i) => {
 		var i = s();
 		return r(i, n({
 			get "data-orientation"() {
-				return c.orientation;
+				return l.orientation;
 			},
 			get "data-horizontal"() {
-				return c.orientation === "horizontal" ? "" : void 0;
+				return l.orientation === "horizontal" ? "" : void 0;
 			},
 			get "data-vertical"() {
-				return c.orientation === "vertical" ? "" : void 0;
+				return l.orientation === "vertical" ? "" : void 0;
 			},
 			get class() {
-				return e(t, c.class);
+				return e(t, l.class);
 			}
-		}, l), !1, !1), i;
+		}, u), !1, !1), i;
 	})();
 };
 //#endregion

package/dist/components/separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["mergeProps","splitProps","clsx","classes","SeparatorProps","Separator","props","merged","orientation","const","local","others","_el$","_tmpl$","_$spread","_$mergeProps","data-orientation","data-horizontal","undefined","data-vertical","class"],"sources":["../../../src/components/separator/Separator.tsx"],"sourcesContent":["import { mergeProps, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { classes } from \"./Separator.styles\";\nimport type { SeparatorProps } from \"./Separator.types\";\n\nexport const Separator = (props: SeparatorProps) => {\n  const merged = mergeProps({ orientation: \"horizontal\" } as const, props);\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  return (\n    <div\n      data-slot=\"separator\"\n      data-orientation={local.orientation}\n      data-horizontal={local.orientation === \"horizontal\" ? \"\" : undefined}\n      data-vertical={local.orientation === \"vertical\" ? \"\" : undefined}\n      class={clsx(classes, local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;;wDAKaK,KAAaC,MAA0B;CAElD,IAAM,CAACI,GAAOC,KAAUV,EADTD,EAAW,EAAEQ,aAAa,cAAc,EAAWF,EAAM,EAC7B;EACzC;EACA;EACA;EACD,CAAC;AAEF,eAAA;EAAA,IAAAM,IAAAC,GAAA;AAOc,SAPdC,EAAAF,GAAAG,EAAA;GAAA,IAAA,qBAAA;AAAA,WAGsBL,EAAMF;;GAAW,IAAA,oBAAA;AAAA,WAClBE,EAAMF,gBAAgB,eAAe,KAAKU,KAAAA;;GAAS,IAAA,kBAAA;AAAA,WACrDR,EAAMF,gBAAgB,aAAa,KAAKU,KAAAA;;GAAS,IAAA,QAAA;AAAA,WACzDhB,EAAKC,GAASO,EAAMU,MAAM;;GAAA,EAC7BT,EAAM,EAAA,IAAA,GAAA,EAAAC;KAAA"}
+{"version":3,"file":"Separator.js","names":["mergeProps","splitProps","clsx","classes","SeparatorProps","Separator","props","merged","orientation","const","local","others","_el$","_tmpl$","_$spread","_$mergeProps","data-orientation","data-horizontal","undefined","data-vertical","class"],"sources":["../../../src/components/separator/Separator.tsx"],"sourcesContent":["import { mergeProps, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { classes } from \"./Separator.styles\";\nimport type { SeparatorProps } from \"./Separator.types\";\n\nexport const Separator = (props: SeparatorProps) => {\n  const merged = mergeProps({ orientation: \"horizontal\" } as const, props);\n  const [local, others] = splitProps(merged, [\n    \"orientation\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  return (\n    <div\n      data-slot=\"separator\"\n      data-orientation={local.orientation}\n      data-horizontal={local.orientation === \"horizontal\" ? \"\" : undefined}\n      data-vertical={local.orientation === \"vertical\" ? \"\" : undefined}\n      class={clsx(classes, local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;;sDAKaK,KAAaC,MAA0B;CAClD,IAAMC,IAASP,EAAW,EAAEQ,aAAa,aAAa,GAAYF,CAAK,GACjE,CAACI,GAAOC,KAAUV,EAAWM,GAAQ;EACzC;EACA;EACA;CAAW,CACZ;CAED,cAAA;EAAA,IAAAK,IAAAC,EAAA;EAOc,OAPdC,EAAAF,GAAAG,EAAA;GAAA,IAAA,qBAAA;IAAA,OAGsBL,EAAMF;GAAW;GAAA,IAAA,oBAAA;IAAA,OAClBE,EAAMF,gBAAgB,eAAe,KAAKU,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OACrDR,EAAMF,gBAAgB,aAAa,KAAKU,KAAAA;GAAS;GAAA,IAAA,QAAA;IAAA,OACzDhB,EAAKC,GAASO,EAAMU,KAAK;GAAC;EAAA,GAC7BT,CAAM,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGhB"}

package/dist/components/separator/Separator.styles.js

@@ -1,6 +1,6 @@
 import { clsx as e } from "../../utils/clsx.js";
 //#region src/components/separator/Separator.styles.ts
-var t = e("shrink-0 bg-neutral-200 dark:bg-white/10 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch");
+var t = e("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch");
 //#endregion
 export { t as classes };
 

package/dist/components/separator/Separator.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.styles.js","names":[],"sources":["../../../src/components/separator/Separator.styles.ts"],"sourcesContent":["import { clsx } from \"~/utils\";\n\nexport const classes = clsx(\n  \"shrink-0 bg-neutral-200 dark:bg-white/10 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n);\n"],"mappings":";;AAEA,IAAa,IAAU,EACrB,qIACD"}
+{"version":3,"file":"Separator.styles.js","names":[],"sources":["../../../src/components/separator/Separator.styles.ts"],"sourcesContent":["import { clsx } from \"~/utils\";\n\nexport const classes = clsx(\n  \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n);\n"],"mappings":";;AAEA,IAAa,IAAU,EACrB,8GACF"}

package/dist/components/sidebar/Sidebar/Sidebar.js

@@ -3,12 +3,12 @@ import { useSidebar as t } from "../SidebarProvider/SidebarProvider.context.js";
 import { className as n, createComponent as r, effect as i, insert as a, mergeProps as o, setAttribute as s, spread as c, template as l } from "solid-js/web";
 import { Show as u, mergeProps as d, splitProps as f } from "solid-js";
 //#region src/components/sidebar/Sidebar/Sidebar.tsx
-var p = /* @__PURE__ */ l("<div class=\"group peer hidden text-neutral-950 dark:text-neutral-50 md:block\"data-slot=sidebar><div data-slot=sidebar-gap></div><div data-slot=sidebar-container><div data-sidebar=sidebar data-slot=sidebar-inner class=\"flex size-full flex-col bg-neutral-50 dark:bg-neutral-900 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-neutral-200 dark:group-data-[variant=floating]:ring-white/10\">"), m = /* @__PURE__ */ l("<div data-slot=sidebar>"), h = (l) => {
-	let { isMobile: h, state: g } = t(), [_, v] = f(d({
+var p = /*#__PURE__*/ l("<div class=\"group peer hidden text-sidebar-foreground md:block\"data-slot=sidebar><div data-slot=sidebar-gap></div><div data-slot=sidebar-container><div data-sidebar=sidebar data-slot=sidebar-inner class=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\">"), m = /*#__PURE__*/ l("<div data-slot=sidebar>"), h = (l) => {
+	let { isMobile: h, state: g } = t(), _ = d({
 		side: "left",
 		variant: "sidebar",
 		collapsible: "offcanvas"
-	}, l), [
+	}, l), [v, y] = f(_, [
 		"side",
 		"variant",
 		"collapsible",
@@ -18,14 +18,14 @@ var p = /* @__PURE__ */ l("<div class=\"group peer hidden text-neutral-950 dark:
 	]);
 	return r(u, {
 		get when() {
-			return _.collapsible !== "none";
+			return v.collapsible !== "none";
 		},
 		get fallback() {
 			return (() => {
 				var t = m();
 				return c(t, o({ get class() {
-					return e("flex h-full w-(--sidebar-width) flex-col", "bg-neutral-50 text-neutral-950", "dark:bg-neutral-900 dark:text-neutral-50", _.class);
-				} }, v), !1, !0), a(t, () => _.children), t;
+					return e("flex h-full w-(--sidebar-width) flex-col", "bg-sidebar text-sidebar-foreground", v.class);
+				} }, y), !1, !0), a(t, () => v.children), t;
 			})();
 		},
 		get children() {
@@ -36,13 +36,13 @@ var p = /* @__PURE__ */ l("<div class=\"group peer hidden text-neutral-950 dark:
 					var t = p(), r = t.firstChild, u = r.nextSibling, d = u.firstChild;
 					return c(u, o({
 						get "data-side"() {
-							return _.side;
+							return v.side;
 						},
 						get class() {
-							return e("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", _.variant === "floating" || _.variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", _.class);
+							return e("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) md:flex", v.variant === "floating" || v.variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", v.class);
 						}
-					}, l), !1, !0), a(d, () => _.children), i((i) => {
-						var a = g(), o = g() === "collapsed" ? _.collapsible : "", c = _.variant, l = _.side, u = e("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", _.variant === "floating" || _.variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)");
+					}, l), !1, !0), a(d, () => v.children), i((i) => {
+						var a = g(), o = g() === "collapsed" ? v.collapsible : "", c = v.variant, l = v.side, u = e("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", v.variant === "floating" || v.variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)");
 						return a !== i.e && s(t, "data-state", i.e = a), o !== i.t && s(t, "data-collapsible", i.t = o), c !== i.a && s(t, "data-variant", i.a = c), l !== i.o && s(t, "data-side", i.o = l), u !== i.i && n(r, i.i = u), i;
 					}, {
 						e: void 0,

package/dist/components/sidebar/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":["mergeProps","Show","splitProps","SidebarProps","clsx","useSidebar","Sidebar","props","isMobile","state","merged","side","variant","collapsible","const","local","others","_$createComponent","when","fallback","_el$5","_tmpl$2","_$spread","_$mergeProps","class","_$insert","children","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","data-side","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","e","_$setAttribute","t","a","o","i","_$className","undefined"],"sources":["../../../../src/components/sidebar/Sidebar/Sidebar.tsx"],"sourcesContent":["import { mergeProps, Show, splitProps } from \"solid-js\";\nimport type { SidebarProps } from \"./Sidebar.types\";\nimport { clsx } from \"~/utils\";\nimport { useSidebar } from \"../SidebarProvider\";\n\nexport const Sidebar = (props: SidebarProps) => {\n  const { isMobile, state } = useSidebar();\n\n  const merged = mergeProps(\n    { side: \"left\", variant: \"sidebar\", collapsible: \"offcanvas\" } as const,\n    props,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"side\",\n    \"variant\",\n    \"collapsible\",\n    \"class\",\n    \"classList\",\n    \"children\",\n  ]);\n\n  return (\n    <Show\n      when={local.collapsible !== \"none\"}\n      fallback={\n        <div\n          data-slot=\"sidebar\"\n          class={clsx(\n            \"flex h-full w-(--sidebar-width) flex-col\",\n            \"bg-neutral-50 text-neutral-950\",\n            \"dark:bg-neutral-900 dark:text-neutral-50\",\n            local.class,\n          )}\n          {...others}\n        >\n          {local.children}\n        </div>\n      }\n    >\n      <Show when={!isMobile} fallback={null}>\n        <div\n          class=\"group peer hidden text-neutral-950 dark:text-neutral-50 md:block\"\n          data-state={state()}\n          data-collapsible={state() === \"collapsed\" ? local.collapsible : \"\"}\n          data-variant={local.variant}\n          data-side={local.side}\n          data-slot=\"sidebar\"\n        >\n          {/* This is what handles the sidebar gap on desktop */}\n          <div\n            data-slot=\"sidebar-gap\"\n            class={clsx(\n              \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n              \"group-data-[collapsible=offcanvas]:w-0\",\n              \"group-data-[side=right]:rotate-180\",\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n            )}\n          />\n          <div\n            data-slot=\"sidebar-container\"\n            data-side={local.side}\n            class={clsx(\n              \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n              // Adjust the padding for floating and inset variants.\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n              local.class,\n            )}\n            {...props}\n          >\n            <div\n              data-sidebar=\"sidebar\"\n              data-slot=\"sidebar-inner\"\n              // \"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n              class=\"flex size-full flex-col bg-neutral-50 dark:bg-neutral-900 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-neutral-200 dark:group-data-[variant=floating]:ring-white/10\"\n            >\n              {local.children}\n            </div>\n          </div>\n        </div>\n      </Show>\n    </Show>\n  );\n};\n"],"mappings":";;;;;gkBAKaM,KAAWC,MAAwB;CAC9C,IAAM,EAAEC,aAAUC,aAAUJ,GAAY,EAOlC,CAACU,GAAOC,KAAUd,EALTF,EACb;EAAEW,MAAM;EAAQC,SAAS;EAAWC,aAAa;EAAa,EAC9DN,EACD,EAE0C;EACzC;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAAU,EACGhB,GAAI;EAAA,IACHiB,OAAI;AAAA,UAAEH,EAAMF,gBAAgB;;EAAM,IAClCM,WAAQ;AAAA,iBAAA;IAAA,IAAAC,IAAAC,GAAA;AAWW,WAXXC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,YAGGnB,EACL,4CACA,kCACA,4CACAW,EAAMS,MACP;OAAA,EACGR,EAAM,EAAA,IAAA,GAAA,EAAAS,EAAAL,SAETL,EAAMW,SAAQ,EAAAN;OAAA;;EAAA,IAAAM,WAAA;AAAA,UAAAT,EAIlBhB,GAAI;IAACiB,MAAM,CAACV;IAAUW,UAAU;IAAI,IAAAO,WAAA;KAAA,IAAAC,IAAAC,GAAA,EAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAD;AAmB9B,YAnB8BR,EAAAS,GAAAR,EAAA;MAAA,IAAA,cAAA;AAAA,cAuBpBR,EAAMJ;;MAAI,IAAA,QAAA;AAAA,cACdP,EACL,8VAEAW,EAAMH,YAAY,cAAcG,EAAMH,YAAY,UAC9C,6FACA,2HACJG,EAAMS,MACP;;MAAA,EACGjB,EAAK,EAAA,IAAA,GAAA,EAAAkB,EAAAQ,SAQNlB,EAAMW,SAAQ,EAAAS,GAAAC,MAAA;MAAA,IAAAC,IArCP5B,GAAO,EAAA6B,IACD7B,GAAO,KAAK,cAAcM,EAAMF,cAAc,IAAE0B,IACpDxB,EAAMH,SAAO4B,IAChBzB,EAAMJ,MAAI8B,IAMZrC,EACL,2FACA,0CACA,sCACAW,EAAMH,YAAY,cAAcG,EAAMH,YAAY,UAC9C,qFACA,yDACL;AAAA,aAAAyB,MAAAD,EAAAM,KAAAC,EAAAhB,GAAA,cAAAS,EAAAM,IAAAL,EAAA,EAAAC,MAAAF,EAAAQ,KAAAD,EAAAhB,GAAA,oBAAAS,EAAAQ,IAAAN,EAAA,EAAAC,MAAAH,EAAAS,KAAAF,EAAAhB,GAAA,gBAAAS,EAAAS,IAAAN,EAAA,EAAAC,MAAAJ,EAAAU,KAAAH,EAAAhB,GAAA,aAAAS,EAAAU,IAAAN,EAAA,EAAAC,MAAAL,EAAAW,KAAAC,EAAAnB,GAAAO,EAAAW,IAAAN,EAAA,EAAAL;QAAA;MAAAM,GAAAO,KAAAA;MAAAL,GAAAK,KAAAA;MAAAJ,GAAAI,KAAAA;MAAAH,GAAAG,KAAAA;MAAAF,GAAAE,KAAAA;MAAA,CAAA,EAAAtB;;IAAA,CAAA;;EAAA,CAAA"}
+{"version":3,"file":"Sidebar.js","names":["mergeProps","Show","splitProps","SidebarProps","clsx","useSidebar","Sidebar","props","isMobile","state","merged","side","variant","collapsible","const","local","others","_$createComponent","when","fallback","_el$5","_tmpl$2","_$spread","_$mergeProps","class","_$insert","children","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","data-side","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","e","_$setAttribute","t","a","o","i","_$className","undefined"],"sources":["../../../../src/components/sidebar/Sidebar/Sidebar.tsx"],"sourcesContent":["import { mergeProps, Show, splitProps } from \"solid-js\";\nimport type { SidebarProps } from \"./Sidebar.types\";\nimport { clsx } from \"~/utils\";\nimport { useSidebar } from \"../SidebarProvider\";\n\nexport const Sidebar = (props: SidebarProps) => {\n  const { isMobile, state } = useSidebar();\n\n  const merged = mergeProps(\n    { side: \"left\", variant: \"sidebar\", collapsible: \"offcanvas\" } as const,\n    props,\n  );\n\n  const [local, others] = splitProps(merged, [\n    \"side\",\n    \"variant\",\n    \"collapsible\",\n    \"class\",\n    \"classList\",\n    \"children\",\n  ]);\n\n  return (\n    <Show\n      when={local.collapsible !== \"none\"}\n      fallback={\n        <div\n          data-slot=\"sidebar\"\n          class={clsx(\n            \"flex h-full w-(--sidebar-width) flex-col\",\n            \"bg-sidebar text-sidebar-foreground\",\n            local.class,\n          )}\n          {...others}\n        >\n          {local.children}\n        </div>\n      }\n    >\n      <Show when={!isMobile} fallback={null}>\n        <div\n          class=\"group peer hidden text-sidebar-foreground md:block\"\n          data-state={state()}\n          data-collapsible={state() === \"collapsed\" ? local.collapsible : \"\"}\n          data-variant={local.variant}\n          data-side={local.side}\n          data-slot=\"sidebar\"\n        >\n          {/* This is what handles the sidebar gap on desktop */}\n          <div\n            data-slot=\"sidebar-gap\"\n            class={clsx(\n              \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n              \"group-data-[collapsible=offcanvas]:w-0\",\n              \"group-data-[side=right]:rotate-180\",\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n            )}\n          />\n          <div\n            data-slot=\"sidebar-container\"\n            data-side={local.side}\n            class={clsx(\n              \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) md:flex\",\n              // Adjust the padding for floating and inset variants.\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n              local.class,\n            )}\n            {...props}\n          >\n            <div\n              data-sidebar=\"sidebar\"\n              data-slot=\"sidebar-inner\"\n              class=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n            >\n              {local.children}\n            </div>\n          </div>\n        </div>\n      </Show>\n    </Show>\n  );\n};\n"],"mappings":";;;;;yeAKaM,KAAWC,MAAwB;CAC9C,IAAM,EAAEC,aAAUC,aAAUJ,EAAW,GAEjCK,IAASV,EACb;EAAEW,MAAM;EAAQC,SAAS;EAAWC,aAAa;CAAY,GAC7DN,CACF,GAEM,CAACQ,GAAOC,KAAUd,EAAWQ,GAAQ;EACzC;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAO,EACGhB,GAAI;EAAA,IACHiB,OAAI;GAAA,OAAEH,EAAMF,gBAAgB;EAAM;EAAA,IAClCM,WAAQ;GAAA,cAAA;IAAA,IAAAC,IAAAC,EAAA;IAUW,OAVXC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;KAAA,OAGGnB,EACL,4CACA,sCACAW,EAAMS,KACR;IAAC,EAAA,GACGR,CAAM,GAAA,IAAA,EAAA,GAAAS,EAAAL,SAETL,EAAMW,QAAQ,GAAAN;GAAA,EAAA,CAAA;EAAA;EAAA,IAAAM,WAAA;GAAA,OAAAT,EAIlBhB,GAAI;IAACiB,MAAM,CAACV;IAAUW,UAAU;IAAI,IAAAO,WAAA;KAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAD;KAmB9B,OAnB8BR,EAAAS,GAAAR,EAAA;MAAA,IAAA,cAAA;OAAA,OAuBpBR,EAAMJ;MAAI;MAAA,IAAA,QAAA;OAAA,OACdP,EACL,oUAEAW,EAAMH,YAAY,cAAcG,EAAMH,YAAY,UAC9C,6FACA,2HACJG,EAAMS,KACR;MAAC;KAAA,GACGjB,CAAK,GAAA,IAAA,EAAA,GAAAkB,EAAAQ,SAONlB,EAAMW,QAAQ,GAAAS,GAAAC,MAAA;MAAA,IAAAC,IApCP5B,EAAM,GAAC6B,IACD7B,EAAM,MAAM,cAAcM,EAAMF,cAAc,IAAE0B,IACpDxB,EAAMH,SAAO4B,IAChBzB,EAAMJ,MAAI8B,IAMZrC,EACL,2FACA,0CACA,sCACAW,EAAMH,YAAY,cAAcG,EAAMH,YAAY,UAC9C,qFACA,wDACN;MAAC,OAAAyB,MAAAD,EAAAM,KAAAC,EAAAhB,GAAA,cAAAS,EAAAM,IAAAL,CAAA,GAAAC,MAAAF,EAAAQ,KAAAD,EAAAhB,GAAA,oBAAAS,EAAAQ,IAAAN,CAAA,GAAAC,MAAAH,EAAAS,KAAAF,EAAAhB,GAAA,gBAAAS,EAAAS,IAAAN,CAAA,GAAAC,MAAAJ,EAAAU,KAAAH,EAAAhB,GAAA,aAAAS,EAAAU,IAAAN,CAAA,GAAAC,MAAAL,EAAAW,KAAAC,EAAAnB,GAAAO,EAAAW,IAAAN,CAAA,GAAAL;KAAA,GAAA;MAAAM,GAAAO,KAAAA;MAAAL,GAAAK,KAAAA;MAAAJ,GAAAI,KAAAA;MAAAH,GAAAG,KAAAA;MAAAF,GAAAE,KAAAA;KAAA,CAAA,GAAAtB;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AA2Bb"}

package/dist/components/sidebar/Sidebar/index.d.ts

@@ -1 +1,2 @@
 export { Sidebar } from './Sidebar';
+export * from './Sidebar.types';

package/dist/components/sidebar/SidebarContent/SidebarContent.js

@@ -2,7 +2,7 @@ import { clsx as e } from "../../../utils/clsx.js";
 import { mergeProps as t, spread as n, template as r } from "solid-js/web";
 import { splitProps as i } from "solid-js";
 //#region src/components/sidebar/SidebarContent/SidebarContent.tsx
-var a = /* @__PURE__ */ r("<div data-slot=sidebar-content data-sidebar=content>"), o = (r) => {
+var a = /*#__PURE__*/ r("<div data-slot=sidebar-content data-sidebar=content>"), o = (r) => {
 	let [o, s] = i(r, ["class", "classList"]);
 	return (() => {
 		var r = a();

package/dist/components/sidebar/SidebarContent/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarContent.js","names":["splitProps","SidebarContentProps","clsx","SidebarContent","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarContent/SidebarContent.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarContentProps } from \"./SidebarContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarContent = (props: SidebarContentProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      class={clsx(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;mFAIaG,KAAkBC,MAA+B;CAC5D,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,YAAY,CAAC;AAEjE,eAAA;EAAA,IAAAG,IAAAC,GAAA;AAQc,SARdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,UAIWR,EACL,+GACAG,EAAMM,MACP;KAAA,EACGL,EAAM,EAAA,IAAA,GAAA,EAAAC;KAAA"}
+{"version":3,"file":"SidebarContent.js","names":["splitProps","SidebarContentProps","clsx","SidebarContent","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarContent/SidebarContent.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarContentProps } from \"./SidebarContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarContent = (props: SidebarContentProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      class={clsx(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;iFAIaG,KAAkBC,MAA+B;CAC5D,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,WAAW,CAAC;CAEhE,cAAA;EAAA,IAAAG,IAAAC,EAAA;EAQc,OARdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAIWR,EACL,+GACAG,EAAMM,KACR;EAAC,EAAA,GACGL,CAAM,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGhB"}

package/dist/components/sidebar/SidebarContent/index.d.ts

@@ -1 +1,2 @@
 export { SidebarContent } from './SidebarContent';
+export * from './SidebarContent.types';

package/dist/components/sidebar/SidebarFooter/SidebarFooter.js

@@ -2,7 +2,7 @@ import { clsx as e } from "../../../utils/clsx.js";
 import { mergeProps as t, spread as n, template as r } from "solid-js/web";
 import { splitProps as i } from "solid-js";
 //#region src/components/sidebar/SidebarFooter/SidebarFooter.tsx
-var a = /* @__PURE__ */ r("<div data-slot=sidebar-footer data-sidebar=footer>"), o = (r) => {
+var a = /*#__PURE__*/ r("<div data-slot=sidebar-footer data-sidebar=footer>"), o = (r) => {
 	let [o, s] = i(r, ["class", "classList"]);
 	return (() => {
 		var r = a();

package/dist/components/sidebar/SidebarFooter/SidebarFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFooter.js","names":["splitProps","SidebarFooterProps","clsx","SidebarFooter","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarFooter/SidebarFooter.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarFooterProps } from \"./SidebarFooter.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarFooter = (props: SidebarFooterProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      class={clsx(\"flex flex-col gap-2 p-2\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;iFAIaG,KAAiBC,MAA8B;CAC1D,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,YAAY,CAAC;AAEjE,eAAA;EAAA,IAAAG,IAAAC,GAAA;AAKc,SALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,UAIWR,EAAK,2BAA2BG,EAAMM,MAAM;KAAA,EAC/CL,EAAM,EAAA,IAAA,GAAA,EAAAC;KAAA"}
+{"version":3,"file":"SidebarFooter.js","names":["splitProps","SidebarFooterProps","clsx","SidebarFooter","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarFooter/SidebarFooter.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarFooterProps } from \"./SidebarFooter.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarFooter = (props: SidebarFooterProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      class={clsx(\"flex flex-col gap-2 p-2\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;+EAIaG,KAAiBC,MAA8B;CAC1D,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,WAAW,CAAC;CAEhE,cAAA;EAAA,IAAAG,IAAAC,EAAA;EAKc,OALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAIWR,EAAK,2BAA2BG,EAAMM,KAAK;EAAC,EAAA,GAC/CL,CAAM,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGhB"}

package/dist/components/sidebar/SidebarFooter/index.d.ts

@@ -1 +1,2 @@
 export { SidebarFooter } from './SidebarFooter';
+export * from './SidebarFooter.types';

package/dist/components/sidebar/SidebarGroup/SidebarGroup.js

@@ -2,7 +2,7 @@ import { clsx as e } from "../../../utils/clsx.js";
 import { mergeProps as t, spread as n, template as r } from "solid-js/web";
 import { splitProps as i } from "solid-js";
 //#region src/components/sidebar/SidebarGroup/SidebarGroup.tsx
-var a = /* @__PURE__ */ r("<div data-slot=sidebar-group data-sidebar=group>"), o = (r) => {
+var a = /*#__PURE__*/ r("<div data-slot=sidebar-group data-sidebar=group>"), o = (r) => {
 	let [o, s] = i(r, ["class", "classList"]);
 	return (() => {
 		var r = a();

package/dist/components/sidebar/SidebarGroup/SidebarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","names":["splitProps","SidebarGroupProps","clsx","SidebarGroup","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarGroupProps } from \"./SidebarGroup.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarGroup = (props: SidebarGroupProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      class={clsx(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;+EAIaG,KAAgBC,MAA6B;CACxD,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,YAAY,CAAC;AAEjE,eAAA;EAAA,IAAAG,IAAAC,GAAA;AAKc,SALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,UAIWR,EAAK,6CAA6CG,EAAMM,MAAM;KAAA,EACjEL,EAAM,EAAA,IAAA,GAAA,EAAAC;KAAA"}
+{"version":3,"file":"SidebarGroup.js","names":["splitProps","SidebarGroupProps","clsx","SidebarGroup","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarGroupProps } from \"./SidebarGroup.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarGroup = (props: SidebarGroupProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      class={clsx(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;6EAIaG,KAAgBC,MAA6B;CACxD,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,WAAW,CAAC;CAEhE,cAAA;EAAA,IAAAG,IAAAC,EAAA;EAKc,OALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAIWR,EAAK,6CAA6CG,EAAMM,KAAK;EAAC,EAAA,GACjEL,CAAM,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGhB"}

package/dist/components/sidebar/SidebarGroup/index.d.ts

@@ -1 +1,2 @@
 export { SidebarGroup } from './SidebarGroup';
+export * from './SidebarGroup.types';

package/dist/components/sidebar/SidebarGroupAction/SidebarGroupAction.js

@@ -3,21 +3,21 @@ import { Dynamic as t, createComponent as n, mergeProps as r } from "solid-js/we
 import { mergeProps as i, splitProps as a } from "solid-js";
 //#region src/components/sidebar/SidebarGroupAction/SidebarGroupAction.tsx
 var o = (o) => {
-	let [s, c] = a(i({ as: "button" }, o), [
-		"as",
+	let s = i({ component: "button" }, o), [c, l] = a(s, [
+		"component",
 		"class",
 		"classList"
 	]);
 	return n(t, r({
 		get component() {
-			return s.as;
+			return c.component;
 		},
 		"data-slot": "sidebar-group-action",
 		"data-sidebar": "group-action",
 		get class() {
-			return e("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-neutral-950 dark:text-neutral-50 ring-neutral-400 dark:ring-neutral-500 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-50 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", s.class);
+			return e("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", c.class);
 		}
-	}, c));
+	}, l));
 };
 //#endregion
 export { o as SidebarGroupAction };

package/dist/components/sidebar/SidebarGroupAction/SidebarGroupAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupAction.js","names":["mergeProps","splitProps","ValidComponent","SidebarGroupActionProps","clsx","Dynamic","SidebarGroupAction","props","T","merged","as","const","local","others","_$createComponent","_$mergeProps","component","class"],"sources":["../../../../src/components/sidebar/SidebarGroupAction/SidebarGroupAction.tsx"],"sourcesContent":["import { mergeProps, splitProps, type ValidComponent } from \"solid-js\";\nimport type { SidebarGroupActionProps } from \"./SidebarGroupAction.types\";\nimport { clsx } from \"~/utils\";\nimport { Dynamic } from \"solid-js/web\";\n\nexport const SidebarGroupAction = <T extends ValidComponent = \"button\">(\n  props: SidebarGroupActionProps<T>,\n) => {\n  const merged = mergeProps({ as: \"button\" as T } as const, props);\n\n  const [local, others] = splitProps(merged, [\"as\", \"class\", \"classList\"]);\n\n  return (\n    // @ts-expect-error\n    <Dynamic\n      component={local.as}\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      class={clsx(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-neutral-950 dark:text-neutral-50 ring-neutral-400 dark:ring-neutral-500 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-50 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;AAKA,IAAaM,KACXC,MACG;CAGH,IAAM,CAACK,GAAOC,KAAUZ,EAFTD,EAAW,EAAEU,IAAI,UAAe,EAAWH,EAAM,EAErB;EAAC;EAAM;EAAS;EAAY,CAAC;AAExE,QACEO,EACCT,GAAOU,EAAA;EAAA,IACNC,YAAS;AAAA,UAAEJ,EAAMF;;EAAE,aAAA;EAAA,gBAAA;EAAA,IAAA,QAAA;AAAA,UAGZN,EACL,wbACAQ,EAAMK,MACP;;EAAA,EACGJ,EAAM,CAAA"}
+{"version":3,"file":"SidebarGroupAction.js","names":["mergeProps","splitProps","ValidComponent","SidebarGroupActionProps","clsx","Dynamic","SidebarGroupAction","props","T","merged","component","const","local","others","_$createComponent","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarGroupAction/SidebarGroupAction.tsx"],"sourcesContent":["import { mergeProps, splitProps, type ValidComponent } from \"solid-js\";\nimport type { SidebarGroupActionProps } from \"./SidebarGroupAction.types\";\nimport { clsx } from \"~/utils\";\nimport { Dynamic } from \"solid-js/web\";\n\nexport const SidebarGroupAction = <T extends ValidComponent = \"button\">(\n  props: SidebarGroupActionProps<T>,\n) => {\n  const merged = mergeProps({ component: \"button\" } as const, props);\n\n  const [local, others] = splitProps(merged, [\n    \"component\",\n    \"class\",\n    \"classList\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.component as ValidComponent}\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      class={clsx(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;AAKA,IAAaM,KACXC,MACG;CACH,IAAME,IAAST,EAAW,EAAEU,WAAW,SAAS,GAAYH,CAAK,GAE3D,CAACK,GAAOC,KAAUZ,EAAWQ,GAAQ;EACzC;EACA;EACA;CAAW,CACZ;CAED,OAAAK,EACGT,GAAOU,EAAA;EAAA,IACNL,YAAS;GAAA,OAAEE,EAAMF;EAA2B;EAAA,aAAA;EAAA,gBAAA;EAAA,IAAA,QAAA;GAAA,OAGrCN,EACL,iXACAQ,EAAMI,KACR;EAAC;CAAA,GACGH,CAAM,CAAA;AAGhB"}

package/dist/components/sidebar/SidebarGroupAction/index.d.ts

@@ -1 +1,2 @@
 export { SidebarGroupAction } from './SidebarGroupAction';
+export * from './SidebarGroupAction.types';

package/dist/components/sidebar/SidebarGroupContent/SidebarGroupContent.js

@@ -2,7 +2,7 @@ import { clsx as e } from "../../../utils/clsx.js";
 import { mergeProps as t, spread as n, template as r } from "solid-js/web";
 import { splitProps as i } from "solid-js";
 //#region src/components/sidebar/SidebarGroupContent/SidebarGroupContent.tsx
-var a = /* @__PURE__ */ r("<div data-slot=sidebar-group-content data-sidebar=group-content>"), o = (r) => {
+var a = /*#__PURE__*/ r("<div data-slot=sidebar-group-content data-sidebar=group-content>"), o = (r) => {
 	let [o, s] = i(r, ["class", "classList"]);
 	return (() => {
 		var r = a();

package/dist/components/sidebar/SidebarGroupContent/SidebarGroupContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupContent.js","names":["splitProps","SidebarGroupContentProps","clsx","SidebarGroupContent","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarGroupContent/SidebarGroupContent.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarGroupContentProps } from \"./SidebarGroupContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarGroupContent = (props: SidebarGroupContentProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      class={clsx(\"w-full text-sm\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;+FAIaG,KAAuBC,MAAoC;CACtE,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,YAAY,CAAC;AAEjE,eAAA;EAAA,IAAAG,IAAAC,GAAA;AAKc,SALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;AAAA,UAIWR,EAAK,kBAAkBG,EAAMM,MAAM;KAAA,EACtCL,EAAM,EAAA,IAAA,GAAA,EAAAC;KAAA"}
+{"version":3,"file":"SidebarGroupContent.js","names":["splitProps","SidebarGroupContentProps","clsx","SidebarGroupContent","props","local","others","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/sidebar/SidebarGroupContent/SidebarGroupContent.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { SidebarGroupContentProps } from \"./SidebarGroupContent.types\";\nimport { clsx } from \"~/utils\";\n\nexport const SidebarGroupContent = (props: SidebarGroupContentProps) => {\n  const [local, others] = splitProps(props, [\"class\", \"classList\"]);\n\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      class={clsx(\"w-full text-sm\", local.class)}\n      {...others}\n    />\n  );\n};\n"],"mappings":";;;;6FAIaG,KAAuBC,MAAoC;CACtE,IAAM,CAACC,GAAOC,KAAUN,EAAWI,GAAO,CAAC,SAAS,WAAW,CAAC;CAEhE,cAAA;EAAA,IAAAG,IAAAC,EAAA;EAKc,OALdC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAIWR,EAAK,kBAAkBG,EAAMM,KAAK;EAAC,EAAA,GACtCL,CAAM,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGhB"}

package/dist/components/sidebar/SidebarGroupContent/index.d.ts

@@ -1 +1,2 @@
 export { SidebarGroupContent } from './SidebarGroupContent';
+export * from './SidebarGroupContent.types';

package/dist/components/sidebar/SidebarGroupLabel/SidebarGroupLabel.js

@@ -3,21 +3,21 @@ import { Dynamic as t, createComponent as n, mergeProps as r } from "solid-js/we
 import { mergeProps as i, splitProps as a } from "solid-js";
 //#region src/components/sidebar/SidebarGroupLabel/SidebarGroupLabel.tsx
 var o = (o) => {
-	let [s, c] = a(i({ as: "div" }, o), [
-		"as",
+	let s = i({ component: "div" }, o), [c, l] = a(s, [
+		"component",
 		"class",
 		"classList"
 	]);
 	return n(t, r({
 		get component() {
-			return s.as;
+			return c.component;
 		},
 		"data-slot": "sidebar-group-label",
 		"data-sidebar": "group-label",
 		get class() {
-			return e("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-neutral-950/70 dark:text-neutral-50/70 ring-neutral-400 dark:ring-neutral-500 outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", s.class);
+			return e("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", c.class);
 		}
-	}, c));
+	}, l));
 };
 //#endregion
 export { o as SidebarGroupLabel };