aural-ui 2.0.0

package/dist/components/avatar/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-fm-surface-frosted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/dist/components/avatar/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-avatar": "^1.1.10",
+  },
+  devDependencies: {},
+  internalDependencies: ["tag"],
+  tokens: ["--color-fm-surface-frosted"],
+}

package/dist/components/badge/Badge.stories.tsx

@@ -0,0 +1,169 @@
+import React from "react"
+import { TickCircleIcon } from "@icons/tick-circle-icon"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Badge } from "."
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/UI/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["neutral", "info", "positive", "negative", "warning"],
+      description: "The color of the badge",
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md"],
+      description: "The size of the badge",
+    },
+    children: {
+      control: "text",
+      description: "The content of the badge",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS class names",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  args: {
+    children: "NEW",
+  },
+}
+
+export const Info: Story = {
+  args: {
+    children: "INFO",
+    color: "info",
+  },
+}
+
+export const Positive: Story = {
+  args: {
+    children: "SUCCESS",
+    color: "positive",
+  },
+}
+
+export const Negative: Story = {
+  args: {
+    children: "ERROR",
+    color: "negative",
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    children: "WARNING",
+    color: "warning",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: "SMALL",
+    size: "sm",
+  },
+}
+
+export const ExtraSmall: Story = {
+  args: {
+    children: "XS",
+    size: "xs",
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    children: "MEDIUM",
+    size: "md",
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <TickCircleIcon width={12} height={12} /> SUCCESS
+      </>
+    ),
+    color: "positive",
+    size: "sm",
+    className: "flex items-center gap-1",
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    children: <TickCircleIcon width={12} height={12} />,
+    color: "positive",
+    size: "xs",
+  },
+}
+
+export const AllBadges = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Badge>DEFAULT</Badge>
+        <Badge color="info">INFO</Badge>
+        <Badge color="positive">SUCCESS</Badge>
+        <Badge color="negative">ERROR</Badge>
+        <Badge color="warning">WARNING</Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge size="xs">EXTRA SMALL</Badge>
+        <Badge size="sm">SMALL</Badge>
+        <Badge size="md">MEDIUM</Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge color="info" size="xs">
+          INFO XS
+        </Badge>
+        <Badge color="positive" size="sm">
+          SUCCESS SM
+        </Badge>
+        <Badge color="negative" size="md">
+          ERROR MD
+        </Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge color="info" size="xs" className="flex items-center gap-1">
+          <TickCircleIcon width={10} height={10} /> ICON XS
+        </Badge>
+        <Badge color="positive" size="sm" className="flex items-center gap-1">
+          <TickCircleIcon width={12} height={12} /> ICON SM
+        </Badge>
+        <Badge color="warning" size="md" className="flex items-center gap-1">
+          <TickCircleIcon width={14} height={14} /> ICON MD
+        </Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge color="info" size="xs">
+          <TickCircleIcon width={10} height={10} />
+        </Badge>
+        <Badge color="positive" size="sm">
+          <TickCircleIcon width={12} height={12} />
+        </Badge>
+        <Badge color="warning" size="md">
+          <TickCircleIcon width={14} height={14} />
+        </Badge>
+      </div>
+    </div>
+  )
+}

package/dist/components/badge/index.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react"
+import { Tag } from "@components/tag"
+import { cn } from "@lib/utils"
+
+interface BadgeProps {
+  color?: "neutral" | "info" | "positive" | "negative" | "warning"
+  className?: string
+  size?: "xs" | "sm" | "md"
+  children: React.ReactNode
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, color = "neutral", className, size = "md" }, ref) => {
+    return (
+      <Tag
+        variant="system"
+        color={color}
+        className={cn("py-fm-sm px-fm-md leading-none", className)}
+        size={size}
+        ref={ref}
+      >
+        {children}
+      </Tag>
+    )
+  }
+)
+
+export default Badge

package/dist/components/badge/meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["tag"],
+  tokens: ["--spacing-fm-sm", "--spacing-fm-md"],
+}