@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/number-input/styles.css

@@ -0,0 +1,230 @@
+/*
+ * NumberInput styles.
+ *
+ * The field is a text input, so it looks and sizes exactly like the Input
+ * component; the spinner is two buttons the stylesheet owns rather than the
+ * browser's, which cannot be styled. Tokens read the shared --gbs-* variables
+ * when they are set on an ancestor (set them on :root to theme every component
+ * at once). Rules are unlayered: they beat a framework reset on specificity,
+ * and lose to anything you pass through `className`. With Tailwind v4, import
+ * this file after the framework and inside its components layer - see the
+ * README.
+ */
+
+.nm-root {
+  --nm-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --nm-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --nm-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --nm-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --nm-readonly-bg: var(--gbs-readonly-bg, light-dark(#fafafa, #0e0e12));
+  --nm-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --nm-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --nm-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --nm-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --nm-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --nm-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --nm-height: 36px;
+  --nm-px: 10px;
+
+  color-scheme: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  font-size: var(--nm-font-size);
+  line-height: 1.4;
+  color: var(--nm-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .nm-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .nm-root {
+  color-scheme: light;
+}
+
+:where(.nm-root) *,
+:where(.nm-root) *::before,
+:where(.nm-root) *::after {
+  box-sizing: border-box;
+}
+
+.nm-root[data-size="sm"] {
+  --nm-height: 30px;
+  --nm-px: 8px;
+  --nm-font-size: 12px;
+}
+.nm-root[data-size="lg"] {
+  --nm-height: 44px;
+  --nm-px: 12px;
+  --nm-font-size: 14px;
+}
+
+.nm-label {
+  font-weight: 500;
+}
+.nm-label[data-required]::after {
+  content: " *";
+  color: var(--nm-danger);
+}
+
+/* -------------------------------------------------------------- control */
+
+.nm-control {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  min-width: 0;
+  height: var(--nm-height);
+  padding-inline-start: var(--nm-px);
+  border: 1px solid var(--nm-border);
+  border-radius: var(--nm-radius);
+  background: var(--nm-input-bg);
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+.nm-control:hover:not([data-disabled]) {
+  border-color: color-mix(in oklab, var(--nm-border) 60%, var(--nm-fg));
+}
+.nm-control:has(.nm-input:focus-visible) {
+  border-color: var(--nm-focus);
+  box-shadow: 0 0 0 1px var(--nm-focus);
+}
+.nm-control[data-invalid] {
+  border-color: var(--nm-danger);
+}
+.nm-control[data-invalid]:has(.nm-input:focus-visible) {
+  box-shadow: 0 0 0 1px var(--nm-danger);
+}
+.nm-control[data-disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.nm-control[data-readonly] {
+  background: var(--nm-readonly-bg);
+}
+
+.nm-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  padding-inline-end: var(--nm-px);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  /* Figures of the same width, so a column of amounts lines up and the
+     number does not jitter as it is typed. */
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+.nm-input::placeholder {
+  color: var(--nm-muted);
+}
+.nm-input:disabled {
+  cursor: not-allowed;
+}
+
+.nm-adornment {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--nm-muted);
+  white-space: nowrap;
+}
+.nm-adornment[data-side="trailing"] {
+  padding-inline-end: 2px;
+}
+
+.nm-icon-button {
+  display: inline-flex;
+  flex: none;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--nm-muted);
+  cursor: pointer;
+}
+.nm-icon-button:hover {
+  background: var(--nm-hover);
+  color: var(--nm-fg);
+}
+
+/* -------------------------------------------------------------- stepper */
+
+.nm-stepper {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: 22px;
+  border-inline-start: 1px solid var(--nm-border);
+}
+
+.nm-step {
+  display: flex;
+  flex: 1 1 50%;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--nm-muted);
+  cursor: pointer;
+  /* The buttons repeat while held, so the browser must not read the hold as
+     a scroll gesture or a text selection. */
+  touch-action: none;
+  user-select: none;
+}
+.nm-step:first-child {
+  border-start-end-radius: calc(var(--nm-radius) - 1px);
+  border-block-end: 1px solid var(--nm-border);
+}
+.nm-step:last-child {
+  border-end-end-radius: calc(var(--nm-radius) - 1px);
+}
+.nm-step:hover:not(:disabled) {
+  background: var(--nm-hover);
+  color: var(--nm-fg);
+}
+.nm-step:active:not(:disabled) {
+  background: color-mix(in oklab, var(--nm-hover) 70%, var(--nm-accent));
+}
+.nm-step:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ----------------------------------------------------------------- text */
+
+.nm-description {
+  color: var(--nm-muted);
+  text-wrap: pretty;
+}
+.nm-error {
+  color: var(--nm-danger);
+  text-wrap: pretty;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nm-control {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .nm-control {
+    border: 1px solid CanvasText;
+  }
+  .nm-stepper,
+  .nm-step:first-child {
+    border-color: CanvasText;
+  }
+}

package/source/components/popover/README.md

@@ -0,0 +1,44 @@
+# Popover
+
+A panel anchored to the control that opens it, for React 19. Rendered in the top
+layer, so it is never clipped by a scrolling parent. No runtime dependencies
+besides React.
+
+```ts
+import { Popover } from "@/components/popover";
+import "@/components/popover/styles.css";
+```
+
+```tsx
+<Popover trigger={<Button variant="outline">Filters</Button>} title="Filters">
+  {({ close }) => (
+    <>
+      <Checkbox label="Only active" />
+      <Button size="sm" onClick={close}>Apply</Button>
+    </>
+  )}
+</Popover>
+```
+
+| Prop | Default | Description |
+| --- | --- | --- |
+| `trigger` | — | A single element, cloned with a ref and the ARIA wiring. |
+| `open` / `defaultOpen` / `onOpenChange` | — | Controlled or uncontrolled. The reason is `escape`, `outside`, `trigger` or `api`. |
+| `title` / `description` | — | Heading inside the panel; `title` also names it. |
+| `aria-label` | "More information" | Names the panel when there is no `title`. |
+| `side` / `align` | `bottom` / `start` | Flips and clamps to stay on screen. |
+| `gap` | `6` | Distance from the trigger. |
+| `scrollable` | `false` | Cap the height to the space available and scroll. |
+| `autoFocus` | `true` | Move focus into the panel on open. |
+| `className`, `classNames`, `style`, `localeText` | — | Slots: `root`, `panel`, `header`, `title`, `description`, `body`. |
+
+`children` may be a function, which receives `{ close }`.
+
+The browser provides light dismiss and Escape; focus returns to the trigger on
+close. `data-side` on the root says which side it settled on after flipping, so
+the stylesheet can animate from the right direction.
+
+Placement itself lives in `shared/core/position.ts` and is unit-tested there —
+this package is the accessible wrapper around it.
+
+Use the Menu for a list of commands, and the Tooltip for a short label on hover.

package/source/components/popover/core/index.ts

@@ -0,0 +1,2 @@
+// Framework-free: just the vocabulary. Placement lives in shared/core/position.
+export type * from "./types";

package/source/components/popover/core/types.ts

@@ -0,0 +1,12 @@
+export type PopoverSide = "top" | "bottom" | "left" | "right";
+export type PopoverAlign = "start" | "end";
+
+/** What closed the popover, so callers can tell a choice from a dismissal. */
+export type PopoverCloseReason = "escape" | "outside" | "trigger" | "api";
+
+export type PopoverSlot = "root" | "panel" | "header" | "title" | "description" | "body" | "arrow";
+
+export interface PopoverLocaleText {
+  /** Fallback name for a panel with no title. */
+  label: string;
+}

package/source/components/popover/index.ts

@@ -0,0 +1,4 @@
+export { Popover } from "./react/Popover";
+export type { PopoverHandle, PopoverProps, PopoverRenderProps } from "./react/Popover";
+export { defaultPopoverText } from "./react/locale";
+export * from "./core";

package/source/components/popover/passport.json

@@ -0,0 +1,238 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Popover",
+    "folder": "popover",
+    "exports": [
+      "Popover"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.4.1",
+    "files": [
+      "core/index.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Popover.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:5cbc02914b3192d61aeb706d8d3d439a41ef8bb985d90c0864a330167ffb0b2c"
+  },
+  "props": [
+    {
+      "name": "align",
+      "type": "enum",
+      "values": [
+        "end",
+        "start"
+      ],
+      "typeText": "PopoverAlign | undefined",
+      "required": false,
+      "default": "start",
+      "origin": "derived",
+      "description": "Default `start`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Names the panel when there is no `title`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "autoFocus",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": true,
+      "origin": "derived",
+      "description": "Move focus into the panel when it opens. Default true.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "children",
+      "type": "other",
+      "typeText": "ReactNode | ((props: PopoverRenderProps) => ReactNode)",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<PopoverSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived"
+    },
+    {
+      "name": "description",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "gap",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 6,
+      "origin": "derived",
+      "description": "Distance from the trigger, in pixels. Default 6.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<PopoverLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "onOpenChange",
+      "type": "function",
+      "signature": "((open: boolean, reason?: PopoverCloseReason) => void) | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<PopoverHandle> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "scrollable",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Cap the panel to the space available and let it scroll. Default false.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "side",
+      "type": "enum",
+      "values": [
+        "bottom",
+        "left",
+        "right",
+        "top"
+      ],
+      "typeText": "PopoverSide | undefined",
+      "required": false,
+      "default": "bottom",
+      "origin": "derived",
+      "description": "Side of the trigger to open on, before flipping for space. Default `bottom`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "title",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Heading inside the panel, which also names it.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "trigger",
+      "type": "other",
+      "typeText": "ReactElement<{ [attribute: string]: unknown; ref?: Ref<HTMLElement>; }, string | import(\"react\").JSXElementConstructor<any>>",
+      "required": true,
+      "origin": "derived",
+      "description": "The element that opens it. It is cloned with a ref and the ARIA attributes\r\nthat tie it to the panel, so pass a single element that forwards both — any\r\nbutton in this library does.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "events": [
+    {
+      "name": "onOpenChange",
+      "signature": "((open: boolean, reason?: PopoverCloseReason) => void) | undefined"
+    }
+  ],
+  "slots": [
+    "root",
+    "panel",
+    "header",
+    "title",
+    "description",
+    "body",
+    "arrow"
+  ],
+  "states": [
+    {
+      "attr": "data-side",
+      "values": [
+        "left",
+        "right",
+        "top"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 19,
+    "propsDescribed": 8,
+    "describedPct": 42,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}