aural-ui 2.1.19 → 2.1.21

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

@@ -251,7 +251,9 @@ export const AllVariants: Story = {
         <Button variant="text" noise="none">
           Text
         </Button>
-        <Button variant="chip">Chip Active Button</Button>
+        <Button variant="chip" noise="low">
+          Chip Active Button
+        </Button>
         <Button variant="chipActive">Chip Active Button</Button>
       </div>
       <div className="flex gap-4">

package/dist/components/button/index.tsx

@@ -16,8 +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",
+        chip: "text-fm-secondary font-fm-text",
+        chipActive: "font-fm-text text-fm-neutral-1100",
         default: "",
       },
       noise: {
@@ -50,9 +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 group-hover:[background-image:var(--button-fm-chip-hover)] bg-cover  bg-no-repeat !translate-y-0",
+        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-[size:100%_100%] before:bg-center before:bg-no-repeat before:opacity-0 before:transition-opacity before:duration-300 before:-z-10 group-hover:before:opacity-100 !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",
+          "group-active:translate-y-0 chip-active-bg border-none rounded-md bg-[size:100%_100%] bg-center bg-no-repeat duration-300 !translate-y-0",
       },
       noise: {
         none: "",
@@ -71,7 +71,7 @@ export const innerButtonVariants = cva(
         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",
+          "chip-active-bg border-none rounded-md bg-[size:100%_100%] 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",
@@ -113,21 +113,6 @@ export const innerButtonVariants = cva(
         noise: "strong",
         className: "[background-image:var(--button-fm-noise-strong)]",
       },
-      {
-        variant: "chip",
-        noise: "low",
-        className: "[background-image:var(--button-fm-noise-low)]",
-      },
-      {
-        variant: "chip",
-        noise: "medium",
-        className: "[background-image:var(--button-fm-noise)]",
-      },
-      {
-        variant: "chip",
-        noise: "strong",
-        className: "[background-image:var(--button-fm-noise-strong)]",
-      },
       {
         variant: "chipActive",
         noise: "low",

package/dist/components/switch/Switch.stories.tsx

@@ -44,6 +44,14 @@ const meta: Meta<typeof Switch> = {
       control: { type: "text" },
       description: "Custom icon to display when switch is OFF",
     },
+    switchOnText: {
+      control: { type: "text" },
+      description: "Custom text to display when switch is ON",
+    },
+    switchOffText: {
+      control: { type: "text" },
+      description: "Custom text to display when switch is OFF",
+    },
     classNames: {
       control: { type: "object" },
       description: "Custom classNames for different parts of the switch",
@@ -158,6 +166,83 @@ export const CheckedWithIcons: Story = {
   },
 }
 
+export const WithCustomText: Story = {
+  args: {
+    checked: false,
+    switchOnText: "YES",
+    switchOffText: "NO",
+  },
+}
+
+export const CheckedWithCustomText: Story = {
+  args: {
+    checked: true,
+    switchOnText: "YES",
+    switchOffText: "NO",
+  },
+}
+
+export const WithCustomTextVariants: Story = {
+  render: () => (
+    <div className="flex flex-col items-center space-y-4">
+      <div className="flex items-center space-x-4">
+        <Switch checked={false} switchOnText="ON" switchOffText="OFF" />
+        <span className="text-sm text-gray-400">Default (ON/OFF)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch checked={false} switchOnText="YES" switchOffText="NO" />
+        <span className="text-sm text-gray-400">Yes/No</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch checked={false} switchOnText="1" switchOffText="0" />
+        <span className="text-sm text-gray-400">Binary (1/0)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch checked={false} switchOnText="✓" switchOffText="✗" />
+        <span className="text-sm text-gray-400">Symbols (✓/✗)</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch checked={false} switchOnText="EN" switchOffText="DIS" />
+        <span className="text-sm text-gray-400">Enable/Disable</span>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomTextWithSizes: Story = {
+  render: () => (
+    <div className="flex flex-col items-center space-y-4">
+      <div className="flex items-center space-x-4">
+        <Switch
+          size="sm"
+          checked={true}
+          switchOnText="ON"
+          switchOffText="OFF"
+        />
+        <span className="text-sm text-gray-400">Small</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch
+          size="md"
+          checked={true}
+          switchOnText="ON"
+          switchOffText="OFF"
+        />
+        <span className="text-sm text-gray-400">Medium</span>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Switch
+          size="lg"
+          checked={true}
+          switchOnText="ON"
+          switchOffText="OFF"
+        />
+        <span className="text-sm text-gray-400">Large</span>
+      </div>
+    </div>
+  ),
+}
+
 export const AllVariants: Story = {
   render: () => (
     <div className="grid grid-cols-2 gap-6">

package/dist/components/switch/index.tsx

@@ -19,6 +19,8 @@ type SwitchWithIconsProps = React.ComponentPropsWithoutRef<
   onIcon?: React.ReactNode
   size?: SwitchSize
   classNames?: SwitchClassNames
+  switchOnText?: string
+  switchOffText?: string
 }
 
 const switchVariants = {
@@ -60,6 +62,8 @@ const Switch = React.forwardRef<
       disabled,
       size = "md",
       classNames,
+      switchOnText,
+      switchOffText,
       ...props
     },
     ref
@@ -98,7 +102,7 @@ const Switch = React.forwardRef<
           data-state={checked ? "checked" : "unchecked"}
           data-disabled={disabled || undefined}
         >
-          {onIcon ?? "ON"}
+          {onIcon ?? switchOnText ?? "ON"}
         </span>
 
         <span
@@ -110,7 +114,7 @@ const Switch = React.forwardRef<
           data-state={checked ? "checked" : "unchecked"}
           data-disabled={disabled || undefined}
         >
-          {offIcon ?? "OFF"}
+          {offIcon ?? switchOffText ?? "OFF"}
         </span>
 
         <SwitchPrimitives.Thumb