@accelint/design-toolkit 7.0.0 → 8.0.0

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

@@ -0,0 +1,311 @@
+/*
+ * 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.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .sidenav {
+    @apply fg-a11y-on-accent gap-xs bg-surface-default p-m absolute left-0 row-span-full flex h-full flex-col;
+
+    @variant closed {
+      @apply items-center;
+    }
+
+    @variant group-push-left/layout {
+      @apply relative;
+    }
+  }
+
+  .header {
+    @apply mb-m flex justify-center;
+  }
+
+  .content {
+    @apply gap-xs flex h-full max-h-full w-fit flex-col;
+
+    @variant group-open/sidenav {
+      @apply w-full;
+    }
+
+    @variant group-closed/sidenav {
+      @apply items-center;
+    }
+  }
+
+  .avatar {
+    @apply gap-x-m grid w-full grid-rows-2 items-center;
+    grid-template-areas: 'content heading' 'content text';
+    grid-template-columns: auto 1fr;
+
+    @variant group-closed/sidenav {
+      @apply flex;
+    }
+
+    .icon {
+      grid-area: content;
+    }
+
+    .heading {
+      @apply fg-primary-bold text-body-m text-left;
+      grid-area: heading;
+    }
+
+    .text {
+      @apply fg-primary-muted text-body-s grow text-left;
+      grid-area: text;
+    }
+  }
+
+  .heading {
+    @apply text-body-xs uppercase;
+  }
+
+  .item {
+    @apply gap-s rounded-medium p-xs text-body-m flex w-full cursor-pointer items-center justify-center;
+
+    @variant hover {
+      @apply bg-interactive-muted-hover;
+    }
+
+    @variant focus-visible {
+      @apply bg-interactive-muted-hover outline-none;
+    }
+
+    @variant pressed {
+      @apply bg-accent-primary-pressed;
+    }
+
+    @variant selected {
+      @apply bg-accent-primary-bold;
+
+      @variant hover {
+        @apply bg-accent-primary-hover;
+      }
+
+      @variant focus-visible {
+        @apply bg-accent-primary-hover;
+      }
+
+      @variant pressed {
+        @apply bg-accent-primary-pressed;
+      }
+    }
+
+    @variant disabled {
+      @apply fg-disabled cursor-not-allowed;
+    }
+
+    @variant group-open/sidenav {
+      @apply px-s;
+    }
+
+    @variant group-closed/sidenav {
+      @apply max-w-fit;
+    }
+  }
+
+  .text {
+    @apply text-body-s grow text-left;
+  }
+
+  .link {
+    @apply gap-s rounded-medium p-xs text-body-m flex w-full cursor-pointer items-center justify-center;
+
+    @variant hover {
+      @apply bg-interactive-muted-hover;
+    }
+
+    @variant focus-visible {
+      @apply bg-interactive-muted-hover outline-none;
+    }
+
+    @variant pressed {
+      @apply bg-accent-primary-pressed;
+    }
+
+    @variant disabled {
+      @apply fg-disabled cursor-not-allowed;
+    }
+
+    @variant group-open/sidenav {
+      @apply w-full;
+    }
+
+    @variant group-closed/sidenav {
+      @apply max-w-fit;
+    }
+  }
+
+  .menu {
+    @apply text-body-s relative;
+
+    .heading {
+      @apply flex-1 text-left;
+    }
+
+    .item {
+      @apply gap-s rounded-medium p-s text-body-s flex w-full cursor-pointer items-center text-left;
+
+      @variant hover {
+        @apply bg-interactive-muted-hover;
+      }
+
+      @variant focus-visible {
+        @apply bg-interactive-muted-hover outline-none;
+      }
+
+      @variant pressed {
+        @apply bg-accent-primary-pressed;
+      }
+
+      @variant selected {
+        @apply bg-accent-primary-bold;
+
+        @variant hover {
+          @apply bg-accent-primary-hover;
+        }
+
+        @variant focus-visible {
+          @apply bg-accent-primary-hover;
+        }
+
+        @variant pressed {
+          @apply bg-accent-primary-pressed;
+        }
+      }
+
+      @variant disabled {
+        @apply fg-disabled cursor-not-allowed;
+      }
+
+      @variant group-expanded/menu {
+        @apply block;
+
+        @variant group-open/sidenav {
+          padding-left: 32px;
+        }
+      }
+    }
+  }
+
+  .trigger {
+    @apply gap-s rounded-medium p-xs flex w-full cursor-pointer items-center justify-center;
+
+    @variant hover {
+      @apply bg-interactive-muted-hover;
+    }
+
+    @variant focus-visible {
+      @apply bg-interactive-muted-hover outline-none;
+    }
+
+    @variant pressed {
+      @apply bg-interactive-muted-hover;
+    }
+
+    @variant group-closed/sidenav {
+      @apply max-w-fit;
+    }
+  }
+
+  .panel {
+    @apply fg-primary-bold rounded-medium bg-surface-raised outline-static outline;
+
+    .heading {
+      @apply rounded-t-medium bg-surface-overlay px-m py-s text-body-s;
+    }
+
+    .content {
+      @apply gap-xs bg-surface-default px-xs py-xs flex w-full flex-col;
+    }
+
+    .item {
+      @apply gap-s rounded-medium p-s text-body-s flex w-full cursor-pointer items-center text-left;
+
+      @variant hover {
+        @apply bg-interactive-muted-hover;
+      }
+
+      @variant focus-visible {
+        @apply bg-interactive-muted-hover outline-none;
+      }
+
+      @variant pressed {
+        @apply bg-accent-primary-pressed;
+      }
+
+      @variant selected {
+        @apply bg-accent-primary-bold;
+
+        @variant hover {
+          @apply bg-accent-primary-hover;
+        }
+
+        @variant focus-visible {
+          @apply bg-accent-primary-hover;
+        }
+
+        @variant pressed {
+          @apply bg-accent-primary-pressed;
+        }
+      }
+
+      @variant disabled {
+        @apply fg-disabled cursor-not-allowed;
+      }
+    }
+  }
+
+  .transient {
+    @variant group-closed/sidenav {
+      @apply hidden;
+    }
+  }
+}
+
+@layer components.l2 {
+  .divider {
+    @apply my-s;
+  }
+
+  .toggle {
+    @apply gap-s rounded-medium p-xs flex cursor-pointer items-center;
+
+    @variant hover {
+      @apply bg-interactive-muted-hover;
+    }
+
+    @variant focus-visible {
+      @apply bg-interactive-muted-hover outline-none;
+    }
+
+    @variant pressed {
+      @apply bg-interactive-muted-pressed;
+    }
+
+    @variant group-open/sidenav {
+      @apply px-s;
+    }
+  }
+
+  .tooltip {
+    @apply gap-s text-body-s absolute flex items-center whitespace-nowrap;
+
+    @variant group-disabled/item {
+      @apply fg-disabled;
+    }
+
+    @variant group-disabled/link {
+      @apply fg-disabled;
+    }
+  }
+}

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

@@ -52,10 +52,9 @@ type SidenavContextValue = {
     id: UniqueId;
     isOpen: boolean;
 };
-type SidenavMenuProps = {
+type SidenavMenuProps = PropsWithChildren & {
     title: string;
     icon: React.ReactNode;
-    children: React.ReactNode;
     classNames?: {
         menu?: DisclosureProps['className'];
         button?: ButtonProps['className'];

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

@@ -1,8 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SkeletonProps } from './types.js';
 import 'react';
-import 'tailwind-variants';
-import './styles.js';
 
 /**
  * Skeleton - A flexible skeleton loader component for indicating loading states
@@ -16,7 +14,7 @@ import './styles.js';
  *
  * @example
  * // Circular placeholder (useful for avatars)
- * <Skeleton shape="circ" />
+ * <Skeleton variant="circle" />
  *
  * @example
  * // With loading text content
@@ -34,6 +32,6 @@ import './styles.js';
  * // Custom styling
  * <Skeleton className="w-[50%] mt-l" />
  */
-declare function Skeleton({ className, shape, ...rest }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, variant, ...rest }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { Skeleton };

package/dist/components/skeleton/index.js

@@ -1,2 +1,2 @@
-import {jsx}from'react/jsx-runtime';import {SkeletonStyles,SkeletonStylesDefaults}from'./styles.js';function r({className:e,shape:o=SkeletonStylesDefaults.shape,...t}){return jsx("div",{...t,className:SkeletonStyles({className:e,shape:o})})}export{r as Skeleton};//# sourceMappingURL=index.js.map
+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
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/skeleton/index.tsx"],"names":["SkeletonStylesDefaults","p","rest","s"],"mappings":"oGA6CO,SACL,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,KAAQA,CAAuB,CAAA,CAAAC,sBAAA,CAAA,KAC5BC,CACL,GACE,CAAA,CAAA,CAAA,CAAA,OAAQC,GAAA,CAAA,MAAQD,CAAAA,GAAM,CAAA,CAAA,SAA4B,0BAAW,CAAA,CAAA,CAAA,MAAU,CACzE,CAAA,CAAA,CAAA,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 { SkeletonStyles, SkeletonStylesDefaults } from './styles';\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 shape=\"circ\" />\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  shape = SkeletonStylesDefaults.shape,\n  ...rest\n}: SkeletonProps) {\n  return <div {...rest} className={SkeletonStyles({ className, shape })} />;\n}\n"]}
+{"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"]}

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

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .skeleton {
+    /* TODO: bg-[color]/[opacity] isn't working, nesting of Skeleton isn't working ATM */
+    @apply fg-primary-bold bg-interactive-disabled px-l py-s;
+
+    /* TODO: animation styles non-functional with @apply directive */
+    @variant motion-safe {
+      @apply animate-pulse;
+    }
+
+    &.circle {
+      @apply aspect-square w-[1lh] rounded-full;
+    }
+
+    &.rectangle {
+      @apply rounded-small min-h-lh w-full;
+    }
+  }
+}

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

@@ -1,8 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { SkeletonStyles } from './styles.js';
 
-type SkeletonStyleVariants = VariantProps<typeof SkeletonStyles>;
-type SkeletonProps = ComponentPropsWithRef<'div'> & SkeletonStyleVariants;
+type SkeletonProps = ComponentPropsWithRef<'div'> & {
+    variant?: 'rectangle' | 'circle';
+};
 
-export type { SkeletonProps, SkeletonStyleVariants };
+export type { SkeletonProps };

package/dist/components/slider/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';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 {SliderStyles}from'./styles.js';const{slider:A,label:D,inputs:F,input:B,thumb:P,track:$,trackBackground:z,trackValue:C,minValue:L,maxValue:R}=SliderStyles();function K({classNames:e,label:d,layout:b="grid",maxValue:o=100,minValue:n=0,orientation:g="horizontal",showInput:s,showLabel:c=true,...T}){return jsx(Slider,{...T,className:composeRenderProps(e?.slider,a=>A({className:a})),maxValue:o,minValue:n,orientation:g,"aria-label":c?void 0:d,"data-layout":b,children:({state:a})=>jsxs(Fragment,{children:[c&&jsx(Label,{className:D({className:e?.label}),children:d}),s&&jsx("div",{className:F({className:e?.inputs}),children:a.values.map((m,r)=>jsx(Input,{className:composeRenderProps(e?.input,i=>B({className:i})),value:m,disabled:a.isDisabled,"data-disabled":a.isDisabled||void 0,onChange:i=>a.setThumbValue(r,Number.parseFloat(i.target.value))},`number-field-${r===0?"min":"max"}`))}),jsxs(SliderTrack,{className:composeRenderProps(e?.track,m=>$({className:m})),children:[jsx("div",{className:z({className:e?.trackBackground})}),a.values.map((m,r)=>jsxs(Fragment$1,{children:[jsx("div",{className:C({className:e?.trackValue}),"data-start":a.values.length===1?0:a.getThumbPercent(0),"data-end":a.getThumbPercent(a.values.length===1?0:1)}),jsxs(TooltipTrigger,{isDisabled:!s||a.isThumbDragging(r),children:[jsx(SliderThumb,{index:r,className:composeRenderProps(e?.thumb,i=>P({className:i}))}),jsx(Tooltip,{placement:"top",children:a.getThumbValue(r)})]})]},`slider-${r===0?"min":"max"}`))]}),jsx(Text,{slot:"min",className:L({className:e?.minValue}),children:n}),jsx(Text,{slot:"max",className:R({className:e?.maxValue}),children:o})]})})}export{K as Slider};//# sourceMappingURL=index.js.map
+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
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/slider/index.tsx"],"names":["inputs","input","track","trackBackground","Slider","layout","maxValueProp","orientation","rest","jsx","AriaSlider","l","composeRenderProps","classNames","t","state","showLabel","Label","label","showInput","index","h","event","jsxs","f","_","u","k","trackValue","V","p","Text","maxValue"],"mappings":"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","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'use client';\n\nimport 'client-only';\nimport { Fragment } from 'react';\nimport {\n  Slider as AriaSlider,\n  SliderTrack as AriaSliderTrack,\n  composeRenderProps,\n  Input,\n  Label,\n  SliderThumb,\n  Text,\n} from 'react-aria-components';\nimport { Tooltip } from '../tooltip';\nimport { TooltipTrigger } from '../tooltip/trigger';\nimport { SliderStyles } from './styles';\nimport type { SliderProps } from './types';\n\nconst {\n  slider,\n  label,\n  inputs,\n  input,\n  thumb,\n  track,\n  trackBackground,\n  trackValue,\n  minValue,\n  maxValue,\n} = SliderStyles();\n\n/**\n * Slider - An interactive range input component for numeric value selection\n *\n * Provides accessible slider functionality with optional input field integration,\n * flexible layouts, and comprehensive keyboard and mouse interaction support.\n * Perfect for settings, filters, or any numeric input requiring visual feedback.\n *\n * @example\n * // Basic slider\n * <Slider label=\"Volume\" defaultValue={50} />\n */\nexport function Slider({\n  classNames,\n  label: labelProp,\n  layout = 'grid',\n  maxValue: maxValueProp = 100,\n  minValue: minValueProp = 0,\n  orientation = 'horizontal',\n  showInput,\n  showLabel = true,\n  ...rest\n}: SliderProps) {\n  return (\n    <AriaSlider\n      {...rest}\n      className={composeRenderProps(classNames?.slider, (className) =>\n        slider({ className }),\n      )}\n      maxValue={maxValueProp}\n      minValue={minValueProp}\n      orientation={orientation}\n      aria-label={showLabel ? undefined : labelProp}\n      data-layout={layout}\n    >\n      {({ state }) => (\n        <>\n          {showLabel && (\n            <Label className={label({ className: classNames?.label })}>\n              {labelProp}\n            </Label>\n          )}\n          {showInput && (\n            <div className={inputs({ className: classNames?.inputs })}>\n              {state.values.map((value, index) => (\n                <Input\n                  key={`number-field-${index === 0 ? 'min' : 'max'}`}\n                  className={composeRenderProps(\n                    classNames?.input,\n                    (className) => input({ className }),\n                  )}\n                  value={value}\n                  disabled={state.isDisabled}\n                  data-disabled={state.isDisabled || undefined}\n                  onChange={(event) =>\n                    state.setThumbValue(\n                      index,\n                      Number.parseFloat(event.target.value),\n                    )\n                  }\n                />\n              ))}\n            </div>\n          )}\n          <AriaSliderTrack\n            className={composeRenderProps(classNames?.track, (className) =>\n              track({ className }),\n            )}\n          >\n            <div\n              className={trackBackground({\n                className: classNames?.trackBackground,\n              })}\n            />\n            {state.values.map((_, index) => (\n              <Fragment key={`slider-${index === 0 ? 'min' : 'max'}`}>\n                <div\n                  className={trackValue({\n                    className: classNames?.trackValue,\n                  })}\n                  data-start={\n                    state.values.length === 1 ? 0 : state.getThumbPercent(0)\n                  }\n                  data-end={state.getThumbPercent(\n                    state.values.length === 1 ? 0 : 1,\n                  )}\n                />\n                <TooltipTrigger\n                  isDisabled={!showInput || state.isThumbDragging(index)}\n                >\n                  <SliderThumb\n                    index={index}\n                    className={composeRenderProps(\n                      classNames?.thumb,\n                      (className) => thumb({ className }),\n                    )}\n                  />\n                  <Tooltip placement='top'>\n                    {state.getThumbValue(index)}\n                  </Tooltip>\n                </TooltipTrigger>\n              </Fragment>\n            ))}\n          </AriaSliderTrack>\n          <Text\n            slot='min'\n            className={minValue({ className: classNames?.minValue })}\n          >\n            {minValueProp}\n          </Text>\n          <Text\n            slot='max'\n            className={maxValue({ className: classNames?.maxValue })}\n          >\n            {maxValueProp}\n          </Text>\n        </>\n      )}\n    </AriaSlider>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/slider/index.tsx"],"names":["classNames","layout","minValueProp","orientation","jsx","rest","l","v","composeRenderProps","className","clsx","styles","maxValueProp","showLabel","jsxs","Fragment","Label","a","showInput","value","index","Input","AriaSliderTrack","_","h","state","TooltipTrigger","d","SliderThumb","Tooltip","A","Text","T"],"mappings":"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","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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Fragment } from 'react';\nimport {\n  Slider as AriaSlider,\n  SliderTrack as AriaSliderTrack,\n  composeRenderProps,\n  Input,\n  Label,\n  SliderThumb,\n  Text,\n} from 'react-aria-components';\nimport { Tooltip } from '../tooltip';\nimport { TooltipTrigger } from '../tooltip/trigger';\nimport styles from './styles.module.css';\nimport type { SliderProps } from './types';\n\n/**\n * Slider - An interactive range input component for numeric value selection\n *\n * Provides accessible slider functionality with optional input field integration,\n * flexible layouts, and comprehensive keyboard and mouse interaction support.\n * Perfect for settings, filters, or any numeric input requiring visual feedback.\n *\n * @example\n * // Basic slider\n * <Slider label=\"Volume\" defaultValue={50} />\n */\nexport function Slider({\n  classNames,\n  label: labelProp,\n  layout = 'grid',\n  maxValue: maxValueProp = 100,\n  minValue: minValueProp = 0,\n  orientation = 'horizontal',\n  showInput,\n  showLabel = true,\n  ...rest\n}: SliderProps) {\n  return (\n    <AriaSlider\n      {...rest}\n      className={composeRenderProps(classNames?.slider, (className) =>\n        clsx('group/slider', styles.slider, className),\n      )}\n      maxValue={maxValueProp}\n      minValue={minValueProp}\n      orientation={orientation}\n      aria-label={showLabel ? undefined : labelProp}\n      data-layout={layout}\n    >\n      {({ state }) => (\n        <>\n          {showLabel && (\n            <Label className={clsx(styles.label, classNames?.label)}>\n              {labelProp}\n            </Label>\n          )}\n          {showInput && (\n            <div className={clsx(styles.inputs, classNames?.inputs)}>\n              {state.values.map((value, index) => (\n                <Input\n                  key={`number-field-${index === 0 ? 'min' : 'max'}`}\n                  className={composeRenderProps(\n                    classNames?.input,\n                    (className) => clsx(styles.input, className),\n                  )}\n                  value={value}\n                  disabled={state.isDisabled}\n                  data-disabled={state.isDisabled || undefined}\n                  onChange={(event) =>\n                    state.setThumbValue(\n                      index,\n                      Number.parseFloat(event.target.value),\n                    )\n                  }\n                />\n              ))}\n            </div>\n          )}\n          <AriaSliderTrack\n            className={composeRenderProps(classNames?.track, (className) =>\n              clsx(styles.track, className),\n            )}\n          >\n            <div\n              className={clsx(\n                styles.trackBackground,\n                classNames?.trackBackground,\n              )}\n            />\n            {state.values.map((_, index) => (\n              <Fragment key={`slider-${index === 0 ? 'min' : 'max'}`}>\n                <div\n                  className={clsx(styles.trackValue, classNames?.trackValue)}\n                  data-start={\n                    state.values.length === 1 ? 0 : state.getThumbPercent(0)\n                  }\n                  data-end={state.getThumbPercent(\n                    state.values.length === 1 ? 0 : 1,\n                  )}\n                />\n                <TooltipTrigger\n                  isDisabled={!showInput || state.isThumbDragging(index)}\n                >\n                  <SliderThumb\n                    index={index}\n                    className={composeRenderProps(\n                      classNames?.thumb,\n                      (className) => clsx(styles.thumb, className),\n                    )}\n                  />\n                  <Tooltip placement='top'>\n                    {state.getThumbValue(index)}\n                  </Tooltip>\n                </TooltipTrigger>\n              </Fragment>\n            ))}\n          </AriaSliderTrack>\n          <Text\n            slot='min'\n            className={clsx(styles.minValue, classNames?.minValue)}\n          >\n            {minValueProp}\n          </Text>\n          <Text\n            slot='max'\n            className={clsx(styles.maxValue, classNames?.maxValue)}\n          >\n            {maxValueProp}\n          </Text>\n        </>\n      )}\n    </AriaSlider>\n  );\n}\n"]}