aural-ui 2.0.0

package/dist/components/hover-card/index.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { cn } from "@lib/utils"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-fm-surface-frosted/20 text-fm-primary z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md p-4 shadow-md outline-hidden backdrop-blur-lg",
+          "popover-content",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/dist/components/hover-card/meta.ts

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

package/dist/components/icon-button/IconButton.stories.tsx

@@ -0,0 +1,252 @@
+import React from "react"
+import { CrossIcon } from "@icons/cross-icon"
+import { FeatureShineIcon } from "@icons/feature-shine-icon"
+import { SearchIcon } from "@icons/search-icon"
+import { type Meta, type StoryObj } from "@storybook/react"
+
+import { IconButton } from "."
+
+const meta: Meta<typeof IconButton> = {
+  title: "Components/UI/IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    icon: <SearchIcon />,
+    label: "Search",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["background", "ghost", "outlined"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
+    shape: {
+      control: "select",
+      options: ["circle", "square"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof IconButton>
+
+export const Default: Story = {
+  args: {
+    label: "Search",
+    icon: <SearchIcon />,
+  },
+}
+
+export const WithBackground: Story = {
+  args: {
+    label: "Search",
+    icon: <SearchIcon />,
+    variant: "background",
+  },
+  render: (args) => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">WITH BACKGROUND</h2>
+
+      <div className="flex flex-col space-y-4">
+        <div>
+          <h3 className="text-fm-primary mb-2">SMALL</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="small" label="Default" />
+            <IconButton {...args} size="small" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">MEDIUM</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="medium" label="Default" />
+            <IconButton {...args} size="medium" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">LARGE</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="large" label="Default" />
+            <IconButton {...args} size="large" disabled label="Disabled" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithoutBackground: Story = {
+  args: {
+    label: "Search",
+    icon: <SearchIcon />,
+    variant: "ghost",
+  },
+  render: (args) => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">
+        WITHOUT BACKGROUND
+      </h2>
+
+      <div className="flex flex-col space-y-4">
+        <div>
+          <h3 className="text-fm-primary mb-2">SMALL</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="small" label="Default" />
+            <IconButton {...args} size="small" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">MEDIUM</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="medium" label="Default" />
+            <IconButton {...args} size="medium" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">LARGE</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="large" label="Default" />
+            <IconButton {...args} size="large" disabled label="Disabled" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const Outlined: Story = {
+  args: {
+    label: "Search",
+    icon: <SearchIcon />,
+    variant: "outlined",
+  },
+  render: (args) => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">OUTLINED</h2>
+
+      <div className="flex flex-col space-y-4">
+        <div>
+          <h3 className="text-fm-primary mb-2">SMALL</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="small" label="Default" />
+            <IconButton {...args} size="small" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">MEDIUM</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="medium" label="Default" />
+            <IconButton {...args} size="medium" disabled label="Disabled" />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">LARGE</h3>
+          <div className="flex space-x-4">
+            <IconButton {...args} size="large" label="Default" />
+            <IconButton {...args} size="large" disabled label="Disabled" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const DifferentIcons: Story = {
+  render: () => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">ICON VARIATIONS</h2>
+
+      <div className="flex space-x-4">
+        <IconButton variant="background" icon={<SearchIcon />} label="Search" />
+        <IconButton variant="background" icon={<CrossIcon />} label="Close" />
+        <IconButton
+          variant="background"
+          icon={<FeatureShineIcon />}
+          label="Add"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Shapes: Story = {
+  render: () => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">SHAPES</h2>
+
+      <div className="flex flex-col space-y-4">
+        <div>
+          <h3 className="text-fm-primary mb-2">CIRCLE</h3>
+          <div className="flex space-x-4">
+            <IconButton
+              variant="background"
+              icon={<SearchIcon />}
+              label="Search"
+              shape="circle"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-fm-primary mb-2">SQUARE</h3>
+          <div className="flex space-x-4">
+            <IconButton
+              variant="background"
+              icon={<SearchIcon />}
+              label="Search"
+              shape="square"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">
+        INTERACTIVE EXAMPLES
+      </h2>
+
+      <div className="flex space-x-4">
+        <IconButton
+          variant="background"
+          icon={<SearchIcon />}
+          label="Search"
+          onClick={() => alert("Search clicked")}
+        />
+        <IconButton
+          variant="ghost"
+          icon={<CrossIcon />}
+          label="Close"
+          onClick={() => alert("Close clicked")}
+        />
+        <IconButton
+          variant="outlined"
+          icon={<FeatureShineIcon />}
+          label="Add"
+          onClick={() => alert("Add clicked")}
+        />
+      </div>
+    </div>
+  ),
+}

package/dist/components/icon-button/index.tsx

@@ -0,0 +1,130 @@
+import React, { forwardRef } from "react"
+import { cn } from "@lib/utils"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+import { cva, type VariantProps } from "class-variance-authority"
+
+// Define variants with class-variance-authority
+const iconButtonVariants = cva(
+  // Base styles for all icon buttons
+  "inline-flex items-center justify-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-fm-primary focus-visible:ring-offset-fm-neutral-0",
+  {
+    variants: {
+      variant: {
+        // With background variants
+        background:
+          "bg-fm-button-fill-secondary hover:bg-fm-neutral-300 disabled:bg-fm-surface-secondary",
+        // Without background variants
+        ghost:
+          "bg-transparent hover:bg-fm-button-shadow-secondary disabled:bg-transparent",
+        // Outlined variants
+        outlined:
+          "border border-solid border-fm-divider-primary hover:border-fm-button-stroke disabled:border-fm-divider-tertiary",
+      },
+      size: {
+        small: "size-8", // 32px
+        medium: "size-11", // 44px
+        large: "size-14", // 56px
+      },
+      shape: {
+        square: "rounded-fm-s",
+        circle: "rounded-full",
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "cursor-pointer",
+      },
+    },
+    defaultVariants: {
+      variant: "background",
+      size: "medium",
+      shape: "circle",
+      disabled: false,
+    },
+  }
+)
+
+// Determine the icon size based on button size
+export const getIconSize = (size: "small" | "large" | "medium") => {
+  switch (size) {
+    case "small":
+      return 16
+    case "large":
+      return 32
+    case "medium":
+      return 20
+    default:
+      return 20
+  }
+}
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    Omit<VariantProps<typeof iconButtonVariants>, "disabled"> {
+  icon: React.ReactNode | SVGSVGElement
+  label: string // Accessible label for the button
+  className?: string
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      shape,
+      disabled = false,
+      icon,
+      label,
+      type = "button",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const iconSize = getIconSize(size ?? "medium")
+
+    return (
+      <button
+        type={type}
+        disabled={disabled}
+        className={cn(
+          iconButtonVariants({
+            variant,
+            size,
+            shape,
+            disabled,
+            className,
+          })
+        )}
+        ref={ref}
+        aria-label={label}
+        {...props}
+      >
+        {React.isValidElement(children) && children}
+        {React.isValidElement(icon) && (
+          <AccessibleIcon label={label}>
+            {/* Clone the icon with the size props if it's an SVG */}
+
+            {React.cloneElement(icon, {
+              width:
+                (icon.props as React.SVGProps<SVGSVGElement>).width || iconSize,
+              height:
+                (icon.props as React.SVGProps<SVGSVGElement>).height ||
+                iconSize,
+              className: cn(
+                "text-fm-icon-active",
+                disabled && "text-fm-icon-inactive",
+                (icon.props as React.SVGProps<SVGSVGElement>).className
+              ),
+              ...(icon.props as React.SVGProps<SVGSVGElement>),
+            })}
+          </AccessibleIcon>
+        )}
+      </button>
+    )
+  }
+)
+
+IconButton.displayName = "IconButton"
+
+export { IconButton, iconButtonVariants }

package/dist/components/icon-button/meta.ts

@@ -0,0 +1,20 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-button-fill-secondary",
+    "--color-fm-button-shadow-secondary",
+    "--color-fm-button-stroke",
+    "--color-fm-divider-primary",
+    "--color-fm-divider-tertiary",
+    "--color-fm-icon-active",
+    "--color-fm-icon-inactive",
+    "--color-fm-neutral-0",
+    "--color-fm-neutral-300",
+    "--color-fm-primary",
+    "--color-fm-surface-secondary",
+  ],
+}

package/dist/components/if-else/if-else.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Else, If, IfElse } from "."
+
+const meta = {
+  title: "Components/Logical/IfElse",
+  component: IfElse,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof IfElse>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Basic example with condition true
+export const ConditionTrue: Story = {
+  args: {
+    condition: true,
+    if: (
+      <div style={{ padding: "10px", color: "green" }}>Condition is true</div>
+    ),
+    else: (
+      <div style={{ padding: "10px", color: "red" }}>Condition is false</div>
+    ),
+  },
+}
+
+// Basic example with condition false
+export const ConditionFalse: Story = {
+  args: {
+    condition: false,
+    if: (
+      <div style={{ padding: "10px", color: "green" }}>Condition is true</div>
+    ),
+    else: (
+      <div style={{ padding: "10px", color: "red" }}>Condition is false</div>
+    ),
+  },
+}
+
+// Using child components approach
+export const WithChildComponents: Story = {
+  args: {
+    condition: true,
+  },
+  render: () => (
+    <IfElse condition={true}>
+      <If>
+        <div
+          style={{
+            padding: "10px",
+            backgroundColor: "#e6f7ff",
+            borderRadius: "4px",
+          }}
+        >
+          <h3>Welcome, User!</h3>
+          <p>You are logged in.</p>
+        </div>
+      </If>
+      <Else>
+        <div
+          style={{
+            padding: "10px",
+            backgroundColor: "#fff1f0",
+            borderRadius: "4px",
+          }}
+        >
+          <h3>Hello, Guest!</h3>
+          <p>Please log in to continue.</p>
+        </div>
+      </Else>
+    </IfElse>
+  ),
+}
+
+// Standalone If component
+export const StandaloneIf: Story = {
+  args: {
+    condition: true,
+  },
+  render: () => (
+    <div>
+      <If condition={true}>
+        <div
+          style={{
+            padding: "10px",
+            backgroundColor: "#f6ffed",
+            borderRadius: "4px",
+          }}
+        >
+          This content is shown because the condition is true.
+        </div>
+      </If>
+      <div style={{ marginTop: "10px" }}>This content is always shown.</div>
+    </div>
+  ),
+}

package/dist/components/if-else/index.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+
+interface IfElseContextProps {
+  condition: boolean
+}
+
+interface IfElseProps extends IfElseContextProps {
+  children?: React.ReactNode
+  else?: React.ReactNode
+  if?: React.ReactNode
+}
+
+const IfElseContext = React.createContext<IfElseContextProps>({
+  condition: false,
+})
+
+export function IfElse({
+  condition,
+  children,
+  else: ElseComponent = null,
+  if: IfComponent = null,
+}: IfElseProps): React.ReactNode {
+  if (!!ElseComponent || !!IfComponent) {
+    if (condition) {
+      return IfComponent as React.ReactNode
+    }
+    return ElseComponent as React.ReactNode
+  }
+  return (
+    <IfElseContext.Provider value={{ condition }}>
+      {children}
+    </IfElseContext.Provider>
+  )
+}
+
+export function If({
+  children,
+  condition: propCondition,
+}: {
+  children: React.ReactNode
+  condition?: boolean
+}) {
+  const context = React.useContext(IfElseContext)
+
+  if (!context) {
+    return propCondition ? children : null
+  }
+
+  const condition = propCondition ?? context.condition
+  return condition ? children : null
+}
+
+export function Else({ children }: { children: React.ReactNode }) {
+  const { condition } = React.useContext(IfElseContext)
+  return condition ? null : children
+}

package/dist/components/if-else/meta.ts

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

package/dist/components/index.ts

@@ -0,0 +1,70 @@
+// Export all components from a single entry point
+export * from "./aspect-ratio"
+export * from "./avatar"
+export * from "./badge"
+export * from "./banner"
+export * from "./button"
+export * from "./card"
+export * from "./char-count"
+export * from "./checkbox"
+export * from "./chip"
+export * from "./collapsible"
+export * from "./command"
+export * from "./dialog"
+export * from "./divider"
+export * from "./dropdown"
+export * from "./form"
+export * from "./helper-text"
+export * from "./hover-card"
+export * from "./icon-button"
+export * from "./if-else"
+export * from "./label"
+export * from "./list"
+export * from "./marquee"
+export * from "./overlay"
+export * from "./pagination"
+export * from "./popover"
+export * from "./radio"
+export * from "./resizable"
+export * from "./scroll-area"
+export * from "./search"
+export * from "./select"
+export * from "./sheet"
+export * from "./skelton"
+export * from "./slider"
+export * from "./stepper"
+export * from "./switch"
+export * from "./switch-case"
+export * from "./table"
+export * from "./tabs"
+export * from "./tag"
+export * from "./toast"
+export * from "./toggle"
+export * from "./tooltip"
+export * from "./typography"
+
+// Export input and textarea with their specific exports to avoid conflicts
+export { default as Input } from "./input"
+export type { InputProps, InputVariant, InputComponent } from "./input"
+export {
+  InputRoot,
+  InputLabel,
+  InputWrapper,
+  StartIcon,
+  EndIcon,
+  PasswordToggle,
+  InputBase,
+} from "./input"
+
+export { default as TextArea } from "./textarea"
+export type {
+  TextAreaProps,
+  TextAreaVariant,
+  TextAreaComponent,
+} from "./textarea"
+export {
+  TextAreaRoot,
+  TextAreaLabel,
+  TextAreaWrapper,
+  TextAreaBase,
+} from "./textarea"