@otfdashkit/ui 0.1.0

package/src/primitives/Slider/Slider.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Slider } from './Slider'
+
+// TODO: add all variants
+const meta: Meta<typeof Slider> = {
+  title: 'Primitives/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Slider>
+
+export const Default: Story = {}

package/src/primitives/Slider/Slider.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Slider } from './Slider'
+
+// TODO: add full a11y + variant tests
+describe('Slider', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Slider />)).not.toThrow()
+  })
+})

package/src/primitives/Slider/Slider.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import { cn } from '../utils/cn'
+
+export const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-[hsl(var(--secondary))]">
+      <SliderPrimitive.Range className="absolute h-full bg-[hsl(var(--primary))]" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-[hsl(var(--primary)/0.5)] bg-[hsl(var(--background))] shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName

package/src/primitives/Slider/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Slider'

package/src/primitives/Sonner/Sonner.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Sonner } from './Sonner'
+
+// TODO: add all variants
+const meta: Meta<typeof Sonner> = {
+  title: 'Primitives/Sonner',
+  component: Sonner,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Sonner>
+
+export const Default: Story = {}

package/src/primitives/Sonner/Sonner.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Sonner } from './Sonner'
+
+// TODO: add full a11y + variant tests
+describe('Sonner', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Sonner />)).not.toThrow()
+  })
+})

package/src/primitives/Sonner/Sonner.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/primitives/Sonner/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Sonner'

package/src/primitives/Spinner/Spinner.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Spinner } from './Spinner'
+
+// TODO: add all variants
+const meta: Meta<typeof Spinner> = {
+  title: 'Primitives/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {}

package/src/primitives/Spinner/Spinner.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Spinner } from './Spinner'
+
+// TODO: add full a11y + variant tests
+describe('Spinner', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Spinner />)).not.toThrow()
+  })
+})

package/src/primitives/Spinner/Spinner.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/primitives/Spinner/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Spinner'

package/src/primitives/Switch/Switch.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Switch } from './Switch'
+
+// TODO: add all variants
+const meta: Meta<typeof Switch> = {
+  title: 'Primitives/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {}

package/src/primitives/Switch/Switch.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Switch } from './Switch'
+
+// TODO: add full a11y + variant tests
+describe('Switch', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Switch />)).not.toThrow()
+  })
+})

package/src/primitives/Switch/Switch.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cn } from '../utils/cn'
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    data-slot="switch"
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--background))]',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=unchecked]:bg-input',
+      'data-[state=checked]:bg-primary',
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform',
+        'data-[state=unchecked]:translate-x-0',
+        'data-[state=checked]:translate-x-4'
+      )}
+    />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName

package/src/primitives/Switch/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Switch'

package/src/primitives/Table/Table.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Table } from './Table'
+
+// TODO: add all variants
+const meta: Meta<typeof Table> = {
+  title: 'Primitives/Table',
+  component: Table,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Table>
+
+export const Default: Story = {}

package/src/primitives/Table/Table.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Table } from './Table'
+
+// TODO: add full a11y + variant tests
+describe('Table', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Table />)).not.toThrow()
+  })
+})

package/src/primitives/Table/Table.tsx

@@ -0,0 +1,121 @@
+// @ts-nocheck
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/primitives/Table/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Table'

package/src/primitives/Tabs/Tabs.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs } from './Tabs'
+
+// TODO: add all variants
+const meta: Meta<typeof Tabs> = {
+  title: 'Primitives/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {}

package/src/primitives/Tabs/Tabs.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Tabs } from './Tabs'
+
+// TODO: add full a11y + variant tests
+describe('Tabs', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Tabs />)).not.toThrow()
+  })
+})

package/src/primitives/Tabs/Tabs.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../utils/cn'
+
+export const Tabs = TabsPrimitive.Root
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-[hsl(var(--muted))] p-1 text-[hsl(var(--muted-foreground))]',
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-[hsl(var(--background))] transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-[hsl(var(--background))] data-[state=active]:text-[hsl(var(--foreground))] data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName

package/src/primitives/Tabs/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Tabs'

package/src/primitives/Textarea/Textarea.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Textarea } from './Textarea'
+
+// TODO: add all variants
+const meta: Meta<typeof Textarea> = {
+  title: 'Primitives/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Textarea>
+
+export const Default: Story = {}

package/src/primitives/Textarea/Textarea.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Textarea } from './Textarea'
+
+// TODO: add full a11y + variant tests
+describe('Textarea', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Textarea />)).not.toThrow()
+  })
+})

package/src/primitives/Textarea/Textarea.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-2 text-sm shadow-sm',
+        'placeholder:text-[hsl(var(--muted-foreground))]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'resize-none',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = 'Textarea'

package/src/primitives/Textarea/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Textarea'

package/src/primitives/Toggle/Toggle.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Toggle } from './Toggle'
+
+// TODO: add all variants
+const meta: Meta<typeof Toggle> = {
+  title: 'Primitives/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Toggle>
+
+export const Default: Story = {}

package/src/primitives/Toggle/Toggle.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Toggle } from './Toggle'
+
+// TODO: add full a11y + variant tests
+describe('Toggle', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Toggle />)).not.toThrow()
+  })
+})

package/src/primitives/Toggle/Toggle.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/primitives/Toggle/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Toggle'

package/src/primitives/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ToggleGroup } from './ToggleGroup'
+
+// TODO: add all variants
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Primitives/ToggleGroup',
+  component: ToggleGroup,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ToggleGroup>
+
+export const Default: Story = {}

package/src/primitives/ToggleGroup/ToggleGroup.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { ToggleGroup } from './ToggleGroup'
+
+// TODO: add full a11y + variant tests
+describe('ToggleGroup', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<ToggleGroup />)).not.toThrow()
+  })
+})