@grampro/kit 0.0.0-stage → 2.4.0

package/source/components/file-uploader/styles.css

@@ -0,0 +1,394 @@
+/*
+ * FileUploader styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. 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.
+ */
+
+.fu-root {
+  --fu-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --fu-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --fu-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --fu-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --fu-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --fu-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --fu-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --fu-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+  --fu-accent-soft: var(--gbs-accent-soft, var(--dg-accent-soft, light-dark(#eff6ff, #172554)));
+  --fu-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --fu-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --fu-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+  --fu-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --fu-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --fu-dropzone-py: 20px;
+  --fu-thumb-size: 40px;
+
+  color-scheme: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  font-size: var(--fu-font-size);
+  line-height: 1.4;
+  color: var(--fu-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .fu-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .fu-root {
+  color-scheme: light;
+}
+
+:where(.fu-root) *,
+:where(.fu-root) *::before,
+:where(.fu-root) *::after {
+  box-sizing: border-box;
+}
+
+.fu-root[data-size="sm"] {
+  --fu-font-size: 12px;
+  --fu-dropzone-py: 12px;
+  --fu-thumb-size: 32px;
+}
+.fu-root[data-size="lg"] {
+  --fu-font-size: 14px;
+  --fu-dropzone-py: 32px;
+  --fu-thumb-size: 48px;
+}
+
+.fu-label {
+  font-weight: 500;
+}
+.fu-label[data-required]::after {
+  content: " *";
+  color: var(--fu-danger);
+}
+.fu-description {
+  color: var(--fu-muted);
+  font-size: 0.92em;
+}
+.fu-error {
+  color: var(--fu-danger);
+  font-size: 0.92em;
+}
+
+/* ------------------------------------------------------------ dropzone */
+
+.fu-dropzone {
+  position: relative;
+  border: 1.5px dashed color-mix(in oklab, var(--fu-border), var(--fu-fg) 20%);
+  border-radius: var(--fu-radius);
+  background: var(--fu-input-bg);
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
+}
+.fu-dropzone:hover:not(:has(.fu-trigger:disabled)) {
+  border-color: color-mix(in oklab, var(--fu-border), var(--fu-fg) 40%);
+}
+.fu-dropzone[data-dragging] {
+  border-color: var(--fu-accent);
+  background: var(--fu-accent-soft);
+}
+.fu-root[data-invalid] .fu-dropzone {
+  border-color: var(--fu-danger);
+}
+
+.fu-trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: var(--fu-dropzone-py) 16px;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+.fu-trigger:focus-visible {
+  outline: 2px solid var(--fu-focus);
+  outline-offset: 2px;
+}
+.fu-trigger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.fu-dropzone-icon {
+  color: var(--fu-muted);
+}
+.fu-dropzone[data-dragging] .fu-dropzone-icon {
+  color: var(--fu-accent);
+}
+.fu-browse {
+  color: var(--fu-accent);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.fu-hint {
+  color: var(--fu-muted);
+  font-size: 0.92em;
+}
+
+/* ---------------------------------------------------------- rejections */
+
+.fu-rejections {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fu-rejection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 4px 4px 10px;
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--fu-danger), transparent 90%);
+  color: var(--fu-danger);
+}
+.fu-rejection > span {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* --------------------------------------------------------------- files */
+
+.fu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 8px 8px 10px;
+  border: 1px solid var(--fu-border);
+  border-radius: var(--fu-radius);
+  background: var(--fu-bg);
+}
+.fu-item[data-status="error"] {
+  border-color: color-mix(in oklab, var(--fu-danger), var(--fu-border) 55%);
+}
+
+.fu-thumb {
+  --fu-kind: var(--fu-muted);
+
+  position: relative;
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--fu-thumb-size);
+  height: var(--fu-thumb-size);
+  overflow: hidden;
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--fu-kind), transparent 88%);
+  color: var(--fu-kind);
+}
+.fu-thumb img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.fu-thumb[data-kind="image"] {
+  --fu-kind: light-dark(#2563eb, #60a5fa);
+}
+.fu-thumb[data-kind="video"] {
+  --fu-kind: light-dark(#9333ea, #c084fc);
+}
+.fu-thumb[data-kind="audio"] {
+  --fu-kind: light-dark(#d97706, #fbbf24);
+}
+.fu-thumb[data-kind="pdf"] {
+  --fu-kind: light-dark(#dc2626, #f87171);
+}
+.fu-thumb[data-kind="spreadsheet"] {
+  --fu-kind: light-dark(#16a34a, #4ade80);
+}
+.fu-thumb[data-kind="document"] {
+  --fu-kind: light-dark(#0891b2, #22d3ee);
+}
+
+.fu-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.fu-name,
+.fu-meta,
+.fu-item-error {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fu-name {
+  font-weight: 500;
+}
+.fu-meta {
+  color: var(--fu-muted);
+  font-size: 0.92em;
+  font-variant-numeric: tabular-nums;
+}
+.fu-item[data-status="success"] .fu-meta {
+  color: var(--fu-success);
+}
+.fu-item[data-status="error"] .fu-meta,
+.fu-item-error {
+  color: var(--fu-danger);
+  font-size: 0.92em;
+}
+
+.fu-progress {
+  height: 4px;
+  margin-top: 4px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--fu-hover);
+}
+/* Scaling instead of width: moving the bar never triggers layout. */
+.fu-progress-bar {
+  display: block;
+  height: 100%;
+  background: var(--fu-accent);
+  transform-origin: left;
+  transition: transform 150ms linear;
+}
+.fu-progress-bar:dir(rtl) {
+  transform-origin: right;
+}
+.fu-item[data-status="paused"] .fu-progress-bar {
+  background: var(--fu-muted);
+}
+.fu-item[data-status="error"] .fu-progress-bar {
+  background: var(--fu-danger);
+}
+
+.fu-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  color: var(--fu-muted);
+}
+.fu-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.fu-icon-button:hover:not(:disabled) {
+  background: var(--fu-hover);
+  color: var(--fu-fg);
+}
+.fu-icon-button:focus-visible {
+  outline: 2px solid var(--fu-focus);
+  outline-offset: 1px;
+}
+.fu-icon-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* -------------------------------------------------------------- footer */
+
+.fu-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.fu-footer .fu-progress {
+  flex: 1 1 auto;
+  margin: 0;
+}
+.fu-footer-text {
+  color: var(--fu-muted);
+  font-size: 0.92em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.fu-button {
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--fu-border);
+  border-radius: 6px;
+  background: var(--fu-bg);
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.fu-button:hover:not(:disabled) {
+  background: var(--fu-hover);
+}
+.fu-button[data-variant="primary"] {
+  border-color: var(--fu-accent);
+  background: var(--fu-accent);
+  color: var(--fu-accent-fg);
+}
+.fu-button[data-variant="primary"]:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--fu-accent), var(--fu-fg) 12%);
+}
+.fu-button:focus-visible {
+  outline: 2px solid var(--fu-focus);
+  outline-offset: 1px;
+}
+.fu-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.fu-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fu-dropzone,
+  .fu-progress-bar {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .fu-progress-bar {
+    background: Highlight;
+  }
+  .fu-dropzone[data-dragging] {
+    border-color: Highlight;
+  }
+}

package/source/components/input/README.md

@@ -0,0 +1,44 @@
+# Input and OtpInput
+
+Text fields for React 19, styled to match the rest of the library. No runtime
+dependencies besides React.
+
+- **`<Input>`** — label, hint, error, leading/trailing adornments, clear button,
+  password reveal and a character counter. Every other prop goes to the `<input>`.
+- **`<OtpInput>`** — one-time codes. A single real `<input>` drawn as cells, so SMS
+  autofill (`autocomplete="one-time-code"`), paste and screen readers work as for
+  one field.
+
+## Setup
+
+```ts
+import { Input, OtpInput } from "@/components/input";
+import "@/components/input/styles.css";
+```
+
+## Usage
+
+```tsx
+<Input label="Email" type="email" value={email} onValueChange={setEmail} clearable />
+<Input label="Password" type="password" name="password" required />
+<OtpInput label="Code" groups={[3, 3]} onComplete={verify} />
+```
+
+## Props
+
+`Input`: all `<input>` attributes plus `value`, `defaultValue`, `onValueChange`,
+`label`, `description`, `error`, `size` (`sm` `md` `lg`), `leading`, `trailing`,
+`clearable`, `revealPassword` (default `true`), `showCount`, `classNames`
+(`root` `label` `control` `input` `description` `error` `count`), `localeText`,
+and `ref` (the `<input>`).
+
+`OtpInput`: `length` (6), `mode` (`numeric` `alphanumeric` `alphabetic`),
+`uppercase`, `value`, `defaultValue`, `onValueChange`, `onComplete`, `groups`,
+`mask`, `label`, `description`, `error`, `size`, `name`, `required`, `disabled`,
+`classNames` (`root` `label` `cells` `cell` `separator` `description` `error`),
+`localeText`, and `ref` (the `<input>`).
+
+## Headless use
+
+`sanitizeOtp`, `otpPattern`, `otpInputMode`, `separatorsAfter`, `activeCell`,
+`cellAt` and `countCharacters` are exported from the framework-free `core`.

package/source/components/input/core/count.ts

@@ -0,0 +1,5 @@
+/**
+ * Re-exported so the character count a person sees is identical in every
+ * control that shows one. The implementation lives in `shared/core/text.ts`.
+ */
+export { countCharacters } from "../../shared/core/text";

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

@@ -0,0 +1,11 @@
+// Framework-free: character counting and the OTP rules the components use.
+export { countCharacters } from "./count";
+export {
+  activeCell,
+  cellAt,
+  otpInputMode,
+  otpPattern,
+  sanitizeOtp,
+  separatorsAfter,
+} from "./otp";
+export type * from "./types";

package/source/components/input/core/otp.ts

@@ -0,0 +1,64 @@
+import type { OtpMode } from "./types";
+
+const ALLOWED: Record<OtpMode, RegExp> = {
+  numeric: /^\d$/,
+  alphanumeric: /^[a-z0-9]$/i,
+  alphabetic: /^[a-z]$/i,
+};
+
+/**
+ * Keeps the characters a code may contain, up to `length`. Pasting
+ * `"Your code: 123-456"` into a numeric field gives `"123456"`.
+ */
+export function sanitizeOtp(
+  input: string,
+  length: number,
+  mode: OtpMode = "numeric",
+  uppercase = false,
+): string {
+  let result = "";
+  for (const char of input) {
+    if (result.length >= length) break;
+    if (ALLOWED[mode].test(char)) result += uppercase ? char.toUpperCase() : char;
+  }
+  return result;
+}
+
+/** Numeric codes get the phone's number pad. */
+export const otpInputMode = (mode: OtpMode): "numeric" | "text" =>
+  mode === "numeric" ? "numeric" : "text";
+
+/** A `pattern` attribute, so native form validation knows a complete code. */
+export function otpPattern(mode: OtpMode, length: number): string {
+  const characters =
+    mode === "numeric" ? "\\d" : mode === "alphabetic" ? "[A-Za-z]" : "[A-Za-z0-9]";
+  return `${characters}{${length}}`;
+}
+
+/** Cell indexes followed by a separator, from group sizes such as `[3, 3]`. */
+export function separatorsAfter(groups: readonly number[] | undefined, length: number): Set<number> {
+  const result = new Set<number>();
+  if (!groups) return result;
+  let position = 0;
+  for (const size of groups.slice(0, -1)) {
+    position += size;
+    if (position > 0 && position < length) result.add(position - 1);
+  }
+  return result;
+}
+
+/**
+ * The cell showing the caret: where the next character goes, or, once the code
+ * is full, the character that typing will replace.
+ */
+export function activeCell(valueLength: number, length: number, caret: number): number {
+  return Math.max(0, Math.min(caret, valueLength, length - 1));
+}
+
+/** The cell under a horizontal position, given each cell's left and right edges. */
+export function cellAt(bounds: readonly { left: number; right: number }[], x: number): number {
+  for (let index = 0; index < bounds.length; index++) {
+    if (x <= bounds[index].right) return index;
+  }
+  return Math.max(0, bounds.length - 1);
+}

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

@@ -0,0 +1,14 @@
+export type FieldSize = "sm" | "md" | "lg";
+
+/** Which characters an OTP cell accepts. */
+export type OtpMode = "numeric" | "alphanumeric" | "alphabetic";
+
+export interface InputLocaleText {
+  clear: string;
+  showPassword: string;
+  hidePassword: string;
+  /** `max` is set when the field has a `maxLength`. */
+  characterCount(count: string, max?: string): string;
+  /** Accessible name of the code field when no `label` is given. */
+  otpLabel: string;
+}

package/source/components/input/index.ts

@@ -0,0 +1,8 @@
+export { Input } from "./react/Input";
+export type { InputProps } from "./react/Input";
+export { OtpInput } from "./react/OtpInput";
+export type { OtpInputProps } from "./react/OtpInput";
+export { defaultInputText } from "./react/locale";
+export { setNativeValue } from "./react/dom";
+export type { InputSlot, OtpSlot } from "./react/props";
+export * from "./core";