@accelint/design-toolkit 8.1.2 → 9.1.0

package/dist/components/sidenav/types.d.ts

@@ -1,69 +1,83 @@
-import { Payload } from '@accelint/bus';
-import { UniqueId } from '@accelint/core';
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { ButtonProps, ToggleButtonProps, LinkProps, DisclosureProps, DisclosurePanelProps, PopoverProps, Pressable } from 'react-aria-components';
-import { SidenavEventTypes } from './events.js';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
+import { SidenavEventTypes } from "./events.js";
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import { ButtonProps, DisclosurePanelProps, DisclosureProps, LinkProps, PopoverProps, Pressable, ToggleButtonProps } from "react-aria-components";
+import { Payload } from "@accelint/bus";
+import { UniqueId } from "@accelint/core";
+
+//#region src/components/sidenav/types.d.ts
 type SidenavProps = ComponentPropsWithRef<'nav'> & {
-    id: UniqueId;
-    isHiddenWhenClosed?: boolean;
+  id: UniqueId;
+  isHiddenWhenClosed?: boolean;
 };
 type SidenavHeaderProps = PropsWithChildren<{
-    classNames?: {
-        header?: string;
-        button?: ButtonProps['className'];
-        container?: string;
-        icon?: string;
-    };
+  classNames?: {
+    header?: string;
+    button?: ButtonProps['className'];
+    container?: string;
+    icon?: string;
+  };
 }>;
 type SidenavContentProps = ComponentPropsWithRef<'div'>;
 type SidenavItemProps = ToggleButtonProps & {
-    classNames?: {
-        button?: ToggleButtonProps['className'];
-        icon?: string;
-    };
-    textValue?: string;
+  classNames?: {
+    button?: ToggleButtonProps['className'];
+    icon?: string;
+  };
+  textValue?: string;
 };
 type SidenavLinkProps = LinkProps & {
-    classNames?: {
-        button?: LinkProps['className'];
-        icon?: string;
-    };
-    textValue: string;
+  classNames?: {
+    button?: LinkProps['className'];
+    icon?: string;
+  };
+  textValue: string;
 };
 type SidenavAvatarProps = ComponentPropsWithRef<'div'>;
 type SidenavDividerProps = ComponentPropsWithRef<'hr'>;
 type SidenavFooterProps = ComponentPropsWithRef<'footer'>;
 type SidenavCloseEvent = Payload<typeof SidenavEventTypes.close, {
-    id: UniqueId;
+  id: UniqueId;
 }>;
 type SidenavOpenEvent = Payload<typeof SidenavEventTypes.open, {
-    id: UniqueId;
+  id: UniqueId;
 }>;
 type SidenavToggleEvent = Payload<typeof SidenavEventTypes.toggle, {
-    id: UniqueId;
+  id: UniqueId;
 }>;
 type SidenavEvent = SidenavOpenEvent | SidenavToggleEvent | SidenavCloseEvent;
 type TargetedEvents = `close:${UniqueId}` | `open:${UniqueId}` | `toggle:${UniqueId}`;
 type SidenavTriggerProps = ComponentPropsWithRef<typeof Pressable> & {
-    for: TargetedEvents | UniqueId;
+  for: TargetedEvents | UniqueId;
 };
 type SidenavContextValue = {
-    id: UniqueId;
-    isOpen: boolean;
+  id: UniqueId;
+  isOpen: boolean;
 };
 type SidenavMenuProps = PropsWithChildren & {
-    title: string;
-    icon: React.ReactNode;
-    classNames?: {
-        menu?: DisclosureProps['className'];
-        button?: ButtonProps['className'];
-        icon?: string;
-        disclosurePanel?: DisclosurePanelProps['className'];
-        popoverPanel?: PopoverProps['className'];
-        panelContent?: string;
-    };
+  title: string;
+  icon: React.ReactNode;
+  classNames?: {
+    menu?: DisclosureProps['className'];
+    button?: ButtonProps['className'];
+    icon?: string;
+    disclosurePanel?: DisclosurePanelProps['className'];
+    popoverPanel?: PopoverProps['className'];
+    panelContent?: string;
+  };
 };
 type SidenavMenuItemProps = ToggleButtonProps;
-
-export type { SidenavAvatarProps, SidenavCloseEvent, SidenavContentProps, SidenavContextValue, SidenavDividerProps, SidenavEvent, SidenavFooterProps, SidenavHeaderProps, SidenavItemProps, SidenavLinkProps, SidenavMenuItemProps, SidenavMenuProps, SidenavOpenEvent, SidenavProps, SidenavToggleEvent, SidenavTriggerProps };
+//#endregion
+export { SidenavAvatarProps, SidenavCloseEvent, SidenavContentProps, SidenavContextValue, SidenavDividerProps, SidenavEvent, SidenavFooterProps, SidenavHeaderProps, SidenavItemProps, SidenavLinkProps, SidenavMenuItemProps, SidenavMenuProps, SidenavOpenEvent, SidenavProps, SidenavToggleEvent, SidenavTriggerProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/sidenav/types.js

@@ -1,2 +1,12 @@
-//# sourceMappingURL=types.js.map
-//# sourceMappingURL=types.js.map
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+

package/dist/components/skeleton/index.d.ts

@@ -1,6 +1,19 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SkeletonProps } from './types.js';
-import 'react';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { SkeletonProps } from "./types.js";
+import * as react_jsx_runtime104 from "react/jsx-runtime";
+
+//#region src/components/skeleton/index.d.ts
 
 /**
  * Skeleton - A flexible skeleton loader component for indicating loading states
@@ -32,6 +45,11 @@ import 'react';
  * // Custom styling
  * <Skeleton className="w-[50%] mt-l" />
  */
-declare function Skeleton({ className, variant, ...rest }: SkeletonProps): react_jsx_runtime.JSX.Element;
-
+declare function Skeleton({
+  className,
+  variant,
+  ...rest
+}: SkeletonProps): react_jsx_runtime104.JSX.Element;
+//#endregion
 export { Skeleton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -1,2 +1,58 @@
-import {jsx}from'react/jsx-runtime';import {clsx}from'@accelint/design-foundation/lib/utils';import e from'./styles.module.css';function m({className:o,variant:t="rectangle",...r}){return jsx("div",{...r,className:clsx(e.skeleton,e[t],o)})}export{m as Skeleton};//# sourceMappingURL=index.js.map
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+
+//#region src/components/skeleton/index.tsx
+/**
+* Skeleton - A flexible skeleton loader component for indicating loading states
+*
+* Used to show placeholder content while data is being fetched or processed.
+* Provides visual feedback to users during loading states with customizable shapes.
+*
+* @example
+* // Basic rectangular placeholder
+* <Skeleton />
+*
+* @example
+* // Circular placeholder (useful for avatars)
+* <Skeleton variant="circle" />
+*
+* @example
+* // With loading text content
+* <Skeleton>Loading content...</Skeleton>
+*
+* @example
+* // Nested placeholders for complex layouts
+* <Skeleton className="mb-xl p-m">
+*   <br />
+*   <br />
+*   <Skeleton className="w-[75%]" />
+* </Skeleton>
+*
+* @example
+* // Custom styling
+* <Skeleton className="w-[50%] mt-l" />
+*/
+function Skeleton({ className, variant = "rectangle", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(styles.skeleton, styles[variant], className)
+	});
+}
+
+//#endregion
+export { Skeleton };
 //# sourceMappingURL=index.js.map

package/dist/components/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/skeleton/index.tsx"],"names":["Skeleton","className","variant","jsx","rest","clsx","styles"],"mappings":"yIA8CgBA,CAAS,CACvB,CAAA,SAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,CAAA,WACV,CAAA,GACF,EAAkB,CAChB,CAAA,OACEC,GAAC,CAAA,KAAA,CACE,IAAGC,CACJ,CAAA,SAAWC,CAAAA,IAAKC,CAAAA,CAAO,SAAUA,CAAAA,CAAOJ,CAAO,CAAA,CAAGD,CAAS,EAC7D,CAEJ,CAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { SkeletonProps } from './types';\n\n/**\n * Skeleton - A flexible skeleton loader component for indicating loading states\n *\n * Used to show placeholder content while data is being fetched or processed.\n * Provides visual feedback to users during loading states with customizable shapes.\n *\n * @example\n * // Basic rectangular placeholder\n * <Skeleton />\n *\n * @example\n * // Circular placeholder (useful for avatars)\n * <Skeleton variant=\"circle\" />\n *\n * @example\n * // With loading text content\n * <Skeleton>Loading content...</Skeleton>\n *\n * @example\n * // Nested placeholders for complex layouts\n * <Skeleton className=\"mb-xl p-m\">\n *   <br />\n *   <br />\n *   <Skeleton className=\"w-[75%]\" />\n * </Skeleton>\n *\n * @example\n * // Custom styling\n * <Skeleton className=\"w-[50%] mt-l\" />\n */\nexport function Skeleton({\n  className,\n  variant = 'rectangle',\n  ...rest\n}: SkeletonProps) {\n  return (\n    <div\n      {...rest}\n      className={clsx(styles.skeleton, styles[variant], className)}\n    />\n  );\n}\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { SkeletonProps } from './types';\n\n/**\n * Skeleton - A flexible skeleton loader component for indicating loading states\n *\n * Used to show placeholder content while data is being fetched or processed.\n * Provides visual feedback to users during loading states with customizable shapes.\n *\n * @example\n * // Basic rectangular placeholder\n * <Skeleton />\n *\n * @example\n * // Circular placeholder (useful for avatars)\n * <Skeleton variant=\"circle\" />\n *\n * @example\n * // With loading text content\n * <Skeleton>Loading content...</Skeleton>\n *\n * @example\n * // Nested placeholders for complex layouts\n * <Skeleton className=\"mb-xl p-m\">\n *   <br />\n *   <br />\n *   <Skeleton className=\"w-[75%]\" />\n * </Skeleton>\n *\n * @example\n * // Custom styling\n * <Skeleton className=\"w-[50%] mt-l\" />\n */\nexport function Skeleton({\n  className,\n  variant = 'rectangle',\n  ...rest\n}: SkeletonProps) {\n  return (\n    <div\n      {...rest}\n      className={clsx(styles.skeleton, styles[variant], className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,SAAS,EACvB,WACA,UAAU,aACV,GAAG,QACa;AAChB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,UAAU,OAAO,UAAU,UAAU;GAC5D"}

package/dist/components/skeleton/styles.module.css

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-@reference '../../index.module.css';
+@reference '@accelint/design-foundation/styles';
 
 @layer components.l1 {
   .skeleton {

package/dist/components/skeleton/types.d.ts

@@ -1,7 +1,21 @@
-import { ComponentPropsWithRef } from 'react';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
+import { ComponentPropsWithRef } from "react";
+
+//#region src/components/skeleton/types.d.ts
 type SkeletonProps = ComponentPropsWithRef<'div'> & {
-    variant?: 'rectangle' | 'circle';
+  variant?: 'rectangle' | 'circle';
 };
-
-export type { SkeletonProps };
+//#endregion
+export { SkeletonProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/skeleton/types.js

@@ -1,2 +1,12 @@
-//# sourceMappingURL=types.js.map
-//# sourceMappingURL=types.js.map
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+

package/dist/components/slider/index.d.ts

@@ -1,6 +1,20 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SliderProps } from './types.js';
-import 'react-aria-components';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { SliderProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime96 from "react/jsx-runtime";
+
+//#region src/components/slider/index.d.ts
 
 /**
  * Slider - An interactive range input component for numeric value selection
@@ -12,7 +26,51 @@ import 'react-aria-components';
  * @example
  * // Basic slider
  * <Slider label="Volume" defaultValue={50} />
+ *
+ * @example
+ * // Slider with input field
+ * <Slider label="Opacity" defaultValue={50} showInput />
+ *
+ * @example
+ * // Slider with labeled markers
+ * <Slider
+ *   label="Quality"
+ *   markers={[
+ *     { value: 0, label: 'Low' },
+ *     { value: 50, label: 'Medium' },
+ *     { value: 100, label: 'High' },
+ *   ]}
+ *   showMarkerLabels
+ * />
+ *
+ * @example
+ * // Slider that snaps to marker values only
+ * <Slider
+ *   label="Rating"
+ *   markers={[0, 25, 50, 75, 100]}
+ *   snapToMarkers
+ * />
  */
-declare function Slider({ classNames, label: labelProp, layout, maxValue: maxValueProp, minValue: minValueProp, orientation, showInput, showLabel, ...rest }: SliderProps): react_jsx_runtime.JSX.Element;
-
+declare function Slider({
+  classNames,
+  defaultValue,
+  label: labelProp,
+  layout,
+  markers: markersProp,
+  maxValue: maxValueProp,
+  minValue: minValueProp,
+  onChange,
+  onChangeEnd,
+  orientation,
+  showInput,
+  showLabel,
+  showMarkerLabels,
+  showValueLabels,
+  snapToMarkers,
+  step: stepProp,
+  value: valueProp,
+  ...rest
+}: SliderProps): react_jsx_runtime96.JSX.Element;
+//#endregion
 export { Slider };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/slider/index.js

@@ -1,4 +1,272 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
 'use client';
 
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {Fragment as Fragment$1}from'react';import {Slider,composeRenderProps,Label,Input,SliderTrack,SliderThumb,Text}from'react-aria-components';import {Tooltip}from'../tooltip/index.js';import {TooltipTrigger}from'../tooltip/trigger.js';import i from'./styles.module.css';function R({classNames:r,label:n,layout:s="grid",maxValue:p=100,minValue:g=0,orientation:k="horizontal",showInput:b,showLabel:c=true,...f}){return jsx(Slider,{...f,className:composeRenderProps(r?.slider,e=>clsx("group/slider",i.slider,e)),maxValue:p,minValue:g,orientation:k,"aria-label":c?void 0:n,"data-layout":s,children:({state:e})=>jsxs(Fragment,{children:[c&&jsx(Label,{className:clsx(i.label,r?.label),children:n}),b&&jsx("div",{className:clsx(i.inputs,r?.inputs),children:e.values.map((u,m)=>jsx(Input,{className:composeRenderProps(r?.input,t=>clsx(i.input,t)),value:u,disabled:e.isDisabled,"data-disabled":e.isDisabled||void 0,onChange:t=>e.setThumbValue(m,Number.parseFloat(t.target.value))},`number-field-${m===0?"min":"max"}`))}),jsxs(SliderTrack,{className:composeRenderProps(r?.track,u=>clsx(i.track,u)),children:[jsx("div",{className:clsx(i.trackBackground,r?.trackBackground)}),e.values.map((u,m)=>jsxs(Fragment$1,{children:[jsx("div",{className:clsx(i.trackValue,r?.trackValue),"data-start":e.values.length===1?0:e.getThumbPercent(0),"data-end":e.getThumbPercent(e.values.length===1?0:1)}),jsxs(TooltipTrigger,{isDisabled:!b||e.isThumbDragging(m),children:[jsx(SliderThumb,{index:m,className:composeRenderProps(r?.thumb,t=>clsx(i.thumb,t))}),jsx(Tooltip,{placement:"top",children:e.getThumbValue(m)})]})]},`slider-${m===0?"min":"max"}`))]}),jsx(Text,{slot:"min",className:clsx(i.minValue,r?.minValue),children:g}),jsx(Text,{slot:"max",className:clsx(i.maxValue,r?.maxValue),children:p})]})})}export{R as Slider};//# sourceMappingURL=index.js.map
+import { Tooltip as Tooltip$1 } from "../tooltip/index.js";
+import { TooltipTrigger as TooltipTrigger$1 } from "../tooltip/trigger.js";
+import "client-only";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { Input, Label, Slider as Slider$1, SliderThumb, SliderTrack, Text, composeRenderProps } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControlledState } from "@react-stately/utils";
+import styles from "./styles.module.css";
+
+//#region src/components/slider/index.tsx
+const DEBOUNCE_MS = 500;
+/**
+* SliderInput - Internal component for debounced numeric input
+*/
+function SliderInput({ className, value, min, max, disabled, onChange }) {
+	const [localValue, setLocalValue] = useState(String(value));
+	const timeoutRef = useRef(void 0);
+	useEffect(() => {
+		setLocalValue(String(value));
+	}, [value]);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	const commitValue = (inputValue) => {
+		const parsed = Number.parseFloat(inputValue);
+		if (Number.isNaN(parsed)) {
+			setLocalValue(String(min));
+			onChange(min);
+		} else {
+			const clamped = Math.min(Math.max(parsed, min), max);
+			setLocalValue(String(clamped));
+			onChange(clamped);
+		}
+	};
+	const handleChange = (event) => {
+		const newValue = event.target.value;
+		setLocalValue(newValue);
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			commitValue(newValue);
+		}, DEBOUNCE_MS);
+	};
+	const handleBlur = () => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		commitValue(localValue);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		className,
+		value: localValue,
+		disabled,
+		"data-disabled": disabled || void 0,
+		onChange: handleChange,
+		onBlur: handleBlur
+	});
+}
+/**
+* Normalizes the markers configuration into a consistent sorted array format
+*/
+function normalizeMarkers(markersConfig, min, max) {
+	if (markersConfig === void 0) return [];
+	if (typeof markersConfig === "number") {
+		if (markersConfig < 2) return [];
+		const step = (max - min) / (markersConfig - 1);
+		return Array.from({ length: markersConfig }, (_, i) => ({ value: min + step * i }));
+	}
+	return markersConfig.map((item) => typeof item === "number" ? { value: item } : item).sort((a, b) => a.value - b.value);
+}
+/**
+* Snaps a value to the nearest marker (curried for use with map)
+* Assumes markers are sorted by value for early exit optimization
+*/
+function snapToNearestMarker(markers) {
+	return (value) => {
+		const firstMarker = markers[0];
+		if (!firstMarker) return value;
+		let nearestValue = firstMarker.value;
+		let minDistance = Number.POSITIVE_INFINITY;
+		for (const marker of markers) {
+			const distance = Math.abs(value - marker.value);
+			if (distance < minDistance) {
+				minDistance = distance;
+				nearestValue = marker.value;
+			} else break;
+		}
+		return nearestValue;
+	};
+}
+/**
+* Checks if a marker with a label exists at the given value
+*/
+function hasLabeledMarkerAtValue(markers, value) {
+	return markers.some((marker) => marker.value === value && marker.label !== void 0 && marker.label !== "");
+}
+/**
+* Normalizes value to array format
+*/
+function normalizeValue(value) {
+	if (value === void 0) return;
+	return Array.isArray(value) ? value : [value];
+}
+/**
+* Slider - An interactive range input component for numeric value selection
+*
+* Provides accessible slider functionality with optional input field integration,
+* flexible layouts, and comprehensive keyboard and mouse interaction support.
+* Perfect for settings, filters, or any numeric input requiring visual feedback.
+*
+* @example
+* // Basic slider
+* <Slider label="Volume" defaultValue={50} />
+*
+* @example
+* // Slider with input field
+* <Slider label="Opacity" defaultValue={50} showInput />
+*
+* @example
+* // Slider with labeled markers
+* <Slider
+*   label="Quality"
+*   markers={[
+*     { value: 0, label: 'Low' },
+*     { value: 50, label: 'Medium' },
+*     { value: 100, label: 'High' },
+*   ]}
+*   showMarkerLabels
+* />
+*
+* @example
+* // Slider that snaps to marker values only
+* <Slider
+*   label="Rating"
+*   markers={[0, 25, 50, 75, 100]}
+*   snapToMarkers
+* />
+*/
+function Slider({ classNames, defaultValue, label: labelProp, layout = "grid", markers: markersProp, maxValue: maxValueProp = 100, minValue: minValueProp = 0, onChange, onChangeEnd, orientation = "horizontal", showInput, showLabel = true, showMarkerLabels = false, showValueLabels = true, snapToMarkers = false, step: stepProp, value: valueProp, ...rest }) {
+	const normalizedMarkers = useMemo(() => normalizeMarkers(markersProp, minValueProp, maxValueProp), [
+		markersProp,
+		minValueProp,
+		maxValueProp
+	]);
+	const shouldSnap = snapToMarkers && normalizedMarkers.length > 0;
+	const normalizedDefaultValue = useMemo(() => {
+		const normalized = normalizeValue(defaultValue);
+		if (shouldSnap && normalized) return normalized.map(snapToNearestMarker(normalizedMarkers));
+		return normalized ?? [minValueProp];
+	}, [
+		defaultValue,
+		shouldSnap,
+		normalizedMarkers,
+		minValueProp
+	]);
+	const [value, setValue] = useControlledState(normalizeValue(valueProp), normalizedDefaultValue, onChange);
+	const markerPercents = useMemo(() => {
+		const percents = /* @__PURE__ */ new Map();
+		const range = maxValueProp - minValueProp;
+		for (const marker of normalizedMarkers) percents.set(marker.value, (marker.value - minValueProp) / range * 100);
+		return percents;
+	}, [
+		normalizedMarkers,
+		minValueProp,
+		maxValueProp
+	]);
+	const hideMinValue = !showValueLabels || showMarkerLabels && hasLabeledMarkerAtValue(normalizedMarkers, minValueProp);
+	const hideMaxValue = !showValueLabels || showMarkerLabels && hasLabeledMarkerAtValue(normalizedMarkers, maxValueProp);
+	const handleChange = (values) => {
+		if (shouldSnap) setValue(values.map(snapToNearestMarker(normalizedMarkers)));
+		else setValue(values);
+	};
+	const handleChangeEnd = (values) => {
+		if (shouldSnap) onChangeEnd?.(values.map(snapToNearestMarker(normalizedMarkers)));
+		else onChangeEnd?.(values);
+	};
+	return /* @__PURE__ */ jsx(Slider$1, {
+		...rest,
+		className: composeRenderProps(classNames?.slider, (className) => clsx("group/slider", styles.slider, className)),
+		maxValue: maxValueProp,
+		minValue: minValueProp,
+		onChange: handleChange,
+		onChangeEnd: handleChangeEnd,
+		orientation,
+		step: stepProp,
+		value,
+		"aria-label": showLabel ? void 0 : labelProp,
+		"data-layout": layout,
+		children: ({ state }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			showLabel && /* @__PURE__ */ jsx(Label, {
+				className: clsx(styles.label, classNames?.label),
+				children: labelProp
+			}),
+			showInput && /* @__PURE__ */ jsx("div", {
+				className: clsx(styles.inputs, classNames?.inputs),
+				children: state.values.map((val, index) => /* @__PURE__ */ jsx(SliderInput, {
+					className: clsx(styles.input, classNames?.input),
+					value: val,
+					min: minValueProp,
+					max: maxValueProp,
+					disabled: state.isDisabled,
+					onChange: (newValue) => state.setThumbValue(index, newValue)
+				}, `number-field-${index === 0 ? "min" : "max"}`))
+			}),
+			/* @__PURE__ */ jsxs(SliderTrack, {
+				className: composeRenderProps(classNames?.track, (className) => clsx(styles.track, className)),
+				children: [
+					/* @__PURE__ */ jsx("div", { className: clsx(styles.trackBackground, classNames?.trackBackground) }),
+					normalizedMarkers.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: clsx(styles.markers, classNames?.markers),
+						children: normalizedMarkers.map((marker) => /* @__PURE__ */ jsxs("div", {
+							className: clsx(styles.marker, classNames?.marker),
+							"data-percent": markerPercents.get(marker.value),
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx("div", { className: clsx(styles.markerDot, classNames?.markerDot) }), showMarkerLabels && marker.label && /* @__PURE__ */ jsx("span", {
+								className: clsx(styles.markerLabel, classNames?.markerLabel),
+								children: marker.label
+							})]
+						}, `marker-${marker.value}`))
+					}),
+					state.values.map((_, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						className: clsx(styles.trackValue, classNames?.trackValue),
+						style: {
+							"--track-value-start": state.values.length === 1 ? 0 : state.getThumbPercent(0),
+							"--track-value-end": state.getThumbPercent(state.values.length === 1 ? 0 : 1)
+						}
+					}), /* @__PURE__ */ jsxs(TooltipTrigger$1, {
+						isDisabled: showInput || state.isThumbDragging(index),
+						children: [/* @__PURE__ */ jsx(SliderThumb, {
+							index,
+							className: composeRenderProps(classNames?.thumb, (className) => clsx(styles.thumb, className))
+						}), /* @__PURE__ */ jsx(Tooltip$1, {
+							placement: "top",
+							children: state.getThumbValue(index)
+						})]
+					})] }, `slider-${index === 0 ? "min" : "max"}`))
+				]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				slot: "min",
+				className: clsx(styles.minValue, classNames?.minValue),
+				hidden: hideMinValue,
+				children: minValueProp
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				slot: "max",
+				className: clsx(styles.maxValue, classNames?.maxValue),
+				hidden: hideMaxValue,
+				children: maxValueProp
+			})
+		] })
+	});
+}
+
+//#endregion
+export { Slider };
 //# sourceMappingURL=index.js.map