aural-ui 2.0.4 → 2.0.7

package/dist/components/button/Button.stories.tsx

@@ -26,6 +26,10 @@ const meta: Meta<typeof Button> = {
       control: { type: "select" },
       options: ["sm", "md", "lg"],
     },
+    noise: {
+      control: { type: "select" },
+      options: ["none", "low", "medium", "strong"],
+    },
     isDisabled: {
       control: { type: "boolean" },
     },
@@ -46,6 +50,7 @@ export const Primary: Story = {
     variant: "primary",
     children: "Primary Button",
     size: "md",
+    noise: "medium",
   },
 }
 
@@ -54,6 +59,7 @@ export const Secondary: Story = {
     variant: "secondary",
     children: "Secondary Button",
     size: "md",
+    noise: "medium",
   },
 }
 
@@ -62,6 +68,7 @@ export const Outline: Story = {
     variant: "outline",
     children: "Outline Button",
     size: "md",
+    noise: "none",
   },
 }
 
@@ -70,6 +77,7 @@ export const Text: Story = {
     variant: "text",
     children: "Text Button",
     size: "md",
+    noise: "none",
   },
 }
 
@@ -81,42 +89,104 @@ export const Disabled: Story = {
   },
 }
 
+export const NoiseVariations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 rounded p-8">
+      <div className="flex gap-4">
+        <Button noise="none">No Noise</Button>
+        <Button noise="low">Low Noise</Button>
+        <Button noise="medium">Medium Noise</Button>
+        <Button noise="strong">Strong Noise</Button>
+      </div>
+      <div className="flex gap-4">
+        <Button variant="secondary" noise="none">
+          No Noise
+        </Button>
+        <Button variant="secondary" noise="low">
+          Low Noise
+        </Button>
+        <Button variant="secondary" noise="medium">
+          Medium Noise
+        </Button>
+        <Button variant="secondary" noise="strong">
+          Strong Noise
+        </Button>
+      </div>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 rounded p-8">
+      <div className="flex gap-4">
+        <Button variant="primary" noise="medium">
+          Primary
+        </Button>
+        <Button variant="secondary" noise="medium">
+          Secondary
+        </Button>
+        <Button variant="outline" noise="none">
+          Outline
+        </Button>
+        <Button variant="text" noise="none">
+          Text
+        </Button>
+      </div>
+      <div className="flex gap-4">
+        <Button variant="primary" noise="strong" size="sm">
+          Small
+        </Button>
+        <Button variant="primary" noise="medium" size="md">
+          Medium
+        </Button>
+        <Button variant="primary" noise="low" size="lg">
+          Large
+        </Button>
+      </div>
+    </div>
+  ),
+}
+
 export const WithToolTip: Story = {
   render: () => (
     <div className="flex gap-6 rounded p-8">
       <Button
-        tooltip="Primary Variant"
+        tooltip="Primary Variant with Medium Noise"
         tooltipContentProps={{
           align: "center",
           side: "top",
           sideOffset: 10,
         }}
+        noise="medium"
       >
         Primary
       </Button>
       <Button
         variant="secondary"
-        tooltip="Secondary Variant"
+        tooltip="Secondary Variant with Low Noise"
         tooltipContentProps={{
           align: "center",
           side: "bottom",
           sideOffset: 10,
         }}
+        noise="low"
       >
         Secondary
       </Button>
       <Button
         variant="outline"
-        tooltip="Outline Variant"
+        tooltip="Outline Variant with No Noise"
         tooltipContentProps={{
           align: "center",
           side: "top",
           sideOffset: 10,
         }}
+        noise="none"
       >
         Outline
       </Button>
-      <Button variant="text" tooltip="Text Variant">
+      <Button variant="text" tooltip="Text Variant" noise="none">
         Text
       </Button>
     </div>

package/dist/components/button/index.tsx

@@ -18,6 +18,12 @@ export const buttonVariants = cva(
         text: "bg-transparent text-fm-secondary-800",
         default: "",
       },
+      noise: {
+        none: "",
+        low: "",
+        medium: "",
+        strong: "",
+      },
       disabled: {
         true: "cursor-not-allowed",
         false: "cursor-pointer",
@@ -36,13 +42,19 @@ export const innerButtonVariants = cva(
     variants: {
       variant: {
         primary:
-          "shadow-[0_0_1.5rem_var(--color-fm-primary-400)_inset] group-active:translate-y-0 [--gradientSizeX:50%] [--gradientSizeY:150%] [--gradientPositionY:100%] group-hover:[--gradientSizeX:40%] group-hover:[--gradientSizeY:110%] group-hover:[--gradientPositionY:50%] [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-secondary-300)),_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))] bg-cover bg-center [background-blend-mode:color-dodge,multiply,darken] duration-300 bg-repeat-x bg-auto bg-center bg-origin-border",
+          "shadow-[0_0_1.5rem_var(--color-fm-primary-400)_inset] group-active:translate-y-0 [--gradientSizeX:50%] [--gradientSizeY:150%] [--gradientPositionY:100%] group-hover:[--gradientSizeX:40%] group-hover:[--gradientSizeY:110%] group-hover:[--gradientPositionY:50%] bg-cover bg-center [background-blend-mode:color-dodge,multiply,darken] duration-300 bg-repeat-x bg-auto bg-center bg-origin-border",
         secondary:
-          "group-active:translate-y-0 bg-fm-button-fill-secondary [background-image:var(--button-fm-noise)] bg-repeat-x bg-auto bg-center bg-origin-border",
+          "group-active:translate-y-0 bg-fm-button-fill-secondary bg-repeat-x bg-auto bg-center bg-origin-border",
         outline:
           "border-[length:var(--stroke-fm-sm)] border-fm-divider-contrast !translate-y-0",
         text: "",
       },
+      noise: {
+        none: "",
+        low: "[background-image:var(--button-fm-noise-low)]",
+        medium: "[background-image:var(--button-fm-noise)]",
+        strong: "[background-image:var(--button-fm-noise-strong)]",
+      },
       disabled: {
         default: "",
         primary:
@@ -59,10 +71,46 @@ export const innerButtonVariants = cva(
         lg: "py-fm-2xl px-fm-5xl text-fm-xl -translate-y-1.5",
       },
     },
+    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-secondary-300)),_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-secondary-300)),_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",
+        className:
+          "[background-image:var(--button-fm-noise-strong),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-secondary-300)),_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: "secondary",
+        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)]",
+      },
+    ],
     defaultVariants: {
       variant: "primary",
       disabled: "default",
       size: "md",
+      noise: "medium",
     },
   }
 )
@@ -77,6 +125,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   isDisabled?: boolean
   size?: "sm" | "md" | "lg"
   variant?: "primary" | "secondary" | "outline" | "text"
+  noise?: "none" | "low" | "medium" | "strong"
 }
 
 export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -84,6 +133,7 @@ export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       variant = "primary",
       size = "md",
+      noise = "medium",
       children,
       className = "",
       innerClassName = "",
@@ -146,6 +196,7 @@ export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
               variant: isDisabled ? "text" : variant,
               disabled: isDisabled ? variant : "default",
               size,
+              noise: isDisabled ? "none" : noise,
             }),
             innerClassName
           )}