aural-ui 2.1.1 → 2.1.2

package/dist/components/slider/Slider.stories.tsx

@@ -29,7 +29,7 @@ A customizable range slider component built with Radix UI primitives and design
 - **Orientation Support**: Horizontal and vertical orientations
 - **Range & Single Value**: Support for both single value and range selection
 - **Label Display**: Configurable thumb labels with custom text or values
-- **Centered Thumbs**: Optional centered thumb positioning
+- **Align Thumb**: Optional thumb alignment
 - **Accessibility**: Built with Radix UI for keyboard navigation and screen reader support
 - **Custom Styling**: Flexible class override system for complete customization
 - **Touch Support**: Touch-friendly interaction on mobile devices
@@ -51,7 +51,7 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
   size?: "sm" | "md" | "lg"
   showLabel?: boolean        // Show/hide thumb labels
   label?: string            // Custom label text (overrides value display)
-  centeredTumbs?: boolean   // Center thumb positioning
+  alignThumb?: "bottom" | "top" | "center"   // align thumb alignment
   classes?: {
     root?: string    // Override root container styles
     track?: string   // Override track background styles  
@@ -68,8 +68,8 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
 - **label**: Custom text to display instead of values
 - **Value Display**: Automatic value display when no custom label provided
 
-### Centered Thumbs
-- **centeredTumbs**: Optional centered positioning for thumbs
+### Align Thumb
+- **alignThumb**: Optional centered positioning for thumbs
 - **Track Alignment**: Conditional styling for track-thumb alignment
 
 ### Enhanced Styling
@@ -106,11 +106,11 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
 />
 \`\`\`
 
-### Centered Thumbs
+### Align Thumb
 \`\`\`tsx
 <Slider 
   defaultValue={[60]}
-  centeredTumbs={true}
+  alignThumb={"top"}
 />
 \`\`\`
 
@@ -157,9 +157,10 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
       control: "text",
       description: "Custom label text (overrides value display)",
     },
-    centeredTumbs: {
-      control: "boolean",
-      description: "Center thumb positioning",
+    alignThumb: {
+      control: "select",
+      options: ["bottom", "top", "center"],
+      description: "Thumb alignment",
     },
     orientation: {
       control: "select",
@@ -373,50 +374,50 @@ export const Sizes: Story = {
   ),
 }
 
-// 5. Centered Thumbs
-export const CenteredThumbs: Story = {
+// 5. Align Thumb
+export const AlignThumb: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Centered Thumbs</h3>
+        <h3 className="mb-2 text-lg font-medium text-white">Align Thumb</h3>
         <p className="text-fm-secondary text-sm">
-          Compare default and centered thumb positioning
+          Compare default, centered and top thumb alignment
         </p>
       </div>
 
       <div className="space-y-6">
         <div>
           <label className="mb-2 block text-sm font-medium text-white">
-            Default Positioning
+            Default alignment
           </label>
           <Slider
             defaultValue={[50]}
             variant="primary"
-            centeredTumbs={false}
+            alignThumb={"bottom"}
             showLabel={true}
           />
         </div>
 
         <div>
           <label className="mb-2 block text-sm font-medium text-white">
-            Centered Thumbs
+            Centered Thumb
           </label>
           <Slider
             defaultValue={[50]}
             variant="primary"
-            centeredTumbs={true}
+            alignThumb={"center"}
             showLabel={true}
           />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
-            Range with Centered Thumbs
+          <label className="mb-5 block text-sm font-medium text-white">
+            Top Thumbs
           </label>
           <Slider
-            defaultValue={[25, 75]}
+            defaultValue={[50]}
             variant="positive"
-            centeredTumbs={true}
+            alignThumb={"top"}
             showLabel={true}
           />
         </div>
@@ -800,7 +801,7 @@ export const CompleteShowcase: Story = {
               max={30}
               size="lg"
               showLabel={true}
-              centeredTumbs={true}
+              alignThumb={"center"}
             />
           </div>
         </div>

package/dist/components/slider/index.tsx

@@ -69,7 +69,7 @@ interface SliderProps
   size?: "sm" | "md" | "lg"
   showLabel?: boolean
   label?: string
-  centeredTumbs?: boolean
+  alignThumb?: "center" | "bottom" | "top"
   classes?: {
     root?: string
     track?: string
@@ -88,7 +88,7 @@ function Slider({
   max = 100,
   showLabel = true,
   label,
-  centeredTumbs = false,
+  alignThumb = "bottom",
   classes = {},
   ...props
 }: SliderProps) {
@@ -120,7 +120,13 @@ function Slider({
         data-slot="slider-track"
         className={cn(
           "bg-fm-surface-tertiary/40 relative grow overflow-hidden data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
-          { "data-[orientation=horizontal]:[&_~_span]:top-0": !centeredTumbs },
+          {
+            "data-[orientation=horizontal]:[&_~_span]:-top-3.5":
+              alignThumb === "top",
+            "data-[orientation=horizontal]:[&_~_span]:top-0":
+              alignThumb === "bottom",
+          },
+
           sliderSizeVariants({ size }),
           classes?.track
         )}