aural-ui 2.0.0

package/dist/components/tooltip/index.tsx

@@ -0,0 +1,304 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cva } from "class-variance-authority"
+
+const tooltipVariants = cva(
+  "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-fm-s text-balance popover-content min-h-11 p-3 [font-size:var(--text-fm-sm)] leading-fm-sm font-fm-text flex items-center gap-2",
+  {
+    variants: {
+      variant: {
+        dark: "bg-fm-surface-secondary text-fm-primary",
+        light: "bg-fm-primary text-fm-contrast",
+      },
+      side: {
+        top: "",
+        right: "",
+        bottom: "",
+        left: "",
+      },
+      align: {
+        start: "",
+        center: "",
+        end: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "dark",
+        side: "top",
+        align: "center",
+        className:
+          "bg-[radial-gradient(70.39%_86.36%_at_50%_97.73%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "top",
+        align: "start",
+        className:
+          "bg-[radial-gradient(139.94%_91.41%_at_24.52%_100%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "top",
+        align: "end",
+        className:
+          "bg-[radial-gradient(144.29%_88.59%_at_76.44%_98.86%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "right",
+        className:
+          "bg-[radial-gradient(227.67%_50%_at_0%_50%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "left",
+        className:
+          "bg-[radial-gradient(214.53%_47.12%_at_97.12%_50%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "bottom",
+        align: "center",
+        className:
+          "bg-[radial-gradient(65.76%_80.68%_at_50.21%_3.41%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "bottom",
+        align: "start",
+        className:
+          "bg-[radial-gradient(133.68%_87.79%_at_25%_0%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      {
+        variant: "dark",
+        side: "bottom",
+        align: "end",
+        className:
+          "bg-[radial-gradient(130.2%_87.53%_at_74.52%_0%,var(--color-fm-secondary-200)_0%,rgba(29,29,29,0.02)_100%)]",
+      },
+      // Light variants
+      {
+        variant: "light",
+        side: "top",
+        align: "center",
+        className:
+          "bg-[radial-gradient(81.99%_100%_at_50%_100%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "top",
+        align: "start",
+        className:
+          "bg-[linear-gradient(253deg,rgba(255,255,255,0.00)_35.74%,rgba(197,138,255,0.40)_76.76%),radial-gradient(153.27%_103.56%_at_23.08%_100%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "top",
+        align: "end",
+        className:
+          "bg-[linear-gradient(105deg,rgba(255,255,255,0.00)_30.68%,rgba(197,138,255,0.40)_75.77%),radial-gradient(141.12%_102.46%_at_76.44%_100%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "right",
+        className:
+          "bg-[radial-gradient(339.53%_74.52%_at_2.88%_50%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "left",
+        className:
+          "bg-[radial-gradient(330.77%_72.6%_at_95.19%_50%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "bottom",
+        align: "center",
+        className:
+          "bg-[radial-gradient(79.28%_96.59%_at_50.21%_3.41%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "bottom",
+        align: "start",
+        className:
+          "bg-[linear-gradient(285deg,rgba(255,255,255,0.00)_32.13%,rgba(197,138,255,0.40)_74.24%),radial-gradient(133.78%_103.03%_at_25%_0%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+      {
+        variant: "light",
+        side: "bottom",
+        align: "end",
+        className:
+          "bg-[linear-gradient(75deg,rgba(255,255,255,0.00)_29.62%,rgba(197,138,255,0.40)_75.3%),radial-gradient(150.37%_103.37%_at_75.96%_0%,var(--color-fm-secondary-800)_0%,rgba(255,255,255,0.02)_100%)]",
+      },
+    ],
+    defaultVariants: {
+      variant: "dark",
+      side: "top",
+      align: "center",
+    },
+  }
+)
+
+function DarkArrow(props: React.ComponentProps<typeof TooltipPrimitive.Arrow>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="9"
+      viewBox="0 0 18 9"
+      fill="none"
+      {...props}
+    >
+      <path d="M9 9L18 0H9H0L9 9Z" fill="var(--color-fm-neutral-100)" />
+      <path d="M9 9L18 0H9H0L9 9Z" fill="var(--color-fm-secondary-200)" />
+      <path
+        d="M1.20703 0.5H16.793L9 8.29297L1.20703 0.5Z"
+        stroke="var(--color-fm-neutral-1100)"
+        strokeOpacity="0.04"
+      />
+      <path
+        d="M9.00117 7.5L16.6172 0H1.3668L9.00117 7.5Z"
+        fill="url(#paint0_linear_2648_50933)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2648_50933"
+          x1="1.5"
+          y1="0.5"
+          x2="16.5"
+          y2="0.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#350565" />
+          <stop offset="0.502442" stopColor="var(--color-fm-secondary-200)" />
+          <stop offset="1" stopColor="#350663" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+function LightArrow(
+  props: React.ComponentProps<typeof TooltipPrimitive.Arrow>
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="9"
+      viewBox="0 0 18 9"
+      fill="none"
+      {...props}
+    >
+      <path d="M9 9L18 0H9H0L9 9Z" fill="var(--color-fm-secondary-800)" />
+      <path
+        d="M1.20703 0.5H16.793L9 8.29297L1.20703 0.5Z"
+        stroke="var(--color-fm-neutral-50)"
+        strokeOpacity="0.02"
+      />
+      <path
+        d="M9.00117 7.5L16.6172 0H1.3668L9.00117 7.5Z"
+        fill="url(#paint0_linear_2648_52230)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2648_52230"
+          x1="2"
+          y1="0.5"
+          x2="16"
+          y2="0.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#C992FF" />
+          <stop offset="0.499825" stopColor="var(--color-fm-secondary-800)" />
+          <stop offset="1" stopColor="#CE9CFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+const TooltipContext = React.createContext<{
+  variant: "dark" | "light"
+}>({
+  variant: "dark",
+})
+
+interface ToolTipProps
+  extends React.ComponentProps<typeof TooltipPrimitive.Root> {
+  variant?: "dark" | "light"
+}
+
+const useTooltipContext = () => {
+  const context = React.useContext(TooltipContext)
+  if (!context) {
+    throw new Error("Tooltip components must be used within a TooltipProvider")
+  }
+  return context
+}
+
+function Tooltip({ variant = "dark", ...props }: ToolTipProps) {
+  return (
+    <TooltipContext.Provider value={{ variant }}>
+      <TooltipProvider>
+        <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+      </TooltipProvider>
+    </TooltipContext.Provider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  side,
+  align,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const { variant } = useTooltipContext()
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        side={side}
+        align={align}
+        className={cn(tooltipVariants({ variant, side, align }), className)}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow asChild>
+          {variant === "dark" ? (
+            <DarkArrow className="h-2 w-6" />
+          ) : (
+            <LightArrow className="h-2 w-6" />
+          )}
+        </TooltipPrimitive.Arrow>
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/dist/components/tooltip/meta.ts

@@ -0,0 +1,21 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-tooltip": "^1.2.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-contrast",
+    "--color-fm-neutral-50",
+    "--color-fm-neutral-100",
+    "--color-fm-primary",
+    "--color-fm-secondary-200",
+    "--color-fm-secondary-800",
+    "--color-fm-surface-secondary",
+    "--font-fm-text",
+    "--leading-fm-sm",
+    "--radius-fm-s",
+    "--text-fm-sm",
+    ".popover-content",
+  ],
+}

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

@@ -0,0 +1,197 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import {
+  BodyLarge,
+  BodyMedium,
+  BodySmall,
+  CaptionLarge,
+  CaptionMedium,
+  CaptionSmall,
+  DisplayLarge,
+  DisplayMedium,
+  DisplaySmall,
+  LabelLarge,
+  LabelMedium,
+  LabelSmall,
+  TitleLarge,
+  TitleMedium,
+  TitleSmall,
+  Typography,
+} from "./index"
+
+const meta: Meta<typeof Typography> = {
+  title: "Components/UI/Typography",
+  component: Typography,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "display-large",
+        "display-medium",
+        "display-small",
+        "title-large",
+        "title-medium",
+        "title-small",
+        "label-large",
+        "label-medium",
+        "label-small",
+        "body-large",
+        "body-medium",
+        "body-small",
+        "caption-large",
+        "caption-medium",
+        "caption-small",
+      ],
+    },
+    weight: {
+      control: "select",
+      options: ["regular", "medium", "semibold", "bold"],
+    },
+    align: {
+      control: "radio",
+      options: ["left", "center", "right"],
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "contrast", "inactive"],
+    },
+    transform: {
+      control: "select",
+      options: ["uppercase", "lowercase", "capitalize", "normal"],
+    },
+    lineHeight: {
+      control: "select",
+      options: ["tight", "normal", "loose"],
+    },
+    wrap: {
+      control: "select",
+      options: ["normal", "nowrap", "wrap", "pretty", "balance"],
+    },
+    as: {
+      control: "select",
+      options: ["p", "span", "div", "h1", "h2", "h3", "h4", "h5", "h6"],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Typography>
+
+export const Default: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog",
+    variant: "body-medium",
+    weight: "regular",
+    color: "primary",
+    align: "left",
+  },
+}
+
+export const AllVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-6 p-4">
+      <div className="space-y-4">
+        <DisplayLarge className="mb-2">Display Large</DisplayLarge>
+        <DisplayMedium className="mb-2">Display Medium</DisplayMedium>
+        <DisplaySmall className="mb-2">Display Small</DisplaySmall>
+      </div>
+
+      <div className="space-y-4">
+        <TitleLarge className="mb-2">Title Large</TitleLarge>
+        <TitleMedium className="mb-2">Title Medium</TitleMedium>
+        <TitleSmall className="mb-2">Title Small</TitleSmall>
+      </div>
+
+      <div className="space-y-4">
+        <LabelLarge className="mb-2 block">Label Large</LabelLarge>
+        <LabelMedium className="mb-2 block">Label Medium</LabelMedium>
+        <LabelSmall className="mb-2 block">Label Small</LabelSmall>
+      </div>
+
+      <div className="space-y-4">
+        <BodyLarge className="mb-2">Body Large</BodyLarge>
+        <BodyMedium className="mb-2">Body Medium</BodyMedium>
+        <BodySmall className="mb-2">Body Small</BodySmall>
+      </div>
+
+      <div className="space-y-4">
+        <CaptionLarge className="mb-2 block">Caption Large</CaptionLarge>
+        <CaptionMedium className="mb-2 block">Caption Medium</CaptionMedium>
+        <CaptionSmall className="mb-2 block">Caption Small</CaptionSmall>
+      </div>
+    </div>
+  )
+}
+
+export const WeightVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-4 p-4">
+      <Typography weight="regular">Regular weight text</Typography>
+      <Typography weight="medium">Medium weight text</Typography>
+      <Typography weight="semibold">Semibold weight text</Typography>
+      <Typography weight="bold">Bold weight text</Typography>
+    </div>
+  )
+}
+
+export const ColorVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-4 p-4">
+      <Typography color="primary">Primary color text</Typography>
+      <Typography color="secondary">Secondary color text</Typography>
+      <Typography color="tertiary">Tertiary color text</Typography>
+      <Typography color="contrast">Contrast color text</Typography>
+      <Typography color="inactive">Inactive color text</Typography>
+    </div>
+  )
+}
+
+export const AlignmentVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-4 p-4">
+      <Typography align="left">Left aligned text</Typography>
+      <Typography align="center">Center aligned text</Typography>
+      <Typography align="right">Right aligned text</Typography>
+    </div>
+  )
+}
+
+export const TransformVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-4 p-4">
+      <Typography transform="uppercase">Uppercase text</Typography>
+      <Typography transform="lowercase">
+        Lowercase Text Will Appear Here
+      </Typography>
+      <Typography transform="capitalize">capitalize each word</Typography>
+      <Typography transform="normal">Normal text transform</Typography>
+    </div>
+  )
+}
+
+export const LineHeightVariants = () => {
+  return (
+    <div className="bg-fm-surface-primary flex flex-col gap-8 p-4">
+      <Typography lineHeight="tight">
+        Tight line height. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie
+        vehicula.
+      </Typography>
+      <Typography lineHeight="normal">
+        Normal line height. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie
+        vehicula.
+      </Typography>
+      <Typography lineHeight="loose">
+        Loose line height. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie
+        vehicula.
+      </Typography>
+    </div>
+  )
+}

package/dist/components/typography/index.tsx

@@ -0,0 +1,184 @@
+import React, { forwardRef } from "react"
+import { cn } from "@lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+export const typographyVariants = cva("", {
+  variants: {
+    variant: {
+      "display-large": "text-fm-8xl leading-fm-8xl font-fm-brand",
+      "display-medium": "text-fm-7xl leading-fm-7xl font-fm-brand",
+      "display-small": "text-fm-6xl leading-fm-6xl font-fm-brand",
+
+      "title-large": "text-fm-5xl leading-fm-5xl font-fm-brand",
+      "title-medium": "text-fm-4xl leading-fm-4xl font-fm-brand",
+      "title-small": "text-fm-3xl leading-fm-3xl font-fm-brand",
+
+      "label-large": "text-fm-2xl leading-fm-2xl font-fm-brand",
+      "label-medium": "text-fm-xl leading-fm-xl font-fm-brand",
+      "label-small": "text-fm-lg leading-fm-lg font-fm-brand",
+
+      "body-large": "text-fm-xl leading-fm-xl font-fm-text",
+      "body-medium": "text-fm-lg leading-fm-lg font-fm-text",
+      "body-small": "text-fm-md leading-fm-md font-fm-text",
+
+      "caption-large": "text-fm-md leading-fm-md font-fm-text",
+      "caption-medium": "text-fm-sm leading-fm-sm font-fm-text",
+      "caption-small": "text-fm-xs leading-fm-xs font-fm-text",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    color: {
+      primary: "[color:var(--color-fm-primary)]",
+      secondary: "[color:var(--color-fm-secondary)]",
+      tertiary: "[color:var(--color-fm-tertiary)]",
+      contrast: "[color:var(--color-fm-contrast)]",
+      inactive: "[color:var(--color-fm-inactive)]",
+    },
+    transform: {
+      uppercase: "uppercase",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+      normal: "",
+    },
+    lineHeight: {
+      tight: "leading-tight",
+      normal: "leading-normal",
+      loose: "leading-loose",
+      auto: "",
+    },
+    wrap: {
+      normal: "",
+      nowrap: "[text-wrap:nowrap]",
+      wrap: "[text-wrap:wrap]",
+      pretty: "[text-wrap:pretty]",
+      balance: "[text-wrap:balance]",
+    },
+  },
+  defaultVariants: {
+    variant: "body-medium",
+    weight: "regular",
+    align: "left",
+    color: "primary",
+    transform: "normal",
+    lineHeight: "auto",
+    wrap: "normal",
+  },
+})
+
+export interface TypographyProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
+    VariantProps<typeof typographyVariants> {
+  as?: React.ElementType
+  children: React.ReactNode
+  className?: string
+}
+
+export const Typography = forwardRef<HTMLElement, TypographyProps>(
+  (
+    {
+      as: Element = "p",
+      children,
+      className,
+      variant,
+      weight,
+      align,
+      color,
+      transform,
+      lineHeight,
+      wrap,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Element
+        ref={ref}
+        className={cn(
+          typographyVariants({
+            variant,
+            weight,
+            align,
+            color,
+            transform,
+            lineHeight,
+            wrap,
+          }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Element>
+    )
+  }
+)
+
+// Export specific variants for easier use
+export const DisplayLarge = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="display-large" as="h1" {...props} />
+)
+
+export const DisplayMedium = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="display-medium" as="h1" {...props} />
+)
+
+export const DisplaySmall = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="display-small" as="h1" {...props} />
+)
+
+export const TitleLarge = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="title-large" as="h2" {...props} />
+)
+
+export const TitleMedium = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="title-medium" as="h3" {...props} />
+)
+
+export const TitleSmall = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="title-small" as="h4" {...props} />
+)
+
+export const LabelLarge = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="label-large" as="span" {...props} />
+)
+
+export const LabelMedium = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="label-medium" as="span" {...props} />
+)
+
+export const LabelSmall = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="label-small" as="span" {...props} />
+)
+
+export const BodyLarge = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="body-large" {...props} />
+)
+
+export const BodyMedium = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="body-medium" {...props} />
+)
+
+export const BodySmall = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="body-small" {...props} />
+)
+
+export const CaptionLarge = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="caption-large" as="span" {...props} />
+)
+
+export const CaptionMedium = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="caption-medium" as="span" {...props} />
+)
+
+export const CaptionSmall = (props: Omit<TypographyProps, "variant">) => (
+  <Typography variant="caption-small" as="span" {...props} />
+)