aural-ui 2.1.9 → 2.1.11

package/dist/components/breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,302 @@
+import React from "react"
+import { ArrowRightIcon } from "@icons/arrow-right-icon"
+import { ChevronDoubleRightIcon } from "@icons/chevron-double-right-icon"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Breadcrumb } from "."
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Components/UI/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+    docs: {
+      description: {
+        component: `
+# Breadcrumb Component
+
+A navigation component that shows the current page's location within a site hierarchy. Users can navigate back to previous levels by clicking on breadcrumb items.
+
+## Features
+
+- **Multiple Separators**: Support for chevron, slash, arrow, and custom separators
+- **Custom Separator**: Use any React component or icon as a separator
+- **Clickable Navigation**: Items can be clickable links or static text
+- **Responsive Design**: Adapts spacing for mobile and desktop
+- **Accessibility**: Proper ARIA labels and semantic HTML structure
+- **Customizable**: Size variants and custom styling options
+- **Truncation**: Optional max items with ellipsis for long breadcrumbs
+- **Home Integration**: Optional home item at the beginning
+
+## Usage Examples
+
+### Basic Breadcrumb
+\`\`\`tsx
+<Breadcrumb
+  items={[
+    { title: "Home", url: "/" },
+    { title: "Products", url: "/products" },
+    { title: "Electronics" }
+  ]}
+  onItemClick={(title, url) => console.log(title, url)}
+/>
+\`\`\`
+
+### With Different Separators
+\`\`\`tsx
+<Breadcrumb
+  items={items}
+  separator="slash"
+  onItemClick={handleClick}
+/>
+\`\`\`
+
+### With Size Variants
+\`\`\`tsx
+<Breadcrumb
+  items={items}
+  size="lg"
+  onItemClick={handleClick}
+/>
+\`\`\`
+
+### With Custom Separator
+\`\`\`tsx
+<Breadcrumb
+  items={items}
+  customSeparator={<ArrowRightIcon width={16} height={16} />}
+  onItemClick={handleClick}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    separator: {
+      control: { type: "select" },
+      options: ["chevron", "slash", "arrow"],
+    },
+    showHome: {
+      control: { type: "boolean" },
+    },
+    maxItems: {
+      control: { type: "number" },
+    },
+    onItemClick: {
+      action: "item clicked",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Breadcrumb>
+
+const sampleItems = [
+  { title: "Home", url: "/", isClickable: true },
+  { title: "Products", url: "/products", isClickable: true },
+  { title: "Electronics", url: "/products/electronics", isClickable: true },
+  {
+    title: "Smartphones",
+    url: "/products/electronics/smartphones",
+    isClickable: true,
+  },
+  { title: "iPhone 15 Pro" },
+]
+
+const longItems = [
+  { title: "Home", url: "/", isClickable: true },
+  { title: "Products", url: "/products", isClickable: true },
+  { title: "Electronics", url: "/products/electronics", isClickable: true },
+  {
+    title: "Smartphones",
+    url: "/products/electronics/smartphones",
+    isClickable: true,
+  },
+  {
+    title: "Apple",
+    url: "/products/electronics/smartphones/apple",
+    isClickable: true,
+  },
+  {
+    title: "iPhone",
+    url: "/products/electronics/smartphones/apple/iphone",
+    isClickable: true,
+  },
+  { title: "iPhone 15 Pro" },
+]
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    size: "md",
+    separator: "chevron",
+  },
+}
+
+export const WithSlashSeparator: Story = {
+  args: {
+    items: sampleItems,
+    separator: "slash",
+  },
+}
+
+export const WithArrowSeparator: Story = {
+  args: {
+    items: sampleItems,
+    separator: "arrow",
+  },
+}
+
+export const WithCustomSeparator: Story = {
+  args: {
+    items: sampleItems,
+    customSeparator: <ChevronDoubleRightIcon width={16} height={16} />,
+  },
+}
+
+export const SmallSize: Story = {
+  args: {
+    items: sampleItems,
+    size: "sm",
+  },
+}
+
+export const LargeSize: Story = {
+  args: {
+    items: sampleItems,
+    size: "lg",
+  },
+}
+
+export const WithHome: Story = {
+  args: {
+    items: [
+      { title: "Products", url: "/products", isClickable: true },
+      { title: "Electronics", url: "/products/electronics", isClickable: true },
+      { title: "Smartphones" },
+    ],
+    showHome: true,
+    homeTitle: "Home",
+    homeUrl: "/",
+  },
+}
+
+export const WithMaxItems: Story = {
+  args: {
+    items: longItems,
+    maxItems: 4,
+  },
+}
+
+export const NonClickable: Story = {
+  args: {
+    items: [
+      { title: "Home", isClickable: false },
+      { title: "Products", isClickable: false },
+      { title: "Electronics", isClickable: false },
+      { title: "Smartphones" },
+    ],
+  },
+}
+
+export const MixedClickable: Story = {
+  args: {
+    items: [
+      { title: "Home", url: "/", isClickable: true },
+      { title: "Products", isClickable: false },
+      { title: "Electronics", url: "/products/electronics", isClickable: true },
+      { title: "Smartphones" },
+    ],
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-8">
+      <div className="space-y-4">
+        <h3 className="text-fm-lg font-fm-brand text-neutral-400">
+          Size Variants
+        </h3>
+        <div className="space-y-2">
+          <Breadcrumb items={sampleItems} size="sm" />
+          <Breadcrumb items={sampleItems} size="md" />
+          <Breadcrumb items={sampleItems} size="lg" />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-fm-lg font-fm-brand text-neutral-400">
+          Separator Variants
+        </h3>
+        <div className="space-y-2">
+          <Breadcrumb items={sampleItems} separator="chevron" />
+          <Breadcrumb items={sampleItems} separator="slash" />
+          <Breadcrumb items={sampleItems} separator="arrow" />
+          <Breadcrumb
+            items={sampleItems}
+            customSeparator={<ArrowRightIcon width={16} height={16} />}
+          />
+          <Breadcrumb
+            items={sampleItems}
+            customSeparator={<ChevronDoubleRightIcon width={16} height={16} />}
+          />
+          <Breadcrumb items={sampleItems} customSeparator="•" />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-fm-lg font-fm-brand text-neutral-400">With Home</h3>
+        <Breadcrumb
+          items={[
+            { title: "Products", url: "/products", isClickable: true },
+            { title: "Electronics" },
+          ]}
+          showHome={true}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-fm-lg font-fm-brand text-neutral-400">
+          With Max Items (4)
+        </h3>
+        <Breadcrumb items={longItems} maxItems={4} />
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [currentPath, setCurrentPath] = React.useState("iPhone 15 Pro")
+
+    const handleItemClick = (title: string, url?: string) => {
+      console.log(`Clicked: ${title}`, url)
+      setCurrentPath(title)
+    }
+
+    return (
+      <div className="space-y-4 p-8">
+        <h3 className="text-fm-lg font-fm-brand text-neutral-400">
+          Current Path: {currentPath}
+        </h3>
+        <Breadcrumb items={sampleItems} onItemClick={handleItemClick} />
+        <div className="text-fm-secondary text-fm-sm">
+          Click on any breadcrumb item to see the interaction
+        </div>
+      </div>
+    )
+  },
+}

package/dist/components/breadcrumb/index.tsx

@@ -0,0 +1,232 @@
+import React, { forwardRef } from "react"
+import { ChevronRightIcon } from "@icons/chevron-right-icon"
+import { cn } from "@lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { Typography } from "../typography"
+
+export const breadcrumbVariants = cva("flex items-center gap-1 md:gap-3", {
+  variants: {
+    size: {
+      sm: "text-fm-sm",
+      md: "text-fm-md",
+      lg: "text-fm-lg",
+    },
+    separator: {
+      chevron: "",
+      slash: "",
+      arrow: "",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    separator: "chevron",
+  },
+})
+
+export interface BreadCrumbsItemProps {
+  title: string
+  url?: string
+  isClickable?: boolean
+  className?: string
+}
+
+export interface BreadcrumbProps
+  extends VariantProps<typeof breadcrumbVariants> {
+  items: BreadCrumbsItemProps[]
+  onItemClick?: (title: string, url?: string) => void
+  className?: string
+  maxItems?: number
+  showHome?: boolean
+  homeTitle?: string
+  homeUrl?: string
+  customSeparator?: React.ReactNode
+}
+
+const BreadCrumbItem = ({
+  title,
+  url,
+  isClickable = true,
+  className = "",
+  onItemClick,
+  isLast = false,
+  size = "md",
+  separator = "chevron",
+  customSeparator,
+}: BreadCrumbsItemProps & {
+  onItemClick?: (title: string, url?: string) => void
+  isLast: boolean
+  size?: "sm" | "md" | "lg"
+  separator?: "chevron" | "slash" | "arrow"
+  customSeparator?: React.ReactNode
+}) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    if (isClickable && onItemClick) {
+      onItemClick(title, url)
+    }
+  }
+
+  const renderSeparator = () => {
+    if (isLast) return null
+
+    if (customSeparator) {
+      return (
+        <span
+          className="text-fm-tertiary mx-1 md:mx-2"
+          data-testid="custom-separator"
+        >
+          {customSeparator}
+        </span>
+      )
+    }
+
+    switch (separator) {
+      case "slash":
+        return (
+          <span
+            className="text-fm-tertiary mx-1 md:mx-2"
+            data-testid="slash-separator"
+          >
+            /
+          </span>
+        )
+      case "arrow":
+        return (
+          <span
+            className="text-fm-tertiary mx-1 md:mx-2"
+            data-testid="arrow-separator"
+          >
+            →
+          </span>
+        )
+      case "chevron":
+      default:
+        return (
+          <ChevronRightIcon
+            className="text-fm-tertiary"
+            width={16}
+            height={16}
+            data-testid="chevron-right"
+          />
+        )
+    }
+  }
+
+  const typographyVariantMap = {
+    sm: "caption-medium",
+    lg: "body-medium",
+    md: "body-small",
+  } as const
+
+  const typographyVariant =
+    typographyVariantMap[size] || typographyVariantMap.md
+
+  return (
+    <div className="flex items-center gap-1 md:gap-3">
+      {isClickable && url ? (
+        <a
+          href={url}
+          onClick={handleClick}
+          className={cn(
+            "focus-visible:ring-ring rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2",
+            className
+          )}
+          data-testid="breadcrumb-link"
+        >
+          <Typography
+            variant={typographyVariant}
+            className="text-fm-primary hover:text-fm-primary-600 max-w-[96px] cursor-pointer truncate"
+          >
+            {title}
+          </Typography>
+        </a>
+      ) : (
+        <Typography
+          variant={typographyVariant}
+          className={cn("text-fm-secondary max-w-[96px] truncate", className)}
+          data-testid="breadcrumb-text"
+        >
+          {title}
+        </Typography>
+      )}
+      {renderSeparator()}
+    </div>
+  )
+}
+
+const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
+  (
+    {
+      items,
+      onItemClick,
+      className = "",
+      size = "md",
+      separator = "chevron",
+      maxItems,
+      showHome = false,
+      homeTitle = "Home",
+      homeUrl = "/",
+      customSeparator,
+      ...props
+    },
+    ref
+  ) => {
+    // Add home item if showHome is true
+    const allItems = showHome
+      ? [{ title: homeTitle, url: homeUrl, isClickable: true }, ...items]
+      : items
+
+    // Limit items if maxItems is specified
+    const displayItems = (() => {
+      if (!maxItems || allItems.length <= maxItems) return allItems
+
+      if (maxItems >= 3) {
+        return [
+          allItems[0],
+          { title: "...", isClickable: false },
+          ...allItems.slice(-(maxItems - 2)),
+        ]
+      }
+
+      if (maxItems === 2) {
+        return [allItems[0], allItems[allItems.length - 1]]
+      }
+
+      return allItems.slice(0, maxItems)
+    })()
+
+    return (
+      <nav
+        ref={ref}
+        className={cn(breadcrumbVariants({ size, separator }), className)}
+        aria-label="Breadcrumb"
+        {...props}
+      >
+        <ol
+          className="flex items-center gap-1 md:gap-3"
+          data-testid="breadcrumb-list"
+        >
+          {displayItems.map((item, index) => (
+            <li key={`${item.title}-${index}`} className="flex items-center">
+              <BreadCrumbItem
+                {...item}
+                onItemClick={onItemClick}
+                isLast={index === displayItems.length - 1}
+                size={size || "md"}
+                separator={separator || "chevron"}
+                className={item.className}
+                customSeparator={customSeparator}
+              />
+            </li>
+          ))}
+        </ol>
+      </nav>
+    )
+  }
+)
+
+Breadcrumb.displayName = "Breadcrumb"
+
+export { Breadcrumb, BreadCrumbItem }
+export default Breadcrumb

package/dist/components/breadcrumb/meta.ts

@@ -0,0 +1,14 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["typography", "chevron-right-icon"],
+  tokens: [
+    "--color-fm-primary",
+    "--color-fm-primary-600",
+    "--color-fm-secondary",
+    "--color-fm-tertiary",
+    "--text-fm-sm",
+    "--text-fm-md",
+    "--text-fm-lg",
+  ],
+}

package/dist/components/index.ts

@@ -3,6 +3,7 @@ export * from "./aspect-ratio"
 export * from "./avatar"
 export * from "./badge"
 export * from "./banner"
+export * from "./breadcrumb"
 export * from "./button"
 export * from "./card"
 export * from "./char-count"
@@ -21,7 +22,9 @@ export * from "./if-else"
 export * from "./label"
 export * from "./list"
 export * from "./marquee"
+export * from "./otp-inputs"
 export * from "./overlay"
+export * from "./otp-inputs"
 export * from "./pagination"
 export * from "./popover"
 export * from "./radio"

package/dist/components/otp-inputs/index.tsx

@@ -31,6 +31,8 @@ interface SingleOtpInputType {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   onFocus: () => void
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void
+
   style?: React.CSSProperties
   value: string | undefined
   type?: "text" | "number"
@@ -100,10 +102,6 @@ export default function OtpInputs(props: OTPInputsType) {
     }
   }
 
-  const onBlur = () => {
-    setActiveInput(-1)
-  }
-
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     switch (e.key) {
       case "Backspace":
@@ -138,6 +136,42 @@ export default function OtpInputs(props: OTPInputsType) {
     }
   }
 
+  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    const pastedData = e.clipboardData.getData("text/plain")
+
+    const validChars = pastedData
+      .split("")
+      .map((char) => getRightValue(char))
+      .filter((char) => char !== "")
+      .slice(0, length)
+
+    if (validChars.length === 0) return
+
+    const updatedOTPValues = [...otpValues]
+    let currentIndex = activeInput
+    for (let i = 0; i < validChars.length && currentIndex < length; i++) {
+      updatedOTPValues[currentIndex] = validChars[i]
+      currentIndex++
+    }
+
+    setOTPValues(updatedOTPValues)
+    handleOtpChange(updatedOTPValues)
+
+    const nextEmptyIndex = updatedOTPValues.findIndex(
+      (val, idx) => idx >= activeInput && val === ""
+    )
+    const focusIndex =
+      nextEmptyIndex !== -1
+        ? nextEmptyIndex
+        : Math.min(length - 1, activeInput + validChars.length)
+    focusInput(focusIndex)
+  }
+
+  const onBlur = () => {
+    setActiveInput(-1)
+  }
+
   const messagesMap = {
     true: messages?.success ?? "✓ Valid input",
     false: messages?.error ?? "✗ Invalid input. Try again",
@@ -168,6 +202,7 @@ export default function OtpInputs(props: OTPInputsType) {
               value={otpValues && otpValues[index]}
               autoComplete="off"
               onFocus={handleOnFocus(index)}
+              onPaste={handleOnPaste}
               onChange={handleOnChange}
               onKeyDown={handleOnKeyDown}
               onBlur={onBlur}

package/dist/components/textarea/index.tsx

@@ -162,7 +162,7 @@ const useAutoGrow = (
     return () => {
       window.removeEventListener("resize", handleResize)
     }
-  }, [adjustHeight, minHeight, autoGrow])
+  }, [adjustHeight, minHeight, autoGrow, textareaRef])
 
   return adjustHeight
 }

package/dist/components/typography/meta.ts

@@ -10,6 +10,7 @@ export const meta = {
     "--color-fm-tertiary",
     "--font-fm-brand",
     "--font-fm-text",
+    "--font-fm-toons",
     "--leading-fm-2xl",
     "--leading-fm-3xl",
     "--leading-fm-4xl",

package/dist/icons/index.ts

@@ -71,6 +71,7 @@ export * from "./paper-plane-icon"
 export * from "./pause-icon"
 export * from "./pencil-icon"
 export * from "./plus-icon"
+export * from "./phone-icon"
 export * from "./search-icon"
 export * from "./setting-icon"
 export * from "./share-icon"
@@ -84,6 +85,7 @@ export * from "./spinner-solid-neutral-icon"
 export * from "./star-icon"
 export * from "./store-coin-icon"
 export * from "./suggestion-icon"
+export * from "./shield-icon"
 export * from "./sun-icon"
 export * from "./text-color-icon"
 export * from "./text-indicator-icon"