aural-ui 2.0.0

package/dist/components/banner/index.tsx

@@ -0,0 +1,256 @@
+import React, { forwardRef } from "react"
+import { ArrowRightIcon } from "@icons/arrow-right-icon"
+import { FeatureShineIcon } from "@icons/feature-shine-icon"
+import { cn } from "@lib/utils"
+import { cva } from "class-variance-authority"
+
+interface BannerProps {
+  /**
+   * The variant of the banner
+   */
+  variant?: "positive" | "negative" | "warning" | "info"
+  /**
+   * Whether the banner is filled or outlined
+   */
+  appearance?: "filled" | "outlined"
+  /**
+   * The title of the banner
+   */
+  heading?: string | React.ReactNode
+  /**
+   * The body text of the banner
+   */
+  paragraph?: string | React.ReactNode
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void
+  /**
+   * Optional className for custom styling
+   */
+  className?: string
+  /**
+   * Whether to show the arrow icon
+   */
+  leftIcon?: boolean | React.ReactNode
+  /**
+   * Whether to show the left icon
+   */
+  rightIcon?: boolean | React.ReactNode
+  /**
+   * Icon properties for the left and right icons
+   */
+  iconProps?: React.SVGProps<SVGSVGElement>
+}
+
+// Create the banner variants using class-variance-authority
+export const bannerVariants = cva(
+  "flex items-center p-fm-lg rounded-fm-s transition-colors relative min-w-80 gap-2",
+  {
+    variants: {
+      variant: {
+        positive: "",
+        negative: "",
+        warning: "",
+        info: "",
+      },
+      appearance: {
+        filled: "",
+        outlined:
+          "border border-solid border-fm-divider-secondary bg-fm-surface-secondary",
+      },
+    },
+    compoundVariants: [
+      // Filled variants
+      {
+        variant: "positive",
+        appearance: "filled",
+        className: "bg-fm-surface-positive text-fm-positive-tert",
+      },
+      {
+        variant: "negative",
+        appearance: "filled",
+        className: "bg-fm-surface-negative text-fm-negative-tert",
+      },
+      {
+        variant: "warning",
+        appearance: "filled",
+        className: "bg-fm-surface-warning text-fm-warning-tert",
+      },
+      {
+        variant: "info",
+        appearance: "filled",
+        className: "bg-fm-surface-info text-fm-info-tert",
+      },
+      // Outlined variants
+      {
+        variant: "positive",
+        appearance: "outlined",
+        className:
+          "bg-(image:--gradient-fm-banner-positive) text-fm-positive-sec",
+      },
+      {
+        variant: "negative",
+        appearance: "outlined",
+        className:
+          "bg-(image:--gradient-fm-banner-negative) text-fm-negative-sec",
+      },
+      {
+        variant: "warning",
+        appearance: "outlined",
+        className:
+          "bg-(image:--gradient-fm-banner-warning) text-fm-warning-sec",
+      },
+      {
+        variant: "info",
+        appearance: "outlined",
+        className: "bg-(image:--gradient-fm-banner-info) text-fm-info-sec",
+      },
+    ],
+    defaultVariants: {
+      variant: "info",
+      appearance: "filled",
+    },
+  }
+)
+
+export const borderVariants = cva("", {
+  variants: {
+    variant: {
+      positive: "",
+      negative: "",
+      warning: "",
+      info: "",
+    },
+    appearance: {
+      filled: "hidden",
+      outlined: "absolute w-full left-0 right-0 bottom-0 h-0.5 block",
+    },
+  },
+  compoundVariants: [
+    // Outlined variants
+    {
+      variant: "positive",
+      appearance: "outlined",
+      className: "bg-(image:--gradient-fm-stroke-positive)",
+    },
+    {
+      variant: "negative",
+      appearance: "outlined",
+      className: "bg-(image:--gradient-fm-stroke-negative)",
+    },
+    {
+      variant: "warning",
+      appearance: "outlined",
+      className: "bg-(image:--gradient-fm-stroke-warning)",
+    },
+    {
+      variant: "info",
+      appearance: "outlined",
+      className: "bg-(image:--gradient-fm-stroke-info)",
+    },
+  ],
+  defaultVariants: {
+    variant: "info",
+    appearance: "outlined",
+  },
+})
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(
+  (
+    {
+      variant = "info",
+      appearance = "filled",
+      heading,
+      paragraph,
+      onClick,
+      className,
+      leftIcon,
+      rightIcon,
+      iconProps,
+      ...props
+    },
+    ref
+  ) => {
+    // Determine if the banner is interactive
+    const isInteractive = !!onClick
+
+    const renderIcon = (
+      icon: boolean | React.ReactNode,
+      position: "left" | "right"
+    ) => {
+      if (!icon) return null
+
+      if (React.isValidElement(icon)) {
+        return icon
+      }
+
+      if (position === "left") {
+        return (
+          <FeatureShineIcon
+            height={24}
+            width={24}
+            color="currentColor"
+            {...iconProps}
+          />
+        )
+      }
+
+      if (position === "right") {
+        return (
+          <ArrowRightIcon
+            height={16}
+            width={16}
+            color="currentColor"
+            {...iconProps}
+          />
+        )
+      }
+
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          bannerVariants({ variant, appearance }),
+          { "cursor-pointer": isInteractive },
+          className
+        )}
+        onClick={onClick}
+        role={isInteractive ? "button" : "status"}
+        aria-live="polite"
+        tabIndex={isInteractive ? 0 : undefined}
+        {...props}
+      >
+        {/* Left Icon */}
+        {renderIcon(leftIcon, "left")}
+
+        {/* Content */}
+        <div className="flex-1">
+          {heading && (
+            <h6 className="font-fm-text leading-fm-lg [font-size:var(--text-fm-lg)] font-normal">
+              {heading}
+            </h6>
+          )}
+
+          {paragraph && (
+            <p className="font-fm-text leading-fm-sm [font-size:var(--text-fm-sm)]">
+              {paragraph}
+            </p>
+          )}
+        </div>
+
+        {/* Right Arrow */}
+        {renderIcon(rightIcon, "right")}
+
+        <div className={borderVariants({ variant, appearance })}></div>
+      </div>
+    )
+  }
+)
+
+Banner.displayName = "Banner"
+
+export default Banner

package/dist/components/banner/meta.ts

@@ -0,0 +1,36 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["feature-shine-icon", "arrow-right-icon"],
+  tokens: [
+    "--color-fm-divider-secondary",
+    "--color-fm-info-sec",
+    "--color-fm-info-tert",
+    "--color-fm-negative-sec",
+    "--color-fm-negative-tert",
+    "--color-fm-positive-sec",
+    "--color-fm-positive-tert",
+    "--color-fm-surface-info",
+    "--color-fm-surface-negative",
+    "--color-fm-surface-positive",
+    "--color-fm-surface-secondary",
+    "--color-fm-surface-warning",
+    "--color-fm-warning-sec",
+    "--color-fm-warning-tert",
+    "--font-fm-text",
+    "--gradient-fm-banner-info",
+    "--gradient-fm-banner-negative",
+    "--gradient-fm-banner-positive",
+    "--gradient-fm-banner-warning",
+    "--gradient-fm-stroke-info",
+    "--gradient-fm-stroke-negative",
+    "--gradient-fm-stroke-positive",
+    "--gradient-fm-stroke-warning",
+    "--leading-fm-lg",
+    "--leading-fm-sm",
+    "--radius-fm-s",
+    "--spacing-fm-lg",
+    "--text-fm-lg",
+    "--text-fm-sm",
+  ],
+}

package/dist/components/button/Button.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "."
+
+const meta: Meta<typeof Button> = {
+  title: "Components/UI/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "outline", "text"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    isDisabled: {
+      control: { type: "boolean" },
+    },
+    leftIcon: {
+      control: { type: "boolean" },
+    },
+    rightIcon: {
+      control: { type: "boolean" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+    size: "md",
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+    size: "md",
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Button",
+    size: "md",
+  },
+}
+
+export const Text: Story = {
+  args: {
+    variant: "text",
+    children: "Text Button",
+    size: "md",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled Button",
+    isDisabled: true,
+    variant: "primary",
+  },
+}

package/dist/components/button/index.tsx

@@ -0,0 +1,158 @@
+import React, { ButtonHTMLAttributes, forwardRef } from "react"
+import { FeatureShineIcon } from "@icons/feature-shine-icon"
+import { cn } from "@lib/utils"
+import { cva } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "group relative font-fm-brand focus-visible:ring-fm-primary focus-visible:ring-offset-fm-contrast outline-none focus-visible:ring-2 focus-visible:ring-offset-6",
+  {
+    variants: {
+      variant: {
+        primary:
+          "before:absolute before:inset-0 before:rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-transparent before:[background-image:var(--button-fm-background),linear-gradient(to_top,color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent))] text-fm-neutral-1100",
+        secondary:
+          "before:absolute before:inset-0 rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-transparent bg-fm-surface-secondary text-fm-primary",
+        outline: "text-fm-primary",
+        text: "bg-transparent text-fm-secondary-800",
+        default: "",
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "cursor-pointer",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      disabled: false,
+    },
+  }
+)
+
+export const innerButtonVariants = cva(
+  "flex items-center justify-center gap-2 rounded-full border-[length:var(--stroke-fm-xsm)] border-transparent transition-[_translate,_--gradientSizeX,_--gradientSizeY,_--gradientPositionY]",
+  {
+    variants: {
+      variant: {
+        primary:
+          "shadow-[0_0_1.5rem_var(--color-fm-primary-400)_inset] group-active:translate-y-0 [--gradientSizeX:50%] [--gradientSizeY:150%] [--gradientPositionY:100%] group-hover:[--gradientSizeX:40%] group-hover:[--gradientSizeY:110%] group-hover:[--gradientPositionY:50%] [background-image:var(--button-fm-noise),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-secondary-300)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))] bg-cover bg-center [background-blend-mode:color-dodge,multiply,darken] duration-300 bg-repeat-x bg-auto bg-center bg-origin-border",
+        secondary:
+          "group-active:translate-y-0 bg-fm-button-fill-secondary [background-image:var(--button-fm-noise)] bg-repeat-x bg-auto bg-center bg-origin-border",
+        outline:
+          "border-[length:var(--stroke-fm-sm)] border-fm-divider-contrast !translate-y-0",
+        text: "",
+      },
+      disabled: {
+        default: "",
+        primary:
+          "bg-fm-surface-secondary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-xsm)] border-fm-divider-tertiary",
+        secondary:
+          "bg-fm-surface-secondary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-xsm)] border-fm-divider-tertiary",
+        outline:
+          "bg-fm-divider-tertiary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-sm)] border-fm-divider-tertiary",
+        text: "bg-fm-divider-tertiary [color:var(--color-fm-inactive)] border-[length:var(--stroke-fm-sm)] border-fm-divider-tertiary",
+      },
+      size: {
+        sm: "py-fm-lg px-fm-2xl text-fm-sm -translate-y-1",
+        md: "py-fm-xl px-fm-4xl text-fm-md -translate-y-1",
+        lg: "py-fm-2xl px-fm-5xl text-fm-xl -translate-y-1.5",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      disabled: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+  className?: string
+  leftIcon?: React.ReactNode | boolean
+  rightIcon?: React.ReactNode | boolean
+  iconProps?: React.SVGProps<SVGSVGElement>
+  innerClassName?: string
+  isDisabled?: boolean
+  size?: "sm" | "md" | "lg"
+  variant?: "primary" | "secondary" | "outline" | "text"
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      children,
+      className = "",
+      innerClassName = "",
+      isDisabled = false,
+      leftIcon,
+      rightIcon,
+      iconProps = {},
+      ...props
+    },
+    ref
+  ) => {
+    const iconColor = isDisabled
+      ? "var(--icon-fm-inactive)"
+      : variant === "text"
+        ? "var(--color-fm-secondary-800)"
+        : "var(--color-fm-primary)"
+
+    const renderIcon = (icon: React.ReactNode | boolean) => {
+      if (!icon) {
+        return null
+      }
+
+      if (React.isValidElement(icon)) {
+        return React.cloneElement(icon, {
+          color: iconColor,
+          className: cn(
+            "h-4 w-4",
+            (icon.props as React.SVGProps<SVGSVGElement>).className
+          ),
+          ...iconProps,
+        })
+      }
+
+      return (
+        <FeatureShineIcon
+          height={12}
+          width={12}
+          color={iconColor}
+          {...iconProps}
+        />
+      )
+    }
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={cn(
+          buttonVariants({
+            variant: isDisabled ? "default" : variant,
+            disabled: isDisabled,
+          }),
+          className
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            innerButtonVariants({
+              variant: isDisabled ? "text" : variant,
+              disabled: isDisabled ? variant : "default",
+              size,
+            }),
+            innerClassName
+          )}
+        >
+          {renderIcon(leftIcon)}
+          {children}
+          {renderIcon(rightIcon)}
+        </span>
+      </button>
+    )
+  }
+)

package/dist/components/button/meta.ts

@@ -0,0 +1,33 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["feature-shine-icon"],
+  tokens: [
+    "--button-fm-background",
+    "--button-fm-noise",
+    "--color-fm-contrast",
+    "--color-fm-divider-contrast",
+    "--color-fm-inactive",
+    "--color-fm-neutral-1100",
+    "--color-fm-primary",
+    "--color-fm-primary-200",
+    "--color-fm-primary-600",
+    "--color-fm-secondary-300",
+    "--color-fm-secondary-800",
+    "--color-fm-surface-secondary",
+    "--font-fm-brand",
+    "--spacing-fm-2xl",
+    "--spacing-fm-4xl",
+    "--spacing-fm-5xl",
+    "--spacing-fm-lg",
+    "--spacing-fm-xl",
+    "--stroke-fm-sm",
+    "--stroke-fm-xsm",
+    "--text-fm-md",
+    "--text-fm-sm",
+    "--text-fm-xl",
+    "--gradientSizeX",
+    "--gradientSizeY",
+    "--gradientPositionY",
+  ],
+}