aural-ui 4.2.3 → 4.2.5

package/dist/components/index.ts

@@ -23,9 +23,9 @@ export * from "./if-else"
 export * from "./label"
 export * from "./list"
 export * from "./marquee"
+export * from "./offer-label"
 export * from "./otp-inputs"
 export * from "./overlay"
-export * from "./otp-inputs"
 export * from "./pagination"
 export * from "./popover"
 export * from "./radio"

package/dist/components/offer-label/OfferLabel.stories.tsx

@@ -0,0 +1,267 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
+import { OfferLabel } from "."
+
+const meta: Meta<typeof OfferLabel> = {
+  title: "Components/UI/OfferLabel",
+  component: OfferLabel,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An inline label that renders text with a decorative gradient underline stroke beneath it — ideal for surfacing promotional copy, highlighted offers, or key phrases.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Gradient Underline",
+              description: "Animated SVG accent",
+            },
+            {
+              title: "Composable Text",
+              description: "Accepts any className",
+            },
+            {
+              title: "SSR Safe",
+              description: "Stable gradient ID prop",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "The label text to display",
+    },
+    className: {
+      control: "text",
+      description: "CSS classes applied to the inner text span",
+    },
+    iconId: {
+      control: "text",
+      description: "Optional stable ID for the underline gradient",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof OfferLabel>
+
+// ─── 1. Playground ────────────────────────────────────────────────────────────
+
+export const Playground: Story = {
+  args: {
+    text: "Limited Offer",
+    className:
+      "text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-bold",
+  },
+  render: (args) => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="flex justify-center py-4">
+        <OfferLabel {...args} />
+      </div>
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+        <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">{`<OfferLabel text="${args.text}" className="${args.className ?? ""}" />`}</code>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Adjust the text and className using the controls panel in the sidebar.",
+      },
+    },
+  },
+}
+
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Typography Scale
+        </h4>
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Headline"
+              className="text-fm-primary font-fm-brand text-fm-4xl leading-fm-4xl font-bold"
+              iconId="variant-4xl"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              4xl / bold
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Subheading"
+              className="text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-semibold"
+              iconId="variant-2xl"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              2xl / semibold
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Body label"
+              className="text-fm-primary font-fm-text text-fm-lg leading-fm-lg font-medium"
+              iconId="variant-lg"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              lg / medium
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Small"
+              className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm"
+              iconId="variant-sm"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              sm / regular
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Text Color
+        </h4>
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Primary"
+              className="text-fm-primary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-primary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-primary
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Secondary"
+              className="text-fm-secondary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-secondary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-secondary
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <OfferLabel
+              text="Tertiary"
+              className="text-fm-tertiary font-fm-brand text-fm-2xl leading-fm-2xl font-bold"
+              iconId="color-tertiary"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              text-fm-tertiary
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "OfferLabel across different type scales and text color tokens — the gradient underline adapts naturally to each.",
+      },
+    },
+  },
+}
+
+// ─── 3. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Promotional Hero Banner
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-3 rounded-xl border p-6 text-center">
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm tracking-widest uppercase">
+            Pocket FM Premium
+          </p>
+          <div className="flex justify-center">
+            <OfferLabel
+              text="3 Months Free"
+              className="text-fm-primary font-fm-brand text-fm-4xl leading-fm-4xl font-bold"
+              iconId="use-case-hero"
+            />
+          </div>
+          <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+            Unlock unlimited access to all audio stories.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Inline Promotional Copy
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md rounded-xl border p-5">
+          <p className="text-fm-primary font-fm-text text-fm-lg leading-fm-xl">
+            Subscribe today and get{" "}
+            <OfferLabel
+              text="50% off"
+              className="text-fm-primary font-fm-brand text-fm-lg leading-fm-xl font-semibold"
+              iconId="use-case-inline"
+            />{" "}
+            your first month — no strings attached.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Pricing Card Highlight
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-sm space-y-4 rounded-xl border p-6">
+          <div className="space-y-1">
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm tracking-widest uppercase">
+              Annual Plan
+            </p>
+            <div className="flex items-baseline gap-1">
+              <OfferLabel
+                text="₹999"
+                className="text-fm-primary font-fm-brand text-fm-5xl leading-fm-5xl font-bold"
+                iconId="use-case-price"
+              />
+              <span className="text-fm-secondary font-fm-text text-fm-md leading-fm-md">
+                / year
+              </span>
+            </div>
+          </div>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+            Save 40% compared to the monthly plan.
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world usage: promotional hero banners, inline highlighted copy, and pricing card accents.",
+      },
+    },
+  },
+}

package/dist/components/offer-label/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { UnderlineIcon } from "@icons/underline-icon"
+import { cn } from "@lib/utils"
+
+export interface IOfferLabelProps {
+  className?: string
+  iconClass?: string
+  /**
+   * Optional stable ID for the underline gradient. Can help if SSR hydration mismatches occur.
+   */
+  iconId?: string
+  text: string
+}
+
+export function OfferLabel({
+  text,
+  className,
+  iconId,
+  iconClass,
+}: IOfferLabelProps) {
+  return (
+    <span className="relative inline-block pb-1">
+      <span className={className}>{text}</span>
+      <UnderlineIcon
+        id={iconId}
+        aria-hidden="true"
+        withAccessibility={false}
+        className={cn("absolute left-0 w-8", iconClass)}
+      />
+    </span>
+  )
+}

package/dist/components/offer-label/meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["underline-icon"],
+  tokens: [],
+}

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