aural-ui 4.2.4 → 4.4.0

package/dist/components/button/index.tsx

@@ -80,18 +80,6 @@ export const innerButtonVariants = cva(
       },
     },
     compoundVariants: [
-      {
-        variant: "primary",
-        noise: "low",
-        className:
-          "[background-image:var(--button-fm-noise-low),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-button-fg-end)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
-      },
-      {
-        variant: "primary",
-        noise: "medium",
-        className:
-          "[background-image:var(--button-fm-noise),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-button-fg-end)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
-      },
       {
         variant: "primary",
         noise: "strong",
@@ -103,31 +91,6 @@ export const innerButtonVariants = cva(
         noise: "low",
         className: "[background-image:var(--button-fm-noise-low)]",
       },
-      {
-        variant: "secondary",
-        noise: "medium",
-        className: "[background-image:var(--button-fm-noise)]",
-      },
-      {
-        variant: "secondary",
-        noise: "strong",
-        className: "[background-image:var(--button-fm-noise-strong)]",
-      },
-      {
-        variant: "chipActive",
-        noise: "low",
-        className: "[background-image:var(--button-fm-noise-low)]",
-      },
-      {
-        variant: "chipActive",
-        noise: "medium",
-        className: "[background-image:var(--button-fm-noise)]",
-      },
-      {
-        variant: "chipActive",
-        noise: "strong",
-        className: "[background-image:var(--button-fm-noise-strong)]",
-      },
     ],
     defaultVariants: {
       variant: "primary",
@@ -148,7 +111,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   isDisabled?: boolean
   size?: "sm" | "md" | "lg"
   variant?: "primary" | "secondary" | "outline" | "text" | "chip" | "chipActive"
-  noise?: "none" | "low" | "medium" | "strong"
 }
 
 export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -156,7 +118,6 @@ export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       variant = "primary",
       size = "md",
-      noise: noiseProp,
       children,
       className = "",
       innerClassName = "",
@@ -169,12 +130,11 @@ export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const noise =
-      noiseProp ??
-      (variant === "primary"
-        ? "medium"
+      variant === "primary"
+        ? "strong"
         : variant === "secondary"
           ? "low"
-          : "none")
+          : "none"
 
     const iconColor = isDisabled
       ? "var(--icon-fm-inactive)"

package/dist/components/card/Card.stories.tsx

@@ -443,7 +443,7 @@ export const UseCases: Story = {
         <div className="mx-auto max-w-md">
           <Card>
             <CardHeader>
-              <CardTitle className="text-fm-primary font-fm-text text-fm-lg leading-fm-lg flex items-center gap-2 font-semibold">
+              <CardTitle className="text-fm-primary font-fm-text text-fm-lg leading-fm-lg flex items-center gap-2 font-medium">
                 <MusicalNoteIcon className="text-fm-secondary size-4 shrink-0" />
                 Midnight Dreams
               </CardTitle>
@@ -503,7 +503,7 @@ export const UseCases: Story = {
           <Card>
             <CardHeader className="border-b">
               <CardTitle className="text-fm-primary font-fm-brand text-fm-xl leading-fm-xl flex items-center gap-3 font-semibold">
-                <div className="bg-fm-surface-secondary text-fm-primary flex size-10 shrink-0 items-center justify-center rounded-full font-semibold">
+                <div className="bg-fm-surface-secondary text-fm-primary flex size-10 shrink-0 items-center justify-center rounded-full font-medium">
                   NC
                 </div>
                 Neon Collective

package/dist/components/card/index.tsx

@@ -31,7 +31,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-none font-medium", className)}
       {...props}
     />
   )

package/dist/components/clamp-lines/index.tsx

@@ -123,7 +123,6 @@ export const ClampLines = ({
     <Button
       data-nosnippet
       variant="text"
-      noise="none"
       innerClassName={cn("px-0! h-fit inline", classes.clampLineBtnInnerClass)}
       className={cn(
         "text-fm-tertiary ml-1 cursor-pointer underline",

package/dist/components/drawer/index.tsx

@@ -175,7 +175,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-fm-primary font-semibold", className)}
+      className={cn("text-fm-primary font-medium", className)}
       {...props}
     />
   )

package/dist/components/hover-card/HoverCard.stories.tsx

@@ -76,7 +76,7 @@ export const Parts: Story = {
           </HoverCardTrigger>
           <HoverCardContent>
             <div className="space-y-1">
-              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                 Aural Artist
               </p>
               <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -106,7 +106,7 @@ export const Parts: Story = {
           </HoverCardTrigger>
           <HoverCardContent>
             <div className="space-y-2">
-              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+              <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                 Frosted glass panel
               </p>
               <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -255,7 +255,7 @@ export const UseCases: Story = {
             Midnights ·{" "}
             <HoverCard openDelay={300} closeDelay={150}>
               <HoverCardTrigger asChild>
-                <button className="text-fm-primary cursor-pointer font-semibold underline underline-offset-2 outline-none">
+                <button className="text-fm-primary cursor-pointer font-medium underline underline-offset-2 outline-none">
                   Taylor Swift
                 </button>
               </HoverCardTrigger>
@@ -268,7 +268,7 @@ export const UseCases: Story = {
                       </span>
                     </div>
                     <div className="space-y-0.5">
-                      <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+                      <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                         Taylor Swift
                       </p>
                       <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -337,7 +337,7 @@ export const UseCases: Story = {
                 </HoverCardTrigger>
                 <HoverCardContent className="w-64">
                   <div className="space-y-2">
-                    <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+                    <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                       {album.name}
                     </p>
                     <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -388,7 +388,7 @@ export const UseCases: Story = {
             >
               <HoverCard openDelay={300} closeDelay={200}>
                 <HoverCardTrigger asChild>
-                  <button className="text-fm-primary cursor-pointer font-semibold underline underline-offset-2 outline-none">
+                  <button className="text-fm-primary cursor-pointer font-medium underline underline-offset-2 outline-none">
                     {handle}
                   </button>
                 </HoverCardTrigger>
@@ -401,7 +401,7 @@ export const UseCases: Story = {
                         </span>
                       </div>
                       <div>
-                        <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+                        <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                           {name}
                         </p>
                         <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">

package/dist/components/index.ts

@@ -23,9 +23,9 @@ export * from "./if-else"
 export * from "./label"
 export * from "./list"
 export * from "./marquee"
+export * from "./offer-label"
 export * from "./otp-inputs"
 export * from "./overlay"
-export * from "./otp-inputs"
 export * from "./pagination"
 export * from "./popover"
 export * from "./radio"

package/dist/components/marquee/Marquee.stories.tsx

@@ -77,11 +77,7 @@ function TokenChip({
 }: {
   label: string
   surface:
-    | "secondary"
-    | "info-sec"
-    | "positive-sec"
-    | "warning-sec"
-    | "negative-sec"
+    "secondary" | "info-sec" | "positive-sec" | "warning-sec" | "negative-sec"
 }) {
   const surfaceClass = {
     secondary: "bg-fm-surface-secondary border-fm-divider-secondary",
@@ -344,7 +340,7 @@ export const UseCases: Story = {
           Announcements Ticker
         </h4>
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 overflow-hidden rounded-lg border px-4 py-2">
-          <div className="bg-fm-surface-negative-sec text-fm-primary text-fm-xs leading-fm-xs shrink-0 rounded px-2 py-0.5 font-semibold tracking-widest uppercase">
+          <div className="bg-fm-surface-negative-sec text-fm-primary text-fm-xs leading-fm-xs shrink-0 rounded px-2 py-0.5 font-medium tracking-widest uppercase">
             Live
           </div>
           <Marquee duration="28s" pauseOnHover className="flex-1">

package/dist/components/offer-label/OfferLabel.stories.tsx

@@ -0,0 +1,267 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
+import { OfferLabel } from "."
+
+const meta: Meta<typeof OfferLabel> = {
+  title: "Components/UI/OfferLabel",
+  component: OfferLabel,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An inline label that renders text with a decorative gradient underline stroke beneath it — ideal for surfacing promotional copy, highlighted offers, or key phrases.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Gradient Underline",
+              description: "Animated SVG accent",
+            },
+            {
+              title: "Composable Text",
+              description: "Accepts any className",
+            },
+            {
+              title: "SSR Safe",
+              description: "Stable gradient ID prop",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "The label text to display",
+    },
+    className: {
+      control: "text",
+      description: "CSS classes applied to the inner text span",
+    },
+    iconId: {
+      control: "text",
+      description: "Optional stable ID for the underline gradient",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof OfferLabel>
+
+// ─── 1. Playground ────────────────────────────────────────────────────────────
+
+export const Playground: Story = {
+  args: {
+    text: "Limited Offer",
+    className:
+      "text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-bold",
+  },
+  render: (args) => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="flex justify-center py-4">
+        <OfferLabel {...args} />
+      </div>
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+        <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">{`<OfferLabel text="${args.text}" className="${args.className ?? ""}" />`}</code>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Adjust the text and className using the controls panel in the sidebar.",
+      },
+    },
+  },
+}
+
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Typography Scale
+        </h4>
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Headline"
+              className="text-fm-primary font-fm-brand text-fm-4xl leading-fm-4xl font-bold"
+              iconId="variant-4xl"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              4xl / bold
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Subheading"
+              className="text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-semibold"
+              iconId="variant-2xl"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              2xl / semibold
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Body label"
+              className="text-fm-primary font-fm-text text-fm-lg leading-fm-lg font-medium"
+              iconId="variant-lg"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              lg / medium
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Small"
+              className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm"
+              iconId="variant-sm"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              sm / regular
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Text Color
+        </h4>
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Primary"
+              className="text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-primary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-primary
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Secondary"
+              className="text-fm-secondary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-secondary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-secondary
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Tertiary"
+              className="text-fm-tertiary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-tertiary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-tertiary
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "OfferLabel across different type scales and text color tokens — the gradient underline adapts naturally to each.",
+      },
+    },
+  },
+}
+
+// ─── 3. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Promotional Hero Banner
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-3 rounded-xl border p-6 text-center">
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm tracking-widest uppercase">
+            Pocket FM Premium
+          </p>
+          <div className="flex justify-center">
+            <OfferLabel
+              text="3 Months Free"
+              className="text-fm-primary font-fm-brand text-fm-4xl leading-fm-4xl font-bold"
+              iconId="use-case-hero"
+            />
+          </div>
+          <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+            Unlock unlimited access to all audio stories.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Inline Promotional Copy
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md rounded-xl border p-5">
+          <p className="text-fm-primary font-fm-text text-fm-lg leading-fm-xl">
+            Subscribe today and get{" "}
+            <OfferLabel
+              text="50% off"
+              className="text-fm-primary font-fm-brand text-fm-lg leading-fm-xl font-semibold"
+              iconId="use-case-inline"
+            />{" "}
+            your first month — no strings attached.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Pricing Card Highlight
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-sm space-y-4 rounded-xl border p-6">
+          <div className="space-y-1">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm tracking-widest uppercase">
+              Annual Plan
+            </p>
+            <div className="flex items-baseline gap-1">
+              <OfferLabel
+                text="₹999"
+                className="text-fm-primary font-fm-brand text-fm-5xl leading-fm-5xl font-bold"
+                iconId="use-case-price"
+              />
+              <span className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+                / year
+              </span>
+            </div>
+          </div>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+            Save 40% compared to the monthly plan.
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world usage: promotional hero banners, inline highlighted copy, and pricing card accents.",
+      },
+    },
+  },
+}

package/dist/components/offer-label/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { UnderlineIcon } from "@icons/underline-icon"
+import { cn } from "@lib/utils"
+
+export interface IOfferLabelProps {
+  className?: string
+  iconClass?: string
+  /**
+   * Optional stable ID for the underline gradient. Can help if SSR hydration mismatches occur.
+   */
+  iconId?: string
+  text: string
+}
+
+export function OfferLabel({
+  text,
+  className,
+  iconId,
+  iconClass,
+}: IOfferLabelProps) {
+  return (
+    <span className="relative inline-block pb-1">
+      <span className={className}>{text}</span>
+      <UnderlineIcon
+        id={iconId}
+        aria-hidden="true"
+        withAccessibility={false}
+        className={cn("absolute left-0 w-8", iconClass)}
+      />
+    </span>
+  )
+}

package/dist/components/offer-label/meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["underline-icon"],
+  tokens: [],
+}

package/dist/components/otp-inputs/OtpInputs.stories.tsx

@@ -376,7 +376,7 @@ export const Interactive: Story = {
                 <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-xl border p-6">
                   <div className="space-y-4">
                     <div className="space-y-1">
-                      <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+                      <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                         Verify your identity
                       </p>
                       <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">

package/dist/components/popover/Popover.stories.tsx

@@ -291,7 +291,7 @@ export const Configurations: Story = {
             <PopoverContent className="w-64 rounded-lg p-4">
               <div className="flex items-start justify-between gap-3">
                 <div className="space-y-1">
-                  <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-semibold">
+                  <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md font-medium">
                     Quick note
                   </p>
                   <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">

package/dist/components/slider/index.tsx

@@ -61,12 +61,7 @@ interface SliderProps extends React.ComponentProps<
   typeof SliderPrimitive.Root
 > {
   variant?:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "positive"
-    | "warning"
-    | "info"
+    "default" | "primary" | "secondary" | "positive" | "warning" | "info"
   size?: "sm" | "md" | "lg"
   showLabel?: boolean
   label?: string

package/dist/components/table/Table.stories.tsx

@@ -298,8 +298,8 @@ export const Parts: Story = {
           </TableBody>
           <TableFooter>
             <TableRow>
-              <TableCell className="font-semibold">Total</TableCell>
-              <TableCell className="text-right font-semibold">2.09M</TableCell>
+              <TableCell className="font-medium">Total</TableCell>
+              <TableCell className="text-right font-medium">2.09M</TableCell>
             </TableRow>
           </TableFooter>
         </Table>
@@ -846,10 +846,10 @@ export const UseCases: Story = {
             </TableBody>
             <TableFooter>
               <TableRow>
-                <TableCell colSpan={4} className="font-semibold">
+                <TableCell colSpan={4} className="font-medium">
                   4 albums
                 </TableCell>
-                <TableCell className="font-semibold">
+                <TableCell className="font-medium">
                   {albums.reduce((s, a) => s + a.tracks, 0)}
                 </TableCell>
                 <TableCell />

package/dist/components/toggle/Toggle.stories.tsx

@@ -491,19 +491,19 @@ export const Interactive: Story = {
                 <div className="flex flex-col gap-1">
                   <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm">
                     Shuffle:{" "}
-                    <span className="font-semibold">
+                    <span className="font-medium">
                       {playback.shuffle ? "ON" : "OFF"}
                     </span>
                   </p>
                   <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm">
                     Repeat:{" "}
-                    <span className="font-semibold">
+                    <span className="font-medium">
                       {playback.repeat ? "ON" : "OFF"}
                     </span>
                   </p>
                   <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm">
                     Mute:{" "}
-                    <span className="font-semibold">
+                    <span className="font-medium">
                       {playback.mute ? "ON" : "OFF"}
                     </span>
                   </p>
@@ -536,7 +536,7 @@ export const Interactive: Story = {
                     onPressedChange={() => toggleFormat("bold")}
                     aria-label="Toggle bold"
                   >
-                    <span className="font-bold">B</span>
+                    <span className="font-medium">B</span>
                   </Toggle>
                   <Toggle
                     size="sm"

package/dist/components/tooltip/index.tsx

@@ -305,8 +305,7 @@ function TooltipContent({
 
 export function withTooltip<
   T extends
-    | keyof React.JSX.IntrinsicElements
-    | React.ForwardRefExoticComponent<any>,
+    keyof React.JSX.IntrinsicElements | React.ForwardRefExoticComponent<any>,
 >(Component: T) {
   return React.forwardRef<
     React.ElementRef<T>,