@glyphui/ui 0.1.1 → 0.3.0

package/dist/{states-BxPjCUxz.js → states-DR-OoDT-.js}

@@ -1,5 +1,6 @@
 "use client";
-import { E as tv, O as useComponentConfig, S as focusRing, T as transition, _ as Button, b as Spinner, d as InboxIcon, n as useFieldControl, o as CheckIcon, p as MinusIcon, r as AlertIcon, w as themedBorder } from "./field-context-B8cYheXz.js";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-anGPYXbW.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx

package/dist/tv-DBAGlgXJ.js

@@ -0,0 +1,58 @@
+"use client";
+import { textTokens } from "@glyphui/tokens";
+import { createContext, useContext } from "react";
+import { createTV } from "tailwind-variants";
+//#region src/provider/glyph-context.ts
+const GlyphContext = createContext(null);
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+function useGlyph() {
+	const value = useContext(GlyphContext);
+	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
+	return value;
+}
+/** The router-aware link component configured on `GlyphProvider`. */
+function useLinkComponent() {
+	return useContext(GlyphContext)?.linkComponent ?? "a";
+}
+//#endregion
+//#region src/hooks/use-component-config.ts
+/**
+* Applies the theme's per-component settings (`theme.components[name]`):
+* fills unset variant props from `defaultVariants` and returns the extra slot classes.
+* Every styled component calls this first.
+*/
+function useComponentConfig(name, props) {
+	const override = (useContext(GlyphContext)?.theme)?.components[name];
+	if (!override) return [props, {}];
+	let merged = props;
+	const defaults = override.defaultVariants;
+	if (defaults) {
+		merged = { ...props };
+		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
+	}
+	return [merged, override.className ?? {}];
+}
+//#endregion
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
+//#endregion
+//#region src/utils/tw-merge-config.ts
+/**
+* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+* keeps only the last size instead of treating `text-h1` as a color.
+*/
+const twMergeConfig = { extend: { theme: {
+	text: [...textTokens],
+	radius: ["pill"]
+} } };
+//#endregion
+//#region src/utils/tv.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+const tv = createTV({ twMergeConfig });
+//#endregion
+export { themedBorder as a, GlyphContext as c, popover as i, useGlyph as l, twMergeConfig as n, transition as o, focusRing as r, useComponentConfig as s, tv as t, useLinkComponent as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
   "license": "MIT",
   "author": "Mohak Gupta (https://github.com/khalmohak)",
@@ -46,6 +46,11 @@
       "types": "./dist/data-table.d.ts",
       "default": "./dist/data-table.js"
     },
+    "./chart": {
+      "@glyphui/source": "./src/patterns/chart/index.ts",
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
     "./styles.css": "./styles.css",
     "./package.json": "./package.json"
   },
@@ -58,10 +63,17 @@
     "!src/test"
   ],
   "dependencies": {
-    "@glyphui/tokens": "^0.1.1",
+    "@glyphui/tokens": "^0.3.0",
     "@standard-schema/spec": "^1.1.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
     "radix-ui": "^1.6.7",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^3.0.6",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
   },
@@ -71,6 +83,7 @@
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": "^7.55.0",
+    "recharts": "^3.0.0",
     "tailwindcss": ">=4.1"
   },
   "peerDependenciesMeta": {
@@ -82,6 +95,9 @@
     },
     "react-hook-form": {
       "optional": true
+    },
+    "recharts": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -98,6 +114,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.89.0",
+    "recharts": "^3.10.1",
     "tsdown": "^0.23.0",
     "typescript": "~5.9.3",
     "vitest": "^3.2.7",

package/src/components/accordion/accordion.styles.ts

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const accordionStyles = tv({
+  slots: {
+    root: 'w-full',
+    item: '',
+    header: 'flex',
+    trigger: [
+      'group flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-xs py-4 text-left text-body font-medium text-foreground',
+      transition,
+      focusRing,
+      'hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    chevron:
+      'size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180',
+    content:
+      'overflow-hidden text-small text-muted-foreground data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up',
+    // Height animates open and closed using Radix's measured content height.
+    contentInner: 'pb-4',
+  },
+  variants: {
+    variant: {
+      default: { item: 'border-b border-border last:border-b-0' },
+      separated: {
+        root: 'grid gap-2',
+        item: ['rounded-lg border-border bg-surface px-4 shadow-xs', themedBorder],
+      },
+    },
+  },
+  defaultVariants: { variant: 'default' },
+})
+
+export type AccordionVariants = VariantProps<typeof accordionStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Accordion: StylesEntry<typeof accordionStyles>
+  }
+}

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,86 @@
+import { Accordion as AccordionPrimitive } from 'radix-ui'
+import { type ComponentProps, createContext, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { ChevronDownIcon } from '../../internal/icons'
+import { type AccordionVariants, accordionStyles } from './accordion.styles'
+
+const AccordionContext = createContext<{
+  s: ReturnType<typeof accordionStyles>
+  slots: SlotClasses<'Accordion'>
+} | null>(null)
+
+function useParts() {
+  return useContext(AccordionContext) ?? { s: accordionStyles(), slots: {} }
+}
+
+export type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root> & AccordionVariants
+
+/**
+ * Stacked sections that expand one at a time (`type="single"`, collapsible) or
+ * independently (`type="multiple"`). Good for FAQs and dense settings.
+ */
+export function Accordion(inProps: AccordionProps) {
+  const [props, slots] = useComponentConfig('Accordion', inProps)
+  const { variant, className, ...rest } = props
+  const s = accordionStyles({ variant })
+  return (
+    <AccordionContext.Provider value={{ s, slots }}>
+      <AccordionPrimitive.Root
+        data-slot="accordion"
+        className={s.root({ class: [slots.root, className] })}
+        {...(rest as ComponentProps<typeof AccordionPrimitive.Root>)}
+      />
+    </AccordionContext.Provider>
+  )
+}
+
+export function AccordionItem({
+  className,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Item>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Header className={s.header({ class: slots.header })}>
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={s.trigger({ class: [slots.trigger, className] })}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className={s.chevron({ class: slots.chevron })} />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+export function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Content>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className={s.content({ class: slots.content })}
+      {...props}
+    >
+      <div className={s.contentInner({ class: [slots.contentInner, className] })}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,8 @@
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  type AccordionProps,
+  AccordionTrigger,
+} from './accordion'
+export { type AccordionVariants, accordionStyles } from './accordion.styles'

package/src/components/alert/alert-icons.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode, SVGProps } from 'react'
+
+type IconProps = SVGProps<SVGSVGElement>
+
+function Icon({ children, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export const InfoIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4M12 8h.01" />
+  </Icon>
+)
+export const SuccessIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </Icon>
+)
+export const WarningIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+    <path d="M12 9v4M12 17h.01" />
+  </Icon>
+)
+export const DangerIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="m15 9-6 6M9 9l6 6" />
+  </Icon>
+)
+export const MegaphoneIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m3 11 18-5v12L3 14v-3z" />
+    <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6" />
+  </Icon>
+)
+
+export type IconTone = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+
+/** The default icon for each tone. */
+export const toneIcons: Record<IconTone, () => ReactNode> = {
+  neutral: () => <InfoIcon />,
+  primary: () => <MegaphoneIcon />,
+  info: () => <InfoIcon />,
+  success: () => <SuccessIcon />,
+  warning: () => <WarningIcon />,
+  danger: () => <DangerIcon />,
+}

package/src/components/alert/alert.styles.ts

@@ -0,0 +1,57 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+// Soft fills per tone. Icon color is mixed toward the foreground so it stays readable in both modes.
+export const alertStyles = tv({
+  slots: {
+    root: ['relative flex w-full items-start gap-3 rounded-md px-4 py-3 text-small', themedBorder],
+    icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    content: 'grid min-w-0 flex-1 gap-0.5',
+    title: 'font-medium text-foreground',
+    description:
+      'text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2',
+    action: 'flex shrink-0 items-center gap-2 self-center',
+    dismiss: '-my-1 -mr-2 shrink-0',
+  },
+  variants: {
+    tone: {
+      neutral: { icon: 'text-muted-foreground' },
+      info: { icon: 'text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]' },
+      success: {
+        icon: 'text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]',
+      },
+      warning: {
+        icon: 'text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]',
+      },
+      danger: {
+        icon: 'text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]',
+      },
+    },
+    variant: {
+      soft: {},
+      outline: { root: 'bg-surface' },
+    },
+  },
+  compoundVariants: [
+    { variant: 'soft', tone: 'neutral', class: { root: 'border-border bg-muted' } },
+    { variant: 'soft', tone: 'info', class: { root: 'border-info/25 bg-info/8' } },
+    { variant: 'soft', tone: 'success', class: { root: 'border-success/25 bg-success/8' } },
+    { variant: 'soft', tone: 'warning', class: { root: 'border-warning/30 bg-warning/10' } },
+    { variant: 'soft', tone: 'danger', class: { root: 'border-danger/25 bg-danger/8' } },
+    { variant: 'outline', tone: 'neutral', class: { root: 'border-border-strong' } },
+    { variant: 'outline', tone: 'info', class: { root: 'border-info/50' } },
+    { variant: 'outline', tone: 'success', class: { root: 'border-success/50' } },
+    { variant: 'outline', tone: 'warning', class: { root: 'border-warning/60' } },
+    { variant: 'outline', tone: 'danger', class: { root: 'border-danger/50' } },
+  ],
+  defaultVariants: { tone: 'neutral', variant: 'soft' },
+})
+
+export type AlertVariants = VariantProps<typeof alertStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Alert: StylesEntry<typeof alertStyles>
+  }
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,86 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { XIcon } from '../../internal/icons'
+import { IconButton } from '../button'
+import { type AlertVariants, alertStyles } from './alert.styles'
+import { toneIcons } from './alert-icons'
+
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'>, AlertVariants {
+  title?: ReactNode
+  /** Replaces the tone's default icon. `false` hides it. */
+  icon?: ReactNode | false
+  /** Buttons or links shown at the end. */
+  action?: ReactNode
+  /** Shows a close button that calls this. */
+  onDismiss?: () => void
+  dismissLabel?: string
+}
+
+/**
+ * An inline message about the content around it. Danger and warning alerts are announced
+ * immediately (`role="alert"`); other tones politely (`role="status"`).
+ */
+export function Alert(inProps: AlertProps) {
+  const [props, slots] = useComponentConfig('Alert', inProps)
+  const {
+    tone,
+    variant,
+    title,
+    icon,
+    action,
+    onDismiss,
+    dismissLabel = 'Dismiss',
+    className,
+    children,
+    ...rest
+  } = props
+  const resolvedTone = tone ?? 'neutral'
+  const s = alertStyles({ tone, variant })
+  const iconNode = icon === false ? null : (icon ?? toneIcons[resolvedTone]())
+  const urgent = resolvedTone === 'danger' || resolvedTone === 'warning'
+
+  return (
+    <div
+      data-slot="alert"
+      data-tone={resolvedTone}
+      role={urgent ? 'alert' : 'status'}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {iconNode && (
+        <span data-slot="alert-icon" className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {iconNode}
+        </span>
+      )}
+      <div data-slot="alert-content" className={s.content({ class: slots.content })}>
+        {title && (
+          <p data-slot="alert-title" className={s.title({ class: slots.title })}>
+            {title}
+          </p>
+        )}
+        {children && (
+          <div
+            data-slot="alert-description"
+            className={s.description({ class: slots.description })}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+      {action && (
+        <div data-slot="alert-action" className={s.action({ class: slots.action })}>
+          {action}
+        </div>
+      )}
+      {onDismiss && (
+        <IconButton
+          size="sm"
+          icon={<XIcon />}
+          aria-label={dismissLabel}
+          onClick={onDismiss}
+          className={s.dismiss({ class: slots.dismiss })}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps } from './alert'
+export { type AlertVariants, alertStyles } from './alert.styles'

package/src/components/alert-dialog/alert-dialog.styles.ts

@@ -0,0 +1,24 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const alertDialogStyles = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    content: [
+      'fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-5',
+      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in',
+      themedBorder,
+    ],
+    header: 'flex flex-col gap-1.5',
+    title: 'font-display text-h4 text-foreground',
+    description: 'text-small text-muted-foreground',
+    footer: 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AlertDialog: StylesEntry<typeof alertDialogStyles>
+  }
+}

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,118 @@
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Button, type ButtonProps } from '../button'
+import { alertDialogStyles } from './alert-dialog.styles'
+
+function useParts() {
+  const [, slots] = useComponentConfig('AlertDialog', {})
+  return { s: alertDialogStyles(), slots }
+}
+
+/**
+ * A modal that interrupts to ask for a decision, e.g. confirming a destructive action.
+ * Unlike Dialog it can't be dismissed by clicking outside. For a one-line confirm, use `useConfirm()`.
+ */
+export const AlertDialog = AlertDialogPrimitive.Root
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+export interface AlertDialogContentProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Content> {
+  overlayClassName?: string
+}
+
+export function AlertDialogContent(inProps: AlertDialogContentProps) {
+  const [props, slots] = useComponentConfig('AlertDialog', inProps)
+  const { overlayClassName, className, ...rest } = props
+  const s = alertDialogStyles()
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        data-slot="alert-dialog-overlay"
+        className={s.overlay({ class: [slots.overlay, overlayClassName] })}
+      />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </AlertDialogPrimitive.Portal>
+  )
+}
+
+export function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  const { s, slots } = useParts()
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={s.title({ class: [slots.title, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  const { s, slots } = useParts()
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={s.description({ class: [slots.description, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={s.footer({ class: [slots.footer, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant' | 'asChild'> {
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+}
+
+/** The confirming button. Closes the dialog. */
+export function AlertDialogAction({ tone = 'default', ...props }: AlertDialogActionProps) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button
+        data-slot="alert-dialog-action"
+        variant={tone === 'danger' ? 'danger' : 'primary'}
+        {...props}
+      />
+    </AlertDialogPrimitive.Action>
+  )
+}
+
+/** The dismissing button. Receives focus when the dialog opens, so Enter never confirms by accident. */
+export function AlertDialogCancel(props: Omit<ButtonProps, 'variant' | 'asChild'>) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button data-slot="alert-dialog-cancel" variant="outline" {...props} />
+    </AlertDialogPrimitive.Cancel>
+  )
+}