@glyphui/ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,30 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const passwordInputStyles = tv({
+  slots: {
+    root: 'grid gap-1.5',
+    toggle: [
+      '-mr-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4',
+      focusRing,
+    ],
+    meter: 'flex items-center gap-2',
+    bars: 'grid flex-1 grid-cols-3 gap-1',
+    bar: 'h-1 rounded-pill bg-muted transition-colors duration-(--glyph-duration-base)',
+    label: 'w-14 text-right text-caption text-muted-foreground',
+  },
+  variants: {
+    strength: {
+      weak: { label: 'text-danger' },
+      fair: { label: 'text-warning' },
+      strong: { label: 'text-success' },
+    },
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    PasswordInput: StylesEntry<typeof passwordInputStyles>
+  }
+}

package/src/components/password-input/password-input.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Input, type InputProps } from '../input/input'
+import { passwordInputStyles } from './password-input.styles'
+
+export type PasswordStrength = 'weak' | 'fair' | 'strong'
+
+/**
+ * A quick strength estimate from length and character variety. A hint for users,
+ * not a security check: enforce real rules on the server.
+ */
+export function passwordStrength(password: string): { score: number; strength: PasswordStrength } {
+  let score = 0
+  if (password.length >= 8) score++
+  if (password.length >= 12) score++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+  if (/\d/.test(password)) score++
+  if (/[^A-Za-z0-9]/.test(password)) score++
+  const strength: PasswordStrength = score >= 4 ? 'strong' : score >= 3 ? 'fair' : 'weak'
+  return { score, strength }
+}
+
+const filled: Record<PasswordStrength, number> = { weak: 1, fair: 2, strong: 3 }
+const barColor: Record<PasswordStrength, string> = {
+  weak: 'bg-danger',
+  fair: 'bg-warning',
+  strong: 'bg-success',
+}
+const labels: Record<PasswordStrength, string> = { weak: 'Weak', fair: 'Fair', strong: 'Strong' }
+
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+  /** Show a strength meter under the field once the user starts typing. */
+  showStrength?: boolean
+  /** Start with the password visible. */
+  defaultVisible?: boolean
+}
+
+function EyeIcon({ off }: { off: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {off ? (
+        <>
+          <path d="M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" />
+          <path d="M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" />
+        </>
+      ) : (
+        <>
+          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        </>
+      )}
+    </svg>
+  )
+}
+
+/** A password field with a show/hide toggle and an optional strength meter. */
+export function PasswordInput(inProps: PasswordInputProps) {
+  const [props, slots] = useComponentConfig('PasswordInput', inProps)
+  const {
+    showStrength = false,
+    defaultVisible = false,
+    value,
+    defaultValue,
+    onChange,
+    className,
+    ...rest
+  } = props
+  const [visible, setVisible] = useState(defaultVisible)
+  const [typed, setTyped] = useState(String(defaultValue ?? ''))
+  const current = value !== undefined ? String(value) : typed
+  const { strength } = passwordStrength(current)
+  const s = passwordInputStyles({ strength })
+
+  return (
+    <div data-slot="password-input" className={s.root({ class: [slots.root, className] })}>
+      <Input
+        {...rest}
+        {...(value !== undefined && { value })}
+        {...(defaultValue !== undefined && { defaultValue })}
+        type={visible ? 'text' : 'password'}
+        autoComplete={rest.autoComplete ?? 'current-password'}
+        spellCheck={false}
+        onChange={(event) => {
+          setTyped(event.target.value)
+          onChange?.(event)
+        }}
+        suffix={
+          <button
+            type="button"
+            aria-label={visible ? 'Hide password' : 'Show password'}
+            aria-pressed={visible}
+            disabled={rest.disabled}
+            className={s.toggle({ class: slots.toggle })}
+            onClick={() => setVisible((v) => !v)}
+          >
+            <EyeIcon off={visible} />
+          </button>
+        }
+      />
+      {showStrength && current.length > 0 && (
+        <div className={s.meter({ class: slots.meter })}>
+          <div className={s.bars({ class: slots.bars })} aria-hidden="true">
+            {[1, 2, 3].map((n) => (
+              <span
+                key={n}
+                className={s.bar({
+                  class: [slots.bar, n <= filled[strength] && barColor[strength]],
+                })}
+              />
+            ))}
+          </div>
+          <span className={s.label({ class: slots.label })} aria-live="polite">
+            {labels[strength]}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/popover/index.ts

@@ -0,0 +1,9 @@
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  type PopoverContentProps,
+  PopoverTrigger,
+  popoverStyles,
+} from './popover'

package/src/components/popover/popover.tsx

@@ -0,0 +1,66 @@
+import { Popover as PopoverPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const popoverStyles = tv({
+  slots: {
+    content: [
+      popover,
+      'w-72 max-w-[calc(100vw-2rem)] overflow-visible p-4 text-small outline-none',
+    ],
+    arrow: 'fill-raised',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Popover: StylesEntry<typeof popoverStyles>
+  }
+}
+
+/** Floating content anchored to a trigger: quick settings, details, small forms. */
+export const Popover = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverAnchor = PopoverPrimitive.Anchor
+export const PopoverClose = PopoverPrimitive.Close
+
+export interface PopoverContentProps extends ComponentProps<typeof PopoverPrimitive.Content> {
+  /** Render a small arrow pointing at the trigger. */
+  showArrow?: boolean
+}
+
+export function PopoverContent(inProps: PopoverContentProps) {
+  const [props, slots] = useComponentConfig('Popover', inProps)
+  const {
+    showArrow = false,
+    sideOffset = 6,
+    align = 'center',
+    className,
+    children,
+    ...rest
+  } = props
+  const s = popoverStyles()
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      >
+        {children}
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            width={12}
+            height={6}
+            className={s.arrow({ class: slots.arrow })}
+          />
+        )}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}

package/src/components/progress/index.ts

@@ -0,0 +1,7 @@
+export { Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps } from './progress'
+export {
+  type ProgressCircleVariants,
+  type ProgressVariants,
+  progressCircleStyles,
+  progressStyles,
+} from './progress.styles'

package/src/components/progress/progress.styles.ts

@@ -0,0 +1,68 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const progressStyles = tv({
+  slots: {
+    root: 'grid w-full gap-1.5',
+    header: 'flex items-baseline justify-between gap-3 text-small',
+    label: 'font-medium text-foreground',
+    value: 'tabular-nums text-muted-foreground',
+    track: 'relative w-full overflow-hidden rounded-pill bg-muted',
+    indicator: [
+      'h-full w-full rounded-pill transition-transform duration-(--glyph-duration-slow) ease-standard',
+      'data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-pulse',
+    ],
+  },
+  variants: {
+    size: {
+      sm: { track: 'h-1' },
+      md: { track: 'h-2' },
+      lg: { track: 'h-3' },
+    },
+    tone: {
+      primary: { indicator: 'bg-primary' },
+      neutral: { indicator: 'bg-foreground' },
+      success: { indicator: 'bg-success' },
+      warning: { indicator: 'bg-warning' },
+      danger: { indicator: 'bg-danger' },
+    },
+  },
+  defaultVariants: { size: 'md', tone: 'primary' },
+})
+
+export type ProgressVariants = VariantProps<typeof progressStyles>
+
+export const progressCircleStyles = tv({
+  slots: {
+    root: 'relative inline-flex shrink-0 items-center justify-center',
+    svg: 'size-full -rotate-90',
+    track: 'stroke-muted',
+    indicator:
+      'stroke-current transition-[stroke-dashoffset] duration-(--glyph-duration-slow) ease-standard',
+    value: 'absolute font-medium tabular-nums text-foreground',
+  },
+  variants: {
+    size: {
+      sm: { root: 'size-6', value: 'hidden' },
+      md: { root: 'size-10', value: 'text-[0.625rem]' },
+      lg: { root: 'size-16', value: 'text-small' },
+    },
+    tone: {
+      primary: { indicator: 'text-primary' },
+      neutral: { indicator: 'text-foreground' },
+      success: { indicator: 'text-success' },
+      warning: { indicator: 'text-warning' },
+      danger: { indicator: 'text-danger' },
+    },
+  },
+  defaultVariants: { size: 'md', tone: 'primary' },
+})
+
+export type ProgressCircleVariants = VariantProps<typeof progressCircleStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Progress: StylesEntry<typeof progressStyles>
+    ProgressCircle: StylesEntry<typeof progressCircleStyles>
+  }
+}

package/src/components/progress/progress.tsx

@@ -0,0 +1,158 @@
+import { Progress as ProgressPrimitive } from 'radix-ui'
+import { type ComponentProps, type ReactNode, useId } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import {
+  type ProgressCircleVariants,
+  type ProgressVariants,
+  progressCircleStyles,
+  progressStyles,
+} from './progress.styles'
+
+function clampPercent(value: number, max: number): number {
+  if (max <= 0) return 0
+  return Math.min(100, Math.max(0, (value / max) * 100))
+}
+
+const defaultFormat = (value: number, max: number) => `${Math.round(clampPercent(value, max))}%`
+
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'children'>, ProgressVariants {
+  /** Current value. `null` or omitted shows an indeterminate bar. */
+  value?: number | null
+  max?: number
+  /** Visible label above the bar; also its accessible name. */
+  label?: ReactNode
+  /** Show the value next to the label. */
+  showValue?: boolean
+  formatValue?: (value: number, max: number) => string
+  /** Accessible name when there is no visible label. */
+  'aria-label'?: string
+}
+
+/** A horizontal bar showing how far a task has progressed. */
+export function Progress(inProps: ProgressProps) {
+  const [props, slots] = useComponentConfig('Progress', inProps)
+  const {
+    value = null,
+    max = 100,
+    label,
+    showValue = false,
+    formatValue = defaultFormat,
+    size,
+    tone,
+    className,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props
+  const labelId = useId()
+  const s = progressStyles({ size, tone })
+  const determinate = typeof value === 'number'
+  const percent = determinate ? clampPercent(value, max) : 0
+  const valueText = determinate ? formatValue(value, max) : undefined
+
+  return (
+    <div data-slot="progress" className={s.root({ class: [slots.root, className] })} {...rest}>
+      {(label || (showValue && valueText)) && (
+        <div data-slot="progress-header" className={s.header({ class: slots.header })}>
+          {label && (
+            <span id={labelId} className={s.label({ class: slots.label })}>
+              {label}
+            </span>
+          )}
+          {showValue && valueText && (
+            <span className={s.value({ class: slots.value })} aria-hidden="true">
+              {valueText}
+            </span>
+          )}
+        </div>
+      )}
+      <ProgressPrimitive.Root
+        data-slot="progress-track"
+        value={determinate ? Math.min(Math.max(value, 0), max) : null}
+        max={max}
+        getValueLabel={(v, m) => formatValue(v, m)}
+        aria-labelledby={label ? labelId : undefined}
+        aria-label={label ? undefined : ariaLabel}
+        className={s.track({ class: slots.track })}
+      >
+        <ProgressPrimitive.Indicator
+          data-slot="progress-indicator"
+          className={s.indicator({ class: slots.indicator })}
+          style={determinate ? { transform: `translateX(-${100 - percent}%)` } : undefined}
+        />
+      </ProgressPrimitive.Root>
+    </div>
+  )
+}
+
+export interface ProgressCircleProps
+  extends Omit<ComponentProps<'div'>, 'children'>,
+    ProgressCircleVariants {
+  value: number
+  max?: number
+  /** Show the percentage in the center (md and lg sizes). */
+  showValue?: boolean
+  formatValue?: (value: number, max: number) => string
+  /** Accessible name, e.g. "Storage used". */
+  'aria-label'?: string
+}
+
+const RADIUS = 16
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+
+/** A compact ring for progress or a share of a total. */
+export function ProgressCircle(inProps: ProgressCircleProps) {
+  const [props, slots] = useComponentConfig('ProgressCircle', inProps)
+  const {
+    value,
+    max = 100,
+    showValue = false,
+    formatValue = defaultFormat,
+    size,
+    tone,
+    className,
+    ...rest
+  } = props
+  const s = progressCircleStyles({ size, tone })
+  const percent = clampPercent(value, max)
+  const valueText = formatValue(value, max)
+
+  return (
+    <div
+      data-slot="progress-circle"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={Math.min(Math.max(value, 0), max)}
+      aria-valuetext={valueText}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <svg viewBox="0 0 40 40" className={s.svg({ class: slots.svg })} aria-hidden="true">
+        <circle
+          cx="20"
+          cy="20"
+          r={RADIUS}
+          fill="none"
+          strokeWidth="4"
+          className={s.track({ class: slots.track })}
+        />
+        <circle
+          cx="20"
+          cy="20"
+          r={RADIUS}
+          fill="none"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeDasharray={CIRCUMFERENCE}
+          strokeDashoffset={CIRCUMFERENCE * (1 - percent / 100)}
+          className={s.indicator({ class: slots.indicator })}
+        />
+      </svg>
+      {showValue && (
+        <span className={s.value({ class: slots.value })} aria-hidden="true">
+          {valueText}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/prose/index.ts

@@ -0,0 +1 @@
+export { Prose, type ProseProps, proseStyles } from './prose'

package/src/components/prose/prose.tsx

@@ -0,0 +1,82 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+/**
+ * Element styles for long-form content. Every value comes from theme tokens, so articles
+ * pick up the theme's display font, type scale, colors and radius.
+ */
+export const proseStyles = tv({
+  slots: {
+    base: [
+      'text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',
+      // Headings
+      '[&_h1]:mt-[1.4em] [&_h1]:mb-[0.5em] [&_h1]:font-display [&_h1]:text-h1 [&_h1]:text-balance',
+      '[&_h2]:mt-[1.6em] [&_h2]:mb-[0.5em] [&_h2]:font-display [&_h2]:text-h2 [&_h2]:text-balance',
+      '[&_h3]:mt-[1.5em] [&_h3]:mb-[0.4em] [&_h3]:font-display [&_h3]:text-h3 [&_h3]:text-balance',
+      '[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4',
+      // Text
+      '[&_p]:my-[1em] [&_p]:text-pretty',
+      '[&_strong]:font-semibold [&_strong]:text-foreground',
+      '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
+      // Lists
+      '[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]',
+      '[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground',
+      // Quotes
+      '[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground',
+      // Code
+      '[&_:not(pre)>code]:rounded-xs [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3em] [&_:not(pre)>code]:py-[0.15em] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[0.875em]',
+      '[&_pre]:my-[1.5em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-subtle [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-small [&_pre]:leading-relaxed',
+      // Media and rules
+      '[&_hr]:my-[2em] [&_hr]:border-border',
+      '[&_img]:my-[1.5em] [&_img]:max-w-full [&_img]:rounded-lg',
+      '[&_figure]:my-[1.75em] [&_figure_img]:my-0 [&_figcaption]:mt-2 [&_figcaption]:text-small [&_figcaption]:text-faint-foreground',
+      // Tables
+      '[&_table]:my-[1.5em] [&_table]:w-full [&_table]:border-collapse [&_table]:text-small [&_table]:tabular-nums',
+      '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium',
+      '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top',
+    ],
+  },
+  variants: {
+    size: {
+      sm: { base: 'text-small [&_blockquote]:text-body' },
+      md: { base: 'text-body [&_blockquote]:text-lead' },
+      lg: { base: 'text-lead [&_blockquote]:text-h4' },
+    },
+    fullWidth: {
+      true: { base: 'max-w-none' },
+      false: { base: 'max-w-prose' },
+    },
+  },
+  defaultVariants: { size: 'md', fullWidth: false },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Prose: StylesEntry<typeof proseStyles>
+  }
+}
+
+export interface ProseProps extends ComponentProps<'div'>, VariantProps<typeof proseStyles> {
+  /** Render the child element (e.g. `<article>`) instead of a `<div>`. */
+  asChild?: boolean
+}
+
+/**
+ * Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+ * tokens. Wrap rendered Markdown or CMS content in it.
+ */
+export function Prose(inProps: ProseProps) {
+  const [props, slots] = useComponentConfig('Prose', inProps)
+  const { size, fullWidth, asChild, className, ...rest } = props
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <Comp
+      data-slot="prose"
+      className={proseStyles({ size, fullWidth }).base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/radio-group/index.ts

@@ -0,0 +1,7 @@
+export {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  type RadioGroupProps,
+} from './radio-group'
+export { type RadioGroupVariants, radioGroupStyles } from './radio-group.styles'

package/src/components/radio-group/radio-group.styles.ts

@@ -0,0 +1,64 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+const control = [
+  'mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-pill border-input bg-surface shadow-xs',
+  themedBorder,
+  transition,
+]
+
+export const radioGroupStyles = tv({
+  slots: {
+    root: '',
+    option: 'flex items-start gap-2.5',
+    control: [
+      ...control,
+      focusRing,
+      'peer cursor-pointer hover:border-border-strong aria-invalid:border-danger',
+      'data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    indicator:
+      'flex size-full items-center justify-center after:block after:size-2 after:rounded-pill after:bg-primary',
+    text: 'grid gap-0.5',
+    label:
+      'cursor-pointer text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60',
+    description: 'text-small text-faint-foreground',
+    card: [
+      'group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border-border bg-surface p-4 text-left shadow-xs',
+      themedBorder,
+      transition,
+      focusRing,
+      'hover:border-border-strong',
+      'data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-primary',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    cardControl: [...control, 'group-data-[state=checked]:border-primary'],
+  },
+  variants: {
+    orientation: {
+      vertical: { root: 'grid gap-3' },
+      horizontal: { root: 'flex flex-wrap gap-x-5 gap-y-3' },
+    },
+    variant: {
+      default: {},
+      card: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'card',
+      orientation: 'horizontal',
+      class: { root: 'grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-3' },
+    },
+  ],
+  defaultVariants: { orientation: 'vertical', variant: 'default' },
+})
+
+export type RadioGroupVariants = VariantProps<typeof radioGroupStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    RadioGroup: StylesEntry<typeof radioGroupStyles>
+  }
+}