gbs-add-block 1.2.11 → 1.2.13

package/source/beta-components/fileuploader/styles.css

@@ -0,0 +1,395 @@
+/*
+ * FileUploader styles.
+ *
+ * Tokens read the DataGrid's --dg-* variables when they are set on an ancestor
+ * (set them on :root to share one theme) and fall back to the same palette
+ * otherwise. Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .fu-root {
+    --fu-bg: var(--dg-bg, light-dark(#ffffff, #0b0b0e));
+    --fu-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --fu-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --fu-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --fu-hover: var(--dg-hover, light-dark(#f4f4f5, #1f1f23));
+    --fu-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
+    --fu-accent: var(--dg-accent, light-dark(#2563eb, #60a5fa));
+    --fu-accent-fg: var(--dg-accent-fg, light-dark(#ffffff, #0b1220));
+    --fu-accent-soft: var(--dg-accent-soft, light-dark(#eff6ff, #172554));
+    --fu-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --fu-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --fu-success: light-dark(#16a34a, #4ade80);
+    --fu-radius: var(--dg-radius, 8px);
+    --fu-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/beta-components/toaster/README.md

@@ -0,0 +1,128 @@
+# Toaster
+
+Notifications for any React 19 app — Vite, Next.js, Remix or plain React — styled
+to match the DataGrid, Combobox and DatePicker. No runtime dependencies besides
+React.
+
+- **`<Toaster />`** — mount once; renders the toasts.
+- **`toast()`** — call from anywhere: components, event handlers, data layers,
+  even code outside React. No hook, context or provider.
+
+## Setup
+
+```ts
+import { toast, Toaster } from "@/components/toaster";
+import "@/components/toaster/styles.css";
+```
+
+```tsx
+// Once, near the root of the app (e.g. app/layout.tsx or App.tsx)
+<Toaster />
+
+// Anywhere
+toast.success("Settings saved");
+```
+
+Import from one path everywhere. `toast()` and `<Toaster />` meet through a
+shared store, and a bundler that sees two import paths may create two stores.
+
+## Showing toasts
+
+```tsx
+toast("Event created", { description: "Monday, 10:00" });
+toast.success("Saved");
+toast.error("Upload failed", { action: { label: "Retry", onClick: retry } });
+toast.warning("Storage almost full");
+toast.info("New version available");
+const id = toast.loading("Uploading…");       // stays until updated
+
+toast.update(id, { type: "success", title: "Uploaded" });
+toast.dismiss(id);                             // or toast.dismiss() for all
+
+toast.promise(saveUser(data), {
+  loading: "Saving…",
+  success: (user) => `${user.name} saved`,
+  error: (error) => `Could not save: ${(error as Error).message}`,
+});
+
+toast.custom(({ dismiss }) => <MyCard onClose={dismiss} />);
+```
+
+Every call returns the toast's id. Passing an `id` that is already on screen
+updates that toast instead of adding another.
+
+## Toast options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `id` | `string` | generated | Reuse to update a toast in place. |
+| `type` | `"default"` \| `"success"` \| `"error"` \| `"warning"` \| `"info"` \| `"loading"` | `"default"` | Icon, color bar and announcement. |
+| `description` | `ReactNode` | — | Second line. |
+| `duration` | `number` | `5000` (loading: stays) | Milliseconds. `0` or `Infinity` stays until dismissed. |
+| `dismissible` | `boolean` | `true` | Close button, Escape and swipe. |
+| `action` / `cancel` | `{ label, onClick(event) }` | — | Buttons. The toast closes after a click unless `event.preventDefault()` is called. |
+| `icon` | `ReactNode` | the type's icon | `null` hides it. |
+| `className` | `string` | — | Class for this toast. |
+| `render` | `({ id, dismiss }) => ReactNode` | — | Custom body (`toast.custom` sets it). |
+| `onDismiss` / `onAutoClose` | `(toast) => void` | — | Closed by someone, or because time ran out. |
+
+## Toaster props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `position` | `"top-left"` \| `"top-center"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-center"` \| `"bottom-right"` | `"top-right"` | Where the stack sits. Full width on narrow screens. |
+| `limit` | `number` | `3` | Toasts on screen at once. The rest wait, with their timers held. |
+| `duration` | `number` | `5000` | Default auto-close delay. |
+| `closeButton` | `boolean` | `true` | Close button on dismissible toasts. |
+| `hotkey` | `string[]` | `["altKey", "KeyT"]` | Moves focus to the notifications. `[]` turns it off. |
+| `icons` | `Partial<Record<ToastType, ReactNode>>` | — | Replace icons per type; `null` hides one. |
+| `store` | `ToastStore` | the `toast()` store | For a separate notification area. |
+| `dir` | `"ltr"` \| `"rtl"` \| `"auto"` | inherited | Text direction. |
+| `className`, `classNames`, `style` | — | — | Slots: `region`, `list`, `toast`, `icon`, `content`, `title`, `description`, `actions`, `action`, `cancel`, `close`. |
+| `localeText` | `Partial<ToasterLocaleText>` | English | `regionLabel(hotkey)`, `close`. |
+
+## Behavior
+
+- Timers pause while the pointer is over the toasts, while focus is inside them,
+  and while the browser tab is hidden.
+- Toasts beyond `limit` wait with their full time and appear as others close.
+- Toasts render in a portal on `<body>`, so no parent's overflow, transform or
+  z-index can hide them.
+
+## Keyboard and accessibility
+
+| Keys | Action |
+| --- | --- |
+| **Alt + T** | Move focus to the notifications (configurable with `hotkey`). |
+| **Tab** | Move between toasts and their buttons. |
+| **Escape** | Dismiss the focused toast. |
+| swipe sideways | Dismiss (touch, pen or mouse). |
+
+The list is a polite live region, always in the page, so new toasts are read out
+without interrupting. Error toasts use `role="alert"` and interrupt. The region is
+a labelled landmark ("Notifications (Alt+T)").
+
+## Theming
+
+Override `--ts-*` variables (they default to the grid's `--dg-*`). Toasts render
+on `<body>`, so set shared `--dg-*` values on `:root`:
+
+```css
+.ts-region { --ts-width: 420px; --ts-success: #059669; --ts-radius: 12px; }
+```
+
+State attributes: `data-position` on the region; `data-type`, `data-state`
+(`open` / `closing`), `data-custom`, `data-swiping` on toasts.
+
+## Headless use
+
+`useToasts(store?)` returns the live snapshot (`toasts`, `paused`, `limit`) for a
+custom UI, and `visibleToasts(snapshot)` picks the ones to show.
+`createToastStore()` and `createToastApi(store)` build separate instances. All of
+`core` runs without React.
+
+## Known limits
+
+- One stack per `<Toaster />`; toasts don't collapse into an expandable pile.
+- `toast()` does nothing during a server render or in server code. Call it in
+  the browser, e.g. after a Server Action resolves.