aural-ui 4.2.4 → 4.4.0

package/dist/components/typography/Typography.stories.tsx

@@ -77,8 +77,9 @@ const meta: Meta<typeof Typography> = {
     },
     weight: {
       control: "select",
-      options: ["regular", "medium", "semibold", "bold"],
-      description: "Font weight",
+      options: ["regular", "medium"],
+      description:
+        "Font weight. Lab Grotesque body/caption variants support regular (400) and medium (500) only.",
     },
     align: {
       control: "radio",
@@ -336,23 +337,10 @@ export const Configurations: Story = {
               medium (500)
             </p>
           </div>
-          <div className="space-y-2 text-center">
-            <Typography variant="body-large" weight="semibold">
-              Semibold
-            </Typography>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              semibold (600)
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Typography variant="body-large" weight="bold">
-              Bold
-            </Typography>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              bold (700)
-            </p>
-          </div>
         </div>
+        <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+          Body and caption variants support regular and medium only.
+        </p>
       </div>
 
       {/* Color axis */}
@@ -514,7 +502,7 @@ export const Configurations: Story = {
     docs: {
       description: {
         story:
-          "One subsection per configuration axis: weight (regular → bold), color (primary → inactive), alignment (left / center / right), text-transform, and line-height override (tight / normal / loose).",
+          "One subsection per configuration axis: weight (regular → medium), color (primary → inactive), alignment (left / center / right), text-transform, and line-height override (tight / normal / loose).",
       },
     },
   },

package/dist/components/typography/index.tsx

@@ -28,8 +28,6 @@ export const typographyVariants = cva("", {
     weight: {
       regular: "font-normal",
       medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
     },
     align: {
       left: "text-left",

package/dist/icons/all-icons.tsx

@@ -95,7 +95,7 @@ function InteractiveIcon() {
               <IconComponent className="text-fm-primary h-8 w-8" />
             </div>
             <div>
-              <DialogTitle className="text-fm-primary text-xl font-semibold">
+              <DialogTitle className="text-fm-primary text-xl font-medium">
                 {iconName}
               </DialogTitle>
               <p className="text-fm-tertiary text-sm">
@@ -234,7 +234,7 @@ const IconCategory: React.FC<IconCategoryProps> = ({ category, children }) => {
           className="h-px flex-1"
           style={{ background: "var(--gradient-fm-stroke-neutral)" }}
         />
-        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-secondary-800 rounded-full border px-4 py-2 text-lg font-semibold">
+        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-secondary-800 rounded-full border px-4 py-2 text-lg font-medium">
           {category}
         </h2>
         <div
@@ -271,7 +271,7 @@ const IconGrid: React.FC<IconGridProps> = ({
   return (
     <div className="space-y-6">
       <div className="space-y-2">
-        <h3 className="text-fm-primary text-2xl font-bold">{title}</h3>
+        <h3 className="text-fm-primary text-2xl font-medium">{title}</h3>
         {description && (
           <p className="text-fm-secondary text-sm leading-relaxed">
             {description}
@@ -617,7 +617,9 @@ export const Icons: React.FC = () => {
         />
         <div className="relative mx-auto max-w-7xl px-6 py-16">
           <div className="space-y-6 text-center">
-            <h1 className="text-fm-primary text-5xl font-bold">Icon Library</h1>
+            <h1 className="text-fm-primary text-5xl font-medium">
+              Icon Library
+            </h1>
             <p className="text-fm-secondary mx-auto max-w-3xl text-xl leading-relaxed">
               A comprehensive collection of carefully crafted icons built with
               accessibility in mind. Each icon is optimized for clarity and
@@ -627,21 +629,21 @@ export const Icons: React.FC = () => {
             {/* Stats */}
             <div className="flex items-center justify-center gap-8 pt-8">
               <div className="text-center">
-                <div className="text-fm-icon-brand-secondary text-3xl font-bold">
+                <div className="text-fm-icon-brand-secondary text-3xl font-medium">
                   {totalIcons}
                 </div>
                 <div className="text-fm-tertiary text-sm">Total icons</div>
               </div>
               <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-fm-info text-3xl font-bold">
+                <div className="text-fm-info text-3xl font-medium">
                   {categoryCount}
                 </div>
                 <div className="text-fm-tertiary text-sm">Categories</div>
               </div>
               <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-fm-positive text-3xl font-bold">
+                <div className="text-fm-positive text-3xl font-medium">
                   Accessible
                 </div>
                 <div className="text-fm-tertiary text-sm">Radix UI</div>

package/dist/icons/chain-link-icon/ChainLinkIcon.stories.tsx

@@ -0,0 +1,167 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { ArrowRightUpIcon } from "src/ui/icons/arrow-right-up-icon"
+import { CopyIcon } from "src/ui/icons/copy-icon"
+import { GlobeIcon } from "src/ui/icons/globe-icon"
+import { ShareIcon } from "src/ui/icons/share-icon"
+import {
+  IconColorVariations,
+  IconDefaultCanvas,
+  IconPlaygroundCanvas,
+  IconSizeVariations,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
+import { ChainLinkIcon } from "."
+
+const meta: Meta<typeof ChainLinkIcon> = {
+  title: "Icons/ChainLinkIcon",
+  component: ChainLinkIcon,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "var(--color-fm-surface-primary)" },
+        { name: "darker", value: "var(--color-fm-neutral-0)" },
+        { name: "light", value: "var(--color-fm-neutral-1100)" },
+      ],
+    },
+    docs: {
+      page: () => (
+        <AuralIconDocsPage
+          accentToken="info"
+          features={[
+            {
+              title: "Chain Link Shape",
+              description: "Two-link URL indicator",
+            },
+            { title: "Scalable", description: "Works at any size" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { ChainLinkIcon } from "src/ui/icons/chain-link-icon"
+
+function CopyLinkButton() {
+  return (
+    <button className="flex items-center gap-2">
+      <ChainLinkIcon className="h-4 w-4" />
+      Copy link
+    </button>
+  )
+}`,
+            livePreview: (
+              <button className="bg-fm-surface-secondary border-fm-divider-secondary text-fm-primary font-fm-text flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm">
+                <ChainLinkIcon className="text-fm-icon-active h-4 w-4" />
+                Copy link
+              </button>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "ShareIcon",
+              description: "Share content externally",
+              icon: ShareIcon,
+              accentToken: "info",
+            },
+            {
+              name: "CopyIcon",
+              description: "Duplicate to clipboard",
+              icon: CopyIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "GlobeIcon",
+              description: "Web or URL context",
+              icon: GlobeIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "ArrowRightUpIcon",
+              description: "Open in new tab",
+              icon: ArrowRightUpIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof ChainLinkIcon>
+
+export const Default: Story = {
+  render: (args) => (
+    <IconDefaultCanvas>
+      <ChainLinkIcon className="text-fm-icon-active h-5 w-5" {...args} />
+    </IconDefaultCanvas>
+  ),
+}
+
+export const SizeVariations: Story = {
+  render: () => <IconSizeVariations icon={ChainLinkIcon} />,
+}
+
+export const ColorVariations: Story = {
+  render: () => <IconColorVariations icon={ChainLinkIcon} />,
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <IconUsageCanvas>
+      <IconUsageSection title="Copy Link Button">
+        <button className="bg-fm-surface-secondary border-fm-divider-secondary text-fm-primary font-fm-text flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm">
+          <ChainLinkIcon className="text-fm-icon-active h-4 w-4" />
+          Copy link
+        </button>
+      </IconUsageSection>
+
+      <IconUsageSection title="Inline Link Reference">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm items-center gap-3 rounded-xl border p-4">
+          <ChainLinkIcon className="text-fm-icon-info h-4 w-4 shrink-0" />
+          <span className="text-fm-secondary font-fm-text truncate text-sm">
+            https://pocketfm.com/show/audio-drama
+          </span>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Share Row">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-4">
+          <p className="text-fm-secondary font-fm-text mb-3 text-xs tracking-wider uppercase">
+            Share via
+          </p>
+          <div className="flex flex-col gap-3">
+            {[
+              { label: "Copy link", icon: ChainLinkIcon },
+              { label: "Share externally", icon: ShareIcon },
+            ].map(({ label, icon: Icon }) => (
+              <button
+                key={label}
+                className="text-fm-primary font-fm-text flex items-center gap-3 text-sm"
+              >
+                <span className="bg-fm-surface-tertiary flex h-8 w-8 items-center justify-center rounded-lg">
+                  <Icon className="text-fm-icon-active h-4 w-4" />
+                </span>
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
+  ),
+}
+
+export const Playground: Story = {
+  render: (args) => (
+    <IconPlaygroundCanvas>
+      <ChainLinkIcon className="text-fm-icon-active h-6 w-6" {...args} />
+    </IconPlaygroundCanvas>
+  ),
+}

package/dist/icons/chain-link-icon/index.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface IChainLinkIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ChainLinkIcon = (props: IChainLinkIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="square"
+      {...svgProps}
+    >
+      <path d="M6.5001 3.68247L7.14443 3.03814C8.75084 1.43172 11.3554 1.43172 12.9618 3.03814C14.5682 4.64456 14.5682 7.24907 12.9618 8.85548L12.316 9.50124M3.68582 6.49674L3.03806 7.1445C1.43165 8.75092 1.43165 11.3554 3.03806 12.9618C4.64448 14.5683 7.24899 14.5683 8.85541 12.9618L9.49843 12.3188M6.33325 9.66666L9.66658 6.33333" />
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Chain link icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/chain-link-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}

package/dist/icons/clock-icon/ClockIcon.stories.tsx

@@ -0,0 +1,210 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { BackwardTenSecondsIcon } from "src/ui/icons/backward-ten-seconds-icon"
+import { ForwardTenSecondsIcon } from "src/ui/icons/forward-ten-seconds-icon"
+import { NotepadIcon } from "src/ui/icons/notepad-icon"
+import { SpinnerSolidIcon } from "src/ui/icons/spinner-solid-icon"
+import {
+  IconColorVariations,
+  IconDefaultCanvas,
+  IconPlaygroundCanvas,
+  IconSizeVariations,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
+import { ClockIcon } from "."
+
+const meta: Meta<typeof ClockIcon> = {
+  title: "Icons/ClockIcon",
+  component: ClockIcon,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "var(--color-fm-surface-primary)" },
+        { name: "darker", value: "var(--color-fm-neutral-0)" },
+        { name: "light", value: "var(--color-fm-neutral-1100)" },
+      ],
+    },
+    docs: {
+      page: () => (
+        <AuralIconDocsPage
+          accentToken="info"
+          features={[
+            {
+              title: "Time & Schedule",
+              description: "Represents time-based UI",
+            },
+            { title: "Compact Shape", description: "Crisp at small sizes" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { ClockIcon } from "src/ui/icons/clock-icon"
+
+function PublishedAt({ time }: { time: string }) {
+  return (
+    <span className="flex items-center gap-1.5">
+      <ClockIcon className="h-4 w-4 text-fm-icon-inactive" />
+      <span className="text-fm-secondary text-sm">{time}</span>
+    </span>
+  )
+}`,
+            livePreview: (
+              <span className="flex items-center gap-1.5">
+                <ClockIcon className="text-fm-icon-inactive h-4 w-4" />
+                <span className="text-fm-secondary font-fm-text text-sm">
+                  2 hours ago
+                </span>
+              </span>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "BackwardTenSecondsIcon",
+              description: "Rewind ten seconds",
+              icon: BackwardTenSecondsIcon,
+              accentToken: "info",
+            },
+            {
+              name: "ForwardTenSecondsIcon",
+              description: "Skip ten seconds ahead",
+              icon: ForwardTenSecondsIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "SpinnerSolidIcon",
+              description: "Loading / waiting state",
+              icon: SpinnerSolidIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "NotepadIcon",
+              description: "Notes and scheduling",
+              icon: NotepadIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: "text",
+      description: "CSS classes including color token",
+    },
+    withAccessibility: {
+      control: "boolean",
+      description: "Wrap with accessibility label",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ClockIcon>
+
+export const Default: Story = {
+  args: {
+    className: "h-6 w-6 text-fm-icon-active",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconDefaultCanvas>
+      <ClockIcon {...args} />
+    </IconDefaultCanvas>
+  ),
+}
+
+export const SizeVariations: Story = {
+  render: () => <IconSizeVariations icon={ClockIcon} />,
+}
+
+export const ColorVariations: Story = {
+  render: () => <IconColorVariations icon={ClockIcon} />,
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <IconUsageCanvas>
+      <IconUsageSection title="Timestamp Label">
+        <span className="flex items-center gap-1.5">
+          <ClockIcon className="text-fm-icon-inactive h-4 w-4" />
+          <span className="text-fm-secondary font-fm-text text-sm">
+            2 hours ago
+          </span>
+        </span>
+      </IconUsageSection>
+
+      <IconUsageSection title="Episode Duration">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm items-center gap-3 rounded-xl border px-4 py-3">
+          <div className="bg-fm-surface-primary h-10 w-10 flex-none rounded-lg" />
+          <div className="min-w-0 flex-1">
+            <p className="text-fm-primary font-fm-text truncate text-sm font-medium">
+              The Morning Show
+            </p>
+            <span className="text-fm-tertiary font-fm-text flex items-center gap-1 text-xs">
+              <ClockIcon className="text-fm-icon-inactive h-3 w-3" />
+              45 min
+            </span>
+          </div>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Scheduled Release">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border px-4 py-3">
+          <div className="flex items-center justify-between">
+            <span className="text-fm-primary font-fm-text text-sm font-medium">
+              Episode 12
+            </span>
+            <span className="text-fm-icon-info bg-fm-icon-info/10 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+              <ClockIcon className="h-3 w-3" />
+              Scheduled
+            </span>
+          </div>
+          <p className="text-fm-tertiary font-fm-text mt-1 text-xs">
+            Publishes on May 10 at 9:00 AM
+          </p>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Listening History">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm divide-y rounded-xl border">
+          {["Yesterday", "2 days ago", "Last week"].map((time) => (
+            <div
+              key={time}
+              className="flex items-center gap-3 px-4 py-3 first:rounded-t-xl last:rounded-b-xl"
+            >
+              <div className="bg-fm-surface-primary h-8 w-8 flex-none rounded-lg" />
+              <div className="min-w-0 flex-1">
+                <p className="text-fm-primary font-fm-text truncate text-sm">
+                  Episode Title
+                </p>
+              </div>
+              <span className="text-fm-tertiary font-fm-text flex flex-none items-center gap-1 text-xs">
+                <ClockIcon className="text-fm-icon-inactive h-3 w-3" />
+                {time}
+              </span>
+            </div>
+          ))}
+        </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
+  ),
+}
+
+export const Playground: Story = {
+  args: {
+    className: "h-8 w-8 text-fm-icon-active",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconPlaygroundCanvas>
+      <ClockIcon {...args} />
+    </IconPlaygroundCanvas>
+  ),
+}

package/dist/icons/clock-icon/index.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface IClockIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ClockIcon = (props: IClockIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      viewBox="0 0 11 11"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...svgProps}
+    >
+      <path d="M5.625 3V2.5H4.625V3H5.125H5.625ZM5.125 5.125H4.625V5.33211L4.77145 5.47855L5.125 5.125ZM6.14645 6.85355C6.34171 7.04882 6.65829 7.04882 6.85355 6.85355C7.04882 6.65829 7.04882 6.34171 6.85355 6.14645L6.5 6.5L6.14645 6.85355ZM9.75 5.125H9.25C9.25 7.40317 7.40317 9.25 5.125 9.25V9.75V10.25C7.95546 10.25 10.25 7.95546 10.25 5.125H9.75ZM5.125 9.75V9.25C2.84683 9.25 1 7.40317 1 5.125H0.5H0C0 7.95546 2.29454 10.25 5.125 10.25V9.75ZM0.5 5.125H1C1 2.84683 2.84683 1 5.125 1V0.5V0C2.29454 0 0 2.29454 0 5.125H0.5ZM5.125 0.5V1C7.40317 1 9.25 2.84683 9.25 5.125H9.75H10.25C10.25 2.29454 7.95546 0 5.125 0V0.5ZM5.125 3H4.625V5.125H5.125H5.625V3H5.125ZM5.125 5.125L4.77145 5.47855L6.14645 6.85355L6.5 6.5L6.85355 6.14645L5.47855 4.77145L5.125 5.125Z" />
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Clock icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/clock-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}