aural-ui 2.1.20 → 2.1.22

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 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",
+        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: "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",

package/dist/components/drawer/index.tsx

@@ -126,7 +126,7 @@ const DrawerContent = React.forwardRef<
             "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
             "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
             "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-lg data-[vaul-drawer-direction=right]:sm:max-w-sm",
-            "overflow-auto [scrollbar-width:none] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "overflow-hidden data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
             className,
             classes?.content
           )}
@@ -135,7 +135,9 @@ const DrawerContent = React.forwardRef<
           {showSwipeButton && (
             <div className="bg-fm-surface-primary mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
           )}
-          {children}
+          <div className="scrollbar-hide flex min-h-0 flex-1 flex-col overflow-auto">
+            {children}
+          </div>
         </DrawerPrimitive.Content>
       </DrawerPortal>
     )

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

package/dist/components/textarea/index.tsx

@@ -5,6 +5,7 @@ import React, {
   RefAttributes,
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState,
 } from "react"
@@ -30,7 +31,7 @@ interface TextAreaBaseProps {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
-  onInput?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  onInput?: (e: React.InputEvent<HTMLTextAreaElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   id?: string
   name?: string
@@ -361,8 +362,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     const [textareaValue, setTextareaValue] = useState(value || "")
 
     // Generate unique IDs for accessibility
-    const textareaId =
-      id || `textarea-${Math.random().toString(36).substr(2, 9)}`
+    const reactId = useId()
+    const textareaId = id || `textarea-${reactId}`
     const helperTextId = helperText ? `${textareaId}-helper` : undefined
     const charCountId = showCharCount ? `${textareaId}-char-count` : undefined
 
@@ -410,7 +411,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
               currentLength={currentLength}
               maxLength={maxLength}
               id={charCountId}
-              className={cn("ml-auto", classes?.charCount)}
+              className="ml-auto"
             />
           )}
         </div>