aural-ui 2.0.0

package/dist/components/divider/index.tsx

@@ -0,0 +1,181 @@
+import * as React from "react"
+import { AudioBarIcon } from "@icons/audio-bar-icon"
+import { cn } from "@lib/utils"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cva } from "class-variance-authority"
+
+const dividerVariants = cva("flex-auto", {
+  variants: {
+    variant: {
+      primary: "bg-fm-divider-secondary",
+      secondary: "bg-fm-divider-tertiary",
+      stylised: "bg-fm-divider-primary",
+      dashed: "border-fm-divider-primary border-dashed bg-transparent",
+    },
+    size: {
+      half_default: "",
+      full_default: "",
+      full_medium: "",
+      full_large: "",
+    },
+    orientation: {
+      horizontal: "mx-auto",
+      vertical: "my-auto",
+    },
+  },
+  compoundVariants: [
+    // Horizontal orientation variants
+    {
+      orientation: "horizontal",
+      size: "half_default",
+      className: "h-0.25 w-1/2",
+    },
+    {
+      orientation: "horizontal",
+      size: "full_default",
+      className: "h-0.25 w-full",
+    },
+    {
+      orientation: "horizontal",
+      size: "full_medium",
+      className: "h-1 w-full",
+    },
+    {
+      orientation: "horizontal",
+      size: "full_large",
+      className: "h-2 w-full",
+    },
+    // Vertical orientation variants
+    {
+      orientation: "vertical",
+      size: "half_default",
+      className: "h-1/2 w-0.25",
+    },
+    {
+      orientation: "vertical",
+      size: "full_default",
+      className: "h-full w-0.25",
+    },
+    {
+      orientation: "vertical",
+      size: "full_medium",
+      className: "h-full w-1",
+    },
+    {
+      orientation: "vertical",
+      size: "full_large",
+      className: "h-full w-2",
+    },
+    // Dashed variant specific styles
+    {
+      variant: "dashed",
+      orientation: "horizontal",
+      size: "half_default",
+      className: "w-1/2 border-t",
+    },
+    {
+      variant: "dashed",
+      orientation: "horizontal",
+      size: "full_default",
+      className: "w-full border-t",
+    },
+    {
+      variant: "dashed",
+      orientation: "horizontal",
+      size: "full_medium",
+      className: "w-full border-t-2",
+    },
+    {
+      variant: "dashed",
+      orientation: "horizontal",
+      size: "full_large",
+      className: "w-full border-t-4",
+    },
+    {
+      variant: "dashed",
+      orientation: "vertical",
+      size: "half_default",
+      className: "h-1/2 border-l",
+    },
+    {
+      variant: "dashed",
+      orientation: "vertical",
+      size: "full_default",
+      className: "h-full border-l",
+    },
+    {
+      variant: "dashed",
+      orientation: "vertical",
+      size: "full_medium",
+      className: "h-full border-l-2",
+    },
+    {
+      variant: "dashed",
+      orientation: "vertical",
+      size: "full_large",
+      className: "h-full border-l-4",
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "full_default",
+    orientation: "horizontal",
+  },
+})
+
+export interface DividerProps
+  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+  variant?: "primary" | "secondary" | "stylised" | "dashed"
+  size?: "half_default" | "full_default" | "full_medium" | "full_large"
+  wrapperClassName?: string
+}
+
+const Divider = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  DividerProps
+>(
+  (
+    {
+      className,
+      orientation = "horizontal",
+      decorative = true,
+      variant,
+      size,
+      wrapperClassName,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        className={cn(
+          {
+            "flex items-center justify-center": variant === "stylised",
+          },
+          wrapperClassName
+        )}
+      >
+        <SeparatorPrimitive.Root
+          ref={ref}
+          decorative={decorative}
+          orientation={orientation}
+          className={cn(
+            dividerVariants({
+              variant,
+              size,
+              orientation,
+            }),
+            className
+          )}
+          {...props}
+        />
+        {variant === "stylised" && (
+          <AudioBarIcon width={52} height={12} className="relative top-0.25" />
+        )}
+      </div>
+    )
+  }
+)
+Divider.displayName = SeparatorPrimitive.Root.displayName
+
+export { Divider }

package/dist/components/divider/meta.ts

@@ -0,0 +1,12 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-separator": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: ["audio-bar-icon"],
+  tokens: [
+    "--color-fm-divider-primary",
+    "--color-fm-divider-secondary",
+    "--color-fm-divider-tertiary",
+  ],
+}

package/dist/components/dot-loader/DotLoader.stories.tsx

@@ -0,0 +1,352 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import DotLoader from "."
+
+const meta: Meta<typeof DotLoader> = {
+  title: "Components/UI/DotLoader",
+  component: DotLoader,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+# DotLoader
+
+A customizable animated dot loader component with three dots that pulse in sequence, built with accessibility in mind.
+
+## Features
+- Smooth pulsing animation with CSS custom properties
+- Customizable colors for normal and active states
+- Optional text label with flexible content support
+- Comprehensive accessibility features (ARIA attributes, screen reader support)
+- Flexible styling with custom classes
+- Dark theme optimized
+- Screen reader announcements with configurable messages
+
+## Accessibility Features
+- \`role="status"\` for proper semantic meaning
+- \`aria-live="polite"\` for non-intrusive screen reader announcements
+- \`aria-busy="true"\` to indicate loading state
+- Hidden descriptive text for screen readers
+- Configurable ARIA labels and loading messages
+- Decorative elements properly hidden from assistive technology
+
+## Usage
+\`\`\`tsx
+import DotLoader from '@/ui/components/dot-loader'
+
+// Basic usage
+<DotLoader />
+
+// With text
+<DotLoader text="Loading..." />
+
+// Custom colors and accessibility
+<DotLoader 
+  color="var(--color-blue-500)" 
+  activeDotColor="var(--color-blue-300)" 
+  text="Processing..." 
+  ariaLabel="Processing user data"
+  loadingMessage="User data is being processed, please wait"
+/>
+
+// Silent loading (no screen reader announcements)
+<DotLoader 
+  text="Background sync" 
+  announceToScreenReader={false}
+/>
+\`\`\`
+        `,
+      },
+    },
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#1a1a1a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
+  argTypes: {
+    text: {
+      control: "text",
+      description:
+        "Optional text to display below the loader (supports React nodes)",
+    },
+    color: {
+      control: "color",
+      description: "Color of the inactive dots",
+    },
+    activeDotColor: {
+      control: "color",
+      description: "Color of the active/pulsing dot",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes for the root element",
+    },
+    classes: {
+      control: "object",
+      description:
+        "Object containing custom classes for different parts (root, dot, text)",
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible label for screen readers",
+    },
+    announceToScreenReader: {
+      control: "boolean",
+      description: "Whether to announce loading state to screen readers",
+    },
+    loadingMessage: {
+      control: "text",
+      description: "Custom loading message for screen readers",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story
+export const Default: Story = {
+  args: {},
+}
+
+// With text
+export const WithText: Story = {
+  args: {
+    text: "Loading...",
+  },
+}
+
+// Custom colors
+export const CustomColors: Story = {
+  args: {
+    text: "Processing...",
+    color: "#64748b",
+    activeDotColor: "#3b82f6",
+  },
+}
+
+// Brand colors
+export const BrandColors: Story = {
+  args: {
+    text: "Please wait",
+    color: "var(--color-fm-secondary-800)",
+    activeDotColor: "var(--color-fm-secondary-500)",
+  },
+}
+
+// Accessibility focused story
+export const AccessibilityFeatures: Story = {
+  args: {
+    text: "Loading user profile",
+    ariaLabel: "Loading user profile data",
+    loadingMessage: "User profile data is being loaded, please wait",
+    announceToScreenReader: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates accessibility features with custom ARIA labels and screen reader messages.",
+      },
+    },
+  },
+}
+
+// Silent loading (no screen reader announcements)
+export const SilentLoading: Story = {
+  args: {
+    text: "Background sync",
+    announceToScreenReader: false,
+    ariaLabel: "Background synchronization",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Example of a loader that doesn't announce to screen readers, useful for background processes.",
+      },
+    },
+  },
+}
+
+// Large with custom styling
+export const CustomStyling: Story = {
+  args: {
+    text: "Loading your content...",
+    className: "p-8",
+    classes: {
+      root: "bg-slate-800 rounded-lg p-6",
+      dot: "scale-150",
+      text: "text-slate-300 text-lg font-semibold",
+    },
+    ariaLabel: "Loading content",
+    loadingMessage: "Content is being loaded with custom styling",
+  },
+}
+
+// Different color variations
+export const ColorVariations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <div className="text-center">
+        <h3 className="mb-4 text-lg text-white">Default Theme</h3>
+        <DotLoader text="Loading..." ariaLabel="Loading default content" />
+      </div>
+
+      <div className="text-center">
+        <h3 className="mb-4 text-lg text-white">Blue Theme</h3>
+        <DotLoader
+          text="Processing..."
+          color="#1e293b"
+          activeDotColor="#3b82f6"
+          ariaLabel="Processing data"
+          loadingMessage="Data processing in progress"
+        />
+      </div>
+
+      <div className="text-center">
+        <h3 className="mb-4 text-lg text-white">Green Theme</h3>
+        <DotLoader
+          text="Uploading..."
+          color="#1f2937"
+          activeDotColor="#10b981"
+          ariaLabel="Uploading files"
+          loadingMessage="Files are being uploaded"
+        />
+      </div>
+
+      <div className="text-center">
+        <h3 className="mb-4 text-lg text-white">Red Theme</h3>
+        <DotLoader
+          text="Deleting..."
+          color="#1f2937"
+          activeDotColor="#ef4444"
+          ariaLabel="Deleting items"
+          loadingMessage="Items are being deleted"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Examples of different color combinations for various use cases, each with appropriate accessibility labels.",
+      },
+    },
+  },
+}
+
+// Loading states simulation
+export const LoadingStates: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8">
+      <div className="rounded-lg bg-slate-800 p-6 text-center">
+        <h4 className="mb-4 text-sm text-white">File Upload</h4>
+        <DotLoader
+          text="Uploading files..."
+          color="#374151"
+          activeDotColor="#06b6d4"
+          ariaLabel="File upload in progress"
+          loadingMessage="Files are being uploaded to the server"
+        />
+      </div>
+
+      <div className="rounded-lg bg-slate-800 p-6 text-center">
+        <h4 className="mb-4 text-sm text-white">Data Processing</h4>
+        <DotLoader
+          text="Processing data..."
+          color="#374151"
+          activeDotColor="#8b5cf6"
+          ariaLabel="Data processing"
+          loadingMessage="Your data is being processed"
+        />
+      </div>
+
+      <div className="rounded-lg bg-slate-800 p-6 text-center">
+        <h4 className="mb-4 text-sm text-white">Authentication</h4>
+        <DotLoader
+          text="Signing in..."
+          color="#374151"
+          activeDotColor="#f59e0b"
+          ariaLabel="Authentication in progress"
+          loadingMessage="Please wait while we sign you in"
+        />
+      </div>
+
+      <div className="rounded-lg bg-slate-800 p-6 text-center">
+        <h4 className="mb-4 text-sm text-white">Content Loading</h4>
+        <DotLoader
+          text="Loading content..."
+          color="#374151"
+          activeDotColor="#10b981"
+          ariaLabel="Content loading"
+          loadingMessage="Page content is being loaded"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world examples of how the loader might be used in different contexts with appropriate accessibility descriptions.",
+      },
+    },
+  },
+}
+
+// Complex content example
+export const ComplexContent: Story = {
+  args: {
+    text: (
+      <div className="flex items-center gap-2">
+        <span>Loading</span>
+        <span className="font-bold text-blue-400">premium</span>
+        <span>content...</span>
+      </div>
+    ),
+    ariaLabel: "Loading premium content",
+    loadingMessage: "Premium content is being loaded for your account",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Example with complex React node content while maintaining accessibility.",
+      },
+    },
+  },
+}
+
+// Playground story for interactive testing
+export const Playground: Story = {
+  args: {
+    text: "Loading...",
+    color: "#64748b",
+    activeDotColor: "#3b82f6",
+    className: "",
+    classes: {
+      root: "",
+      dot: "",
+      text: "",
+    },
+    ariaLabel: "Loading",
+    announceToScreenReader: true,
+    loadingMessage: "Content is loading, please wait",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground to test all component props including accessibility features.",
+      },
+    },
+  },
+}

package/dist/components/dot-loader/index.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+import { cn } from "@lib/utils"
+
+interface DotLoaderProps {
+  text?: React.ReactNode
+  classes?: {
+    root?: string
+    dot?: string
+    text?: string
+  }
+  className?: string
+  color?: string
+  activeDotColor?: string
+  /** Accessible label for screen readers */
+  ariaLabel?: string
+  /** Whether to announce loading state to screen readers */
+  announceToScreenReader?: boolean
+  /** Custom loading message for screen readers */
+  loadingMessage?: string
+}
+
+const DotLoader = ({
+  text,
+  classes,
+  className,
+  color = "var(--color-fm-secondary-800)",
+  activeDotColor = "var(--color-fm-secondary-500)",
+  ariaLabel = "Loading",
+  announceToScreenReader = true,
+  loadingMessage = "Content is loading, please wait",
+}: DotLoaderProps) => {
+  return (
+    <div
+      className={cn("flex flex-col items-center", classes?.root, className)}
+      role="status"
+      aria-label={ariaLabel}
+      aria-live={announceToScreenReader ? "polite" : undefined}
+      aria-busy="true"
+      style={{ color: activeDotColor } as React.CSSProperties}
+    >
+      <span
+        className={cn(
+          "animate-fm-shadowPulse relative mx-auto my-4 box-border block size-4 rounded-full",
+          classes?.dot
+        )}
+        style={
+          {
+            backgroundColor: color,
+            boxShadow: `-24px 0 ${color}, 24px 0 ${color}`,
+            "--dot-color": color,
+            "--active-dot-color": activeDotColor,
+          } as React.CSSProperties & {
+            "--dot-color": string
+            "--active-dot-color": string
+          }
+        }
+        aria-hidden="true"
+      />
+
+      {/* Screen reader text */}
+      <span className="sr-only">{loadingMessage}</span>
+
+      {text && (
+        <span
+          className={cn(
+            "text-fm-sm font-fm-brand leading-fm-sm mt-2",
+            classes?.text
+          )}
+          aria-hidden={announceToScreenReader ? "true" : undefined}
+        >
+          {text}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default DotLoader

package/dist/components/dot-loader/meta.ts

@@ -0,0 +1,14 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-secondary-800",
+    "--color-fm-secondary-500",
+    "--color-fm-divider-tertiary",
+    "--animate-fm-shadowPulse",
+    "--text-fm-sm",
+    "--font-fm-brand",
+    "--leading-fm-sm",
+  ],
+}