aural-ui 2.0.0

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

@@ -0,0 +1,138 @@
+import React from "react"
+import { Case, Default, SwitchCase } from "@components/switch-case"
+import { SpinnerGradientIcon } from "@icons/spinner-gradient-icon"
+import { SpinnerSolidIcon } from "@icons/spinner-solid-icon"
+import { SpinnerSolidNeutralIcon } from "@icons/spinner-solid-neutral-icon"
+import { cn } from "@lib/utils"
+
+interface CircularLoaderProps {
+  variant?: "v1" | "v2" | "v3"
+  className?: string
+  text?: string
+  classes?: {
+    text?: string
+    root?: string
+    loader?: string
+  }
+  /** Accessible label for screen readers when no text is provided */
+  "aria-label"?: string
+  /** ID for the loading region */
+  id?: string
+  /** Whether to announce the loading state to screen readers */
+  "aria-live"?: "polite" | "assertive" | "off"
+  /** Custom loading message for screen readers */
+  loadingMessage?: string
+  /** Size variant for the loader */
+  size?: "sm" | "md" | "lg" | "xl"
+}
+
+const sizeVariants = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12",
+}
+
+const CircularLoader = ({
+  variant = "v1",
+  className,
+  text,
+  classes,
+  "aria-label": ariaLabel,
+  id,
+  "aria-live": ariaLive = "polite",
+  loadingMessage,
+  size = "md",
+  ...props
+}: React.JSX.IntrinsicAttributes &
+  React.HTMLAttributes<HTMLDivElement> &
+  CircularLoaderProps) => {
+  // Determine the accessible label
+  const accessibleLabel = text || loadingMessage || ariaLabel || "Loading"
+
+  // Determine if we should show visual text
+  const showVisualText = text !== undefined
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-2",
+        classes?.root
+      )}
+      role="status"
+      aria-live={ariaLive}
+      aria-label={!showVisualText ? accessibleLabel : undefined}
+      id={id}
+      {...props}
+    >
+      <SwitchCase value={variant}>
+        <Case value="v1">
+          <SpinnerGradientIcon
+            className={cn(
+              "animate-spin",
+              sizeVariants[size],
+              className,
+              classes?.loader
+            )}
+            aria-hidden="true"
+            focusable="false"
+          />
+        </Case>
+        <Case value="v2">
+          <SpinnerSolidIcon
+            className={cn(
+              "animate-spin",
+              sizeVariants[size],
+              className,
+              classes?.loader
+            )}
+            aria-hidden="true"
+            focusable="false"
+          />
+        </Case>
+        <Case value="v3">
+          <SpinnerSolidNeutralIcon
+            className={cn(
+              "animate-spin",
+              sizeVariants[size],
+              className,
+              classes?.loader
+            )}
+            aria-hidden="true"
+            focusable="false"
+          />
+        </Case>
+        <Default>
+          <SpinnerGradientIcon
+            className={cn(
+              "animate-spin",
+              sizeVariants[size],
+              className,
+              classes?.loader
+            )}
+            aria-hidden="true"
+            focusable="false"
+          />
+        </Default>
+      </SwitchCase>
+
+      {/* Screen reader text - always present for accessibility */}
+      {!showVisualText && <span className="sr-only">{accessibleLabel}</span>}
+
+      {/* Visual text when provided */}
+      {showVisualText && (
+        <span
+          className={cn(
+            "text-fm-sm font-fm-brand leading-fm-sm mt-2",
+            classes?.text
+          )}
+          aria-live={ariaLive}
+        >
+          {text}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default CircularLoader

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

@@ -0,0 +1,11 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: [
+    "spinner-gradient-icon",
+    "spinner-solid-icon",
+    "switch-case",
+    "spinner-solid-neutral-icon",
+  ],
+  tokens: [],
+}

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

@@ -0,0 +1,319 @@
+import React from "react"
+import { AngleDownIcon } from "@icons/angle-down-icon"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { IconButton } from "../icon-button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleHeader,
+  CollapsibleTitle,
+  CollapsibleTrigger,
+} from "./index"
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Components/UI/Collapsible",
+  component: Collapsible,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A collapsible component built on Radix UI that can expand and collapse content.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultOpen: {
+      control: "boolean",
+      description: "Whether the collapsible is open by default",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the collapsible is disabled",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Collapsible>
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-[800px]">
+      <Collapsible {...args}>
+        <CollapsibleHeader title="Frequently Asked Questions" />
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              This is the collapsible content area. You can put any content here
+              including text, images, forms, or other components. The content
+              will smoothly animate when the collapsible is opened or closed.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+  args: {
+    defaultOpen: false,
+  },
+}
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible defaultOpen>
+        <CollapsibleHeader title="Settings Panel" />
+        <CollapsibleContent>
+          <div className="space-y-3 pt-4">
+            <div className="flex items-center justify-between">
+              <span>Enable notifications</span>
+              <input type="checkbox" defaultChecked />
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Dark mode</span>
+              <input type="checkbox" />
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Auto-save</span>
+              <input type="checkbox" defaultChecked />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible disabled>
+        <CollapsibleHeader title="Disabled Section" />
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              This content cannot be accessed because the collapsible is
+              disabled.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const CustomTrigger: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible>
+        <div className="flex items-center justify-between gap-2">
+          <CollapsibleTitle>Advanced Settings</CollapsibleTitle>
+          <CollapsibleTrigger asChild>
+            <IconButton
+              variant="ghost"
+              size="small"
+              icon={
+                <AngleDownIcon className="toggle-icon" height={32} width={32} />
+              }
+              label="Toggle Settings"
+              className="text-fm-icon-active disabled:text-fm-icon-inactive flex [&>.toggle-icon]:transition-transform [&>.toggle-icon]:duration-50 data-[state=open]:[&>.toggle-icon]:-rotate-180"
+            />
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              Custom trigger button with settings icon that rotates 45 degrees
+              when opened.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const MultipleCollapsibles: Story = {
+  render: () => (
+    <div className="w-[800px] space-y-4">
+      <Collapsible>
+        <CollapsibleHeader title="Section 1: Getting Started" />
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              Learn the basics of using our platform. This section covers
+              initial setup, account creation, and basic navigation.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible>
+        <CollapsibleHeader title="Section 2: Advanced Features" />
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              Explore advanced functionality including custom integrations, API
+              usage, and automation tools.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible>
+        <CollapsibleHeader title="Section 3: Troubleshooting" />
+        <CollapsibleContent>
+          <div className="pt-4">
+            <p>
+              Common issues and their solutions. Find answers to frequently
+              encountered problems.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const RichContent: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible>
+        <CollapsibleHeader title="Product Features" />
+        <CollapsibleContent>
+          <div className="space-y-4 pt-4">
+            <div>
+              <h4 className="mb-2 font-semibold">Key Benefits:</h4>
+              <ul className="list-inside list-disc space-y-1">
+                <li>Easy to use interface</li>
+                <li>Powerful automation tools</li>
+                <li>24/7 customer support</li>
+                <li>Enterprise-grade security</li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="mb-2 font-semibold">Pricing:</h4>
+              <div className="rounded bg-gray-50 p-3">
+                <p className="text-sm">Starting at $29/month for basic plan</p>
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const WithCustomStyling: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible className="rounded-lg border-2 border-blue-200 bg-blue-50 p-4">
+        <div className="flex items-center justify-between gap-2">
+          <CollapsibleTitle className="font-bold text-blue-800">
+            Important Notice
+          </CollapsibleTitle>
+          <CollapsibleTrigger asChild>
+            <IconButton
+              variant="ghost"
+              size="small"
+              className="text-blue-600 hover:bg-blue-100"
+              icon={
+                <AngleDownIcon className="transition-transform duration-200 data-[state=open]:rotate-180" />
+              }
+              label="Toggle Notice"
+            />
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className="text-blue-700">
+          <div className="pt-4">
+            <p>
+              This is an important system notification with custom styling. The
+              entire collapsible has a blue theme to draw attention to critical
+              information.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const LongContent: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible>
+        <CollapsibleHeader title="Terms and Conditions" />
+        <CollapsibleContent>
+          <div className="max-h-60 overflow-y-auto pt-4">
+            <div className="space-y-4 text-sm">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+              </p>
+              <p>
+                Duis aute irure dolor in reprehenderit in voluptate velit esse
+                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt
+                mollit anim id est laborum.
+              </p>
+              <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                quae ab illo inventore veritatis et quasi architecto beatae
+                vitae dicta sunt explicabo.
+              </p>
+              <p>
+                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
+                aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                voluptatem sequi nesciunt.
+              </p>
+              <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui
+                blanditiis praesentium voluptatum deleniti atque corrupti quos
+                dolores et quas molestias excepturi sint occaecati cupiditate
+                non provident.
+              </p>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}
+
+export const NestedCollapsibles: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <Collapsible>
+        <CollapsibleHeader title="Main Category" />
+        <CollapsibleContent>
+          <div className="space-y-2 pt-4">
+            <p className="mb-4">This section contains nested collapsibles:</p>
+
+            <Collapsible className="ml-4">
+              <CollapsibleHeader title="Subcategory A" />
+              <CollapsibleContent>
+                <div className="pt-4">
+                  <p>Content for subcategory A with detailed information.</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible className="ml-4">
+              <CollapsibleHeader title="Subcategory B" />
+              <CollapsibleContent>
+                <div className="pt-4">
+                  <p>Content for subcategory B with additional details.</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ),
+}

package/dist/components/collapsible/index.tsx

@@ -0,0 +1,158 @@
+import React, { forwardRef } from "react"
+import { IconButton } from "@components/icon-button"
+import { AngleDownIcon } from "@icons/angle-down-icon"
+import { cn } from "@lib/utils"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import { Slot } from "@radix-ui/react-slot"
+
+const Collapsible = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Collapsible>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+  return (
+    <CollapsiblePrimitive.Collapsible
+      ref={ref}
+      className={cn(
+        "border-fm-divider-secondary pb-fm-2xl w-full border-b border-solid",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </CollapsiblePrimitive.Collapsible>
+  )
+})
+Collapsible.displayName = "Collapsible"
+
+type CollapsibleTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+  asChild?: boolean
+}
+
+const CollapsibleTitle = forwardRef<HTMLHeadingElement, CollapsibleTitleProps>(
+  (props, ref) => {
+    const { asChild, children, className, ...rest } = props
+    const Component = asChild ? Slot : "h2"
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          "text-fm-primary font-fm-text leading-fm-3xl [font-size:var(--text-fm-3xl)] tracking-wide",
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
+    )
+  }
+)
+CollapsibleTitle.displayName = "CollapsibleTitle"
+
+const CollapsibleTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
+>((props, ref) => {
+  const { className, children, asChild, ...rest } = props
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      ref={ref}
+      asChild={asChild}
+      {...rest}
+    >
+      {React.isValidElement(children) ? (
+        children
+      ) : (
+        <IconButton
+          className={cn(
+            "text-fm-icon-active disabled:text-fm-icon-inactive [&>.toggle-icon]:transition-transform [&>.toggle-icon]:duration-50 data-[state=open]:[&>.toggle-icon]:-rotate-180",
+            className
+          )}
+          variant="ghost"
+          size="small"
+          icon={
+            <AngleDownIcon className="toggle-icon" height={32} width={32} />
+          }
+          label="Toggle Collapsible"
+        />
+      )}
+    </CollapsiblePrimitive.CollapsibleTrigger>
+  )
+})
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+type CollapsibleHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  title: React.ReactNode
+  classes?: {
+    root?: string
+    trigger?: string
+    title?: string
+    icon?: string
+  }
+}
+
+const CollapsibleHeader = forwardRef<HTMLDivElement, CollapsibleHeaderProps>(
+  (props, ref) => {
+    const { className, title, classes, ...rest } = props
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-between gap-2",
+          className,
+          classes?.root
+        )}
+        {...rest}
+      >
+        <CollapsibleTrigger asChild>
+          <button
+            className={cn(
+              "text-fm-icon-active disabled:text-fm-icon-inactive focus-visible:ring-fm-primary focus-visible:ring-offset-fm-contrast disabled:[&>.collapsible-title]:text-fm-inactive flex flex-1 cursor-pointer items-center justify-between text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&>.toggle-icon]:transition-transform [&>.toggle-icon]:duration-50 data-[state=open]:[&>.toggle-icon]:-rotate-180",
+              classes?.trigger
+            )}
+          >
+            <CollapsibleTitle
+              className={cn("collapsible-title", classes?.title)}
+            >
+              {title}
+            </CollapsibleTitle>
+            <AngleDownIcon
+              className={cn("toggle-icon", classes?.icon)}
+              height={32}
+              width={32}
+            />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+    )
+  }
+)
+CollapsibleHeader.displayName = "CollapsibleHeader"
+
+const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn(
+        "text-fm-tertiary leading-fm-xl [font-size:var(--text-fm-xl)] tracking-wider",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </CollapsiblePrimitive.CollapsibleContent>
+  )
+})
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleTitle,
+  CollapsibleHeader,
+}

package/dist/components/collapsible/meta.ts

@@ -0,0 +1,22 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-collapsible": "^1.1.11",
+  },
+  devDependencies: {},
+  internalDependencies: ["icon-button", "angle-down-icon"],
+  tokens: [
+    "--color-fm-contrast",
+    "--color-fm-divider-secondary",
+    "--color-fm-icon-active",
+    "--color-fm-icon-inactive",
+    "--color-fm-inactive",
+    "--color-fm-primary",
+    "--color-fm-tertiary",
+    "--font-fm-text",
+    "--leading-fm-3xl",
+    "--leading-fm-xl",
+    "--spacing-fm-2xl",
+    "--text-fm-3xl",
+    "--text-fm-xl",
+  ],
+}