aural-ui 2.0.0

package/dist/components/popover/index.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-fm-surface-frosted/20 popover-content relative z-50 max-h-96 w-72 origin-(--radix-popover-content-transform-origin) shadow-lg outline-hidden backdrop-blur-lg",
+          className
+        )}
+        {...props}
+      >
+        <div className="absolute top-0 right-0 left-0 block h-0.5 w-full bg-(image:--gradient-fm-stroke-neutral)" />
+        {props.children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverClose({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Close>) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+}
+
+function PopoverArrow({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Arrow>) {
+  return <PopoverPrimitive.Arrow data-slot="popover-arror" {...props} />
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+}

package/dist/components/popover/meta.ts

@@ -0,0 +1,12 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-popover": "^1.1.14",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-surface-frosted",
+    ".popover-content",
+    "--gradient-fm-stroke-neutral",
+  ],
+}

package/dist/components/radio/Radio.stories.tsx

@@ -0,0 +1,146 @@
+import React from "react"
+import { Label } from "@components/label"
+import type { Meta } from "@storybook/react"
+
+import { RadioGroup, RadioGroupItem } from "."
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Components/UI/Radio",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+
+export const Default = () => (
+  <RadioGroup defaultValue="option-1">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="option-1" />
+      <Label htmlFor="option-1">Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="option-2" />
+      <Label htmlFor="option-2">Option 2</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-3" id="option-3" />
+      <Label htmlFor="option-3">Option 3</Label>
+    </div>
+  </RadioGroup>
+)
+
+export const States = () => (
+  <div className="text-fm-primary flex flex-col space-y-8">
+    {/* Unselected */}
+    <div className="space-y-2">
+      <h3 className="text-lg font-medium">Unselected</h3>
+      <RadioGroup defaultValue="">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="unselected" id="unselected" />
+          <Label htmlFor="unselected">Unselected Radio</Label>
+        </div>
+      </RadioGroup>
+    </div>
+
+    {/* Selected */}
+    <div className="space-y-2">
+      <h3 className="text-lg font-medium">Selected</h3>
+      <RadioGroup defaultValue="selected">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="selected" id="selected" />
+          <Label htmlFor="selected">Selected Radio</Label>
+        </div>
+      </RadioGroup>
+    </div>
+
+    {/* Disabled */}
+    <div className="space-y-2">
+      <h3 className="text-lg font-medium">Disabled</h3>
+      <RadioGroup defaultValue="">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="disabled" id="disabled" disabled />
+          <Label htmlFor="disabled" disabled>
+            Disabled Radio
+          </Label>
+        </div>
+      </RadioGroup>
+    </div>
+
+    {/* Selected Disabled */}
+    <div className="space-y-2">
+      <h3 className="text-lg font-medium">Selected Disabled</h3>
+      <RadioGroup defaultValue="selected-disabled">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem
+            value="selected-disabled"
+            id="selected-disabled"
+            disabled
+          />
+          <Label htmlFor="selected-disabled" disabled>
+            Selected Disabled Radio
+          </Label>
+        </div>
+      </RadioGroup>
+    </div>
+  </div>
+)
+
+export const Horizontal = () => (
+  <RadioGroup defaultValue="option-1" className="flex space-x-8">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="h-option-1" />
+      <Label htmlFor="h-option-1">Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="h-option-2" />
+      <Label htmlFor="h-option-2">Option 2</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-3" id="h-option-3" />
+      <Label htmlFor="h-option-3">Option 3</Label>
+    </div>
+  </RadioGroup>
+)
+
+export const Required = () => (
+  <RadioGroup defaultValue="option-1" required>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="r-option-1" />
+      <Label htmlFor="r-option-1">Required Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="r-option-2" />
+      <Label htmlFor="r-option-2">Required Option 2</Label>
+    </div>
+  </RadioGroup>
+)
+
+export const WithDescription = () => (
+  <RadioGroup defaultValue="option-1">
+    <div className="space-y-2">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="d-option-1" />
+        <div className="grid gap-1">
+          <Label htmlFor="d-option-1">Option with Description</Label>
+          <p className="text-sm text-gray-500">
+            This option has a helpful description.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div className="space-y-2">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="d-option-2" />
+        <div className="grid gap-1">
+          <Label htmlFor="d-option-2">Another Option</Label>
+          <p className="text-sm text-gray-500">
+            With its own explanation text.
+          </p>
+        </div>
+      </div>
+    </div>
+  </RadioGroup>
+)

package/dist/components/radio/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50 data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50 text-fm-icon-active disabled:text-fm-icon-inactive focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50 hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary size-8 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <span className="size-4 rounded-full bg-current transition-all duration-200" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/dist/components/radio/meta.ts

@@ -0,0 +1,19 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-radio-group": "^1.3.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-divider-positive",
+    "--color-fm-divider-primary",
+    "--color-fm-divider-tertiary",
+    "--color-fm-green-50",
+    "--color-fm-green-100",
+    "--color-fm-icon-active",
+    "--color-fm-icon-inactive",
+    "--color-fm-primary",
+    "--color-fm-surface-primary",
+    "--color-fm-surface-secondary",
+  ],
+}