aural-ui 2.0.0

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

@@ -0,0 +1,85 @@
+import React from "react"
+import { Button } from "@components/button"
+import Label from "@components/label"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Switch } from "."
+
+const meta: Meta<typeof Switch> = {
+  title: "Components/UI/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the switch is checked or not",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the switch is disabled or not",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}
+
+export const DisabledAndChecked: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+  },
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="switch-with-label" value="Toggle me" />
+      <Label htmlFor="switch-with-label">Toggle me</Label>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        // Handle form submission
+      }}
+    >
+      <div className="grid gap-4">
+        <div className="flex items-center space-x-2">
+          <Switch id="notifications" />
+          <Label htmlFor="notifications">Enable notifications</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Switch id="newsletter" defaultChecked />
+          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+        </div>
+        <Button>Submit</Button>
+      </div>
+    </form>
+  ),
+}

package/dist/components/switch/index.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    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",
+      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}
+    >
+      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}
+    >
+      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>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/dist/components/switch/meta.ts

@@ -0,0 +1,24 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-switch": "^1.2.5",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-divider-positive",
+    "--color-fm-divider-primary",
+    "--color-fm-divider-tertiary",
+    "--color-fm-green-50",
+    "--color-fm-green-100",
+    "--color-fm-icon-active",
+    "--color-fm-icon-inactive",
+    "--color-fm-positive",
+    "--color-fm-positive-tert",
+    "--color-fm-primary",
+    "--color-fm-surface-primary",
+    "--color-fm-surface-secondary",
+    "--color-fm-tertiary",
+    "--font-fm-brand",
+    "--text-fm-sm",
+  ],
+}

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

@@ -0,0 +1,209 @@
+import React, { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Case, Default, SwitchCase } from "."
+
+const meta = {
+  title: "Components/Logical/SwitchCase",
+  component: SwitchCase,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SwitchCase>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Basic example with a static case
+export const BasicExample: Story = {
+  args: {
+    value: "success",
+    children: [
+      <Case key="loading" value="loading">
+        Loading...
+      </Case>,
+      <Case key="error" value="error">
+        An error occurred!
+      </Case>,
+      <Case key="success" value="success">
+        Data loaded successfully!
+      </Case>,
+    ],
+  },
+}
+
+// Example with default prop
+export const WithDefaultProp: Story = {
+  args: {
+    value: "other",
+    default: <div style={{ color: "gray" }}>Unknown value selected</div>,
+    children: [
+      <Case key="one" value="one">
+        Option One
+      </Case>,
+      <Case key="two" value="two">
+        Option Two
+      </Case>,
+      <Case key="three" value="three">
+        Option Three
+      </Case>,
+    ],
+  },
+}
+
+// Interactive examples using decorators for state
+export const StatusExample: React.FC = () => {
+  const [status, setStatus] = useState<
+    "loading" | "success" | "error" | "idle"
+  >("idle")
+
+  return (
+    <div style={{ width: "300px" }}>
+      <div
+        style={{
+          marginBottom: "20px",
+          display: "flex",
+          gap: "10px",
+          flexWrap: "wrap",
+        }}
+      >
+        <button
+          onClick={() => setStatus("loading")}
+          style={{ padding: "5px 10px" }}
+        >
+          Loading
+        </button>
+        <button
+          onClick={() => setStatus("success")}
+          style={{ padding: "5px 10px" }}
+        >
+          Success
+        </button>
+        <button
+          onClick={() => setStatus("error")}
+          style={{ padding: "5px 10px" }}
+        >
+          Error
+        </button>
+        <button
+          onClick={() => setStatus("idle")}
+          style={{ padding: "5px 10px" }}
+        >
+          Idle
+        </button>
+      </div>
+      <div
+        style={{
+          padding: "20px",
+          border: "1px solid #eee",
+          borderRadius: "8px",
+        }}
+      >
+        <div>
+          Current status: <strong>{status}</strong>
+        </div>
+        <div style={{ marginTop: "10px" }}>
+          <SwitchCase value={status}>
+            <Case value="loading">
+              <div style={{ color: "blue" }}>
+                Loading your data, please wait...
+              </div>
+            </Case>
+            <Case value="success">
+              <div style={{ color: "green" }}>
+                Your data was loaded successfully!
+              </div>
+            </Case>
+            <Case value="error">
+              <div style={{ color: "red" }}>
+                An error occurred while loading your data.
+              </div>
+            </Case>
+            <Case value="idle">
+              <div style={{ color: "gray" }}>
+                Waiting for you to take an action.
+              </div>
+            </Case>
+          </SwitchCase>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Example with Default component
+export const WithDefaultComponent: React.FC = () => {
+  const [fruit, setFruit] = useState<"apple" | "banana" | "orange" | "other">(
+    "other"
+  )
+
+  return (
+    <div style={{ width: "300px" }}>
+      <div
+        style={{
+          marginBottom: "20px",
+          display: "flex",
+          gap: "10px",
+          flexWrap: "wrap",
+        }}
+      >
+        <button
+          onClick={() => setFruit("apple")}
+          style={{ padding: "5px 10px" }}
+        >
+          Apple
+        </button>
+        <button
+          onClick={() => setFruit("banana")}
+          style={{ padding: "5px 10px" }}
+        >
+          Banana
+        </button>
+        <button
+          onClick={() => setFruit("orange")}
+          style={{ padding: "5px 10px" }}
+        >
+          Orange
+        </button>
+        <button
+          onClick={() => setFruit("other")}
+          style={{ padding: "5px 10px" }}
+        >
+          Other
+        </button>
+      </div>
+      <div
+        style={{
+          padding: "20px",
+          border: "1px solid #eee",
+          borderRadius: "8px",
+        }}
+      >
+        <div>
+          Selected fruit: <strong>{fruit}</strong>
+        </div>
+        <div style={{ marginTop: "10px" }}>
+          <SwitchCase value={fruit}>
+            <Case value="apple">
+              <div style={{ color: "red" }}>🍎 Apples are red and crunchy.</div>
+            </Case>
+            <Case value="banana">
+              <div style={{ color: "#FFD700" }}>
+                🍌 Bananas are yellow and soft.
+              </div>
+            </Case>
+            <Case value="orange">
+              <div style={{ color: "orange" }}>
+                🍊 Oranges are orange and juicy.
+              </div>
+            </Case>
+            <Default>
+              <div style={{ color: "purple" }}>Unknown fruit selected.</div>
+            </Default>
+          </SwitchCase>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/components/switch-case/index.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { createContext, ReactNode, useContext } from "react"
+
+// Create a simple context to check if Case/Default are within a SwitchCase
+const SwitchCaseContext = createContext<boolean>(false)
+interface DefaultProps {
+  children: ReactNode
+}
+interface CaseProps extends DefaultProps {
+  value: any
+}
+interface SwitchCaseProps extends CaseProps {
+  default?: ReactNode
+}
+
+export function SwitchCase({
+  value,
+  children,
+  default: defaultContent,
+}: SwitchCaseProps) {
+  // Track if any Case has matched
+  let hasMatch = false
+  let renderedContent: React.ReactNode = null
+  let hasDefaultComponent = false
+
+  // Process children to find matches and default components
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return
+
+    // Handle Case components
+    if (child.type === Case) {
+      if (
+        React.isValidElement<CaseProps>(child) &&
+        child.props.value === value &&
+        !hasMatch
+      ) {
+        hasMatch = true
+        renderedContent = (child.props as { children: ReactNode }).children
+      }
+    }
+    // Check for Default component
+    else if (child.type === Default) {
+      hasDefaultComponent = true
+    }
+  })
+
+  // If no match found, look for a Default component
+  if (!hasMatch && hasDefaultComponent) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && child.type === Default) {
+        renderedContent = (child.props as { children: ReactNode }).children
+      }
+    })
+  }
+
+  // If no match and no Default component, use the defaultContent
+  if (!hasMatch && !hasDefaultComponent && defaultContent) {
+    renderedContent = defaultContent
+  }
+
+  return (
+    <SwitchCaseContext.Provider value={true}>
+      {renderedContent}
+    </SwitchCaseContext.Provider>
+  )
+}
+
+export function Case({ value, children }: CaseProps) {
+  const insideSwitchCase = useContext(SwitchCaseContext)
+
+  if (!insideSwitchCase) {
+    throw new Error("Case must be used within a SwitchCase component")
+  }
+
+  // This component doesn't render directly - it's processed by SwitchCase
+  return null
+}
+
+export function Default({ children }: DefaultProps) {
+  const insideSwitchCase = useContext(SwitchCaseContext)
+
+  if (!insideSwitchCase) {
+    throw new Error("Default must be used within a SwitchCase component")
+  }
+
+  // This component doesn't render directly - it's processed by SwitchCase
+  return null
+}

package/dist/components/switch-case/meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}