aural-ui 2.0.0 → 2.0.2

package/dist/components/badge/Badge.stories.tsx

@@ -9,6 +9,13 @@ const meta: Meta<typeof Badge> = {
   component: Badge,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/banner/Banner.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof Banner> = {
   component: Banner,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

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

@@ -7,6 +7,13 @@ const meta: Meta<typeof Button> = {
   component: Button,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/char-count/CharCount.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof CharCount> = {
   component: CharCount,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/checkbox/Checkbox.stories.tsx

@@ -10,6 +10,13 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
 }

package/dist/components/chip/Chip.stories.tsx

@@ -10,6 +10,16 @@ const meta: Meta<typeof Chip> = {
   title: "Components/UI/Chip",
   component: Chip,
   tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
   argTypes: {
     selected: {
       control: "boolean",

package/dist/components/collapsible/Collapsible.stories.tsx

@@ -16,6 +16,13 @@ const meta: Meta<typeof Collapsible> = {
   component: Collapsible,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component:

package/dist/components/dropdown/index.tsx

@@ -227,7 +227,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         // Base styles
-        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3 pl-8",
+        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3",
         "text-fm-primary font-fm-text leading-fm-lg [font-size:var(--text-fm-lg)] tracking-wide",
         "transition-colors duration-200 outline-none select-none",
         // Hover and focus states
@@ -245,12 +245,7 @@ function DropdownMenuRadioItem({
     >
       <span className="pointer-events-none absolute left-4 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <TickIcon
-            className={cn(
-              "text-fm-icon-active size-2 fill-current",
-              classes?.indicator
-            )}
-          />
+          <TickIcon className={cn("text-fm-icon-active", classes?.indicator)} />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -446,6 +441,22 @@ function DropdownMenuSubContent({
   )
 }
 
+export const useOpenState = () => {
+  const [open, setOpen] = React.useState(false)
+
+  const onOpenChange = React.useCallback(
+    (_value = !open) => {
+      setOpen(_value)
+    },
+    [open]
+  )
+
+  return {
+    open,
+    onOpenChange,
+  }
+}
+
 export {
   DropdownMenu,
   DropdownMenuPortal,

package/dist/components/form/Form.stories.tsx

@@ -151,6 +151,13 @@ const meta: Meta<typeof FormExample> = {
   component: FormExample,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/helper-text/HelperText.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof HelperText> = {
   component: HelperText,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/icon-button/IconButton.stories.tsx

@@ -13,6 +13,10 @@ const meta: Meta<typeof IconButton> = {
     layout: "centered",
     backgrounds: {
       default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
     },
   },
   tags: ["autodocs"],

package/dist/components/if-else/if-else.stories.tsx

@@ -8,6 +8,13 @@ const meta = {
   component: IfElse,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
 } satisfies Meta<typeof IfElse>

package/dist/components/input/Input.stories.tsx

@@ -10,6 +10,13 @@ const meta: Meta<typeof Input> = {
   component: Input,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/label/Label.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof Label> = {
   component: Label,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/overlay/index.tsx

@@ -3,7 +3,7 @@ import { cn } from "@lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const overlayVariants = cva(
-  "fixed inset-0 z-40 data-[state=open]:animate-fm-fadeIn data-[state=closed]:animate-fm-fadeOut ",
+  "fixed inset-0 z-40 data-[state=open]:animate-fm-fadeIn data-[state=closed]:animate-fm-fadeOut",
   {
     variants: {
       opacity: {

package/dist/components/pagination/Pagination.stories.tsx

@@ -22,6 +22,13 @@ const meta: Meta<typeof Pagination> = {
   component: Pagination,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component:

package/dist/components/radio/Radio.stories.tsx

@@ -9,6 +9,13 @@ const meta: Meta<typeof RadioGroup> = {
   component: RadioGroup,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
 }

package/dist/components/scroll-area/index.tsx

@@ -2,25 +2,38 @@ import * as React from "react"
 import { cn } from "@lib/utils"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
+type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  classes?: {
+    root?: string
+    viewport?: string
+    scrollbar?: string
+    corner?: string
+  }
+}
+
 function ScrollArea({
   className,
   children,
+  classes = {},
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaProps) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn("relative", className, classes?.root)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-fm-secondary-1000/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className={cn(
+          "focus-visible:ring-fm-secondary-1000/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+          classes?.viewport
+        )}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
+      <ScrollBar className={classes?.scrollbar} />
+      <ScrollAreaPrimitive.Corner className={classes?.corner} />
     </ScrollAreaPrimitive.Root>
   )
 }

package/dist/components/select/Select.stories.tsx

@@ -22,6 +22,13 @@ const meta: Meta<typeof SelectField> = {
   component: SelectField,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component: `

package/dist/components/sheet/index.tsx

@@ -301,7 +301,9 @@ const closeIconVariants = cva(
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants>,
-    ISheetOverlay {}
+    ISheetOverlay {
+  container: HTMLElement | null
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -317,11 +319,12 @@ const SheetContent = React.forwardRef<
       noise,
       children,
       classes,
+      container,
       ...props
     },
     ref
   ) => (
-    <SheetPortal>
+    <SheetPortal container={container}>
       <SheetOverlay
         opacity={opacity}
         glass={glass}

package/dist/components/stepper/Stepper.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof Stepper> = {
   component: Stepper,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component:

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

@@ -10,6 +10,13 @@ const meta: Meta<typeof Switch> = {
   component: Switch,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/switch-case/SwitchCase.stories.tsx

@@ -8,6 +8,13 @@ const meta = {
   component: SwitchCase,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
 } satisfies Meta<typeof SwitchCase>

package/dist/components/tag/Tag.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof Tag> = {
   component: Tag,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {

package/dist/components/textarea/TextArea.stories.tsx

@@ -8,6 +8,13 @@ const meta: Meta<typeof TextArea> = {
   component: TextArea,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component:

package/dist/components/textarea/index.tsx

@@ -25,6 +25,8 @@ interface TextAreaBaseProps {
   className?: string
   placeholder?: string
   value?: string
+  autoComplete?: string
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void

package/dist/components/toast/Toast.stories.tsx

@@ -10,6 +10,13 @@ const meta: Meta<typeof Toaster> = {
   component: Toaster,
   parameters: {
     layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
     docs: {
       description: {
         component: `

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

@@ -25,6 +25,13 @@ const meta: Meta<typeof Typography> = {
   component: Typography,
   parameters: {
     layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
   },
   tags: ["autodocs"],
   argTypes: {