aural-ui 2.1.6 → 2.1.8

package/dist/components/input/Input.stories.tsx

@@ -37,6 +37,9 @@ const meta: Meta<typeof Input> = {
     fullWidth: {
       control: { type: "boolean" },
     },
+    transparentOnAutofill: {
+      control: { type: "boolean" },
+    },
   },
 }
 

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
@@ -92,6 +95,7 @@ type InputProps = {
   min?: number
   max?: number
   unstyled?: boolean
+  transparentOnAutofill?: boolean
   classes?: {
     root?: string
     label?: string
@@ -208,6 +212,8 @@ const PasswordToggle = forwardRef<
   </button>
 ))
 
+PasswordToggle.displayName = "PasswordToggle"
+
 // InputBase component - Core input functionality without any wrapper elements
 const InputBase = forwardRef<
   HTMLInputElement,
@@ -217,6 +223,7 @@ const InputBase = forwardRef<
     disabled?: boolean
     className?: string
     unstyled?: boolean
+    ariaLabel?: string
     type?: string
     placeholder?: string
     value?: string | number
@@ -231,6 +238,7 @@ const InputBase = forwardRef<
     maxLength?: number
     startIcon?: boolean // Indicates if start icon spacing should be applied
     endIcon?: boolean // Indicates if end icon spacing should be applied
+    transparentOnAutofill?: boolean
   } & Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
     "onChange" | "onBlur" | "onFocus" | "defaultValue"
@@ -256,6 +264,8 @@ const InputBase = forwardRef<
       maxLength,
       startIcon = false,
       endIcon = false,
+      ariaLabel,
+      transparentOnAutofill = false,
       ...props
     },
     ref
@@ -282,6 +292,16 @@ const InputBase = forwardRef<
     // Determine focus state
     const state = disabled ? "disabled" : isFocused ? "focused" : "default"
 
+    const autoFillStyle = transparentOnAutofill
+      ? {
+          WebkitTextFillColor: "#ffffff",
+          color: "#ffffff",
+          caretColor: "#ffffff",
+          transition: "background-color 999999s ease-in-out 0s",
+          backgroundColor: "transparent",
+        }
+      : {}
+
     // Apply styles only if not unstyled
     const inputClassName = unstyled
       ? className
@@ -303,6 +323,7 @@ const InputBase = forwardRef<
         ref={ref}
         type={type}
         id={id}
+        aria-label={ariaLabel}
         name={name}
         className={inputClassName}
         placeholder={placeholder}
@@ -314,6 +335,7 @@ const InputBase = forwardRef<
         onBlur={handleBlur}
         required={required}
         maxLength={maxLength}
+        style={autoFillStyle}
         {...props}
       />
     )
@@ -348,6 +370,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       decoration,
       unstyled = false,
       classes = {},
+      transparentOnAutofill = false,
       ...props
     },
     ref
@@ -428,6 +451,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             endIcon={!!(endIcon || type === "password")}
             unstyled={unstyled}
             className={unstyled ? className : classes.input}
+            transparentOnAutofill={transparentOnAutofill}
             {...props}
           />
 

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/index.tsx

@@ -27,7 +27,7 @@ const switchVariants = {
       root: "h-6 w-12",
       thumb:
         "size-4 data-[state=checked]:translate-x-6.5 data-[state=unchecked]:translate-x-1",
-      onIcon: "left-1 text-fm-xs",
+      onIcon: "p-1 left-1 text-fm-xs",
       offIcon: "right-[5px] text-fm-xs",
     },
     md: {
@@ -79,7 +79,7 @@ const Switch = React.forwardRef<
           "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 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",
+          "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
@@ -88,7 +88,7 @@ const Switch = React.forwardRef<
       >
         <span
           className={clsx(
-            "font-fm-brand text-fm-positive absolute top-1/2 -translate-y-1/2",
+            "font-fm-brand text-fm-divider-positive absolute top-1/2 -translate-y-1/2",
             {
               "text-fm-positive-tert": disabled,
             },

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>

package/dist/components/thumbnail-tags/index.tsx

@@ -1,34 +1,117 @@
 import React from "react"
+import clsx from "clsx"
+
+import { cn } from "../../lib/utils"
 
 type ThumbnailTagsProps =
   | {
       variant: "promotional"
       text: string
+      classNames?: {
+        container?: string
+        text?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
   | {
       variant: "engagement"
       primaryText: string
       secondaryText: string
+      classNames?: {
+        container?: string
+        primaryText?: string
+        secondaryText?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
   | {
       variant: "checked" | "top10" | "completed-series"
+      classNames?: {
+        container?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
+    }
+  | {
+      variant: "ranked"
+      text: string
+      classNames?: {
+        container?: string
+        text?: string
+        svg?: {
+          height?: number
+          width?: number
+          className?: string
+        }
+      }
     }
 
 export function ThumbnailTags(props: ThumbnailTagsProps) {
-  const { variant } = props
+  const { variant, classNames } = props
+
+  if (variant === "ranked") {
+    return (
+      <div className={cn("flex items-center", classNames?.container)}>
+        <p
+          //cn intentional not used, as it was breaking text-fm-primary
+          className={clsx(
+            "bg-fm-primary-500 text-fm-primary text-fm-md font-fm-brand flex px-1 py-0.5 uppercase",
+            classNames?.text
+          )}
+          style={{
+            clipPath: "polygon(99.5% 0, 0 0, 0 100%, 99.5% 100%, 100% 50%)",
+          }}
+        >
+          {props.text}
+        </p>
+        <svg
+          width={props.classNames?.svg?.width ?? 13.3}
+          height={props.classNames?.svg?.height ?? 25.3}
+          viewBox="0 0 11 23"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn("-ml-[4.4px]", props.classNames?.svg?.className)}
+        >
+          <path
+            d="M0.849976 11.5L3.03162 23L4.54529 15.0215L5.50427 21.8496L6.95837 11.5L5.50427 1.15039L4.54529 7.97754L3.03162 0L0.849976 11.5ZM7.47498 11.5L8.20154 20.7002L8.92908 11.5L8.20154 2.2998L7.47498 11.5ZM9.44568 11.5L10.1722 17.25L10.8998 11.5L10.1722 5.75L9.44568 11.5Z"
+            fill="#FA2937"
+          />
+        </svg>
+      </div>
+    )
+  }
+
   if (variant === "promotional") {
     return (
-      <div className="flex h-4 w-14 gap-0.5">
-        <p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
+      <div className={cn("flex h-4 w-14 gap-0.5", classNames?.container)}>
+        <p
+          //cn intentional not used, as it was breaking text-fm-neutral-100
+          className={clsx(
+            "bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand text-fm-xs w-11 text-center uppercase",
+            classNames?.text
+          )}
+        >
           {props.text}
         </p>
 
         <svg
-          width="12"
-          height="16"
+          height={props.classNames?.svg?.height ?? 16}
+          width={props.classNames?.svg?.width ?? 12}
           viewBox="0 0 12 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className={classNames?.svg?.className}
         >
           <g clipPath="url(#clip0_3_736)">
             <rect
@@ -113,26 +196,28 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </div>
     )
   }
+
   if (variant === "checked") {
     return (
       <svg
-        width="29"
-        height="16"
+        width={props.classNames?.svg?.width ?? 29}
+        height={props.classNames?.svg?.height ?? 16}
         viewBox="0 0 29 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g opacity="0.5">
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M12 15.5024C8.08937 15.2353 5 11.9784 5 7.99994C5 4.0215 8.08937 0.764629 12 0.497437promotional5.5024Z"
+            d="M12 15.5024C8.08937 15.2353 5 11.9784 5 7.99994C5 4.0215 8.08937 0.764629 12 0.497437V15.5024Z"
             fill="#004719"
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M4 12.9317C1.71552 12.4529 4.76837e-07 10.4268 4.76837e-07 7.99999C4.76837e-07 5.5732 1.71552 3.5471 4 3.06824promotional2.9317Z"
+            d="M4 12.9317C1.71552 12.4529 4.76837e-07 10.4268 4.76837e-07 7.99999C4.76837e-07 5.5732 1.71552 3.5471 4 3.06824V12.9317Z"
             fill="#004719"
           />
         </g>
@@ -149,25 +234,37 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </svg>
     )
   }
+
   if (variant === "engagement") {
     return (
-      <div className="flex h-4 w-14 gap-0.5">
+      <div className={cn("flex gap-0.5", classNames?.container)}>
         <div className="bg-fm-primary-400 text-fm-primary font-fm-brand flex uppercase">
-          <p className="text-fm-sm flex w-9 items-center justify-center px-1">
+          <p
+            className={cn(
+              "text-fm-sm flex w-fit items-center justify-center px-1",
+              classNames?.primaryText
+            )}
+          >
             {props.primaryText}
           </p>
           <div className="flex w-1.5 items-center justify-center">
-            <span className="rotate-90 text-[5px] leading-none whitespace-nowrap">
+            <span
+              className={cn(
+                "rotate-90 pt-1 text-[6px] leading-none whitespace-nowrap",
+                classNames?.secondaryText
+              )}
+            >
               {props.secondaryText}
             </span>
           </div>
         </div>
         <svg
-          width="9"
-          height="16"
+          width={props.classNames?.svg?.width ?? 9}
+          height={props.classNames?.svg?.height ?? 16}
           viewBox="0 0 9 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className={classNames?.svg?.className}
         >
           <g clipPath="url(#clip0_17092_166916)">
             <path
@@ -187,15 +284,16 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </div>
     )
   }
-  //top 10
+
   if (variant === "top10") {
     return (
       <svg
-        width="28"
-        height="20"
+        width={props.classNames?.svg?.width ?? 28}
+        height={props.classNames?.svg?.height ?? 20}
         viewBox="0 0 28 20"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g clipPath="url(#clip0_3_790)">
           <path
@@ -228,15 +326,15 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
     )
   }
 
-  // completed series
   if (variant === "completed-series") {
     return (
       <svg
-        width="136"
-        height="16"
+        width={props.classNames?.svg?.width ?? 136}
+        height={props.classNames?.svg?.height ?? 16}
         viewBox="0 0 136 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        className={classNames?.svg?.className}
       >
         <g opacity="0.5">
           <path
@@ -283,9 +381,15 @@ export function ThumbnailTags(props: ThumbnailTagsProps) {
       </svg>
     )
   }
+
   // Default version
   return (
-    <p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
+    <p
+      className={cn(
+        "bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 p-1 text-center uppercase",
+        classNames?.container
+      )}
+    >
       30% off
     </p>
   )