@boyernick/standard-ui-react 0.1.1-canary.8 → 0.2.0

package/src/index.ts

@@ -1,5 +1,12 @@
 export { Button, buttonVariants, type ButtonProps } from "./button";
 export { Input, inputVariants, type InputProps } from "./input";
+export {
+  Kbd,
+  KbdGroup,
+  kbdVariants,
+  type KbdGroupProps,
+  type KbdProps,
+} from "./kbd";
 export { Badge, badgeVariants, type BadgeProps } from "./badge";
 export { Switch, type SwitchProps } from "./switch";
 export { Checkbox, type CheckboxProps } from "./checkbox";
@@ -165,6 +172,7 @@ export {
   CommandItem,
   CommandEmpty,
   CommandTitle,
+  CommandMeta,
   CommandDialogTitle,
   type CommandProps,
   type CommandTriggerProps,
@@ -184,6 +192,7 @@ export {
   type CommandItemProps,
   type CommandEmptyProps,
   type CommandTitleProps,
+  type CommandMetaProps,
   type CommandDialogTitleProps,
 } from "./command";
 export {
@@ -357,6 +366,18 @@ export {
   type FieldsetProps,
   type FieldsetLegendProps,
 } from "./fieldset";
+export {
+  FilterGroup,
+  FilterItem,
+  FilterCount,
+  filterGroupVariants,
+  filterItemVariants,
+  type FilterGroupProps,
+  type FilterItemProps,
+  type FilterCountProps,
+  type FilterGroupVariant,
+  type FilterGroupSize,
+} from "./filter-group";
 export { Form, type FormProps } from "./form";
 export {
   Meter,
@@ -413,19 +434,38 @@ export {
   type MenuViewportProps,
 } from "./menu";
 export { Menubar, type MenubarProps } from "./menubar";
+export {
+  Minimap,
+  minimapVariants,
+  type MinimapProps,
+  type MinimapSection,
+} from "./minimap";
 export {
   NumberField,
   NumberFieldGroup,
   NumberFieldInput,
   NumberFieldIncrement,
   NumberFieldDecrement,
+  NumberFieldStepper,
+  NumberFieldPrefix,
+  NumberFieldSuffix,
   NumberFieldScrubArea,
   NumberFieldScrubAreaCursor,
+  numberFieldAffixVariants,
+  numberFieldControlVariants,
+  numberFieldGroupVariants,
+  numberFieldInputVariants,
+  numberFieldStepperVariants,
+  type NumberFieldSize,
+  type NumberFieldAlign,
   type NumberFieldProps,
   type NumberFieldGroupProps,
   type NumberFieldInputProps,
   type NumberFieldIncrementProps,
   type NumberFieldDecrementProps,
+  type NumberFieldStepperProps,
+  type NumberFieldPrefixProps,
+  type NumberFieldSuffixProps,
   type NumberFieldScrubAreaProps,
   type NumberFieldScrubAreaCursorProps,
 } from "./number-field";
@@ -442,8 +482,18 @@ export {
   NavigationMenuPopup,
   NavigationMenuArrow,
   NavigationMenuLink,
+  NavigationMenuBarLink,
+  NavigationMenuLinkIcon,
+  NavigationMenuLinkTitle,
+  NavigationMenuLinkDescription,
   NavigationMenuIcon,
+  navigationMenuBarItemVariants,
+  navigationMenuLinkVariants,
+  navigationMenuListVariants,
+  navigationMenuRootVariants,
   navigationMenuTriggerClassName,
+  type NavigationMenuVariant,
+  type NavigationMenuSize,
   type NavigationMenuProps,
   type NavigationMenuListProps,
   type NavigationMenuItemProps,
@@ -456,6 +506,10 @@ export {
   type NavigationMenuPopupProps,
   type NavigationMenuArrowProps,
   type NavigationMenuLinkProps,
+  type NavigationMenuBarLinkProps,
+  type NavigationMenuLinkIconProps,
+  type NavigationMenuLinkTitleProps,
+  type NavigationMenuLinkDescriptionProps,
   type NavigationMenuIconProps,
 } from "./navigation-menu";
 export {
@@ -466,6 +520,13 @@ export {
   type OTPFieldInputProps,
   type OTPFieldSeparatorProps,
 } from "./otp-field";
+export {
+  PasswordProtection,
+  PasswordProtectionDialog,
+  type PasswordProtectionProps,
+  type PasswordProtectionDialogProps,
+  type PasswordProtectionVerify,
+} from "./password-protection";
 export {
   Popover,
   PopoverTrigger,
@@ -517,6 +578,47 @@ export {
   type ProgressTrackProps,
   type ProgressIndicatorProps,
 } from "./progress";
+export {
+  Questionnaire,
+  QuestionnaireProgress,
+  QuestionnaireItem,
+  QuestionnaireTitle,
+  QuestionnaireDescription,
+  QuestionnaireChoices,
+  QuestionnaireChoice,
+  QuestionnaireChoiceInput,
+  QuestionnaireChoiceLabel,
+  QuestionnaireChoiceShortcut,
+  QuestionnaireInput,
+  QuestionnaireError,
+  QuestionnaireActions,
+  QuestionnairePrevious,
+  QuestionnaireSkip,
+  QuestionnaireNext,
+  QuestionnaireSubmit,
+  type QuestionnaireProps,
+  type QuestionnaireProgressProps,
+  type QuestionnaireItemProps,
+  type QuestionnaireTitleProps,
+  type QuestionnaireDescriptionProps,
+  type QuestionnaireChoicesProps,
+  type QuestionnaireChoiceProps,
+  type QuestionnaireChoiceInputProps,
+  type QuestionnaireChoiceLabelProps,
+  type QuestionnaireChoiceShortcutProps,
+  type QuestionnaireInputProps,
+  type QuestionnaireErrorProps,
+  type QuestionnaireActionsProps,
+  type QuestionnairePreviousProps,
+  type QuestionnaireSkipProps,
+  type QuestionnaireNextProps,
+  type QuestionnaireSubmitProps,
+  type QuestionnaireChoiceDefinition,
+  type QuestionnaireInputType,
+  type QuestionnaireItemDefinition,
+  type QuestionnaireItemStatus,
+  type QuestionnaireShortcutMode,
+} from "./questionnaire";
 export {
   RadioGroup,
   Radio,
@@ -574,11 +676,14 @@ export {
   SliderTrack,
   SliderIndicator,
   SliderThumb,
+  SliderTicks,
+  sliderVariants,
   type SliderProps,
   type SliderControlProps,
   type SliderTrackProps,
   type SliderIndicatorProps,
   type SliderThumbProps,
+  type SliderTicksProps,
 } from "./slider";
 export {
   Tabs,
@@ -586,7 +691,12 @@ export {
   TabsTab,
   TabsIndicator,
   TabsPanel,
+  tabsListVariants,
+  tabsTabVariants,
+  tabsIndicatorVariants,
   type TabsProps,
+  type TabsVariant,
+  type TabsSize,
   type TabsListProps,
   type TabsTabProps,
   type TabsIndicatorProps,
@@ -599,6 +709,9 @@ export {
   ToastViewport,
   ToastRoot,
   ToastContent,
+  ToastIcon,
+  toastRootVariants,
+  toastViewportVariants,
   ToastTitle,
   ToastDescription,
   ToastAction,
@@ -612,6 +725,9 @@ export {
   type ToastViewportProps,
   type ToastRootProps,
   type ToastContentProps,
+  type ToastIconProps,
+  type ToastType,
+  type ToastPlacement,
   type ToastTitleProps,
   type ToastDescriptionProps,
   type ToastActionProps,
@@ -688,14 +804,27 @@ export {
   PaginationLink,
   PaginationPrevious,
   PaginationNext,
+  PaginationFirst,
+  PaginationLast,
   PaginationEllipsis,
+  PaginationStatus,
+  PaginationRange,
+  paginationLinkVariants,
+  paginationDirectionVariants,
   type PaginationProps,
   type PaginationContentProps,
   type PaginationItemProps,
   type PaginationLinkProps,
+  type PaginationButtonProps,
+  type PaginationAnchorProps,
   type PaginationPreviousProps,
   type PaginationNextProps,
+  type PaginationFirstProps,
+  type PaginationLastProps,
   type PaginationEllipsisProps,
+  type PaginationStatusProps,
+  type PaginationRangeProps,
+  type PaginationSize,
 } from "./pagination";
 export {
   Sidebar,
@@ -704,14 +833,20 @@ export {
   SidebarFooter,
   SidebarNav,
   SidebarNavItem,
+  SidebarNavItemLabel,
+  SidebarNavBadge,
   SidebarGroup,
   SidebarGroupLabel,
+  sidebarVariants,
+  sidebarNavItemVariants,
   type SidebarProps,
   type SidebarHeaderProps,
   type SidebarContentProps,
   type SidebarFooterProps,
   type SidebarNavProps,
   type SidebarNavItemProps,
+  type SidebarNavItemLabelProps,
+  type SidebarNavBadgeProps,
   type SidebarGroupProps,
   type SidebarGroupLabelProps,
 } from "./sidebar";
@@ -723,6 +858,7 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  CarouselDots,
   useCarousel,
   type CarouselApi,
   type CarouselProps,
@@ -730,6 +866,7 @@ export {
   type CarouselItemProps,
   type CarouselPreviousProps,
   type CarouselNextProps,
+  type CarouselDotsProps,
 } from "./carousel";
 export {
   SoundsProvider,
@@ -746,19 +883,50 @@ export {
   type VideoPlayerProps,
 } from "./video-player";
 export {
-  ImageModal,
-  ImageModalTrigger,
-  ImageModalContent,
-  type ImageModalProps,
-  type ImageModalTriggerProps,
-  type ImageModalContentProps,
-} from "./image-modal";
+  Modal,
+  ModalTrigger,
+  ModalContent,
+  Gallery,
+  GalleryTrigger,
+  modalContentVariants,
+  type ModalProps,
+  type ModalTriggerProps,
+  type ModalContentProps,
+  type GalleryProps,
+  type GalleryTriggerProps,
+  type GalleryItem,
+} from "./modal";
 export {
   Ticker,
   TickerItem,
   type TickerProps,
   type TickerItemProps,
 } from "./ticker";
+export {
+  Timeline,
+  TimelineTrack,
+  TimelineItem,
+  TimelineMarker,
+  TimelineTime,
+  TimelineContent,
+  TimelineTitle,
+  TimelineDescription,
+  TimelineMedia,
+  timelineVariants,
+  timelineTrackVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineTimeVariants,
+  type TimelineProps,
+  type TimelineTrackProps,
+  type TimelineItemProps,
+  type TimelineMarkerProps,
+  type TimelineTimeProps,
+  type TimelineContentProps,
+  type TimelineTitleProps,
+  type TimelineDescriptionProps,
+  type TimelineMediaProps,
+} from "./timeline";
 export {
   Table,
   TableHeader,
@@ -768,6 +936,8 @@ export {
   TableHead,
   TableCell,
   TableCaption,
+  tableHeaderVariants,
+  tableVariants,
   type TableProps,
   type TableHeaderProps,
   type TableBodyProps,
@@ -784,6 +954,7 @@ export {
   TooltipPortal,
   TooltipPositioner,
   TooltipPopup,
+  tooltipPopupVariants,
   type TooltipProviderProps,
   type TooltipProps,
   type TooltipTriggerProps,
@@ -795,9 +966,11 @@ export {
   CENTRAL_ICON_SIZE,
   withCentralIconDefaults,
   iconGallery,
+  IconArrowDown,
   IconBell,
   IconCalendar1,
   IconChainLink1,
+  IconChainLink3,
   IconCheckmark1,
   IconChevronBottom,
   IconChevronDownSmall,
@@ -807,41 +980,86 @@ export {
   IconClipboard,
   IconCrossSmall,
   IconDotGrid1x3Horizontal,
+  IconDotGrid2x3,
   IconExclamationCircle,
   IconExclamationTriangle,
+  IconFullScreen,
+  IconHighlight,
   IconHome,
   IconMagnifyingGlass,
   IconMinus,
   IconMoon,
+  IconPause,
   IconPeople,
+  IconPlay,
   IconPlus,
   IconSettingsGear1,
   IconSquareBehindSquare6,
   IconStar,
+  IconStrikeThrough,
   IconSun,
+  IconVolumeFull,
+  IconVolumeOff,
   IconX,
   type CentralIconProps,
   type CentralIconComponent,
 } from "./icons";
-export { CodeBlock, type CodeBlockProps } from "./code-block";
-export {
-  MarkdownEditor,
-  MarkdownEditorToolbar,
-  MarkdownEditorInput,
-  MarkdownEditorPreview,
-  type MarkdownEditorProps,
-  type MarkdownEditorToolbarProps,
-  type MarkdownEditorInputProps,
-  type MarkdownEditorPreviewProps,
-} from "./markdown-editor";
+export { CodeBlock, type CodeBlockProps, type CodeBlockHighlightLine } from "./code-block";
+export {
+  BlockEditor,
+  createBlockEditorBlock,
+  defaultBlockEditorBlocks,
+  type BlockEditorProps,
+  type BlockEditorBlock,
+  type BlockEditorBlockType,
+} from "./block-editor";
 export {
   IllustrationEmpty,
   IllustrationError,
   IllustrationSuccess,
   IllustrationSearch,
+  IllustrationUpload,
+  IllustrationFile,
   type IllustrationProps,
+  type IllustrationFileProps,
+  type FileIllustrationType,
 } from "./illustrations"
 export { BrandMark, BrandWordmark, type BrandMarkProps, type BrandWordmarkProps } from "./brand"
+export {
+  Lifeline,
+  LifelineMarkerColumn,
+  LifelineLegend,
+  LifelineShell,
+  LifelineNav,
+  LifelineStage,
+  LifelineFooter,
+  CompanyIcon,
+  registerCompanyIcons,
+  useLifelineScroll,
+  defineLifeline,
+  localizeLifelineMarkers,
+  LIFELINE_CURRENT_YEAR,
+  type CompanyIconEntry,
+  type CompanyIconId,
+  type LifelineBirthday,
+  type LifelineMilestone,
+  type LifelineMilestones,
+  type LifelineRecord,
+  type LifelineTextOverrides,
+  type LifelineCompany,
+  type LifelineEvent,
+  type LifelineEventEffect,
+  type LifelineEventImage,
+  type LifelineEventObject,
+  type LifelineEventSegment,
+  type LifelineLegendItem,
+  type LifelineMarker,
+  type LifelineMetPerson,
+  type LifelineMentor,
+  type LifelineMode,
+  type LifelinePhoto,
+  type LifelineProps,
+} from "./lifeline"
 export {
   TextAnimate,
   type TextAnimateProps,
@@ -849,3 +1067,12 @@ export {
 } from "./text-animate"
 export { cn } from "./lib/cn"
 export { motion } from "./lib/motion"
+export {
+  focusRing,
+  focusRingWithin,
+  focusRingDestructive,
+  focusRingWithinDestructive,
+  focusRingInvalid,
+  focusRingInvalidWithin,
+  focusRingBorder,
+} from "./lib/focus"

package/src/input.tsx

@@ -3,14 +3,18 @@
 import { cva, type VariantProps } from "class-variance-authority"
 import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingInvalid } from "./lib/focus"
 
 const inputVariants = cva(
-  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  cn(
+    "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+    focusRing,
+    focusRingInvalid,
+  ),
   {
     variants: {
       variant: {
-        default:
-          "border bg-surface inset-shadow-outline-top focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",
+        default: "border bg-surface inset-shadow-outline-top",
         ghost: "border border-transparent bg-transparent",
       },
       size: {
@@ -37,8 +41,7 @@ const inputVariants = cva(
       {
         variant: "ghost",
         invalid: true,
-        class:
-          "border-destructive focus-visible:border-destructive focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-destructive/20",
+        class: "border-destructive",
       },
     ],
     defaultVariants: {

package/src/kbd.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const kbdVariants = cva(
+  // `text-xs` carries the size, line-height and tracking; the weight is set
+  // separately because 600 sits above the 400/500 the type scale defines, so
+  // there is no `-strong` utility to reach for.
+  // The border is bottom-only on purpose: it reads as the lip of a physical
+  // key without boxing the glyph in on all four sides, which at 12px turns a
+  // keycap into a cramped badge.
+  "inline-flex shrink-0 items-center justify-center border-b px-1 font-sans text-xs font-semibold whitespace-nowrap select-none",
+  {
+    variants: {
+      variant: {
+        default: "border-border-primary bg-background-tertiary text-fg-secondary",
+        // The default fill is a light grey that vanishes on a dark surface, so
+        // an inverted keycap tints with the inverted foreground instead. It has
+        // to be that token rather than a literal `white`: the grey ramp flips
+        // under `.dark`, so a hardcoded white wash would sit invisibly on the
+        // now-light inverted surface.
+        inverted: "border-fg-inverted/10 bg-fg-inverted/10 text-fg-inverted",
+      },
+      size: {
+        sm: "h-4 min-w-3.5 rounded-2xs",
+        md: "h-5 min-w-4 rounded-xs",
+      },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+  },
+)
+
+export type KbdProps = ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>
+export type KbdGroupProps = ComponentProps<"span">
+
+/** A single keycap. Presentational — map "cmd" to ⌘ before it gets here. */
+export const Kbd = ({ className, variant, size, ...props }: KbdProps) => (
+  <kbd className={cn(kbdVariants({ variant, size }), className)} {...props} />
+)
+
+/** A full shortcut. Keeps the caps on one line at a consistent gap. */
+export const KbdGroup = ({ className, ...props }: KbdGroupProps) => (
+  <span
+    className={cn("inline-flex items-center gap-1 align-middle", className)}
+    {...props}
+  />
+)
+
+export { kbdVariants }

package/src/lib/focus.ts

@@ -0,0 +1,41 @@
+/**
+ * Canonical keyboard focus for StandardUI controls.
+ *
+ * Two layers, always together:
+ * 1. Hard edge — `border-ring` turns the control's border to `--ring`.
+ *    Borderless chrome must carry `border border-transparent` so the edge
+ *    can light up on focus without shifting layout.
+ * 2. Soft wash — 3px `ring-ring/20` with a 1px page-colored gap.
+ *
+ * Use these strings everywhere. Do not invent a second focus recipe.
+ */
+
+/** Default focus-visible ring for buttons, tabs, toggles, links, etc. */
+export const focusRing =
+  "outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20"
+
+/** Same recipe keyed to `:focus-within` for composite fields. */
+export const focusRingWithin =
+  "outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20"
+
+/** Destructive focus-visible ring — use instead of `focusRing` on error actions. */
+export const focusRingDestructive =
+  "outline-none focus-visible:border-destructive focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-destructive/20"
+
+/** Destructive focus-within ring — use instead of `focusRingWithin` when invalid. */
+export const focusRingWithinDestructive =
+  "outline-none focus-within:border-destructive focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-destructive/20"
+
+/**
+ * Invalid-state modifiers that pair with `focusRing` / `focusRingWithin`.
+ * Keeps the 3px + offset geometry; only the edge and wash go destructive.
+ */
+export const focusRingInvalid =
+  "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20"
+
+export const focusRingInvalidWithin =
+  "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20"
+
+/** Transparent border so borderless chrome can take `focusRing`'s hard edge. */
+export const focusRingBorder =
+  "border border-transparent"

package/src/lib/popup.ts

@@ -36,7 +36,7 @@ export const popupInset = "p-1.5 empty:p-0"
 
 /** One selectable row. */
 export const popupItem =
-  "flex min-h-9 cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm text-fg-primary outline-none select-none"
+  "flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-fg-primary outline-none select-none"
 
 /** A group heading. Shares the item's left edge. */
 export const popupLabel = "px-3 py-1.5 text-xs text-fg-tertiary"

package/src/lifeline/company-icon.tsx

@@ -0,0 +1,71 @@
+import type { ComponentType } from "react"
+import { cn } from "../lib/cn"
+
+export type CompanyIconId = string
+
+export interface CompanyIconEntry {
+  icon: ComponentType<{ className?: string }>
+  /** Tailwind size for the mark — wordmarks want a wide box. */
+  sizeClassName?: string
+}
+
+const registry: Record<string, CompanyIconEntry> = {}
+
+/**
+ * Map your organization ids to icon components. Call once at module
+ * scope, from a module that loads before the timeline renders:
+ *
+ *   registerCompanyIcons({
+ *     acme: { icon: AcmeIcon, sizeClassName: "h-4 w-4" },
+ *   })
+ *
+ * Unregistered ids fall back to the name's initial in a small ring,
+ * so a timeline reads cleanly before you've drawn a single logo.
+ */
+export function registerCompanyIcons(
+  entries: Record<string, CompanyIconEntry>,
+) {
+  Object.assign(registry, entries)
+}
+
+export function CompanyIcon({
+  id,
+  label,
+  className,
+}: {
+  id: CompanyIconId
+  label: string
+  className?: string
+}) {
+  const entry = registry[id]
+
+  if (entry) {
+    const Icon = entry.icon
+    return (
+      <span
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center text-fg-primary transition-colors duration-300",
+          entry.sizeClassName ?? "h-4 w-4",
+          className,
+        )}
+        aria-label={label}
+        title={label}
+      >
+        <Icon className="h-full w-full" />
+      </span>
+    )
+  }
+
+  return (
+    <span
+      title={label}
+      aria-label={label}
+      className={cn(
+        "inline-flex h-5 w-5 select-none items-center justify-center rounded-full text-[10px] font-semibold leading-none ring-1 ring-current/30",
+        className,
+      )}
+    >
+      {label.charAt(0)}
+    </span>
+  )
+}