@glyphui/ui 0.1.1 → 0.3.0

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,226 @@
+import { ContextMenu as MenuPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode, SVGProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { contextMenuStyles } from './context-menu.styles'
+
+function useParts(tone?: 'default' | 'danger', inset?: boolean) {
+  const [, slots] = useComponentConfig('ContextMenu', {})
+  return { s: contextMenuStyles({ tone, inset }), slots }
+}
+
+const svg = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const satisfies SVGProps<SVGSVGElement>
+
+const CheckIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+const DotIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <circle cx="12" cy="12" r="4" fill="currentColor" />
+  </svg>
+)
+const ChevronRightIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+)
+
+/** A menu opened by right-click or long-press on an area. Same items as DropdownMenu. */
+export const ContextMenu = MenuPrimitive.Root
+export const ContextMenuTrigger = MenuPrimitive.Trigger
+export const ContextMenuGroup = MenuPrimitive.Group
+export const ContextMenuRadioGroup = MenuPrimitive.RadioGroup
+export const ContextMenuSub = MenuPrimitive.Sub
+
+export function ContextMenuContent(inProps: ComponentProps<typeof MenuPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('ContextMenu', inProps)
+  const { className, ...rest } = props
+  const s = contextMenuStyles()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </MenuPrimitive.Portal>
+  )
+}
+
+export interface ContextMenuItemProps extends ComponentProps<typeof MenuPrimitive.Item> {
+  icon?: ReactNode
+  /** Keyboard hint shown at the end, e.g. "⌘C". Display only. */
+  shortcut?: ReactNode
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean
+}
+
+export function ContextMenuItem({
+  icon,
+  shortcut,
+  tone,
+  inset,
+  className,
+  children,
+  ...props
+}: ContextMenuItemProps) {
+  const { s, slots } = useParts(tone, inset)
+  return (
+    <MenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-tone={tone ?? 'default'}
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      {shortcut && <ContextMenuShortcut>{shortcut}</ContextMenuShortcut>}
+    </MenuPrimitive.Item>
+  )
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <DotIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+export function ContextMenuLabel({
+  inset,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Label> & { inset?: boolean }) {
+  const { s, slots } = useParts(undefined, inset)
+  return (
+    <MenuPrimitive.Label
+      data-slot="context-menu-label"
+      className={s.label({ class: [slots.label, className] })}
+      {...props}
+    />
+  )
+}
+
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Separator>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    />
+  )
+}
+
+export function ContextMenuShortcut({ className, ...props }: ComponentProps<'span'>) {
+  const { s, slots } = useParts()
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={s.shortcut({ class: [slots.shortcut, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface ContextMenuSubTriggerProps
+  extends ComponentProps<typeof MenuPrimitive.SubTrigger> {
+  icon?: ReactNode
+}
+
+export function ContextMenuSubTrigger({
+  icon,
+  className,
+  children,
+  ...props
+}: ContextMenuSubTriggerProps) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      className={s.subTrigger({ class: [slots.subTrigger, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      <span className="ml-auto flex text-faint-foreground">
+        <ChevronRightIcon />
+      </span>
+    </MenuPrimitive.SubTrigger>
+  )
+}
+
+export function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent
+        data-slot="context-menu-sub-content"
+        className={s.subContent({ class: [slots.subContent, className] })}
+        {...props}
+      />
+    </MenuPrimitive.Portal>
+  )
+}

package/src/components/context-menu/index.ts

@@ -0,0 +1,19 @@
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  type ContextMenuItemProps,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+  ContextMenuTrigger,
+} from './context-menu'
+export { type ContextMenuVariants, contextMenuStyles } from './context-menu.styles'

package/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,117 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+import { Button, type ButtonProps } from '../button'
+
+export const copyButtonStyles = tv({
+  slots: {
+    base: '',
+    icon: 'size-4',
+    status: 'sr-only',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    CopyButton: StylesEntry<typeof copyButtonStyles>
+  }
+}
+
+const icon = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+const CopyIcon = ({ className }: { className?: string }) => (
+  <svg aria-hidden="true" {...icon} className={className}>
+    <rect width="13" height="13" x="9" y="9" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+)
+const CheckIcon = ({ className }: { className?: string }) => (
+  <svg aria-hidden="true" {...icon} className={className}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+
+export interface CopyButtonProps
+  extends Omit<
+    ButtonProps,
+    'onClick' | 'onCopy' | 'leftIcon' | 'rightIcon' | 'iconOnly' | 'asChild' | 'value'
+  > {
+  /** Text written to the clipboard. */
+  value: string
+  /** Visible label. Without it the button is icon-only, labelled "Copy". */
+  children?: ReactNode
+  /** Announced and shown after copying. Default "Copied". */
+  copiedLabel?: string
+  /** How long the copied state lasts, in ms. Default 1500. */
+  timeout?: number
+  onCopy?: (value: string) => void
+}
+
+/** Copies a value to the clipboard and confirms it visually and to screen readers. */
+export function CopyButton(inProps: CopyButtonProps) {
+  const [props, slots] = useComponentConfig('CopyButton', inProps)
+  const {
+    value,
+    children,
+    copiedLabel = 'Copied',
+    timeout = 1500,
+    onCopy,
+    variant = 'outline',
+    className,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const s = copyButtonStyles()
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+    } catch {
+      // Clipboard blocked (permissions, insecure context): leave the button as it was.
+      return
+    }
+    setCopied(true)
+    onCopy?.(value)
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setCopied(false), timeout)
+  }
+
+  const glyph = copied ? (
+    <CheckIcon className={s.icon({ class: slots.icon })} />
+  ) : (
+    <CopyIcon className={s.icon({ class: slots.icon })} />
+  )
+  const iconOnly = children === undefined
+
+  return (
+    <Button
+      data-slot="copy-button"
+      data-copied={copied || undefined}
+      variant={variant}
+      iconOnly={iconOnly}
+      onClick={copy}
+      className={s.base({ class: [slots.base, className] })}
+      aria-label={iconOnly ? (copied ? copiedLabel : (ariaLabel ?? 'Copy')) : ariaLabel}
+      {...(!iconOnly && { leftIcon: glyph })}
+      {...rest}
+    >
+      {iconOnly ? glyph : copied ? copiedLabel : children}
+      <span role="status" className={s.status({ class: slots.status })}>
+        {copied ? copiedLabel : ''}
+      </span>
+    </Button>
+  )
+}

package/src/components/copy-button/index.ts

@@ -0,0 +1 @@
+export { CopyButton, type CopyButtonProps, copyButtonStyles } from './copy-button'

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,42 @@
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const datePickerStyles = tv({
+  slots: {
+    trigger: [
+      ...fieldControl,
+      'flex cursor-pointer items-center gap-2 px-3 text-left outline-none',
+      'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    icon: 'size-4 shrink-0 text-faint-foreground',
+    value: 'min-w-0 flex-1 truncate',
+    placeholder: 'min-w-0 flex-1 truncate text-faint-foreground',
+    clear:
+      'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-xs text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-3.5',
+    content: [popover, 'w-auto p-0'],
+    layout: 'flex flex-col sm:flex-row',
+    presets:
+      'flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0',
+    preset:
+      'shrink-0 cursor-pointer rounded-sm px-2 py-1.5 text-left text-small whitespace-nowrap text-muted-foreground hover:bg-muted hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground',
+  },
+  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' },
+})
+
+export type DatePickerVariants = VariantProps<typeof datePickerStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DatePicker: StylesEntry<typeof datePickerStyles>
+  }
+}