@glyphui/ui 0.0.0-stage → 0.1.0

package/src/components/button/button.tsx

@@ -0,0 +1,77 @@
+import { Slot } from 'radix-ui'
+import { type ComponentProps, Fragment, type ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Spinner } from '../spinner'
+import { type ButtonVariants, buttonStyles } from './button.styles'
+
+export interface ButtonProps extends ComponentProps<'button'>, ButtonVariants {
+  /** Render the child element (e.g. a router link) with button styles instead of a `<button>`. */
+  asChild?: boolean
+  /** Shows a spinner, disables the button and sets `aria-busy`. */
+  loading?: boolean
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+}
+
+export function Button(inProps: ButtonProps) {
+  const [props, slots] = useComponentConfig('Button', inProps)
+  const {
+    variant,
+    size,
+    iconOnly,
+    fullWidth,
+    asChild = false,
+    loading = false,
+    leftIcon,
+    rightIcon,
+    disabled,
+    type,
+    className,
+    children,
+    ...rest
+  } = props
+  const s = buttonStyles({ variant, size, iconOnly, fullWidth })
+  const Comp = asChild ? Slot.Root : 'button'
+  const icon = (node: ReactNode) =>
+    node ? (
+      <span data-slot="button-icon" className={s.icon({ class: slots.icon })} aria-hidden="true">
+        {node}
+      </span>
+    ) : null
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant ?? 'primary'}
+      className={s.base({ class: [slots.base, className] })}
+      aria-busy={loading || undefined}
+      {...(!asChild && { type: type ?? 'button', disabled: disabled || loading })}
+      {...rest}
+    >
+      {iconOnly
+        ? icon(loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : children)
+        : // Children stay direct (no Fragment) so Slot can find the Slottable when asChild is set.
+          [
+            <Fragment key="start">{icon(loading ? <Spinner size="sm" /> : leftIcon)}</Fragment>,
+            <Slot.Slottable key="content">{children}</Slot.Slottable>,
+            <Fragment key="end">{icon(rightIcon)}</Fragment>,
+          ]}
+    </Comp>
+  )
+}
+
+export interface IconButtonProps
+  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'iconOnly' | 'fullWidth' | 'children'> {
+  icon: ReactNode
+  /** Required: an icon-only button has no visible text. */
+  'aria-label': string
+}
+
+/** A square button holding one icon. Shares Button's variants and theme overrides. */
+export function IconButton({ icon, variant = 'ghost', ...props }: IconButtonProps) {
+  return (
+    <Button variant={variant} {...props} iconOnly>
+      {icon}
+    </Button>
+  )
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps, IconButton, type IconButtonProps } from './button'
+export { type ButtonVariants, buttonStyles } from './button.styles'

package/src/components/card/card.styles.ts

@@ -0,0 +1,32 @@
+import { themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const cardStyles = tv({
+  slots: {
+    root: ['flex flex-col rounded-lg text-foreground', themedBorder, transition],
+    header: 'flex flex-col gap-1',
+    title: 'font-display text-h4 text-foreground',
+    description: 'text-small text-muted-foreground',
+    body: 'min-w-0',
+    footer: 'mt-auto flex items-center gap-2 pt-1',
+  },
+  variants: {
+    variant: {
+      outline: { root: 'border-border bg-surface' },
+      elevated: { root: 'border-border bg-surface shadow-md' },
+      ghost: { root: 'border-transparent bg-subtle' },
+      interactive: {
+        root: 'cursor-pointer border-border bg-surface shadow-sm hover:-translate-y-0.5 hover:border-border-strong hover:shadow-lg',
+      },
+    },
+    padding: {
+      none: { root: 'gap-0 p-0' },
+      sm: { root: 'gap-3 p-4' },
+      md: { root: 'gap-4 p-6' },
+      lg: { root: 'gap-5 p-8' },
+    },
+  },
+  defaultVariants: { variant: 'elevated', padding: 'md' },
+})
+
+export type CardVariants = VariantProps<typeof cardStyles>

package/src/components/card/card.tsx

@@ -0,0 +1,91 @@
+import { Slot } from 'radix-ui'
+import { type ComponentProps, createContext, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { type CardVariants, cardStyles } from './card.styles'
+
+type CardStyles = ReturnType<typeof cardStyles>
+
+const CardContext = createContext<{ s: CardStyles; slots: SlotClasses<'Card'> } | null>(null)
+
+function useCardParts() {
+  const ctx = useContext(CardContext)
+  return ctx ?? { s: cardStyles(), slots: {} }
+}
+
+export interface CardProps extends ComponentProps<'div'>, CardVariants {
+  asChild?: boolean
+}
+
+/** A surface that groups related content. Compose with CardHeader, CardTitle, CardBody, CardFooter. */
+export function Card(inProps: CardProps) {
+  const [props, slots] = useComponentConfig('Card', inProps)
+  const { variant, padding, asChild, className, ...rest } = props
+  const s = cardStyles({ variant, padding })
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <CardContext.Provider value={{ s, slots }}>
+      <Comp
+        data-slot="card"
+        data-variant={variant}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      />
+    </CardContext.Provider>
+  )
+}
+
+export function CardHeader({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCardParts()
+  return (
+    <div
+      data-slot="card-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface CardTitleProps extends ComponentProps<'h3'> {
+  asChild?: boolean
+}
+
+export function CardTitle({ asChild, className, ...props }: CardTitleProps) {
+  const { s, slots } = useCardParts()
+  const Comp = asChild ? Slot.Root : 'h3'
+  return (
+    <Comp
+      data-slot="card-title"
+      className={s.title({ class: [slots.title, className] })}
+      {...props}
+    />
+  )
+}
+
+export function CardDescription({ className, ...props }: ComponentProps<'p'>) {
+  const { s, slots } = useCardParts()
+  return (
+    <p
+      data-slot="card-description"
+      className={s.description({ class: [slots.description, className] })}
+      {...props}
+    />
+  )
+}
+
+export function CardBody({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCardParts()
+  return (
+    <div data-slot="card-body" className={s.body({ class: [slots.body, className] })} {...props} />
+  )
+}
+
+export function CardFooter({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCardParts()
+  return (
+    <div
+      data-slot="card-footer"
+      className={s.footer({ class: [slots.footer, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/card/index.ts

@@ -0,0 +1,11 @@
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  type CardProps,
+  CardTitle,
+  type CardTitleProps,
+} from './card'
+export { type CardVariants, cardStyles } from './card.styles'

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,39 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CheckIcon, MinusIcon } from '../../internal/icons'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+import { useFieldControl } from '../field/field-context'
+
+export const checkboxStyles = tv({
+  slots: {
+    root: [
+      'peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs',
+      themedBorder,
+      transition,
+      focusRing,
+      'hover:border-border-strong aria-invalid:border-danger',
+      'data-[state=checked]:border-primary data-[state=checked]:bg-primary',
+      'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    indicator: 'flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]',
+  },
+})
+
+export function Checkbox(inProps: ComponentProps<typeof CheckboxPrimitive.Root>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Checkbox', useFieldControl(inProps))
+  const s = checkboxStyles()
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <CheckboxPrimitive.Indicator className={s.indicator({ class: slots.indicator })}>
+        {rest.checked === 'indeterminate' ? <MinusIcon /> : <CheckIcon />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, checkboxStyles } from './checkbox'

package/src/components/container/container.tsx

@@ -0,0 +1,35 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const containerStyles = tv({
+  base: 'mx-auto w-full px-4 sm:px-6',
+  variants: {
+    size: {
+      sm: 'max-w-2xl',
+      md: 'max-w-3xl',
+      lg: 'max-w-5xl',
+      xl: 'max-w-7xl',
+      full: 'max-w-none',
+    },
+  },
+  defaultVariants: { size: 'xl' },
+})
+
+export interface ContainerProps
+  extends ComponentProps<'div'>,
+    VariantProps<typeof containerStyles> {
+  asChild?: boolean
+}
+
+/** Centers content at a readable max width with consistent side gutters. */
+export function Container({ size, asChild, className, ...props }: ContainerProps) {
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <Comp
+      data-slot="container"
+      className={containerStyles({ size, class: className })}
+      {...props}
+    />
+  )
+}

package/src/components/container/index.ts

@@ -0,0 +1 @@
+export { Container, type ContainerProps, containerStyles } from './container'

package/src/components/eyebrow/eyebrow.styles.ts

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const eyebrowStyles = tv({
+  slots: { base: 'font-mono text-caption uppercase tracking-[0.12em]' },
+  variants: {
+    tone: {
+      muted: { base: 'text-muted-foreground' },
+      primary: { base: 'text-primary' },
+    },
+  },
+  defaultVariants: { tone: 'muted' },
+})
+
+export type EyebrowVariants = VariantProps<typeof eyebrowStyles>

package/src/components/eyebrow/eyebrow.tsx

@@ -0,0 +1,19 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type EyebrowVariants, eyebrowStyles } from './eyebrow.styles'
+
+export interface EyebrowProps extends ComponentProps<'p'>, EyebrowVariants {
+  asChild?: boolean
+}
+
+/** Small uppercase label that sits above a heading. */
+export function Eyebrow(inProps: EyebrowProps) {
+  const [props, slots] = useComponentConfig('Eyebrow', inProps)
+  const { tone, asChild, className, ...rest } = props
+  const s = eyebrowStyles({ tone })
+  const Comp = asChild ? Slot.Root : 'p'
+  return (
+    <Comp data-slot="eyebrow" className={s.base({ class: [slots.base, className] })} {...rest} />
+  )
+}

package/src/components/eyebrow/index.ts

@@ -0,0 +1,2 @@
+export { Eyebrow, type EyebrowProps } from './eyebrow'
+export { type EyebrowVariants, eyebrowStyles } from './eyebrow.styles'

package/src/components/field/field-context.ts

@@ -0,0 +1,40 @@
+import { createContext, useContext } from 'react'
+
+export interface FieldContextValue {
+  id: string
+  descriptionId: string | undefined
+  errorId: string | undefined
+  invalid: boolean
+  required: boolean
+  disabled: boolean
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null)
+
+interface ControlProps {
+  id?: string | undefined
+  disabled?: boolean | undefined
+  required?: boolean | undefined
+  'aria-describedby'?: string | undefined
+  'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling' | undefined
+}
+
+/**
+ * Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
+ * for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
+ */
+export function useFieldControl<P extends ControlProps>(props: P): P {
+  const field = useContext(FieldContext)
+  if (!field) return props
+  const describedBy = [field.descriptionId, field.errorId, props['aria-describedby']]
+    .filter(Boolean)
+    .join(' ')
+  return {
+    ...props,
+    id: props.id ?? field.id,
+    disabled: props.disabled ?? (field.disabled || undefined),
+    required: props.required ?? (field.required || undefined),
+    'aria-describedby': describedBy || undefined,
+    'aria-invalid': props['aria-invalid'] ?? (field.invalid || undefined),
+  }
+}

package/src/components/field/field.styles.ts

@@ -0,0 +1,23 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const fieldStyles = tv({
+  slots: {
+    root: 'grid gap-1.5',
+    label: '',
+    required: 'text-danger',
+    text: 'grid gap-0.5',
+    description: 'text-small text-faint-foreground',
+    error: 'text-small font-medium text-danger',
+  },
+  variants: {
+    orientation: {
+      vertical: {},
+      horizontal: {
+        root: 'grid-cols-[auto_1fr] items-start gap-x-3 [&>[data-slot=field-text]]:col-start-2',
+      },
+    },
+  },
+  defaultVariants: { orientation: 'vertical' },
+})
+
+export type FieldVariants = VariantProps<typeof fieldStyles>

package/src/components/field/field.tsx

@@ -0,0 +1,109 @@
+import { type ComponentProps, type ReactNode, useId, useMemo } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Label } from '../label'
+import { type FieldVariants, fieldStyles } from './field.styles'
+import { FieldContext } from './field-context'
+
+export interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
+  label?: ReactNode
+  description?: ReactNode
+  /** Error message. Marks the control invalid and is announced to screen readers. */
+  error?: ReactNode
+  required?: boolean
+  disabled?: boolean
+  /** Id for the control. Generated when omitted. */
+  controlId?: string
+  children: ReactNode
+}
+
+/**
+ * Wraps one form control with its label, description and error, and wires the ARIA
+ * attributes between them. Controls inside (Input, Select, Checkbox, ...) pick this up.
+ *
+ * `orientation="horizontal"` puts the control first with text beside it, for checkboxes
+ * and switches.
+ */
+export function Field(inProps: FieldProps) {
+  const [props, slots] = useComponentConfig('Field', inProps)
+  const {
+    label,
+    description,
+    error,
+    required = false,
+    disabled = false,
+    controlId,
+    orientation,
+    className,
+    children,
+    ...rest
+  } = props
+  const generated = useId()
+  const id = controlId ?? generated
+  const invalid = Boolean(error)
+  const descriptionId = description ? `${id}-description` : undefined
+  const errorId = invalid ? `${id}-error` : undefined
+  const s = fieldStyles({ orientation })
+
+  const context = useMemo(
+    () => ({ id, descriptionId, errorId, invalid, required, disabled }),
+    [id, descriptionId, errorId, invalid, required, disabled],
+  )
+
+  const labelNode = label ? (
+    <Label htmlFor={id} className={s.label({ class: slots.label })}>
+      {label}
+      {required && (
+        <span className={s.required({ class: slots.required })} aria-hidden="true">
+          *
+        </span>
+      )}
+    </Label>
+  ) : null
+
+  const messages = (
+    <>
+      {description && (
+        <p
+          id={descriptionId}
+          data-slot="field-description"
+          className={s.description({ class: slots.description })}
+        >
+          {description}
+        </p>
+      )}
+      {invalid && (
+        <p id={errorId} data-slot="field-error" className={s.error({ class: slots.error })}>
+          {error}
+        </p>
+      )}
+    </>
+  )
+
+  return (
+    <FieldContext.Provider value={context}>
+      <div
+        data-slot="field"
+        data-invalid={invalid || undefined}
+        data-disabled={disabled || undefined}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      >
+        {orientation === 'horizontal' ? (
+          <>
+            {children}
+            <div data-slot="field-text" className={s.text({ class: slots.text })}>
+              {labelNode}
+              {messages}
+            </div>
+          </>
+        ) : (
+          <>
+            {labelNode}
+            {children}
+            {messages}
+          </>
+        )}
+      </div>
+    </FieldContext.Provider>
+  )
+}

package/src/components/field/index.ts

@@ -0,0 +1,3 @@
+export { Field, type FieldProps } from './field'
+export { type FieldVariants, fieldStyles } from './field.styles'
+export { FieldContext, type FieldContextValue, useFieldControl } from './field-context'

package/src/components/heading/heading.styles.ts

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const headingStyles = tv({
+  slots: { base: 'font-display text-balance text-foreground' },
+  variants: {
+    size: {
+      display: { base: 'text-display' },
+      h1: { base: 'text-h1' },
+      h2: { base: 'text-h2' },
+      h3: { base: 'text-h3' },
+      h4: { base: 'text-h4' },
+    },
+  },
+})
+
+export type HeadingVariants = VariantProps<typeof headingStyles>

package/src/components/heading/heading.tsx

@@ -0,0 +1,26 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type HeadingVariants, headingStyles } from './heading.styles'
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6
+type Size = NonNullable<HeadingVariants['size']>
+
+const sizeForLevel: Record<Level, Size> = { 1: 'h1', 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h4', 6: 'h4' }
+
+export interface HeadingProps extends ComponentProps<'h2'>, HeadingVariants {
+  /** Document outline level (h1–h6). Visual size follows it unless `size` is set. */
+  level?: Level
+  asChild?: boolean
+}
+
+/** A heading whose semantic level and visual size are set independently. */
+export function Heading(inProps: HeadingProps) {
+  const [props, slots] = useComponentConfig('Heading', inProps)
+  const { level = 2, size, asChild, className, ...rest } = props
+  const s = headingStyles({ size: size ?? sizeForLevel[level] })
+  const Comp = asChild ? Slot.Root : (`h${level}` as const)
+  return (
+    <Comp data-slot="heading" className={s.base({ class: [slots.base, className] })} {...rest} />
+  )
+}

package/src/components/heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading, type HeadingProps } from './heading'
+export { type HeadingVariants, headingStyles } from './heading.styles'

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input, type InputProps } from './input'
+export { fieldControl, type InputVariants, inputStyles } from './input.styles'

package/src/components/input/input.styles.ts

@@ -0,0 +1,36 @@
+import { themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+/** Shared by Input, Textarea and the Select trigger so all fields look alike. */
+export const fieldControl = [
+  'w-full rounded-md border-input bg-surface text-foreground shadow-xs',
+  themedBorder,
+  transition,
+  'hover:border-border-strong',
+  'data-invalid:border-danger aria-invalid:border-danger',
+]
+
+export const inputStyles = tv({
+  slots: {
+    root: [
+      ...fieldControl,
+      'flex items-center gap-2 px-3',
+      'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20',
+      'data-invalid:focus-within:ring-danger/20',
+      'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+    ],
+    input:
+      'h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed',
+    adornment: 'flex shrink-0 items-center text-faint-foreground [&>svg]:size-4',
+  },
+  variants: {
+    size: {
+      sm: { root: 'h-(--glyph-control-sm) text-small' },
+      md: { root: 'h-(--glyph-control-md) text-small' },
+      lg: { root: 'h-(--glyph-control-lg) text-body' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type InputVariants = VariantProps<typeof inputStyles>

package/src/components/input/input.tsx

@@ -0,0 +1,33 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useFieldControl } from '../field/field-context'
+import { type InputVariants, inputStyles } from './input.styles'
+
+export interface InputProps
+  extends Omit<ComponentProps<'input'>, 'size' | 'prefix'>,
+    InputVariants {
+  /** Content before the text, e.g. an icon or `https://`. */
+  prefix?: ReactNode
+  /** Content after the text, e.g. a unit or a Kbd hint. */
+  suffix?: ReactNode
+  /** Classes for the `<input>` element itself. `className` styles the outer frame. */
+  inputClassName?: string
+}
+
+export function Input(inProps: InputProps) {
+  const [props, slots] = useComponentConfig('Input', useFieldControl(inProps))
+  const { size, prefix, suffix, className, inputClassName, ...rest } = props
+  const s = inputStyles({ size })
+  const invalid = rest['aria-invalid'] === true || rest['aria-invalid'] === 'true'
+  return (
+    <div
+      data-slot="input"
+      data-invalid={invalid || undefined}
+      className={s.root({ class: [slots.root, className] })}
+    >
+      {prefix && <span className={s.adornment({ class: slots.adornment })}>{prefix}</span>}
+      <input className={s.input({ class: [slots.input, inputClassName] })} {...rest} />
+      {suffix && <span className={s.adornment({ class: slots.adornment })}>{suffix}</span>}
+    </div>
+  )
+}

package/src/components/kbd/index.ts

@@ -0,0 +1 @@
+export { Kbd, kbdStyles } from './kbd'

package/src/components/kbd/kbd.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const kbdStyles = tv({
+  slots: {
+    base: 'inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs',
+  },
+})
+
+/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
+export function Kbd(inProps: ComponentProps<'kbd'>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Kbd', inProps)
+  return (
+    <kbd
+      data-slot="kbd"
+      className={kbdStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/label/index.ts

@@ -0,0 +1 @@
+export { Label, labelStyles } from './label'