@godxjp/ui 23.3.0 → 23.4.0

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -2,6 +2,7 @@
  * Interaction & visual variant prop types.
  * @see docs/PROPS-VOCABULARY.md#interaction-variants
  */
+import type * as React from "react";
 /**
  * Button visual style.
  *
@@ -51,6 +52,118 @@ export type TextAlignProp = "start" | "center" | "end";
  * remaining CSS keywords (`pre`, `pre-line`, `nowrap`) are values on the same axis, not more flags.
  */
 export type TextWhitespaceProp = "normal" | "pre-wrap";
+/**
+ * antd `Typography` `type` — its four-value emphasis axis (`BaseType`).
+ *
+ * This library already publishes the same axis as `TextToneProp`, which is WIDER (it also carries
+ * `default`, `primary` and `info`) and which every existing call site is written in. Both spellings
+ * are accepted on `Text` / `Title` / `Paragraph` / `Link`; **`tone` WINS when both are passed**,
+ * because `tone` is the vocabulary `check:prop-vocabulary` governs and the one the CSS keys on.
+ * The fold is `secondary → muted`, `danger → destructive`, `success` / `warning` unchanged.
+ */
+export type TypographyTypeProp = "secondary" | "success" | "warning" | "danger";
+/**
+ * antd `Typography.Title` `level` — 1…5.
+ *
+ * `HeadingLevelProp` stops at 4 because `--heading-h4` is already 12.5px, BELOW the 14px body step.
+ * antd's fifth level is carried here rather than widened into `HeadingLevelProp`, so `Heading` —
+ * used across the package and at consumer call sites — keeps the four levels its tokens actually
+ * define while `Title` reaches antd's five. Level 5 reads `--heading-h5`, which is bound to the
+ * existing `--font-size-2xs` step (≈11.1px); it is not a new number.
+ */
+export type TitleLevelProp = 1 | 2 | 3 | 4 | 5;
+/**
+ * antd `CopyConfig` — the copy affordance beside a run of text.
+ *
+ * `format: "text/html"` reaches the real `ClipboardItem` path. `tooltips` takes `false` to suppress
+ * the tooltip, one node for both states, or `[copy, copied]` for each.
+ */
+export type TypographyCopyConfigProp = {
+    /** Text to copy. A function may be async — it is awaited. Defaults to the rendered children. */
+    text?: string | (() => string | Promise<string>);
+    /** Fired AFTER the write resolves. Never fired when the clipboard refuses — see the component. */
+    onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Icon node, or `[copy, copied]` for the two states. */
+    icon?: React.ReactNode;
+    /** Tooltip text: `false` suppresses it, a node replaces both, `[copy, copied]` sets each. */
+    tooltips?: React.ReactNode;
+    /** `text/html` also writes an HTML flavour to the clipboard. Default `text/plain`. */
+    format?: "text/plain" | "text/html";
+    /** Tab order of the copy button. */
+    tabIndex?: number;
+};
+/** antd `EditConfig` — in-place editing of a run of text. */
+export type TypographyEditConfigProp = {
+    /** The value to edit. Falls back to the children when they are a plain string. */
+    text?: string;
+    /** Controlled editing state. */
+    editing?: boolean;
+    /** Icon node for the edit trigger. */
+    icon?: React.ReactNode;
+    /** Tooltip on the edit trigger; `false` suppresses it. */
+    tooltip?: React.ReactNode;
+    /** Fired when editing starts. */
+    onStart?: () => void;
+    /** Fired with the TRIMMED value when editing is confirmed (Enter, or blur). */
+    onChange?: (value: string) => void;
+    /** Fired when editing is abandoned (Escape). */
+    onCancel?: () => void;
+    /** Fired after Enter confirms — NOT after a blur, matching antd. */
+    onEnd?: () => void;
+    /** Character ceiling on the editing textarea. */
+    maxLength?: number;
+    /** Auto-grow the textarea. `true`, or `{ minRows, maxRows }`. Default `true`. */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /** What opens the editor: the icon, the text itself, or both. Default `["icon"]`. */
+    triggerType?: ("icon" | "text")[];
+    /** Node shown in the editor's corner; `null` removes it. */
+    enterIcon?: React.ReactNode;
+    /** Tab order of the edit button. */
+    tabIndex?: number;
+};
+/**
+ * antd `EllipsisConfig` — the truncation contract.
+ *
+ * `Text` already carries this library's own `truncate` (one line) and `clamp` (N lines). All three
+ * spellings are accepted and **`ellipsis` WINS** when they collide, because it is the only one that
+ * can carry an expand control, a suffix or a tooltip.
+ */
+export type TypographyEllipsisConfigProp = {
+    /** Lines kept before truncating. Default 1. */
+    rows?: number;
+    /** Show an expand control. `"collapsible"` also keeps a collapse control once expanded. */
+    expandable?: boolean | "collapsible";
+    /** Text pinned AFTER the ellipsis (a unit, a count). */
+    suffix?: string;
+    /** The expand/collapse label — a node, or a function of the current state. */
+    symbol?: React.ReactNode | ((expanded: boolean) => React.ReactNode);
+    /** Uncontrolled initial expanded state. */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Fired when the expand/collapse control is used. */
+    onExpand?: (e: React.MouseEvent<HTMLElement>, info: {
+        expanded: boolean;
+    }) => void;
+    /** Fired when the measured overflow state flips. */
+    onEllipsis?: (ellipsis: boolean) => void;
+    /** Tooltip carrying the full text while it is truncated. `true` uses the children. */
+    tooltip?: React.ReactNode;
+};
+/**
+ * antd `ActionsConfig` — which side of the text the copy / edit / expand cluster sits on.
+ *
+ * The name is antd's. `PROP_ALIASES_FORBIDDEN` reserves the bare word `actions` for a ReactNode
+ * SLOT (`ActionsProp`, toolbars); this is not that — it is a placement config for controls the
+ * component renders itself, and antd's spelling wins per DESIGN-AUTHORITY's prop-surface rule.
+ * `start` / `end` are logical, so they mirror in RTL.
+ */
+export type TypographyActionsConfigProp = {
+    placement?: "start" | "end";
+};
 /** Badge visual style. */
 export type BadgeVariantProp = "default" | "secondary" | "outline" | "dashed";
 /**

package/dist/styles/card-layout.css

@@ -333,6 +333,36 @@
     padding-inline: 0;
   }
 
+  [data-slot="card"] > [data-slot="tabs"] {
+
+    gap: 0;
+
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  [data-slot="card"] > [data-slot="tabs"] > [data-slot="tabs-panel"] {
+    padding: 0;
+  }
+
+  [data-slot="card"][data-tab-list] > [data-slot="card-header"]:not([data-banded]) {
+    padding-bottom: var(--card-space-body-y);
+  }
+
+  [data-slot="card"]
+    > [data-slot="tabs"]
+    > .ui-tabs-bar
+    > [data-slot="tabs-extra"][data-side="end"] {
+    padding-inline-end: var(--card-space-inset);
+  }
+
+  [data-slot="card"]
+    > [data-slot="tabs"]
+    > .ui-tabs-bar
+    > [data-slot="tabs-extra"][data-side="start"] {
+    padding-inline-start: var(--card-space-inset);
+  }
+
   [data-slot="card-footer"] {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/core.css

@@ -22,3 +22,4 @@
 @import "./form-layout.css";
 @import "./navigation-layout.css";
 @import "./chart-layout.css";
+@import "./float-button-layout.css";

package/dist/styles/data-display-layout.css

@@ -1812,3 +1812,239 @@
     background: var(--tree-node-selected-background, hsl(var(--primary) / 0.12));
   }
 }
+
+@layer components {
+
+  .ui-welcome {
+    display: flex;
+    min-inline-size: 0;
+    align-items: flex-start;
+    gap: var(--welcome-gap);
+    border-radius: var(--welcome-radius);
+  }
+
+  .ui-welcome[data-variant="filled"] {
+    padding-block: var(--welcome-padding-block);
+    padding-inline: var(--welcome-padding-inline);
+    border: var(--welcome-filled-border, var(--stroke-hairline) solid hsl(var(--border)));
+    background: var(--welcome-filled-background, hsl(var(--muted)));
+  }
+
+  .ui-welcome-icon {
+    display: grid;
+    inline-size: var(--welcome-icon-size);
+    block-size: var(--welcome-icon-size);
+    flex: 0 0 auto;
+    line-height: 0;
+    place-items: center;
+  }
+
+  .ui-welcome-icon svg,
+  .ui-welcome-icon img {
+    inline-size: var(--welcome-icon-size);
+    block-size: var(--welcome-icon-size);
+    object-fit: contain;
+  }
+
+  .ui-welcome-content {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--welcome-content-gap);
+  }
+
+  .ui-welcome-title-row {
+    display: flex;
+    min-inline-size: 0;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--welcome-title-gap);
+  }
+
+  .ui-welcome-title {
+    min-inline-size: 0;
+  }
+
+  .ui-welcome-extra {
+    flex: 0 0 auto;
+  }
+}
+
+@layer components {
+
+  .ui-thought-chain {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    gap: var(--thought-chain-gap);
+    list-style: none;
+  }
+
+  .ui-thought-chain-node {
+    position: relative;
+    display: flex;
+    min-inline-size: 0;
+    align-items: flex-start;
+    gap: var(--thought-chain-node-gap);
+  }
+
+  .ui-thought-chain:not([data-line="none"]) .ui-thought-chain-node:not(:last-child)::before {
+    position: absolute;
+    inset-block: var(--thought-chain-icon-size) calc(-1 * var(--thought-chain-gap));
+    inset-inline-start: calc(var(--thought-chain-icon-size) / 2);
+    border-inline-start: var(--thought-chain-line-width) solid
+      var(--thought-chain-line-color, hsl(var(--border)));
+    content: "";
+    translate: calc(-1 * var(--thought-chain-line-width) / 2) 0;
+  }
+
+  .ui-thought-chain[data-line="dashed"] .ui-thought-chain-node::before {
+    border-inline-start-style: dashed;
+  }
+
+  .ui-thought-chain[data-line="dotted"] .ui-thought-chain-node::before {
+    border-inline-start-style: dotted;
+  }
+
+  .ui-thought-chain-icon {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    inline-size: var(--thought-chain-icon-size);
+    block-size: var(--thought-chain-icon-size);
+    flex: 0 0 auto;
+    border-radius: var(--thought-chain-icon-radius);
+    background: var(--thought-chain-icon-background, hsl(var(--muted)));
+    color: var(--thought-chain-icon-color, hsl(var(--muted-foreground)));
+    font-size: var(--thought-chain-icon-font-size);
+    place-items: center;
+  }
+
+  .ui-thought-chain-icon svg {
+    inline-size: var(--thought-chain-chevron-size);
+    block-size: var(--thought-chain-chevron-size);
+  }
+
+  .ui-thought-chain-icon[data-status="success"] {
+    color: var(--thought-chain-icon-success-color, hsl(var(--success)));
+  }
+
+  .ui-thought-chain-icon[data-status="error"] {
+    color: var(--thought-chain-icon-error-color, hsl(var(--destructive)));
+  }
+
+  .ui-thought-chain-body {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--thought-chain-body-gap);
+  }
+
+  .ui-thought-chain-header {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--thought-chain-body-gap);
+  }
+
+  .ui-thought-chain-trigger {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--thought-chain-item-gap);
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: start;
+  }
+
+  .ui-thought-chain-chevron {
+    inline-size: var(--thought-chain-chevron-size);
+    block-size: var(--thought-chain-chevron-size);
+    flex: 0 0 auto;
+  }
+
+  [dir="rtl"] .ui-thought-chain-chevron {
+    scale: -1 1;
+  }
+
+  .ui-thought-chain-chevron[data-expanded="true"],
+  [dir="rtl"] .ui-thought-chain-chevron[data-expanded="true"] {
+    rotate: 90deg;
+    scale: 1 1;
+  }
+
+  .ui-thought-chain-content {
+    padding-block: var(--thought-chain-content-space-block);
+  }
+
+  @keyframes ui-thought-chain-blink {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  .ui-thought-chain [data-blink],
+  .ui-thought-chain-item[data-blink] {
+    animation: ui-thought-chain-blink var(--duration-slow) ease-in-out infinite;
+  }
+
+  .ui-thought-chain-spinner {
+    animation: spin var(--duration-slow) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-thought-chain [data-blink],
+    .ui-thought-chain-item[data-blink],
+    .ui-thought-chain-spinner {
+      animation: none;
+    }
+  }
+
+  .ui-thought-chain-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--thought-chain-item-gap);
+    padding-block: var(--thought-chain-item-padding-block);
+    padding-inline: var(--thought-chain-item-padding-inline);
+    border: 0;
+    border-radius: var(--thought-chain-item-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+
+  .ui-thought-chain-item[data-variant="solid"] {
+    background: var(--thought-chain-item-solid-background, hsl(var(--muted)));
+  }
+
+  .ui-thought-chain-item[data-variant="outlined"] {
+    border: var(
+      --thought-chain-item-outlined-border,
+      var(--stroke-hairline) solid hsl(var(--border))
+    );
+  }
+
+  button.ui-thought-chain-item {
+    cursor: pointer;
+  }
+
+  button.ui-thought-chain-item:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-thought-chain-item-text {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+  }
+}

package/dist/styles/float-button-layout.css

@@ -0,0 +1,168 @@
+
+
+@layer components {
+
+  .ui-float-button {
+    position: fixed;
+    z-index: var(--overlay-z-index);
+    inset-block-end: var(--float-button-offset-block-end);
+    inset-inline-end: var(--float-button-offset-inline-end);
+    box-shadow: var(--float-button-shadow);
+  }
+
+  .ui-float-button-group .ui-float-button {
+    position: relative;
+    inset: auto;
+    pointer-events: auto;
+  }
+
+  .ui-float-button[data-shape="square"] {
+    display: flex;
+    flex-direction: column;
+    block-size: auto;
+    inline-size: var(--float-button-size);
+    min-block-size: var(--float-button-min-block-size);
+    padding-block: var(--float-button-padding-block);
+    padding-inline: var(--float-button-padding-inline);
+  }
+
+  .ui-float-button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-float-button-icon > svg {
+    inline-size: var(--float-button-icon-size);
+    block-size: var(--float-button-icon-size);
+  }
+
+  .ui-float-button-content {
+    font-size: var(--float-button-content-font-size);
+    line-height: var(--float-button-content-line-height);
+    text-align: center;
+  }
+
+  .ui-float-button-badge {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: var(--float-button-badge-inset-block-start);
+    inset-inline-end: var(--float-button-badge-inset-inline-end);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--float-button-badge-size);
+    block-size: var(--float-button-badge-size);
+    padding-inline: var(--float-button-badge-padding-inline);
+    border-radius: var(--radius-pill);
+    background: var(--float-button-badge-background, hsl(var(--destructive)));
+    color: var(--float-button-badge-foreground);
+    font-size: var(--float-button-badge-font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  .ui-float-button-badge[data-dot] {
+    min-inline-size: var(--float-button-badge-dot-size);
+    inline-size: var(--float-button-badge-dot-size);
+    block-size: var(--float-button-badge-dot-size);
+    padding-inline: 0;
+  }
+
+  .ui-float-button-group {
+    position: fixed;
+    z-index: var(--overlay-z-index);
+    inset-block-end: var(--float-button-offset-block-end);
+    inset-inline-end: var(--float-button-offset-inline-end);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--float-button-group-gap);
+    pointer-events: none;
+  }
+
+  .ui-float-button-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--float-button-group-gap);
+    border-radius: var(--float-button-group-radius);
+  }
+
+  .ui-float-button-group:not([data-individual]) .ui-float-button-list {
+    gap: 0;
+    box-shadow: var(--float-button-shadow);
+  }
+
+  .ui-float-button-group:not([data-individual]) .ui-float-button {
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .ui-float-button-group:not([data-individual]) .ui-float-button-list > :first-child {
+    border-start-start-radius: var(--float-button-group-radius);
+    border-start-end-radius: var(--float-button-group-radius);
+  }
+
+  .ui-float-button-group:not([data-individual]) .ui-float-button-list > :last-child {
+    border-end-start-radius: var(--float-button-group-radius);
+    border-end-end-radius: var(--float-button-group-radius);
+  }
+
+  .ui-float-button-group[data-menu-mode] .ui-float-button-list {
+    position: absolute;
+  }
+
+  .ui-float-button-group[data-menu-mode][data-placement="top"] .ui-float-button-list {
+    inset-block-end: calc(var(--float-button-size) + var(--float-button-group-gap));
+  }
+
+  .ui-float-button-group[data-menu-mode][data-placement="bottom"] .ui-float-button-list {
+    inset-block-start: calc(var(--float-button-size) + var(--float-button-group-gap));
+  }
+
+  .ui-float-button-group[data-menu-mode][data-placement="left"] .ui-float-button-list,
+  .ui-float-button-group[data-menu-mode][data-placement="right"] .ui-float-button-list {
+    flex-direction: row;
+  }
+
+  .ui-float-button-group[data-menu-mode][data-placement="left"] .ui-float-button-list {
+    inset-inline-end: calc(var(--float-button-size) + var(--float-button-group-gap));
+  }
+
+  .ui-float-button-group[data-menu-mode][data-placement="right"] .ui-float-button-list {
+    inset-inline-start: calc(var(--float-button-size) + var(--float-button-group-gap));
+  }
+
+  .ui-float-button-group[data-menu-mode][data-state="open"] .ui-float-button-list {
+    animation: ui-float-button-list-in var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-float-button-back-top[data-progress]::after {
+    position: absolute;
+    border-radius: inherit;
+    content: "";
+    inset: 0;
+    background: conic-gradient(
+      var(--float-button-progress-color) var(--float-button-progress-offset),
+      var(--float-button-progress-track-color) var(--float-button-progress-offset)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--float-button-progress-width)),
+      #000 calc(100% - var(--float-button-progress-width))
+    );
+    pointer-events: none;
+  }
+}
+
+@keyframes ui-float-button-list-in {
+  from {
+    opacity: 0;
+    translate: 0 var(--float-button-motion-translate);
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}

package/dist/styles/index.css

@@ -24,3 +24,4 @@
 @import "./form-layout.css";
 @import "./navigation-layout.css";
 @import "./chart-layout.css";
+@import "./float-button-layout.css";