aural-ui 4.2.5 → 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/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/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>,

package/dist/components/typography/Typography.stories.tsx

@@ -77,8 +77,9 @@ const meta: Meta<typeof Typography> = {
     },
     weight: {
       control: "select",
-      options: ["regular", "medium", "semibold", "bold"],
-      description: "Font weight",
+      options: ["regular", "medium"],
+      description:
+        "Font weight. Lab Grotesque body/caption variants support regular (400) and medium (500) only.",
     },
     align: {
       control: "radio",
@@ -336,23 +337,10 @@ export const Configurations: Story = {
               medium (500)
             </p>
           </div>
-          <div className="space-y-2 text-center">
-            <Typography variant="body-large" weight="semibold">
-              Semibold
-            </Typography>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              semibold (600)
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Typography variant="body-large" weight="bold">
-              Bold
-            </Typography>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              bold (700)
-            </p>
-          </div>
         </div>
+        <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+          Body and caption variants support regular and medium only.
+        </p>
       </div>
 
       {/* Color axis */}
@@ -514,7 +502,7 @@ export const Configurations: Story = {
     docs: {
       description: {
         story:
-          "One subsection per configuration axis: weight (regular → bold), color (primary → inactive), alignment (left / center / right), text-transform, and line-height override (tight / normal / loose).",
+          "One subsection per configuration axis: weight (regular → medium), color (primary → inactive), alignment (left / center / right), text-transform, and line-height override (tight / normal / loose).",
       },
     },
   },

package/dist/components/typography/index.tsx

@@ -28,8 +28,6 @@ export const typographyVariants = cva("", {
     weight: {
       regular: "font-normal",
       medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
     },
     align: {
       left: "text-left",

package/dist/icons/all-icons.tsx

@@ -95,7 +95,7 @@ function InteractiveIcon() {
               <IconComponent className="text-fm-primary h-8 w-8" />
             </div>
             <div>
-              <DialogTitle className="text-fm-primary text-xl font-semibold">
+              <DialogTitle className="text-fm-primary text-xl font-medium">
                 {iconName}
               </DialogTitle>
               <p className="text-fm-tertiary text-sm">
@@ -234,7 +234,7 @@ const IconCategory: React.FC<IconCategoryProps> = ({ category, children }) => {
           className="h-px flex-1"
           style={{ background: "var(--gradient-fm-stroke-neutral)" }}
         />
-        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-secondary-800 rounded-full border px-4 py-2 text-lg font-semibold">
+        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-secondary-800 rounded-full border px-4 py-2 text-lg font-medium">
           {category}
         </h2>
         <div
@@ -271,7 +271,7 @@ const IconGrid: React.FC<IconGridProps> = ({
   return (
     <div className="space-y-6">
       <div className="space-y-2">
-        <h3 className="text-fm-primary text-2xl font-bold">{title}</h3>
+        <h3 className="text-fm-primary text-2xl font-medium">{title}</h3>
         {description && (
           <p className="text-fm-secondary text-sm leading-relaxed">
             {description}
@@ -617,7 +617,9 @@ export const Icons: React.FC = () => {
         />
         <div className="relative mx-auto max-w-7xl px-6 py-16">
           <div className="space-y-6 text-center">
-            <h1 className="text-fm-primary text-5xl font-bold">Icon Library</h1>
+            <h1 className="text-fm-primary text-5xl font-medium">
+              Icon Library
+            </h1>
             <p className="text-fm-secondary mx-auto max-w-3xl text-xl leading-relaxed">
               A comprehensive collection of carefully crafted icons built with
               accessibility in mind. Each icon is optimized for clarity and
@@ -627,21 +629,21 @@ export const Icons: React.FC = () => {
             {/* Stats */}
             <div className="flex items-center justify-center gap-8 pt-8">
               <div className="text-center">
-                <div className="text-fm-icon-brand-secondary text-3xl font-bold">
+                <div className="text-fm-icon-brand-secondary text-3xl font-medium">
                   {totalIcons}
                 </div>
                 <div className="text-fm-tertiary text-sm">Total icons</div>
               </div>
               <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-fm-info text-3xl font-bold">
+                <div className="text-fm-info text-3xl font-medium">
                   {categoryCount}
                 </div>
                 <div className="text-fm-tertiary text-sm">Categories</div>
               </div>
               <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-fm-positive text-3xl font-bold">
+                <div className="text-fm-positive text-3xl font-medium">
                   Accessible
                 </div>
                 <div className="text-fm-tertiary text-sm">Radix UI</div>

package/dist/icons/site-logo-icon/SiteLogoIcon.stories.tsx

@@ -46,7 +46,7 @@ function Header() {
   return (
     <header className="flex items-center gap-2">
       <SiteLogoIcon className="h-8 w-8" />
-      <span className="text-fm-primary font-fm-text font-semibold">
+      <span className="text-fm-primary font-fm-text font-medium">
         Pocket FM
       </span>
     </header>
@@ -164,7 +164,7 @@ export const UsageExamples: Story = {
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm items-center justify-between rounded-xl border px-4 py-3">
           <div className="flex items-center gap-2">
             <SiteLogoIcon className="h-8 w-8" />
-            <span className="text-fm-primary font-fm-text text-sm font-semibold">
+            <span className="text-fm-primary font-fm-text text-sm font-medium">
               Pocket FM
             </span>
           </div>
@@ -174,7 +174,7 @@ export const UsageExamples: Story = {
       <IconUsageSection title="Login Screen Branding">
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm flex-col items-center gap-3 rounded-xl border p-6">
           <SiteLogoIcon className="h-16 w-16" />
-          <div className="text-fm-primary font-fm-text text-lg font-semibold">
+          <div className="text-fm-primary font-fm-text text-lg font-medium">
             Welcome to Pocket FM
           </div>
           <div className="text-fm-secondary font-fm-text text-sm">