aural-ui 2.1.18 → 2.1.20

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

@@ -2,6 +2,7 @@ import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { Button } from "."
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
 
 const meta: Meta<typeof Button> = {
   title: "Components/UI/Button",
@@ -20,7 +21,14 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["primary", "secondary", "outline", "text"],
+      options: [
+        "primary",
+        "secondary",
+        "outline",
+        "text",
+        "chip",
+        "chipActive",
+      ],
     },
     size: {
       control: { type: "select" },
@@ -116,6 +124,117 @@ export const NoiseVariations: Story = {
   ),
 }
 
+export const ChipVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-4xl rounded p-8">
+      <Tabs defaultValue="chip" className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="chip">Chip</TabsTrigger>
+          <TabsTrigger value="chipActive">Chip Active</TabsTrigger>
+        </TabsList>
+        <TabsContent value="chip" className="mt-6">
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Noise Variations
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chip" noise="none">
+                  No Noise
+                </Button>
+                <Button variant="chip" noise="low">
+                  Low Noise
+                </Button>
+                <Button variant="chip" noise="medium">
+                  Medium Noise
+                </Button>
+                <Button variant="chip" noise="strong">
+                  Strong Noise
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Size Variations
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chip" size="sm" noise="medium">
+                  Small
+                </Button>
+                <Button variant="chip" size="md" noise="medium">
+                  Medium
+                </Button>
+                <Button variant="chip" size="lg" noise="medium">
+                  Large
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Disabled State
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chip" isDisabled>
+                  Disabled Chip
+                </Button>
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+        <TabsContent value="chipActive" className="mt-6">
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Noise Variations
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chipActive" noise="none">
+                  No Noise
+                </Button>
+                <Button variant="chipActive" noise="low">
+                  Low Noise
+                </Button>
+                <Button variant="chipActive" noise="medium">
+                  Medium Noise
+                </Button>
+                <Button variant="chipActive" noise="strong">
+                  Strong Noise
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Size Variations
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chipActive" size="sm" noise="medium">
+                  Small
+                </Button>
+                <Button variant="chipActive" size="md" noise="medium">
+                  Medium
+                </Button>
+                <Button variant="chipActive" size="lg" noise="medium">
+                  Large
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <h3 className="text-lg font-semibold text-white">
+                Disabled State
+              </h3>
+              <div className="flex gap-4">
+                <Button variant="chipActive" isDisabled>
+                  Disabled Chip Active
+                </Button>
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+}
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-6 rounded p-8">
@@ -132,6 +251,10 @@ export const AllVariants: Story = {
         <Button variant="text" noise="none">
           Text
         </Button>
+        <Button variant="chip" noise="low">
+          Chip Active Button
+        </Button>
+        <Button variant="chipActive">Chip Active Button</Button>
       </div>
       <div className="flex gap-4">
         <Button variant="primary" noise="strong" size="sm">

package/dist/components/button/index.tsx

@@ -16,6 +16,8 @@ export const buttonVariants = cva(
           "before:absolute before:inset-0 rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-transparent bg-fm-surface-secondary text-fm-primary",
         outline: "text-fm-primary",
         text: "bg-transparent text-fm-secondary-800",
+        chip: "text-fm-neutral-800 font-fm-text",
+        chipActive: "text-fm-neutral-1100 font-fm-text",
         default: "",
       },
       noise: {
@@ -48,6 +50,9 @@ export const innerButtonVariants = cva(
         outline:
           "border-[length:var(--stroke-fm-sm)] border-fm-divider-contrast !translate-y-0",
         text: "",
+        chip: "border border-fm-neutral-300 rounded-md relative overflow-hidden before:absolute before:inset-0 before:rounded-md before:[background-image:var(--button-fm-chip-hover)] before:bg-cover before:bg-no-repeat before:opacity-0 before:transition-opacity before:duration-300 before:-z-10 group-hover:before:opacity-100 after:absolute after:inset-0 after:rounded-md after:bg-cover after:bg-no-repeat after:transition-opacity after:duration-300 after:-z-10 group-hover:after:opacity-0 !translate-y-0",
+        chipActive:
+          "group-active:translate-y-0 chip-active-bg border-none rounded-md bg-contain bg-center bg-no-repeat duration-300",
       },
       noise: {
         none: "",
@@ -64,6 +69,9 @@ export const innerButtonVariants = cva(
         outline:
           "bg-fm-divider-tertiary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-sm)] border-fm-divider-tertiary",
         text: "bg-fm-divider-tertiary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-sm)] border-fm-divider-tertiary",
+        chip: "bg-fm-surface-secondary border border-fm-neutral-300 rounded-md !translate-y-0 [color:var(--color-fm-inactive)] font-fm-text",
+        chipActive:
+          "chip-active-bg border-none rounded-md bg-contain bg-center bg-no-repeat opacity-90 [color:var(--color-fm-inactive)] font-fm-text",
       },
       size: {
         sm: "py-fm-lg px-fm-2xl text-fm-sm -translate-y-1",
@@ -105,6 +113,36 @@ export const innerButtonVariants = cva(
         noise: "strong",
         className: "[background-image:var(--button-fm-noise-strong)]",
       },
+      {
+        variant: "chip",
+        noise: "low",
+        className: "after:[background-image:var(--button-fm-noise-low)]",
+      },
+      {
+        variant: "chip",
+        noise: "medium",
+        className: "after:[background-image:var(--button-fm-noise)]",
+      },
+      {
+        variant: "chip",
+        noise: "strong",
+        className: "after:[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",
@@ -124,7 +162,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   innerClassName?: string
   isDisabled?: boolean
   size?: "sm" | "md" | "lg"
-  variant?: "primary" | "secondary" | "outline" | "text"
+  variant?: "primary" | "secondary" | "outline" | "text" | "chip" | "chipActive"
   noise?: "none" | "low" | "medium" | "strong"
 }
 

package/dist/components/chip/index.tsx

@@ -66,7 +66,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
         tabIndex={0}
         ref={ref}
         className={cn(
-          "py-fm-lg px-fm-xl font-fm-brand border-fm-divider-contrast ouline-none inline-flex cursor-pointer items-center justify-center gap-1 rounded-full border [font-size:var(--text-fm-sm)] leading-none transition-all select-none focus:outline-none",
+          "py-fm-lg px-fm-xl font-fm-brand border-fm-divider-contrast ouline-none text-fm-sm inline-flex cursor-pointer items-center justify-center gap-1 rounded-full border leading-none transition-all select-none focus:outline-none",
           {
             "border-fm-divider-contrast bg-fm-surface-contrast hover:bg-fm-surface-contrast/80 text-fm-contrast":
               selected,