aural-ui 2.0.8 → 2.1.0

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

@@ -3,6 +3,8 @@ import { Button } from "@components/button"
 import Label from "@components/label"
 import type { Meta, StoryObj } from "@storybook/react"
 
+import { CrossIcon, TickIcon } from "src/ui/icons"
+
 import { Switch } from "."
 
 const meta: Meta<typeof Switch> = {
@@ -90,3 +92,19 @@ export const WithForm: Story = {
     </form>
   ),
 }
+
+export const WithIcons: Story = {
+  args: {
+    checked: false,
+    onIcon: <TickIcon />,
+    offIcon: <CrossIcon />,
+  },
+}
+
+export const CheckedWithIcons: Story = {
+  args: {
+    checked: true,
+    onIcon: <TickIcon />,
+    offIcon: <CrossIcon />,
+  },
+}

package/dist/components/switch/index.tsx

@@ -2,33 +2,53 @@ import * as React from "react"
 import { cn } from "@lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
 
+type SwitchWithIconsProps = React.ComponentPropsWithoutRef<
+  typeof SwitchPrimitives.Root
+> & {
+  offIcon?: React.ReactNode
+  onIcon?: React.ReactNode
+}
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  SwitchWithIconsProps
+>(({ className, onIcon, offIcon, checked, disabled, ...props }, ref) => (
   <SwitchPrimitives.Root
+    ref={ref}
+    checked={checked}
+    disabled={disabled}
     className={cn(
-      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50 data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50 focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50 hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary relative disabled:cursor-not-allowed",
+      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
+      "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
+      "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
+      "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
+      "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
+      "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
+      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
+      "relative h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
       className
     )}
     {...props}
-    ref={ref}
   >
     <span
-      className="font-fm-brand text-fm-positive data-[disabled=true]:text-fm-positive-tert absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={props.checked ? "checked" : "unchecked"}
-      data-disabled={props.disabled || undefined}
+      className={cn(
+        "font-fm-brand text-fm-positive absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]",
+        disabled && "text-fm-positive-tert"
+      )}
+      data-state={checked ? "checked" : "unchecked"}
+      data-disabled={disabled || undefined}
     >
-      ON
+      {onIcon ?? "ON"}
     </span>
+
     <span
       className="font-fm-brand text-fm-tertiary absolute top-1/2 right-1.5 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={props.checked ? "checked" : "unchecked"}
-      data-disabled={props.disabled || undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      data-disabled={disabled || undefined}
     >
-      OFF
+      {offIcon ?? "OFF"}
     </span>
+
     <SwitchPrimitives.Thumb className="bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block size-6 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1" />
   </SwitchPrimitives.Root>
 ))

package/dist/icons/index.ts

@@ -42,6 +42,7 @@ export * from "./light-bulb-simple-icon"
 export * from "./magic-book-icon"
 export * from "./maintenance-icon"
 export * from "./message-icon"
+export * from "./moon-icon"
 export * from "./move-horizontal-icon"
 export * from "./move-vertical-icon"
 export * from "./musical-note-icon"
@@ -60,6 +61,7 @@ export * from "./spinner-gradient-icon"
 export * from "./spinner-solid-icon"
 export * from "./spinner-solid-neutral-icon"
 export * from "./suggestion-icon"
+export * from "./sun-icon"
 export * from "./text-color-icon"
 export * from "./text-indicator-icon"
 export * from "./tick-circle-icon"