@misoto22/design 0.3.1

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  children,
+  content,
+  side = "top",
+  sideOffset = 6,
+  ...root
+}) {
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { ...root, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        collisionBoundary: container ?? void 0,
+        collisionPadding: 8,
+        side,
+        sideOffset,
+        "data-m22-animated": true,
+        className: cn(
+          "z-(--z-toast) max-w-64 rounded-(--radius-sm) bg-(--feature-surface) px-2.5 py-1.5 font-mono text-[11px] leading-snug text-(--on-feature)",
+          "data-[state=delayed-open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]"
+        ),
+        children: content
+      }
+    ) })
+  ] });
+}
+var Tooltip_default = Tooltip;
+export {
+  Tooltip,
+  TooltipProvider,
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * Wrap the app — or the smallest subtree that has tooltips — once. Radix needs\n * it to share the open/close timing between neighbouring triggers, which is\n * what stops a row of icon buttons flashing a tooltip per hover.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider\n\nexport interface TooltipProps\n  extends Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> {\n  /** The element the tooltip describes. Must be focusable. */\n  children: ReactNode\n  /**\n   * The tip. Keep it to a phrase — a tooltip is unreachable on touch and\n   * invisible to a reader who is scanning, so anything a user NEEDS belongs on\n   * the page instead.\n   */\n  content: ReactNode\n  side?: ComponentProps<typeof TooltipPrimitive.Content>['side']\n  sideOffset?: number\n}\n\n/**\n * A short label on hover and on focus.\n *\n * `asChild` on the trigger by design: the tooltip must not add a wrapper that\n * swallows the trigger's own focus ring or breaks a flex row. It also means the\n * child has to be focusable — a `<div>` trigger gets no keyboard tooltip, which\n * is the failure this API shape makes obvious rather than silent.\n *\n * Not a replacement for an accessible name. An icon-only button still needs its\n * own `aria-label`; the tooltip repeats that name for sighted pointer users.\n *\n * @example\n * <TooltipProvider>\n *   <Tooltip content=\"Copy to clipboard\">\n *     <Button iconOnly aria-label=\"Copy\"><Copy size={16} /></Button>\n *   </Tooltip>\n * </TooltipProvider>\n */\nexport function Tooltip({\n  children,\n  content,\n  side = 'top',\n  sideOffset = 6,\n  ...root\n}: TooltipProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <TooltipPrimitive.Root {...root}>\n      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n      <TooltipPrimitive.Portal container={container ?? undefined}>\n        <TooltipPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n          side={side}\n          sideOffset={sideOffset}\n          data-m22-animated\n          className={cn(\n            'z-(--z-toast) max-w-64 rounded-(--radius-sm) bg-(--feature-surface) px-2.5 py-1.5 font-mono text-[11px] leading-snug text-(--on-feature)',\n            'data-[state=delayed-open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]',\n          )}\n        >\n          {content}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n  )\n}\n\nexport default Tooltip\n"],"mappings":";AAwDI,SACE,KADF;AAtDJ,YAAY,sBAAsB;AAElC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAO7B,MAAM,kBAAkB,iBAAiB;AAkCzC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,GAAG;AACL,GAAiB;AACf,QAAM,YAAY,oBAAoB;AAEtC,SACE,qBAAC,iBAAiB,MAAjB,EAAuB,GAAG,MACzB;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAC,iBAAiB,QAAjB,EAAwB,WAAW,aAAa,QAC/C;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACD,mBAAmB,aAAa;AAAA,QAChC,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/fonts.css

@@ -0,0 +1,96 @@
+/* GENERATED by scripts/vendor-fonts.mjs — do not edit by hand.
+   Vendored Latin webfaces for @misoto22/design, declared under the literal
+   family names the token layer falls back to. A host that loads these itself
+   (next/font, a CDN) sets --font-* and never reaches these rules.
+   Re-run: pnpm --filter @misoto22/design build:fonts */
+
+
+/* ─── Hanken Grotesk — 5 weights ─── */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-700.woff2') format('woff2');
+}
+
+/* ─── Newsreader — 4 weights ─── */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./fonts/newsreader-300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/newsreader-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/newsreader-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/newsreader-600.woff2') format('woff2');
+}
+
+/* ─── IBM Plex Mono — 3 weights ─── */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-600.woff2') format('woff2');
+}

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+export { OverlayContainer, OverlayContainerProps, useOverlayContainer } from './lib/overlay-container.js';
+export { BRAND, BrandColor } from './tokens/brand.js';
+export { cn } from './lib/cn.js';
+export { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control.js';
+export { IndicatorStyle, useSelectionIndicator } from './lib/useSelectionIndicator.js';
+export { Button, ButtonProps, ButtonSize, ButtonVariant } from './components/Button/Button.js';
+export { FloatingIconButton, FloatingIconButtonProps } from './components/FloatingIconButton/FloatingIconButton.js';
+export { Badge, BadgeProps, BadgeTone } from './components/Badge/Badge.js';
+export { Tag, TagProps } from './components/Tag/Tag.js';
+export { Kbd, KbdProps } from './components/Kbd/Kbd.js';
+export { Avatar, AvatarProps } from './components/Avatar/Avatar.js';
+export { StatusDot, StatusDotProps, StatusTone } from './components/StatusDot/StatusDot.js';
+export { StatusPill, StatusPillProps } from './components/StatusPill/StatusPill.js';
+export { EXTERNAL_LINK_ARROW, LinkArrow, LinkArrowProps } from './components/LinkArrow/LinkArrow.js';
+export { Separator, SeparatorProps } from './components/Separator/Separator.js';
+export { Figure, FigureBand, FigureBandProps } from './components/FigureBand/FigureBand.js';
+export { Spinner, SpinnerProps } from './components/Spinner/Spinner.js';
+export { Skeleton, SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage, SkeletonPageProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './components/Skeleton/Skeleton.js';
+export { Progress, ProgressProps } from './components/Progress/Progress.js';
+export { Alert, AlertProps, AlertTone } from './components/Alert/Alert.js';
+export { EmptyState, EmptyStateProps } from './components/EmptyState/EmptyState.js';
+export { ERROR_ACTION_CLASS, ErrorState, ErrorStateProps } from './components/ErrorState/ErrorState.js';
+export { Toaster } from './components/Toast/Toast.js';
+export { Field, FieldProps } from './components/Field/Field.js';
+export { Combobox, ComboboxOption, ComboboxProps } from './components/Combobox/Combobox.js';
+export { DATE_PRESETS, DatePicker, DatePickerProps, DatePreset, DateRangePicker, DateRangePickerProps, RANGE_PRESETS } from './components/DatePicker/DatePicker.js';
+export { Slider, SliderProps } from './components/Slider/Slider.js';
+export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps } from './components/ToggleGroup/ToggleGroup.js';
+export { Input, InputProps } from './components/Input/Input.js';
+export { Textarea, TextareaProps } from './components/Textarea/Textarea.js';
+export { Select, SelectGroup, SelectItem, SelectItemProps, SelectLabel, SelectProps, SelectRoot, SelectSeparator } from './components/Select/Select.js';
+export { NativeSelect, NativeSelectProps } from './components/NativeSelect/NativeSelect.js';
+export { Checkbox, CheckboxProps } from './components/Checkbox/Checkbox.js';
+export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/RadioGroup/RadioGroup.js';
+export { Switch, SwitchProps } from './components/Switch/Switch.js';
+export { Dialog, DialogClose, DialogContent, DialogContentProps, DialogTrigger } from './components/Dialog/Dialog.js';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
+export { Tooltip, TooltipProps, TooltipProvider } from './components/Tooltip/Tooltip.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentProps, PopoverTrigger } from './components/Popover/Popover.js';
+export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetSide, SheetTrigger } from './components/Sheet/Sheet.js';
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger } from './components/ContextMenu/ContextMenu.js';
+export { Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandHintProps, CommandInput, CommandItem, CommandItemProps, CommandList, CommandSeparator } from './components/Command/Command.js';
+export { MenuAction, SearchableMenu, SearchableMenuProps } from './components/SearchableMenu/SearchableMenu.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
+export { Accordion, AccordionItem, AccordionItemProps } from './components/Accordion/Accordion.js';
+export { Collapsible, CollapsibleSection, CollapsibleSectionProps } from './components/Collapsible/Collapsible.js';
+export { Breadcrumb, BreadcrumbProps, Crumb } from './components/Breadcrumb/Breadcrumb.js';
+export { Pagination, PaginationProps, paginationRange } from './components/Pagination/Pagination.js';
+export { NavItem, NavItemProps } from './components/NavItem/NavItem.js';
+export { Card, CardBody, CardFooter, CardHeader, CardProps, CardTitle } from './components/Card/Card.js';
+export { SortDirection, TBody, TD, TDProps, TH, THProps, THead, TR, Table, TableAlign, TableBorders, TableProps } from './components/Table/Table.js';
+export { Calendar, CalendarProps } from './components/Calendar/Calendar.js';
+export { ScrollArea, ScrollAreaProps } from './components/ScrollArea/ScrollArea.js';
+export { AppShell, AppShellProps } from './components/AppShell/AppShell.js';
+export { DateRange } from 'react-day-picker';
+export { toast } from 'sonner';
+import 'react';
+import 'clsx';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-progress';
+import 'lucide-react';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-context-menu';
+import 'cmdk';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-scroll-area';

package/dist/index.js

@@ -0,0 +1,63 @@
+export * from "./lib/overlay-container.js";
+import { BRAND } from "./tokens/brand.js";
+import { cn } from "./lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "./lib/control.js";
+import { useSelectionIndicator } from "./lib/useSelectionIndicator.js";
+export * from "./components/Button/Button.js";
+export * from "./components/FloatingIconButton/FloatingIconButton.js";
+export * from "./components/Badge/Badge.js";
+export * from "./components/Tag/Tag.js";
+export * from "./components/Kbd/Kbd.js";
+export * from "./components/Avatar/Avatar.js";
+export * from "./components/StatusDot/StatusDot.js";
+export * from "./components/StatusPill/StatusPill.js";
+export * from "./components/LinkArrow/LinkArrow.js";
+export * from "./components/Separator/Separator.js";
+export * from "./components/FigureBand/FigureBand.js";
+export * from "./components/Spinner/Spinner.js";
+export * from "./components/Skeleton/Skeleton.js";
+export * from "./components/Progress/Progress.js";
+export * from "./components/Alert/Alert.js";
+export * from "./components/EmptyState/EmptyState.js";
+export * from "./components/ErrorState/ErrorState.js";
+export * from "./components/Toast/Toast.js";
+export * from "./components/Field/Field.js";
+export * from "./components/Combobox/Combobox.js";
+export * from "./components/DatePicker/DatePicker.js";
+export * from "./components/Slider/Slider.js";
+export * from "./components/ToggleGroup/ToggleGroup.js";
+export * from "./components/Input/Input.js";
+export * from "./components/Textarea/Textarea.js";
+export * from "./components/Select/Select.js";
+export * from "./components/NativeSelect/NativeSelect.js";
+export * from "./components/Checkbox/Checkbox.js";
+export * from "./components/RadioGroup/RadioGroup.js";
+export * from "./components/Switch/Switch.js";
+export * from "./components/Dialog/Dialog.js";
+export * from "./components/DropdownMenu/DropdownMenu.js";
+export * from "./components/Tooltip/Tooltip.js";
+export * from "./components/Popover/Popover.js";
+export * from "./components/Sheet/Sheet.js";
+export * from "./components/ContextMenu/ContextMenu.js";
+export * from "./components/Command/Command.js";
+export * from "./components/SearchableMenu/SearchableMenu.js";
+export * from "./components/Tabs/Tabs.js";
+export * from "./components/Accordion/Accordion.js";
+export * from "./components/Collapsible/Collapsible.js";
+export * from "./components/Breadcrumb/Breadcrumb.js";
+export * from "./components/Pagination/Pagination.js";
+export * from "./components/NavItem/NavItem.js";
+export * from "./components/Card/Card.js";
+export * from "./components/Table/Table.js";
+export * from "./components/Calendar/Calendar.js";
+export * from "./components/ScrollArea/ScrollArea.js";
+export * from "./components/AppShell/AppShell.js";
+export {
+  BRAND,
+  CONTROL_BASE,
+  CONTROL_BORDER,
+  cn,
+  isInvalid,
+  useSelectionIndicator
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\n"],"mappings":"AAmBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/keyframes.css

@@ -0,0 +1,212 @@
+/* ==========================================================================
+   MOTION — the system's named animations
+   --------------------------------------------------------------------------
+   Portable, like tokens.css: plain CSS, no Tailwind. Every component that
+   animates reaches for one of these rather than declaring its own, so the
+   whole system arrives and leaves on the same curve.
+
+   Durations are NOT baked in here — a keyframe says what moves, a call site
+   says how fast, using --fast / --mid / --slow. Reduced motion is honoured in
+   one place, at the bottom.
+   ========================================================================== */
+
+/* A surface arriving in place — a panel, a menu, a tab's contents. Short and
+   small: the page did not change, only part of it. */
+@keyframes m22-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* An ANCHORED panel arriving, growing from wherever its trigger is.
+   Radix puts that point on the wrapper as --radix-popper-transform-origin; the
+   call site passes it down. Origin is what makes this read as an animation
+   rather than as a flicker: four pixels of travel over 130ms is technically
+   motion and perceptually nothing, which is what "the menu has no animation"
+   turned out to mean. */
+@keyframes m22-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* And leaving. A panel that vanishes on the frame the pointer lands elsewhere
+   reads as a bug in the page rather than as a thing that closed. */
+@keyframes m22-pop-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97) translateY(-2px);
+  }
+}
+
+/* A page arriving. Longer travel than a panel, because more of the view is
+   being replaced. */
+@keyframes m22-route-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* An overlay's ground. No travel — a scrim does not slide, it appears. */
+@keyframes m22-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes m22-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* A toast entering from the edge it is docked to. */
+@keyframes m22-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* The system's "working" pulse — a dimming, not a shimmer. A skeleton that
+   shimmers implies a light source the White Reset does not have. */
+@keyframes m22-pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+/* The determinate/indeterminate bar's sweep. Travels 1.6× its own width so the
+   bar clears the track completely at each end. */
+@keyframes m22-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* The spinner. A rotation, and only a rotation — the arc that makes it read as
+   a spinner is drawn by the component's own conic gradient, not animated. */
+@keyframes m22-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The three-dot "thinking" run, staggered by delay at the call site. */
+@keyframes m22-bounce-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}
+
+/* A live indicator's halo. Grows and dissolves; never loops a hard edge. */
+@keyframes m22-halo {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  70% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* A disclosure panel opening and closing. Radix measures the panel and
+   publishes its height as --radix-accordion-content-height, so the panel
+   animates to its REAL height rather than to a guessed max-height — which is
+   what makes a long answer open at the same speed as a short one instead of
+   sitting still for half the duration. */
+@keyframes m22-accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes m22-accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* The same idea for a lone disclosure. Radix publishes the measured height as
+   --radix-collapsible-content-height. */
+@keyframes m22-collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes m22-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* One place, not per-component. A user who has asked for less motion gets the
+   end state immediately rather than a faster version of the same move. */
+@media (prefers-reduced-motion: reduce) {
+  [class*='m22-anim'],
+  [data-m22-animated] {
+    animation: none !important;
+  }
+}

package/dist/lib/cn.d.ts

@@ -0,0 +1,21 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Join class names, and let the LAST one win.
+ *
+ * Every component in this package ends its class list with the caller's
+ * `className`, which is the only way an override is expressible. With plain
+ * `clsx` that override does not actually override: `clsx('px-6', 'px-2')` emits
+ * both, and which one applies is decided by the order Tailwind happened to emit
+ * the two utilities into the stylesheet — not by the call site. A caller
+ * tightening a button's padding therefore worked or did not depending on a
+ * detail neither side can see.
+ *
+ * `twMerge` resolves conflicts by utility GROUP, so `px-2` replaces `px-6`,
+ * `text-(--ink-2)` replaces `text-(--ink)`, and unrelated classes are left
+ * alone. Use this everywhere a caller's `className` is merged; `clsx` alone is
+ * still right for building a conditional list that no caller extends.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/cn.js

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Join class names, and let the LAST one win.\n *\n * Every component in this package ends its class list with the caller's\n * `className`, which is the only way an override is expressible. With plain\n * `clsx` that override does not actually override: `clsx('px-6', 'px-2')` emits\n * both, and which one applies is decided by the order Tailwind happened to emit\n * the two utilities into the stylesheet — not by the call site. A caller\n * tightening a button's padding therefore worked or did not depending on a\n * detail neither side can see.\n *\n * `twMerge` resolves conflicts by utility GROUP, so `px-2` replaces `px-6`,\n * `text-(--ink-2)` replaces `text-(--ink)`, and unrelated classes are left\n * alone. Use this everywhere a caller's `className` is merged; `clsx` alone is\n * still right for building a conditional list that no caller extends.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAkBjB,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/lib/control.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The one text-control look, shared by Input, Textarea and Select.
+ *
+ * These three had each carried their own copy of the class string. Three copies
+ * drift: the padding stayed in step, but the focus treatment and the disabled
+ * opacity did not, and a form ended up with a select that dimmed differently
+ * from the input beside it. One export, three consumers.
+ *
+ * The padding comes from the density tokens, so a subtree marked
+ * `data-density="compact"` tightens its fields along with its buttons.
+ *
+ * The border COLOUR is deliberately not in here. It is toggled per control so
+ * the invalid state reliably wins over the resting border rather than relying
+ * on which utility Tailwind happened to emit last.
+ */
+declare const CONTROL_BASE = "w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+/** Resting vs invalid border, named so a call site never writes the colour. */
+declare const CONTROL_BORDER: {
+    readonly resting: "border-(--rule-2)";
+    readonly invalid: "border-(--danger)";
+};
+/**
+ * Reads the invalid state from either spelling.
+ *
+ * `invalid` is the ergonomic prop; `aria-invalid` is what a form library sets.
+ * A control that honours only one of them silently loses the error styling for
+ * whichever half of the ecosystem it did not anticipate.
+ */
+declare function isInvalid(invalid?: boolean, ariaInvalid?: boolean | 'true' | 'false' | string): boolean;
+
+export { CONTROL_BASE, CONTROL_BORDER, isInvalid };

package/dist/lib/control.js

@@ -0,0 +1,14 @@
+const CONTROL_BASE = "w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+const CONTROL_BORDER = {
+  resting: "border-(--rule-2)",
+  invalid: "border-(--danger)"
+};
+function isInvalid(invalid, ariaInvalid) {
+  return invalid === true || ariaInvalid === true || ariaInvalid === "true";
+}
+export {
+  CONTROL_BASE,
+  CONTROL_BORDER,
+  isInvalid
+};
+//# sourceMappingURL=control.js.map

package/dist/lib/control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/control.ts"],"sourcesContent":["/**\n * The one text-control look, shared by Input, Textarea and Select.\n *\n * These three had each carried their own copy of the class string. Three copies\n * drift: the padding stayed in step, but the focus treatment and the disabled\n * opacity did not, and a form ended up with a select that dimmed differently\n * from the input beside it. One export, three consumers.\n *\n * The padding comes from the density tokens, so a subtree marked\n * `data-density=\"compact\"` tightens its fields along with its buttons.\n *\n * The border COLOUR is deliberately not in here. It is toggled per control so\n * the invalid state reliably wins over the resting border rather than relying\n * on which utility Tailwind happened to emit last.\n */\nexport const CONTROL_BASE =\n  'w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/** Resting vs invalid border, named so a call site never writes the colour. */\nexport const CONTROL_BORDER = {\n  resting: 'border-(--rule-2)',\n  invalid: 'border-(--danger)',\n} as const\n\n/**\n * Reads the invalid state from either spelling.\n *\n * `invalid` is the ergonomic prop; `aria-invalid` is what a form library sets.\n * A control that honours only one of them silently loses the error styling for\n * whichever half of the ecosystem it did not anticipate.\n */\nexport function isInvalid(invalid?: boolean, ariaInvalid?: boolean | 'true' | 'false' | string): boolean {\n  return invalid === true || ariaInvalid === true || ariaInvalid === 'true'\n}\n"],"mappings":"AAeO,MAAM,eACX;AAGK,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,SAAS;AACX;AASO,SAAS,UAAU,SAAmB,aAA4D;AACvG,SAAO,YAAY,QAAQ,gBAAgB,QAAQ,gBAAgB;AACrE;","names":[]}

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { cn } from './cn.js';
+export { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './control.js';
+export { IndicatorStyle, useSelectionIndicator } from './useSelectionIndicator.js';
+import 'clsx';

package/dist/lib/index.js

@@ -0,0 +1,11 @@
+import { cn } from "./cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "./control.js";
+import { useSelectionIndicator } from "./useSelectionIndicator.js";
+export {
+  CONTROL_BASE,
+  CONTROL_BORDER,
+  cn,
+  isInvalid,
+  useSelectionIndicator
+};
+//# sourceMappingURL=index.js.map