aural-ui 4.2.3 → 4.2.5

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: [],
+}

package/dist/icons/headphone-icon/HeadphoneIcon.stories.tsx

@@ -0,0 +1,186 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { AudioBarIcon } from "src/ui/icons/audio-bar-icon"
+import { HeadIcon } from "src/ui/icons/head-icon"
+import { MusicalNoteIcon } from "src/ui/icons/musical-note-icon"
+import { VolumeFullIcon } from "src/ui/icons/volume-full-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 { HeadphoneIcon } from "."
+
+const meta: Meta<typeof HeadphoneIcon> = {
+  title: "Icons/HeadphoneIcon",
+  component: HeadphoneIcon,
+  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: "Audio Listening", description: "Headphone idle state" },
+            { title: "Navigation", description: "Tab bar unselected state" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { HeadphoneIcon } from "src/ui/icons/headphone-icon"
+
+function ListenTab() {
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <HeadphoneIcon className="h-6 w-6 text-fm-icon-inactive" />
+      <span className="text-fm-secondary text-xs">Listen</span>
+    </div>
+  )
+}`,
+            livePreview: (
+              <div className="flex flex-col items-center gap-1">
+                <HeadphoneIcon className="text-fm-icon-inactive h-6 w-6" />
+                <span className="text-fm-secondary font-fm-text text-xs">
+                  Listen
+                </span>
+              </div>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "AudioBarIcon",
+              description: "Audio playback bars",
+              icon: AudioBarIcon,
+              accentToken: "info",
+            },
+            {
+              name: "VolumeFullIcon",
+              description: "Full volume indicator",
+              icon: VolumeFullIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "MusicalNoteIcon",
+              description: "Music / audio content",
+              icon: MusicalNoteIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "HeadIcon",
+              description: "Narrator or character",
+              icon: HeadIcon,
+              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 HeadphoneIcon>
+
+export const Default: Story = {
+  args: {
+    className: "h-6 w-6 text-fm-icon-inactive",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconDefaultCanvas>
+      <HeadphoneIcon {...args} />
+    </IconDefaultCanvas>
+  ),
+}
+
+export const SizeVariations: Story = {
+  render: () => <IconSizeVariations icon={HeadphoneIcon} />,
+}
+
+export const ColorVariations: Story = {
+  render: () => <IconColorVariations icon={HeadphoneIcon} />,
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <IconUsageCanvas>
+      <IconUsageSection title="Tab Bar Navigation">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm items-center justify-around rounded-xl border px-4 py-3">
+          {["Home", "Listen", "Library"].map((label, i) => (
+            <div key={label} className="flex flex-col items-center gap-1">
+              <HeadphoneIcon
+                className={`h-6 w-6 ${i === 1 ? "text-fm-icon-active" : "text-fm-icon-inactive"}`}
+              />
+              <span
+                className={`font-fm-text text-xs ${i === 1 ? "text-fm-primary" : "text-fm-secondary"}`}
+              >
+                {label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Audio Player Header">
+        <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">
+          <div className="bg-fm-divider-secondary flex h-10 w-10 items-center justify-center rounded-full">
+            <HeadphoneIcon className="text-fm-icon-inactive h-5 w-5" />
+          </div>
+          <div>
+            <div className="text-fm-primary font-fm-text text-sm font-medium">
+              Now Playing
+            </div>
+            <div className="text-fm-secondary font-fm-text text-xs">
+              Tap to open player
+            </div>
+          </div>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Empty State">
+        <div className="flex flex-col items-center gap-3 py-4">
+          <HeadphoneIcon className="text-fm-icon-inactive h-12 w-12" />
+          <p className="text-fm-secondary font-fm-text text-sm">
+            No audio playing
+          </p>
+        </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
+  ),
+}
+
+export const Playground: Story = {
+  args: {
+    className: "h-8 w-8 text-fm-icon-inactive",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconPlaygroundCanvas>
+      <HeadphoneIcon {...args} />
+    </IconPlaygroundCanvas>
+  ),
+}

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

@@ -0,0 +1,49 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface IHeadphoneIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const HeadphoneIcon = (props: IHeadphoneIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...svgProps}
+    >
+      <path
+        d="M3 18V11C3 8.61305 3.94821 6.32387 5.63604 4.63604C7.32387 2.94821 9.61305 2 12 2C14.3869 2 16.6761 2.94821 18.364 4.63604C20.0518 6.32387 21 8.61305 21 11V18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H18C17.4696 21 16.9609 20.7893 16.5858 20.4142C16.2107 20.0391 16 19.5304 16 19V16C16 15.4696 16.2107 14.9609 16.5858 14.5858C16.9609 14.2107 17.4696 14 18 14H21V19ZM3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H6C6.53043 21 7.03914 20.7893 7.41421 20.4142C7.78929 20.0391 8 19.5304 8 19V16C8 15.4696 7.78929 14.9609 7.41421 14.5858C7.03914 14.2107 6.53043 14 6 14H3V19Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 22V7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Headphone Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/headphone-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/index.ts

@@ -16,14 +16,16 @@ export * from "./bubble-crossed-icon"
 export * from "./bubble-sparkle-icon"
 export * from "./camera-icon"
 export * from "./capital-a-letter-icon"
+export * from "./chain-link-icon"
 export * from "./chevron-double-left-icon"
 export * from "./chevron-double-right-icon"
 export * from "./chevron-down-icon"
 export * from "./chevron-left-icon"
-export * from "./circular-play-icon"
 export * from "./chevron-right-icon"
 export * from "./chevron-up-icon"
 export * from "./circle-tick-icon"
+export * from "./circular-play-icon"
+export * from "./clock-icon"
 export * from "./column-wide-add-icon"
 export * from "./coin-icon"
 export * from "./coin-toons-icon"
@@ -47,6 +49,7 @@ export * from "./globe-icon"
 export * from "./google-logo-icon"
 export * from "./grip-vertical-icon"
 export * from "./head-icon"
+export * from "./headphone-icon"
 export * from "./heart-icon"
 export * from "./image-avatar-sparkle-icon"
 export * from "./image-icon"
@@ -103,6 +106,7 @@ export * from "./tick-circle-icon"
 export * from "./tick-icon"
 export * from "./trash-icon"
 export * from "./twitter-x-icon"
+export * from "./underline-icon"
 export * from "./upload-icon"
 export * from "./vertical-menu-icon"
 export * from "./video-play-list-icon"