@glyphui/ui 0.0.0-stage → 0.1.0

package/src/components/label/label.tsx

@@ -0,0 +1,21 @@
+import { Label as LabelPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const labelStyles = tv({
+  slots: {
+    base: 'inline-flex select-none items-center gap-1 text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60',
+  },
+})
+
+export function Label(inProps: ComponentProps<typeof LabelPrimitive.Root>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Label', inProps)
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={labelStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/section/index.ts

@@ -0,0 +1 @@
+export { Section, type SectionProps, sectionStyles } from './section'

package/src/components/section/section.tsx

@@ -0,0 +1,39 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const sectionStyles = tv({
+  base: 'w-full',
+  variants: {
+    spacing: {
+      none: 'py-0',
+      sm: 'py-10 sm:py-12',
+      md: 'py-16 sm:py-20',
+      lg: 'py-20 sm:py-28',
+    },
+    tone: {
+      default: '',
+      subtle: 'bg-subtle',
+    },
+    divided: { true: 'border-t-(length:--glyph-border-width) border-border' },
+  },
+  defaultVariants: { spacing: 'md', tone: 'default' },
+})
+
+export interface SectionProps
+  extends ComponentProps<'section'>,
+    VariantProps<typeof sectionStyles> {
+  asChild?: boolean
+}
+
+/** A full-width page band with consistent vertical rhythm. Put a Container inside. */
+export function Section({ spacing, tone, divided, asChild, className, ...props }: SectionProps) {
+  const Comp = asChild ? Slot.Root : 'section'
+  return (
+    <Comp
+      data-slot="section"
+      className={sectionStyles({ spacing, tone, divided, class: className })}
+      {...props}
+    />
+  )
+}

package/src/components/segmented-control/index.ts

@@ -0,0 +1,6 @@
+export {
+  SegmentedControl,
+  type SegmentedControlProps,
+  type SegmentedOption,
+  segmentedControlStyles,
+} from './segmented-control'

package/src/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,79 @@
+import { ToggleGroup } from 'radix-ui'
+import type { ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const segmentedControlStyles = tv({
+  slots: {
+    root: [
+      'inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5',
+      themedBorder,
+    ],
+    item: [
+      'inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:text-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-xs',
+      'disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4',
+    ],
+  },
+  variants: {
+    size: {
+      sm: { root: 'h-(--glyph-control-sm)', item: 'px-2.5 text-caption' },
+      md: { root: 'h-(--glyph-control-md)', item: 'text-small' },
+    },
+    fullWidth: { true: { root: 'flex w-full', item: 'flex-1' } },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export interface SegmentedOption<T extends string> {
+  value: T
+  label: ReactNode
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps<T extends string>
+  extends VariantProps<typeof segmentedControlStyles> {
+  options: readonly SegmentedOption<T>[]
+  value?: T
+  defaultValue?: T
+  onValueChange?: (value: T) => void
+  'aria-label': string
+  className?: string
+  id?: string
+}
+
+/**
+ * Pick exactly one of a few options. `T` is inferred from `options`, so `onValueChange`
+ * receives your union type, not `string`.
+ */
+export function SegmentedControl<T extends string>(inProps: SegmentedControlProps<T>) {
+  const [props, slots] = useComponentConfig('SegmentedControl', inProps)
+  const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props
+  const s = segmentedControlStyles({ size, fullWidth })
+  return (
+    <ToggleGroup.Root
+      type="single"
+      data-slot="segmented-control"
+      {...(value !== undefined && { value })}
+      {...(defaultValue !== undefined && { defaultValue })}
+      // Radix emits '' when the active item is clicked again; a segmented control never deselects.
+      onValueChange={(next: string) => next && onValueChange?.(next as T)}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {options.map((option) => (
+        <ToggleGroup.Item
+          key={option.value}
+          value={option.value}
+          disabled={option.disabled}
+          className={s.item({ class: slots.item })}
+        >
+          {option.label}
+        </ToggleGroup.Item>
+      ))}
+    </ToggleGroup.Root>
+  )
+}

package/src/components/select/index.ts

@@ -0,0 +1 @@
+export { Select, SelectItem, type SelectItemProps, type SelectProps, selectStyles } from './select'

package/src/components/select/select.tsx

@@ -0,0 +1,133 @@
+import { Select as SelectPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CheckIcon, ChevronDownIcon } from '../../internal/icons'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { useFieldControl } from '../field/field-context'
+import { fieldControl } from '../input/input.styles'
+
+export const selectStyles = tv({
+  slots: {
+    trigger: [
+      ...fieldControl,
+      'flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none',
+      'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'data-placeholder:text-faint-foreground disabled:cursor-not-allowed disabled:opacity-50',
+      '[&>span]:truncate',
+    ],
+    icon: 'size-4 shrink-0 text-faint-foreground',
+    content: [
+      popover,
+      'max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)',
+    ],
+    viewport: 'p-1',
+    item: [
+      'relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm pr-8 pl-2 text-small outline-none',
+      'data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',
+    ],
+    indicator: 'absolute right-2 flex items-center text-primary [&>svg]:size-4',
+  },
+  variants: {
+    size: {
+      sm: { trigger: 'h-(--glyph-control-sm) text-small' },
+      md: { trigger: 'h-(--glyph-control-md) text-small' },
+      lg: { trigger: 'h-(--glyph-control-lg) text-body' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+type RootProps<T extends string> = Omit<
+  ComponentProps<typeof SelectPrimitive.Root>,
+  'value' | 'defaultValue' | 'onValueChange'
+> & {
+  value?: T
+  defaultValue?: T
+  onValueChange?: (value: T) => void
+}
+
+export interface SelectProps<T extends string = string>
+  extends RootProps<T>,
+    VariantProps<typeof selectStyles> {
+  placeholder?: ReactNode
+  id?: string
+  className?: string
+  contentClassName?: string
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+}
+
+/**
+ * A dropdown select. `value` is typed by the `T` you use:
+ * `<Select<Plan> value={plan} onValueChange={setPlan}>` only accepts `Plan` values.
+ */
+export function Select<T extends string = string>(inProps: SelectProps<T>) {
+  const [props, slots] = useComponentConfig('Select', useFieldControl(inProps))
+  const {
+    size,
+    placeholder,
+    id,
+    className,
+    contentClassName,
+    children,
+    onValueChange,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    ...rootProps
+  } = props
+  const s = selectStyles({ size })
+  return (
+    <SelectPrimitive.Root
+      {...rootProps}
+      {...(onValueChange && { onValueChange: (v: string) => onValueChange(v as T) })}
+    >
+      <SelectPrimitive.Trigger
+        id={id}
+        data-slot="select-trigger"
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+        className={s.trigger({ class: [slots.trigger, className] })}
+      >
+        <SelectPrimitive.Value placeholder={placeholder} />
+        <SelectPrimitive.Icon asChild>
+          <ChevronDownIcon className={s.icon({ class: slots.icon })} />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          position="popper"
+          sideOffset={4}
+          data-slot="select-content"
+          className={s.content({ class: [slots.content, contentClassName] })}
+        >
+          <SelectPrimitive.Viewport className={s.viewport({ class: slots.viewport })}>
+            {children}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  )
+}
+
+export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {}
+
+export function SelectItem({ className, children, ...props }: SelectItemProps) {
+  const [, slots] = useComponentConfig('Select', {})
+  const s = selectStyles()
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator className={s.indicator({ class: slots.indicator })}>
+        <CheckIcon />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}

package/src/components/separator/index.ts

@@ -0,0 +1 @@
+export { Separator, separatorStyles } from './separator'

package/src/components/separator/separator.tsx

@@ -0,0 +1,29 @@
+import { Separator as SeparatorPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const separatorStyles = tv({
+  slots: { base: 'shrink-0 bg-border' },
+  variants: {
+    orientation: {
+      horizontal: { base: 'h-px w-full' },
+      vertical: { base: 'h-full w-px self-stretch' },
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+})
+
+export function Separator(inProps: ComponentProps<typeof SeparatorPrimitive.Root>) {
+  const [props, slots] = useComponentConfig('Separator', inProps)
+  const { orientation = 'horizontal', decorative = true, className, ...rest } = props
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      orientation={orientation}
+      decorative={decorative}
+      className={separatorStyles({ orientation }).base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, skeletonStyles } from './skeleton'

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const skeletonStyles = tv({
+  slots: { base: 'animate-pulse rounded-sm bg-muted' },
+})
+
+/** Placeholder block shown while content loads. Size it with classes: `h-4 w-32`. */
+export function Skeleton(inProps: ComponentProps<'div'>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Skeleton', inProps)
+  return (
+    <div
+      data-slot="skeleton"
+      aria-hidden="true"
+      className={skeletonStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner, type SpinnerProps } from './spinner'
+export { type SpinnerVariants, spinnerStyles } from './spinner.styles'

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const spinnerStyles = tv({
+  slots: {
+    base: 'inline-block shrink-0 animate-spin',
+    track: 'opacity-20',
+    arc: '',
+  },
+  variants: {
+    size: {
+      sm: { base: 'size-3.5' },
+      md: { base: 'size-4' },
+      lg: { base: 'size-6' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type SpinnerVariants = VariantProps<typeof spinnerStyles>

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type SpinnerVariants, spinnerStyles } from './spinner.styles'
+
+export interface SpinnerProps extends Omit<ComponentProps<'svg'>, 'children'>, SpinnerVariants {
+  /** Accessible label. Omit when the spinner sits inside an element that already says it's busy. */
+  label?: string
+}
+
+export function Spinner(inProps: SpinnerProps) {
+  const [props, slots] = useComponentConfig('Spinner', inProps)
+  const { size, label, className, ...rest } = props
+  const s = spinnerStyles({ size })
+  return (
+    <svg
+      data-slot="spinner"
+      viewBox="0 0 24 24"
+      fill="none"
+      role={label ? 'status' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={s.base({ class: [slots.base, className] })}
+      {...rest}
+    >
+      <circle
+        className={s.track({ class: slots.track })}
+        cx="12"
+        cy="12"
+        r="9"
+        stroke="currentColor"
+        strokeWidth="3"
+      />
+      <path
+        className={s.arc({ class: slots.arc })}
+        d="M21 12a9 9 0 0 0-9-9"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}

package/src/components/stack/index.ts

@@ -0,0 +1 @@
+export { Stack, type StackProps, stackStyles } from './stack'

package/src/components/stack/stack.tsx

@@ -0,0 +1,62 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const stackStyles = tv({
+  base: 'flex',
+  variants: {
+    direction: { column: 'flex-col', row: 'flex-row' },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+    },
+    wrap: { true: 'flex-wrap' },
+  },
+  defaultVariants: { direction: 'column', gap: 4 },
+})
+
+export interface StackProps extends ComponentProps<'div'>, VariantProps<typeof stackStyles> {
+  asChild?: boolean
+}
+
+/** Flex layout with spacing from the scale. `direction="row"` for horizontal. */
+export function Stack({
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  asChild,
+  className,
+  ...props
+}: StackProps) {
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <Comp
+      data-slot="stack"
+      className={stackStyles({ direction, gap, align, justify, wrap, class: className })}
+      {...props}
+    />
+  )
+}

package/src/components/switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps, switchStyles } from './switch'

package/src/components/switch/switch.tsx

@@ -0,0 +1,48 @@
+import { Switch as SwitchPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { useFieldControl } from '../field/field-context'
+
+export const switchStyles = tv({
+  slots: {
+    root: [
+      'peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px',
+      themedBorder,
+      transition,
+      focusRing,
+      'data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    thumb:
+      'pointer-events-none block rounded-pill bg-white shadow-sm transition-transform duration-(--glyph-duration-base) ease-emphasized data-[state=unchecked]:translate-x-0',
+  },
+  variants: {
+    size: {
+      sm: { root: 'h-4 w-7', thumb: 'size-3 data-[state=checked]:translate-x-3' },
+      md: { root: 'h-5 w-9', thumb: 'size-4 data-[state=checked]:translate-x-4' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export interface SwitchProps
+  extends ComponentProps<typeof SwitchPrimitive.Root>,
+    VariantProps<typeof switchStyles> {}
+
+export function Switch(inProps: SwitchProps) {
+  const [{ size, className, ...rest }, slots] = useComponentConfig(
+    'Switch',
+    useFieldControl(inProps),
+  )
+  const s = switchStyles({ size })
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <SwitchPrimitive.Thumb className={s.thumb({ class: slots.thumb })} />
+    </SwitchPrimitive.Root>
+  )
+}

package/src/components/table/index.ts

@@ -0,0 +1,10 @@
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  tableStyles,
+} from './table'

package/src/components/table/table.tsx

@@ -0,0 +1,90 @@
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { tv } from '../../utils/tv'
+
+export const tableStyles = tv({
+  slots: {
+    wrapper: 'relative w-full overflow-x-auto',
+    table: 'w-full caption-bottom border-collapse text-small tabular-nums',
+    header: '[&_tr]:border-b [&_tr]:border-border',
+    body: '[&_tr:last-child]:border-0',
+    row: 'border-b border-border transition-colors duration-(--glyph-duration-fast) hover:bg-muted/50 data-[state=selected]:bg-primary/6',
+    head: 'h-10 whitespace-nowrap px-3 first:pl-4 last:pr-4 text-left align-middle text-caption font-medium text-muted-foreground [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',
+    cell: 'px-3 py-2.5 align-middle first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0',
+    caption: 'mt-3 text-small text-faint-foreground',
+  },
+})
+
+const s = tableStyles()
+
+function useSlots() {
+  return useComponentConfig('Table', {})[1]
+}
+
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+export function Table({ className, ...props }: ComponentProps<'table'>) {
+  const slots = useSlots()
+  return (
+    <div data-slot="table-wrapper" className={s.wrapper({ class: slots.wrapper })}>
+      <table
+        data-slot="table"
+        className={s.table({ class: [slots.table, className] })}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function TableHeader({ className, ...props }: ComponentProps<'thead'>) {
+  const slots = useSlots()
+  return (
+    <thead
+      data-slot="table-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export function TableBody({ className, ...props }: ComponentProps<'tbody'>) {
+  const slots = useSlots()
+  return (
+    <tbody
+      data-slot="table-body"
+      className={s.body({ class: [slots.body, className] })}
+      {...props}
+    />
+  )
+}
+
+export function TableRow({ className, ...props }: ComponentProps<'tr'>) {
+  const slots = useSlots()
+  return (
+    <tr data-slot="table-row" className={s.row({ class: [slots.row, className] })} {...props} />
+  )
+}
+
+export function TableHead({ className, ...props }: ComponentProps<'th'>) {
+  const slots = useSlots()
+  return (
+    <th data-slot="table-head" className={s.head({ class: [slots.head, className] })} {...props} />
+  )
+}
+
+export function TableCell({ className, ...props }: ComponentProps<'td'>) {
+  const slots = useSlots()
+  return (
+    <td data-slot="table-cell" className={s.cell({ class: [slots.cell, className] })} {...props} />
+  )
+}
+
+export function TableCaption({ className, ...props }: ComponentProps<'caption'>) {
+  const slots = useSlots()
+  return (
+    <caption
+      data-slot="table-caption"
+      className={s.caption({ class: [slots.caption, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, tabsStyles } from './tabs'