@meith/ui 0.1.0

package/LICENSE.md

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@meith/ui",
+  "version": "0.1.0",
+  "description": "Meith's shared UI primitives: buttons, menus and the class utilities themes build with.",
+  "license": "LGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meith-dev/meith.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./button": "./src/button.tsx",
+    "./menu": "./src/menu.tsx",
+    "./utils": "./src/utils.ts",
+    "./variants": "./src/variants.ts"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.type-test.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3"
+  }
+}

package/src/alert.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from './utils'
+
+const alertVariants = cva(
+  'flex w-full items-start justify-between gap-4 rounded-md border border-l-4 px-4 py-3 text-sm',
+  {
+    variants: {
+      tone: {
+        info: 'border-border border-l-muted-foreground bg-card text-card-foreground',
+        success: 'border-border border-l-moderation-approved bg-card text-card-foreground',
+        warning: 'border-border border-l-moderation-pending bg-card text-card-foreground',
+        error: 'border-destructive/30 border-l-destructive bg-destructive/5 text-card-foreground',
+      },
+    },
+    defaultVariants: { tone: 'info' },
+  },
+)
+
+export type AlertTone = NonNullable<VariantProps<typeof alertVariants>['tone']>
+
+function Alert({
+  className,
+  tone = 'info',
+  role,
+  ...props
+}: React.ComponentProps<'div'> & { tone?: AlertTone }) {
+  return (
+    <div
+      data-slot="alert"
+      data-tone={tone}
+      role={role ?? (tone === 'error' ? 'alert' : 'status')}
+      className={cn(alertVariants({ tone }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'strong'>) {
+  return (
+    <strong
+      data-slot="alert-title"
+      className={cn('font-semibold text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn('min-w-0 [&_a]:underline [&_a]:underline-offset-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertDescription, AlertTitle, alertVariants }

package/src/avatar.tsx

@@ -0,0 +1,46 @@
+import { cn } from './utils'
+
+export interface AvatarProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+  readonly src?: string | null
+  readonly name: string
+  readonly size?: number
+}
+
+function Avatar({ className, src = null, name, size = 40, ...props }: AvatarProps) {
+  const initial = (Array.from(name.trim())[0] ?? '?').toUpperCase()
+
+  return (
+    <span
+      data-slot="avatar"
+      aria-hidden="true"
+      className={cn(
+        'inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-md border border-border bg-muted',
+        className,
+      )}
+      style={{ width: size, height: size }}
+      {...props}
+    >
+      {src === null ? (
+        <span
+          className="font-medium text-muted-foreground"
+          style={{ fontSize: Math.round(size * 0.42) }}
+        >
+          {initial}
+        </span>
+      ) : (
+        <img
+          src={src}
+          alt=""
+          width={size}
+          height={size}
+          loading="lazy"
+          decoding="async"
+          referrerPolicy="no-referrer"
+          className="size-full object-cover"
+        />
+      )}
+    </span>
+  )
+}
+
+export { Avatar }

package/src/badge.tsx

@@ -0,0 +1,8 @@
+import { cn } from './utils'
+import { badgeVariants, type BadgeVariants } from './variants'
+
+function Badge({ className, tone, ...props }: React.ComponentProps<'span'> & BadgeVariants) {
+  return <span data-slot="badge" className={cn(badgeVariants({ tone }), className)} {...props} />
+}
+
+export { Badge }

package/src/button.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+
+import { cn } from './utils'
+import { buttonVariants, type ButtonVariants } from './variants'
+
+export type ButtonProps = ButtonPrimitive.Props & ButtonVariants
+
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Button }

package/src/card.tsx

@@ -0,0 +1,97 @@
+import { cn } from './utils'
+
+type CardElement = 'section' | 'article' | 'div'
+
+export interface CardProps extends React.ComponentProps<'section'> {
+  readonly as?: CardElement
+}
+
+function Card({ as = 'section', className, ...props }: CardProps) {
+  const Component = as as React.ElementType
+
+  return (
+    <Component
+      data-slot="card"
+      className={cn(
+        'overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface px-4 py-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      data-slot="card-title"
+      className={cn('text-base font-semibold tracking-tight text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('flex shrink-0 flex-wrap items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-4 py-3.5', className)} {...props} />
+}
+
+function CardRows({ className, ...props }: React.ComponentProps<'ul'>) {
+  return <ul data-slot="card-rows" className={cn('divide-y divide-border', className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'flex flex-wrap items-center gap-3 border-t border-border px-4 py-2.5 text-xs text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardRows,
+  CardTitle,
+}

package/src/disclosure.tsx

@@ -0,0 +1,59 @@
+import { cn } from './utils'
+
+export interface DisclosureProps extends Omit<React.ComponentProps<'details'>, 'children'> {
+  readonly summary: React.ReactNode
+  readonly aside?: React.ReactNode
+  readonly children: React.ReactNode
+  readonly contentClassName?: string
+}
+
+function Disclosure({
+  summary,
+  aside,
+  children,
+  className,
+  contentClassName,
+  ...props
+}: DisclosureProps) {
+  return (
+    <details
+      data-slot="disclosure"
+      className={cn(
+        'group overflow-hidden rounded-lg border border-border bg-card text-card-foreground',
+        className,
+      )}
+      {...props}
+    >
+      <summary
+        className={cn(
+          'flex cursor-default list-none items-center gap-2 px-4 py-2.5 text-sm font-medium select-none',
+          'transition-colors hover:bg-muted',
+          '[&::-webkit-details-marker]:hidden [&::marker]:content-none',
+        )}
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 12 12"
+          className="size-3 shrink-0 text-muted-foreground transition-transform group-open:rotate-90"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m4.5 3 3 3-3 3" />
+        </svg>
+
+        <span className="min-w-0 flex-1 truncate">{summary}</span>
+
+        {aside !== undefined && (
+          <span className="shrink-0 text-xs font-normal text-muted-foreground">{aside}</span>
+        )}
+      </summary>
+
+      <div className={cn('border-t border-border p-4', contentClassName)}>{children}</div>
+    </details>
+  )
+}
+
+export { Disclosure }

package/src/empty.tsx

@@ -0,0 +1,40 @@
+import { cn } from './utils'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'flex flex-col items-center gap-2 px-6 py-12 text-center text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="empty-title"
+      className={cn('text-sm font-medium text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="empty-description"
+      className={cn('max-w-prose text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="empty-action" className={cn('mt-2', className)} {...props} />
+}
+
+export { Empty, EmptyAction, EmptyDescription, EmptyTitle }

package/src/field.tsx

@@ -0,0 +1,104 @@
+import { cn } from './utils'
+
+const CONTROL = [
+  'w-full rounded-md border border-input bg-card px-3 text-sm text-foreground',
+  'transition-[border-color,box-shadow] duration-100',
+  'placeholder:text-muted-foreground',
+  'disabled:cursor-not-allowed disabled:opacity-60',
+  'aria-invalid:border-destructive',
+].join(' ')
+
+function Input({ className, type = 'text', ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      data-slot="input"
+      type={type}
+      className={cn(CONTROL, 'h-9 py-1', className)}
+      {...props}
+    />
+  )
+}
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(CONTROL, 'min-h-32 resize-y py-2 leading-relaxed', className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelect({ className, ...props }: React.ComponentProps<'select'>) {
+  return (
+    <select data-slot="native-select" className={cn(CONTROL, 'h-9 pr-8', className)} {...props} />
+  )
+}
+
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
+  return (
+    <label
+      data-slot="label"
+      className={cn('text-sm font-medium leading-none text-foreground select-none', className)}
+      {...props}
+    />
+  )
+}
+
+export interface FieldProps extends Omit<React.ComponentProps<'div'>, 'children' | 'id'> {
+  readonly name: string
+  readonly id?: string
+  readonly label: React.ReactNode
+  readonly description?: React.ReactNode
+  readonly error?: string | null
+  readonly children: (control: {
+    id: string
+    name: string
+    'aria-describedby': string | undefined
+    'aria-invalid': true | undefined
+  }) => React.ReactNode
+}
+
+function Field({
+  className,
+  name,
+  id: providedId,
+  label,
+  description,
+  error,
+  children,
+  ...props
+}: FieldProps) {
+  const id = providedId ?? `field-${name}`
+  const descriptionId = description === undefined ? null : `${id}-description`
+  const errorId = error === null || error === undefined ? null : `${id}-error`
+
+  const describedBy = [errorId, descriptionId].filter((value) => value !== null).join(' ')
+
+  return (
+    <div data-slot="field" className={cn('flex flex-col gap-1.5', className)} {...props}>
+      <Label htmlFor={id}>{label}</Label>
+
+      {children({
+        id,
+        name,
+        'aria-describedby': describedBy === '' ? undefined : describedBy,
+        'aria-invalid': errorId === null ? undefined : true,
+      })}
+
+      {errorId !== null && (
+        <p id={errorId} className="text-xs font-medium text-destructive">
+          {error}
+        </p>
+      )}
+
+      {descriptionId !== null && (
+        <p id={descriptionId} className="text-xs text-muted-foreground">
+          {description}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export { Field, Input, Label, NativeSelect, Textarea }

package/src/index.ts

@@ -0,0 +1,35 @@
+export { cn } from './utils'
+
+export { buttonVariants, badgeVariants } from './variants'
+export type { ButtonVariants, BadgeVariants } from './variants'
+
+export { Alert, AlertDescription, AlertTitle, alertVariants } from './alert'
+export type { AlertTone } from './alert'
+
+export { Avatar } from './avatar'
+export type { AvatarProps } from './avatar'
+
+export { Badge } from './badge'
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardRows,
+  CardTitle,
+} from './card'
+export type { CardProps } from './card'
+
+export { Disclosure } from './disclosure'
+export type { DisclosureProps } from './disclosure'
+
+export { Empty, EmptyAction, EmptyDescription, EmptyTitle } from './empty'
+
+export { Field, Input, Label, NativeSelect, Textarea } from './field'
+export type { FieldProps } from './field'
+
+export { Separator } from './separator'
+export type { SeparatorProps } from './separator'

package/src/menu.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+
+import { cn } from './utils'
+
+export interface MenuLink {
+  readonly label: string
+  readonly href: string
+}
+
+export interface MenuProps {
+  readonly label: string
+  readonly trigger: React.ReactNode
+  readonly triggerClassName?: string
+  readonly items: readonly MenuLink[]
+  readonly children?: React.ReactNode
+  readonly align?: 'start' | 'center' | 'end'
+}
+
+function Menu({ label, trigger, triggerClassName, items, children, align = 'end' }: MenuProps) {
+  return (
+    <MenuPrimitive.Root>
+      <MenuPrimitive.Trigger
+        aria-label={label}
+        className={cn(
+          'inline-flex cursor-default items-center gap-2 rounded-md border border-transparent px-1.5 py-1 text-sm',
+          'transition-colors hover:bg-muted data-[popup-open]:bg-muted',
+          triggerClassName,
+        )}
+      >
+        {trigger}
+      </MenuPrimitive.Trigger>
+
+      <MenuPrimitive.Portal>
+        <MenuPrimitive.Positioner
+          align={align}
+          sideOffset={6}
+          collisionPadding={8}
+          className="z-50 outline-none"
+        >
+          <MenuPrimitive.Popup
+            className={cn(
+              'min-w-52 origin-[var(--transform-origin)] overflow-hidden rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg',
+              'transition-[opacity,transform] duration-100 ease-out',
+              'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',
+              'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',
+            )}
+          >
+            {items.map((item) => (
+              <MenuPrimitive.LinkItem
+                key={item.href}
+                href={item.href}
+                closeOnClick
+                className={cn(
+                  'flex cursor-default items-center rounded-md px-2.5 py-1.5 text-sm text-foreground outline-none select-none',
+                  'data-[highlighted]:bg-muted',
+                )}
+              >
+                {item.label}
+              </MenuPrimitive.LinkItem>
+            ))}
+
+            {children !== undefined && children !== null && (
+              <>
+                <MenuPrimitive.Separator className="-mx-1 my-1 h-px bg-border" />
+                <div
+                  className={cn(
+                    '[&_button]:flex [&_button]:w-full [&_button]:items-center [&_button]:justify-start',
+                    '[&_button]:rounded-md [&_button]:px-2.5 [&_button]:py-1.5 [&_button]:text-sm',
+                    '[&_button]:font-normal [&_button:hover]:bg-muted [&_button:hover]:no-underline',
+                  )}
+                >
+                  {children}
+                </div>
+              </>
+            )}
+          </MenuPrimitive.Popup>
+        </MenuPrimitive.Positioner>
+      </MenuPrimitive.Portal>
+    </MenuPrimitive.Root>
+  )
+}
+
+export { Menu }

package/src/separator.tsx

@@ -0,0 +1,34 @@
+import { cn } from './utils'
+
+export interface SeparatorProps extends React.ComponentProps<'div'> {
+  readonly orientation?: 'horizontal' | 'vertical'
+  readonly decorative?: boolean
+}
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      data-slot="separator"
+      data-orientation={orientation}
+      {...(decorative
+        ? { 'aria-hidden': true }
+        : {
+            role: 'separator',
+            ...(orientation === 'vertical' ? { 'aria-orientation': 'vertical' as const } : {}),
+          })}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-4 w-px self-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/variants.ts

@@ -0,0 +1,70 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+  [
+    'inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap',
+    'rounded-md border text-sm font-medium leading-none',
+    'transition-[color,background-color,border-color,opacity] duration-100 ease-out',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-hover',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/70',
+        outline: 'border-border bg-card text-foreground hover:bg-muted',
+        ghost:
+          'border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground',
+        destructive:
+          'border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/20',
+        link: 'h-auto border-transparent p-0 text-foreground underline underline-offset-4 decoration-border hover:decoration-current',
+      },
+      size: {
+        sm: 'h-8 gap-1.5 px-2.5 text-xs',
+        default: 'h-9 px-3.5',
+        lg: 'h-10 px-4',
+        icon: 'size-9 p-0',
+      },
+    },
+    defaultVariants: { variant: 'secondary', size: 'default' },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+export const badgeVariants = cva(
+  [
+    'inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap',
+    'rounded-sm border px-1.5 py-0.5 text-[0.6875rem] font-medium leading-4 tracking-wide',
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
+  ],
+  {
+    variants: {
+      tone: {
+        neutral: 'border-border bg-muted text-muted-foreground',
+        solid: 'border-transparent bg-primary text-primary-foreground',
+        outline: 'border-border bg-transparent text-foreground',
+        pinned: 'border-thread-pinned/30 bg-thread-pinned/10 text-thread-pinned',
+        locked: 'border-thread-locked/30 bg-thread-locked/10 text-thread-locked',
+        moved: 'border-thread-moved/30 bg-thread-moved/10 text-thread-moved',
+        unapproved: 'border-thread-unapproved/30 bg-thread-unapproved/10 text-thread-unapproved',
+        deleted: 'border-thread-deleted/30 bg-thread-deleted/10 text-thread-deleted',
+        pending: 'border-moderation-pending/30 bg-moderation-pending/10 text-moderation-pending',
+        approved:
+          'border-moderation-approved/30 bg-moderation-approved/10 text-moderation-approved',
+        rejected:
+          'border-moderation-rejected/30 bg-moderation-rejected/10 text-moderation-rejected',
+        admin: 'border-group-admin/30 bg-group-admin/10 text-group-admin',
+        supermod: 'border-group-supermod/30 bg-group-supermod/10 text-group-supermod',
+        mod: 'border-group-mod/30 bg-group-mod/10 text-group-mod',
+        banned: 'border-group-banned/30 bg-group-banned/10 text-group-banned',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>