aural-ui 4.2.4 → 4.4.0

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"

package/dist/icons/site-logo-icon/SiteLogoIcon.stories.tsx

@@ -46,7 +46,7 @@ function Header() {
   return (
     <header className="flex items-center gap-2">
       <SiteLogoIcon className="h-8 w-8" />
-      <span className="text-fm-primary font-fm-text font-semibold">
+      <span className="text-fm-primary font-fm-text font-medium">
         Pocket FM
       </span>
     </header>
@@ -164,7 +164,7 @@ export const UsageExamples: Story = {
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm items-center justify-between rounded-xl border px-4 py-3">
           <div className="flex items-center gap-2">
             <SiteLogoIcon className="h-8 w-8" />
-            <span className="text-fm-primary font-fm-text text-sm font-semibold">
+            <span className="text-fm-primary font-fm-text text-sm font-medium">
               Pocket FM
             </span>
           </div>
@@ -174,7 +174,7 @@ export const UsageExamples: Story = {
       <IconUsageSection title="Login Screen Branding">
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm flex-col items-center gap-3 rounded-xl border p-6">
           <SiteLogoIcon className="h-16 w-16" />
-          <div className="text-fm-primary font-fm-text text-lg font-semibold">
+          <div className="text-fm-primary font-fm-text text-lg font-medium">
             Welcome to Pocket FM
           </div>
           <div className="text-fm-secondary font-fm-text text-sm">

package/dist/icons/underline-icon/UnderlineIcon.stories.tsx

@@ -0,0 +1,238 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { CapitalALetterIcon } from "src/ui/icons/capital-a-letter-icon"
+import { FileTextIcon } from "src/ui/icons/file-text-icon"
+import { TextColorIcon } from "src/ui/icons/text-color-icon"
+import { TextIndicatorIcon } from "src/ui/icons/text-indicator-icon"
+import {
+  IconDefaultCanvas,
+  IconPlaygroundCanvas,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
+import { UnderlineIcon } from "."
+
+const meta: Meta<typeof UnderlineIcon> = {
+  title: "Icons/UnderlineIcon",
+  component: UnderlineIcon,
+  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="warning"
+          features={[
+            { title: "Gradient Stroke", description: "Custom gradient colors" },
+            { title: "Decorative Mark", description: "Accent underline style" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { UnderlineIcon } from "src/ui/icons/underline-icon"
+
+function HighlightedHeading() {
+  return (
+    <span className="relative inline-block pb-1">
+      <span className="text-fm-primary font-fm-brand text-2xl font-bold">
+        Featured
+      </span>
+      <UnderlineIcon
+        className="absolute left-0 h-1 w-7.5"
+        withAccessibility={false}
+      />
+    </span>
+  )
+}`,
+            livePreview: (
+              <span className="relative inline-block pb-1">
+                <span className="text-fm-primary font-fm-brand text-2xl font-bold">
+                  Featured
+                </span>
+                <UnderlineIcon
+                  className="absolute left-0 h-1 w-7.5"
+                  withAccessibility={false}
+                />
+              </span>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "TextColorIcon",
+              description: "Text formatting accent",
+              icon: TextColorIcon,
+              accentToken: "info",
+            },
+            {
+              name: "CapitalALetterIcon",
+              description: "Typography size marker",
+              icon: CapitalALetterIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "TextIndicatorIcon",
+              description: "Inline text indicator",
+              icon: TextIndicatorIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "FileTextIcon",
+              description: "Document with text",
+              icon: FileTextIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    fromColor: {
+      control: "color",
+      description: "Gradient start color",
+    },
+    toColor: {
+      control: "color",
+      description: "Gradient end color",
+    },
+    width: {
+      control: { type: "range", min: 30, max: 400, step: 10 },
+      description: "Width in pixels — keep ~7:1 ratio with height",
+    },
+    height: {
+      control: { type: "range", min: 4, max: 60, step: 1 },
+      description: "Height in pixels — keep ~7:1 ratio with width",
+    },
+    withAccessibility: {
+      control: "boolean",
+      description: "Wrap with accessibility label",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof UnderlineIcon>
+
+// Natural viewBox is 32 × 5 (6.4:1). Default uses 3× scale (96 × 15).
+export const Default: Story = {
+  args: {
+    width: 96,
+    height: 15,
+    fromColor: "#F9FFB8",
+    toColor: "#CFFF3F",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconDefaultCanvas>
+      <UnderlineIcon {...args} />
+    </IconDefaultCanvas>
+  ),
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <IconUsageCanvas>
+      <IconUsageSection title="Decorated Heading">
+        <div className="space-y-2">
+          <span className="relative inline-block pb-1">
+            <h2 className="text-fm-primary font-fm-brand text-2xl font-bold">
+              Our Story
+            </h2>
+            <UnderlineIcon
+              className="absolute left-0 h-1 w-7.5"
+              withAccessibility={false}
+            />
+          </span>
+          <p className="text-fm-secondary font-fm-text text-sm">
+            Building the future of audio entertainment.
+          </p>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Feature Card Accent">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-5">
+          <div className="mb-3">
+            <span className="relative inline-block pb-1">
+              <span className="text-fm-primary font-fm-brand text-base font-semibold">
+                Premium Audio
+              </span>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+          </div>
+          <p className="text-fm-secondary font-fm-text text-sm leading-relaxed">
+            Immersive listening experience crafted for creators.
+          </p>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Highlighted Quote">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-5">
+          <div className="flex flex-col gap-3">
+            <span className="relative inline-block self-start pb-1">
+              <blockquote className="text-fm-primary font-fm-text text-sm italic">
+                &ldquo;Audio is the future.&rdquo;
+              </blockquote>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+            <span className="text-fm-secondary font-fm-text text-xs">
+              — Product Team
+            </span>
+          </div>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Section Label Accent">
+        <div className="flex flex-wrap gap-6">
+          {["Discover", "Trending", "For You"].map((label) => (
+            <span key={label} className="relative inline-block pb-1">
+              <span className="text-fm-primary font-fm-brand text-lg font-semibold">
+                {label}
+              </span>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+          ))}
+        </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
+  ),
+}
+
+export const Playground: Story = {
+  args: {
+    width: 192,
+    height: 30,
+    fromColor: "#F9FFB8",
+    toColor: "#CFFF3F",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconPlaygroundCanvas>
+      <UnderlineIcon {...args} />
+    </IconPlaygroundCanvas>
+  ),
+}

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

@@ -0,0 +1,58 @@
+import React, { useId } from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface IUnderlineIconProps extends React.SVGProps<SVGSVGElement> {
+  fromColor?: string
+  toColor?: string
+  withAccessibility?: boolean
+}
+
+export const UnderlineIcon = (props: IUnderlineIconProps) => {
+  const {
+    fromColor = "#F9FFB8",
+    toColor = "#CFFF3F",
+    withAccessibility = true,
+    id: idProp,
+    ...svgProps
+  } = props
+
+  const autoId = useId()
+  const gradientId = `underline-gradient-${idProp ?? autoId}`
+
+  const svg = (
+    <svg
+      viewBox="0 0 32 5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...svgProps}
+    >
+      <path
+        d="M0.499845 2.55202C0.499845 2.55202 13.9101 0.777228 21.7693 0.643631C29.6284 0.510034 31.7935 0.279256 30.6512 1.00823C29.509 1.73721 24.0827 4.08102 24.6916 4.06392C25.3005 4.04681 30.6783 4.04011 30.6783 4.04011"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={1}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="1.76936"
+          y1="3.77954"
+          x2="6.01158"
+          y2="-7.79593"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop style={{ stopColor: fromColor }} />
+          <stop offset="1" style={{ stopColor: toColor }} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Underline icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

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

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