aural-ui 2.0.0

package/dist/components/char-count/CharCount.stories.tsx

@@ -0,0 +1,334 @@
+import React, { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import CharCount from "."
+
+const meta: Meta<typeof CharCount> = {
+  title: "Components/UI/CharCount",
+  component: CharCount,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentLength: {
+      control: { type: "number", min: 0 },
+      description: "Current character count",
+    },
+    maxLength: {
+      control: { type: "number", min: 0 },
+      description: "Maximum allowed characters (optional)",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+    "aria-live": {
+      control: { type: "select" },
+      options: ["polite", "assertive", "off"],
+      description: "ARIA live region announcement behavior",
+    },
+    id: {
+      control: { type: "text" },
+      description: "HTML id attribute for accessibility",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    currentLength: 25,
+    maxLength: 100,
+    "aria-live": "polite",
+  },
+}
+
+export const WithoutMaxLength: Story = {
+  args: {
+    currentLength: 42,
+    "aria-live": "polite",
+  },
+}
+
+export const NearLimit: Story = {
+  args: {
+    currentLength: 92,
+    maxLength: 100,
+    "aria-live": "polite",
+  },
+}
+
+export const OverLimit: Story = {
+  args: {
+    currentLength: 105,
+    maxLength: 100,
+    "aria-live": "assertive",
+  },
+}
+
+export const Zero: Story = {
+  args: {
+    currentLength: 0,
+    maxLength: 50,
+    "aria-live": "polite",
+  },
+}
+
+export const ExactLimit: Story = {
+  args: {
+    currentLength: 100,
+    maxLength: 100,
+    "aria-live": "polite",
+  },
+}
+
+export const LargeNumbers: Story = {
+  args: {
+    currentLength: 2847,
+    maxLength: 5000,
+    "aria-live": "polite",
+  },
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    currentLength: 30,
+    maxLength: 100,
+    className: "!text-blue-600 !text-lg",
+    "aria-live": "polite",
+  },
+}
+
+// Showcase all states together
+export const AllStates: Story = {
+  render: () => (
+    <div className="w-96 space-y-6">
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Normal State (25/100)</h3>
+        <CharCount currentLength={25} maxLength={100} />
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Warning State (92/100)</h3>
+        <CharCount currentLength={92} maxLength={100} />
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Error State (105/100)</h3>
+        <CharCount currentLength={105} maxLength={100} />
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Without Max Length (42)</h3>
+        <CharCount currentLength={42} />
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Zero Characters (0/50)</h3>
+        <CharCount currentLength={0} maxLength={50} />
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Exact Limit (100/100)</h3>
+        <CharCount currentLength={100} maxLength={100} />
+      </div>
+    </div>
+  ),
+}
+
+// Interactive example with textarea
+export const WithTextarea: Story = {
+  render: () => {
+    const [text, setText] = useState("")
+    const maxLength = 140
+
+    return (
+      <div className="w-96 space-y-4">
+        <div>
+          <label className="mb-2 block text-sm font-medium">
+            Tweet Message
+          </label>
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            placeholder="What's happening?"
+            rows={4}
+            aria-describedby="tweet-count"
+          />
+          <div className="mt-2 flex justify-end">
+            <CharCount
+              currentLength={text.length}
+              maxLength={maxLength}
+              id="tweet-count"
+              aria-live="polite"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Interactive example with input
+export const WithInput: Story = {
+  render: () => {
+    const [username, setUsername] = useState("")
+    const maxLength = 20
+
+    return (
+      <div className="w-96 space-y-4">
+        <div>
+          <label className="mb-2 block text-sm font-medium">Username</label>
+          <input
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            placeholder="Enter username"
+            aria-describedby="username-count"
+          />
+          <div className="mt-2 flex items-center justify-between">
+            <span className="text-sm text-gray-500">
+              Must be unique and memorable
+            </span>
+            <CharCount
+              currentLength={username.length}
+              maxLength={maxLength}
+              id="username-count"
+              aria-live="polite"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Multiple inputs with different limits
+export const MultipleInputs: Story = {
+  render: () => {
+    const [title, setTitle] = useState("")
+    const [description, setDescription] = useState("")
+    const [tags, setTags] = useState("")
+
+    return (
+      <div className="w-96 space-y-6">
+        <div>
+          <label className="mb-2 block text-sm font-medium">Post Title</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            placeholder="Enter post title"
+            aria-describedby="title-count"
+          />
+          <div className="mt-1 flex justify-end">
+            <CharCount
+              currentLength={title.length}
+              maxLength={60}
+              id="title-count"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="mb-2 block text-sm font-medium">Description</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            placeholder="Describe your post"
+            rows={3}
+            aria-describedby="description-count"
+          />
+          <div className="mt-1 flex justify-end">
+            <CharCount
+              currentLength={description.length}
+              maxLength={200}
+              id="description-count"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="mb-2 block text-sm font-medium">
+            Tags (comma separated)
+          </label>
+          <input
+            type="text"
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            placeholder="react, typescript, ui"
+            aria-describedby="tags-count"
+          />
+          <div className="mt-1 flex items-center justify-between">
+            <span className="text-xs text-gray-500">
+              Separate tags with commas
+            </span>
+            <CharCount
+              currentLength={tags.length}
+              maxLength={50}
+              id="tags-count"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Accessibility demonstration
+export const AccessibilityExample: Story = {
+  render: () => {
+    const [message, setMessage] = useState("")
+    const maxLength = 100
+    const isOverLimit = message.length > maxLength
+
+    return (
+      <div className="w-96 space-y-4">
+        <div>
+          <label
+            htmlFor="accessible-message"
+            className="mb-2 block text-sm font-medium"
+          >
+            Message *
+          </label>
+          <textarea
+            id="accessible-message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className={`w-full resize-none rounded-md border px-3 py-2 focus:ring-2 focus:outline-none ${
+              isOverLimit
+                ? "border-red-300 focus:ring-red-500"
+                : "border-gray-300 focus:ring-blue-500"
+            }`}
+            placeholder="Enter your message"
+            rows={4}
+            aria-describedby="message-count message-help"
+            aria-invalid={isOverLimit}
+            required
+          />
+          <div className="mt-2 flex items-start justify-between">
+            <div id="message-help" className="text-sm text-gray-500">
+              {isOverLimit
+                ? "Message is too long. Please shorten it."
+                : "Share your thoughts with the community."}
+            </div>
+            <CharCount
+              currentLength={message.length}
+              maxLength={maxLength}
+              id="message-count"
+              aria-live={isOverLimit ? "assertive" : "polite"}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/dist/components/char-count/index.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from "react"
+import { cn } from "@lib/utils"
+
+interface CharCountProps {
+  currentLength: number
+  maxLength?: number
+  className?: string
+  "aria-live"?: "polite" | "assertive" | "off"
+  id?: string
+}
+
+const CharCount = forwardRef<HTMLSpanElement, CharCountProps>(
+  (
+    {
+      currentLength,
+      maxLength,
+      className = "",
+      "aria-live": ariaLive = "polite",
+      id,
+    },
+    ref
+  ) => {
+    // Determine if we should show warning/error styling
+    const isNearLimit = maxLength && currentLength > maxLength * 0.9
+    const isOverLimit = maxLength && currentLength > maxLength
+
+    return (
+      <span
+        ref={ref}
+        id={id}
+        className={cn(
+          "leading-fm-sm font-fm-brand [font-size:var(--text-fm-sm)] tracking-wide uppercase",
+          {
+            "text-fm-warning": isNearLimit && !isOverLimit,
+            "text-fm-negative": isOverLimit,
+            "text-fm-tertiary": !isNearLimit && !isOverLimit,
+          },
+          className
+        )}
+        aria-live={ariaLive}
+      >
+        {maxLength ? `${currentLength}/${maxLength}` : currentLength}
+      </span>
+    )
+  }
+)
+CharCount.displayName = "CharCount"
+
+export default CharCount
+export { CharCount }
+export type { CharCountProps }

package/dist/components/char-count/meta.ts

@@ -0,0 +1,13 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-text-warning",
+    "--color-fm-text-negative",
+    "--color-fm-text-tertiary",
+    "--text-fm-sm",
+    "--leading-fm-sm",
+    "--font-fm-brand",
+  ],
+}

package/dist/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,209 @@
+import React from "react"
+import { Button } from "@components/button"
+import { Label } from "@components/label"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Checkbox } from "."
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/UI/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+}
+
+export const States: Story = {
+  render: () => (
+    <div className="text-fm-primary flex flex-col space-y-8">
+      {/* Unchecked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Unchecked</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="unchecked" />
+          <Label htmlFor="unchecked">Unchecked</Label>
+        </div>
+      </div>
+
+      {/* Checked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Checked</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="checked" defaultChecked />
+          <Label htmlFor="checked">Checked</Label>
+        </div>
+      </div>
+
+      {/* Indeterminate */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Indeterminate</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="indeterminate" indeterminate />
+          <Label htmlFor="indeterminate">Indeterminate</Label>
+        </div>
+      </div>
+
+      {/* Disabled Unchecked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Disabled Unchecked</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled" disabled />
+          <Label htmlFor="disabled" disabled>
+            Disabled Unchecked
+          </Label>
+        </div>
+      </div>
+
+      {/* Disabled Checked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Disabled Checked</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-checked" disabled defaultChecked />
+          <Label htmlFor="disabled-checked" disabled>
+            Disabled Checked
+          </Label>
+        </div>
+      </div>
+
+      {/* Disabled Indeterminate Unchecked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">
+          Disabled Indeterminate Unchecked
+        </h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-indeterminate" disabled indeterminate />
+          <Label htmlFor="disabled-indeterminate" disabled>
+            Disabled Indeterminate Unchecked
+          </Label>
+        </div>
+      </div>
+
+      {/* Disabled Indeterminate Checked */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Disabled Indeterminate Checked</h3>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="disabled-indeterminate"
+            disabled
+            indeterminate
+            defaultChecked
+          />
+          <Label htmlFor="disabled-indeterminate" disabled>
+            Disabled Indeterminate Checked
+          </Label>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        alert("Form submitted!")
+      }}
+      className="space-y-6"
+    >
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="newsletter" />
+          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="marketing" />
+          <Label htmlFor="marketing">Receive marketing emails</Label>
+        </div>
+      </div>
+      <Button type="submit">Submit</Button>
+    </form>
+  ),
+}
+
+export const IndeterminateExample: Story = {
+  render: () => {
+    // This example shows a parent-child relationship where the parent checkbox
+    // becomes indeterminate when some but not all children are checked
+    const [checkedItems, setCheckedItems] = React.useState({
+      option1: false,
+      option2: false,
+      option3: false,
+    })
+
+    const allChecked = Object.values(checkedItems).every(Boolean)
+    const indeterminate =
+      Object.values(checkedItems).some(Boolean) && !allChecked
+
+    const handleParentChange = () => {
+      const newValue = !allChecked
+      setCheckedItems({
+        option1: newValue,
+        option2: newValue,
+        option3: newValue,
+      })
+    }
+
+    const handleChildChange = (option: keyof typeof checkedItems) => {
+      setCheckedItems((prev) => ({
+        ...prev,
+        [option]: !prev[option],
+      }))
+    }
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="parent"
+            checked={allChecked || indeterminate}
+            indeterminate={indeterminate}
+            onCheckedChange={handleParentChange}
+          />
+          <Label htmlFor="parent" className="font-medium">
+            Select all options
+          </Label>
+        </div>
+        <div className="ml-6 space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="option1"
+              checked={checkedItems.option1}
+              onCheckedChange={() => handleChildChange("option1")}
+            />
+            <Label htmlFor="option1">Option 1</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="option2"
+              checked={checkedItems.option2}
+              onCheckedChange={() => handleChildChange("option2")}
+            />
+            <Label htmlFor="option2">Option 2</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="option3"
+              checked={checkedItems.option3}
+              onCheckedChange={() => handleChildChange("option3")}
+            />
+            <Label htmlFor="option3">Option 3</Label>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/dist/components/checkbox/index.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { TickIcon } from "@icons/tick-icon"
+import { cn } from "@lib/utils"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+
+type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+> & {
+  indeterminate?: boolean
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, indeterminate = false, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    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 text-fm-icon-active disabled:text-fm-icon-inactive 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 rounded-fm-l size-8 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 disabled:cursor-not-allowed",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      {indeterminate ? <span className="h-0.5 w-4 bg-current" /> : <TickIcon />}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+// Add a custom prop type for the indeterminate state
+export type { CheckboxProps }
+export { Checkbox }

package/dist/components/checkbox/meta.ts

@@ -0,0 +1,19 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-checkbox": "^1.3.2",
+  },
+  devDependencies: {},
+  internalDependencies: ["tick-icon"],
+  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-primary",
+    "--color-fm-surface-primary",
+    "--color-fm-surface-secondary",
+  ],
+}