aural-ui 2.1.5 → 2.1.7

package/dist/components/input/index.tsx

@@ -80,10 +80,13 @@ type InputProps = {
   className?: string
   value?: string | number
   defaultValue?: string | number
+  autoComplete?: string
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  ariaLabel?: string
   startIcon?: ReactNode
   endIcon?: ReactNode
   id?: string
@@ -208,6 +211,8 @@ const PasswordToggle = forwardRef<
   </button>
 ))
 
+PasswordToggle.displayName = "PasswordToggle"
+
 // InputBase component - Core input functionality without any wrapper elements
 const InputBase = forwardRef<
   HTMLInputElement,
@@ -217,6 +222,7 @@ const InputBase = forwardRef<
     disabled?: boolean
     className?: string
     unstyled?: boolean
+    ariaLabel?: string
     type?: string
     placeholder?: string
     value?: string | number
@@ -256,6 +262,7 @@ const InputBase = forwardRef<
       maxLength,
       startIcon = false,
       endIcon = false,
+      ariaLabel,
       ...props
     },
     ref
@@ -303,6 +310,7 @@ const InputBase = forwardRef<
         ref={ref}
         type={type}
         id={id}
+        aria-label={ariaLabel}
         name={name}
         className={inputClassName}
         placeholder={placeholder}

package/dist/components/search/Search.stories.tsx

@@ -32,6 +32,7 @@ A comprehensive search input component with both controlled and uncontrolled mod
 - **Dark Theme Optimized**: Default styling for dark interfaces
 - **Accessibility**: Full keyboard navigation and screen reader support
 - **Event Handling**: Separate onChange and onSearch callbacks
+- **Input Ref Access**: Easily focus or manage the input programmatically
 
 ## Component Modes
 
@@ -40,11 +41,13 @@ Use \`value\`, \`onChange\`, and \`onSearch\` for external state management:
 
 \`\`\`tsx
 const [searchValue, setSearchValue] = useState("")
+const inputRef = useRef<HTMLInputElement>(null)
 
 <Search
   value={searchValue}
   onChange={setSearchValue}
   onSearch={(query) => handleSearch(query)}
+  inputRef={inputRef}
 />
 \`\`\`
 
@@ -52,9 +55,12 @@ const [searchValue, setSearchValue] = useState("")
 Use \`initialValue\` and \`onSearch\` for internal state management:
 
 \`\`\`tsx
+const inputRef = useRef<HTMLInputElement>(null)
+
 <Search
   initialValue="initial search"
   onSearch={(query) => handleSearch(query)}
+  inputRef={inputRef}
 />
 \`\`\`
 
@@ -68,6 +74,7 @@ Use \`initialValue\` and \`onSearch\` for internal state management:
 - **children**: Custom content for rendering results
 - **placeholder**: Input placeholder text
 - **className**: Additional CSS classes
+- **inputRef**: Ref to access or focus the underlying input element
         `,
       },
     },

package/dist/components/search/index.tsx

@@ -14,11 +14,13 @@ export interface SearchProps {
   placeholder?: string
   className?: string
   value?: string // Add value prop for controlled component
+  autoFocus?: boolean
   onSearch?: (query: string) => void
   onChange?: (value: string) => void // Add onChange for controlled component
   results?: SearchResult[]
   initialValue?: string
   children?: React.ReactNode // Children can be used to render custom search results
+  inputRef?: React.RefObject<HTMLInputElement | null>
 }
 
 export const Search = React.forwardRef<HTMLDivElement, SearchProps>(
@@ -27,11 +29,13 @@ export const Search = React.forwardRef<HTMLDivElement, SearchProps>(
       placeholder = "Search episodes",
       className = "",
       value: controlledValue,
+      autoFocus = false,
       onSearch,
       onChange,
       results = [],
       initialValue = "",
       children, // Children can be used to render custom search results
+      inputRef,
     },
     ref
   ) => {
@@ -99,8 +103,10 @@ export const Search = React.forwardRef<HTMLDivElement, SearchProps>(
       >
         {/* Search Input */}
         <Input
+          ref={inputRef}
           placeholder={placeholder}
           value={value}
+          autoFocus={autoFocus}
           onChange={handleChange}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}

package/dist/components/slider/index.tsx

@@ -70,6 +70,7 @@ interface SliderProps
   showLabel?: boolean
   label?: string
   alignThumb?: "center" | "bottom" | "top"
+  ariaLabel?: string
   classes?: {
     root?: string
     track?: string
@@ -89,6 +90,7 @@ function Slider({
   showLabel = true,
   label,
   alignThumb = "bottom",
+  ariaLabel,
   classes = {},
   ...props
 }: SliderProps) {
@@ -102,6 +104,13 @@ function Slider({
     [value, defaultValue, min, max]
   )
 
+  const getThumbAriaLabel = (index: number, currentValue: number) => {
+    if (ariaLabel) {
+      return `${ariaLabel}, current value: ${currentValue}`
+    }
+    return `Slider control ${index + 1}, current value: ${currentValue}`
+  }
+
   return (
     <SliderPrimitive.Root
       data-slot="slider"
@@ -145,6 +154,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
+          aria-label={getThumbAriaLabel(index, _values[index])}
           className={cn(
             "block shrink-0 transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
             sliderThumbVariants({ size, variant }),

package/dist/components/switch/Switch.stories.tsx

@@ -30,6 +30,24 @@ const meta: Meta<typeof Switch> = {
       control: { type: "boolean" },
       description: "Whether the switch is disabled or not",
     },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant of the switch",
+      defaultValue: "md",
+    },
+    onIcon: {
+      control: { type: "text" },
+      description: "Custom icon to display when switch is ON",
+    },
+    offIcon: {
+      control: { type: "text" },
+      description: "Custom icon to display when switch is OFF",
+    },
+    classNames: {
+      control: { type: "object" },
+      description: "Custom classNames for different parts of the switch",
+    },
   },
 }
 
@@ -61,6 +79,37 @@ export const DisabledAndChecked: Story = {
   },
 }
 
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col items-center space-y-4">
+      <div className="flex items-center space-x-4">
+        <Switch size="sm" checked={true} />
+        <span className="text-sm text-gray-400">Small (sm)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch size="md" checked={true} />
+        <span className="text-sm text-gray-400">Medium (md)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch size="lg" checked={true} />
+        <span className="text-sm text-gray-400">Large (lg)</span>
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomClassNames: Story = {
+  args: {
+    checked: true,
+    classNames: {
+      root: "border-2 border-blue-500",
+      onIcon: "text-green-600 font-bold",
+      offIcon: "text-gray-400",
+      thumb: "bg-blue-500 shadow-xl",
+    },
+  },
+}
+
 export const WithLabel: Story = {
   render: () => (
     <div className="flex items-center space-x-2">
@@ -108,3 +157,57 @@ export const CheckedWithIcons: Story = {
     offIcon: <CrossIcon />,
   },
 }
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Size Variants</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span>Small</span>
+            <Switch size="sm" checked={true} />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Medium</span>
+            <Switch size="md" checked={true} />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Large</span>
+            <Switch size="lg" checked={true} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">With Custom Styling</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span>Custom Colors</span>
+            <Switch
+              size="md"
+              checked={true}
+              classNames={{
+                root: "border-2 border-purple-500",
+                thumb: "bg-purple-500",
+              }}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>With Icons</span>
+            <Switch
+              size="md"
+              checked={true}
+              onIcon={<TickIcon />}
+              offIcon={<CrossIcon />}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Disabled</span>
+            <Switch size="md" checked={true} disabled />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}

package/dist/components/switch/index.tsx

@@ -1,57 +1,129 @@
 import * as React from "react"
 import { cn } from "@lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import clsx from "clsx"
+
+type SwitchSize = "sm" | "md" | "lg"
+
+type SwitchClassNames = {
+  root?: string
+  onIcon?: string
+  offIcon?: string
+  thumb?: string
+}
 
 type SwitchWithIconsProps = React.ComponentPropsWithoutRef<
   typeof SwitchPrimitives.Root
 > & {
   offIcon?: React.ReactNode
   onIcon?: React.ReactNode
+  size?: SwitchSize
+  classNames?: SwitchClassNames
+}
+
+const switchVariants = {
+  size: {
+    sm: {
+      root: "h-6 w-12",
+      thumb:
+        "size-4 data-[state=checked]:translate-x-6.5 data-[state=unchecked]:translate-x-1",
+      onIcon: "p-1 left-1 text-fm-xs",
+      offIcon: "right-[5px] text-fm-xs",
+    },
+    md: {
+      root: "h-8 w-14",
+      thumb:
+        "size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1",
+      onIcon: "left-2 text-fm-sm",
+      offIcon: "right-1.5 text-fm-sm",
+    },
+    lg: {
+      root: "h-10 w-18",
+      thumb:
+        "size-8 data-[state=checked]:translate-x-9 data-[state=unchecked]:translate-x-1",
+      onIcon: "left-2.5 text-fm-base",
+      offIcon: "right-2 text-fm-base",
+    },
+  },
 }
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchWithIconsProps
->(({ className, onIcon, offIcon, checked, disabled, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    ref={ref}
-    checked={checked}
-    disabled={disabled}
-    className={cn(
-      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
-      "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
-      "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
-      "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
-      "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
-      "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
-      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
-      "relative h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
-      className
-    )}
-    {...props}
-  >
-    <span
-      className={cn(
-        "font-fm-brand text-fm-positive absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]",
-        disabled && "text-fm-positive-tert"
-      )}
-      data-state={checked ? "checked" : "unchecked"}
-      data-disabled={disabled || undefined}
-    >
-      {onIcon ?? "ON"}
-    </span>
-
-    <span
-      className="font-fm-brand text-fm-tertiary absolute top-1/2 right-1.5 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={checked ? "checked" : "unchecked"}
-      data-disabled={disabled || undefined}
-    >
-      {offIcon ?? "OFF"}
-    </span>
-
-    <SwitchPrimitives.Thumb className="bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block size-6 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1" />
-  </SwitchPrimitives.Root>
-))
+>(
+  (
+    {
+      className,
+      onIcon,
+      offIcon,
+      checked,
+      disabled,
+      size = "md",
+      classNames,
+      ...props
+    },
+    ref
+  ) => {
+    const sizeConfig = switchVariants.size[size]
+
+    return (
+      <SwitchPrimitives.Root
+        ref={ref}
+        checked={checked}
+        disabled={disabled}
+        className={cn(
+          "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
+          "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
+          "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
+          "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
+          "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
+          "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
+          "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
+          "relative cursor-pointer rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+          sizeConfig.root,
+          classNames?.root,
+          className
+        )}
+        {...props}
+      >
+        <span
+          className={clsx(
+            "font-fm-brand text-fm-divider-positive absolute top-1/2 -translate-y-1/2",
+            {
+              "text-fm-positive-tert": disabled,
+            },
+            sizeConfig.onIcon,
+            classNames?.onIcon
+          )}
+          data-state={checked ? "checked" : "unchecked"}
+          data-disabled={disabled || undefined}
+        >
+          {onIcon ?? "ON"}
+        </span>
+
+        <span
+          className={clsx(
+            "font-fm-brand text-fm-tertiary absolute top-1/2 -translate-y-1/2",
+            sizeConfig.offIcon,
+            classNames?.offIcon
+          )}
+          data-state={checked ? "checked" : "unchecked"}
+          data-disabled={disabled || undefined}
+        >
+          {offIcon ?? "OFF"}
+        </span>
+
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block rounded-full shadow-lg ring-0 transition-transform",
+            sizeConfig.thumb,
+            classNames?.thumb
+          )}
+        />
+      </SwitchPrimitives.Root>
+    )
+  }
+)
 Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch }
+export { Switch, type SwitchSize, type SwitchClassNames }

package/dist/components/thumbnail-tags/ThumbnailTags.stories.tsx

@@ -5,7 +5,7 @@ import ThumbnailTags from "."
 
 type ThumbnailTagsProps = React.ComponentProps<typeof ThumbnailTags>
 
-const meta: Meta<ThumbnailTagsProps> = {
+const meta: Meta<typeof ThumbnailTags> = {
   title: "Components/UI/ThumbnailTags",
   component: ThumbnailTags,
   parameters: {
@@ -28,6 +28,7 @@ const meta: Meta<ThumbnailTagsProps> = {
         "top10",
         "engagement",
         "completed-series",
+        "ranked",
       ],
       description:
         "Determines the visual style and layout of the thumbnail tag",
@@ -44,8 +45,13 @@ const meta: Meta<ThumbnailTagsProps> = {
       control: "text",
       description: "The secondary text content for variant Engagement",
     },
+    classNames: {
+      control: "object",
+      description:
+        "Custom CSS classes for the component elements (container, text, primaryText, secondaryText,svg)",
+    },
   },
-} satisfies Meta<ThumbnailTagsProps>
+}
 
 export default meta
 type Story = StoryObj<ThumbnailTagsProps>
@@ -57,6 +63,13 @@ export const Default: Story = {
   },
 }
 
+export const Ranked: Story = {
+  args: {
+    variant: "ranked",
+    text: "#1 in hindi",
+  },
+}
+
 export const PromotionalTag = {
   args: {
     variant: "promotional",
@@ -98,7 +111,7 @@ export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-6">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Promotional Tag</h3>
+        <h3 className="text-fm-lg font-semibold text-white">Promotional Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="promotional" text="30% off" />
           <ThumbnailTags variant="promotional" text="NEW" />
@@ -107,7 +120,7 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Checked Tag</h3>
+        <h3 className="text-fm-lg font-semibold text-white">Checked Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="checked" />
           <ThumbnailTags variant="checked" />
@@ -116,7 +129,7 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Engagement Tag</h3>
+        <h3 className="text-fm-lg font-semibold text-white">Engagement Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags
             variant="engagement"
@@ -137,20 +150,27 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Top 10 Tag</h3>
+        <h3 className="text-fm-lg font-semibold text-white">Top 10 Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="top10" />
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">
+        <h3 className="text-fm-lg font-semibold text-white">
           Completed Series Tag
         </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="completed-series" />
         </div>
       </div>
+
+      <div className="space-y-4">
+        <h3 className="text-fm-lg font-semibold text-white">Ranked Tag</h3>
+        <div className="flex gap-4">
+          <ThumbnailTags variant="ranked" text="#1 show" />
+        </div>
+      </div>
     </div>
   ),
 }
@@ -163,7 +183,9 @@ export const UseCases: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Promotional Tags</h3>
+        <h3 className="text-fm-lg font-semibold text-white">
+          Promotional Tags
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="promotional" text="30% off" />
           <ThumbnailTags variant="promotional" text="FREE" />
@@ -172,14 +194,18 @@ export const UseCases: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Status Indicators</h3>
+        <h3 className="text-fm-lg font-semibold text-white">
+          Status Indicators
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="checked" />
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Engagement Metrics</h3>
+        <h3 className="text-fm-lg font-semibold text-white">
+          Engagement Metrics
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags
             variant="engagement"
@@ -200,10 +226,13 @@ export const UseCases: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-white">Achievement Badges</h3>
+        <h3 className="text-fm-lg font-semibold text-white">
+          Achievement Badges
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="top10" />
           <ThumbnailTags variant="completed-series" />
+          <ThumbnailTags variant="ranked" text="#1 show" />
         </div>
       </div>
     </div>