@godxjp/ui 5.0.2 → 6.0.0

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

@@ -0,0 +1,246 @@
+@layer components {
+  .ui-code-badge {
+    display: inline-flex;
+    max-width: 100%;
+    min-height: var(--code-badge-height);
+    align-items: center;
+    gap: var(--code-badge-gap);
+    padding-inline: var(--code-badge-padding-x);
+    border: 1px solid hsl(var(--code-badge-hsl) / var(--code-badge-border-alpha));
+    border-radius: var(--radius);
+    background: hsl(var(--code-badge-hsl) / var(--code-badge-bg-alpha));
+    color: hsl(var(--code-badge-hsl));
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ui-code-badge[data-kind="internal"] {
+    --code-badge-hsl: var(--tracking-internal);
+  }
+
+  .ui-code-badge[data-kind="seller"] {
+    --code-badge-hsl: var(--tracking-seller);
+  }
+
+  .ui-code-badge[data-kind="yamato"] {
+    --code-badge-hsl: var(--tracking-yamato);
+  }
+
+  .ui-code-badge svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+    opacity: 0.82;
+  }
+
+  .ui-code-badge-label {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--code-badge-gap);
+    color: hsl(var(--code-badge-hsl));
+    font-size: 0.625rem;
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: 0;
+    line-height: 1rem;
+    text-align: center;
+  }
+
+  .ui-code-badge-label::after {
+    width: 1px;
+    height: 0.875rem;
+    background: hsl(var(--code-badge-hsl) / var(--code-badge-separator-alpha));
+    content: "";
+  }
+
+  .ui-code-badge-value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-progress-meter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .ui-progress-track {
+    height: 0.5rem;
+    overflow: hidden;
+    border-radius: 9999px;
+    background: hsl(var(--secondary));
+  }
+
+  .ui-progress-bar {
+    height: 100%;
+    border-radius: inherit;
+    background: hsl(var(--success));
+  }
+
+  .ui-progress-meter[data-tone="warning"] .ui-progress-bar {
+    background: hsl(var(--warning));
+  }
+
+  .ui-progress-label {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-tree-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ui-tree-item {
+    display: flex;
+    min-height: 2.25rem;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-3);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+  }
+
+  .ui-tree-item[data-active="true"] {
+    border-color: hsl(var(--primary) / 0.3);
+    background: hsl(var(--primary) / 0.05);
+  }
+
+  .ui-tree-item[data-depth="1"] {
+    margin-left: 1.375rem;
+  }
+
+  .ui-tree-item[data-depth="2"] {
+    margin-left: 2.75rem;
+  }
+
+  .ui-tree-item > svg {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--primary));
+  }
+
+  .ui-tree-item > svg:first-child {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-tree-item-body {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .ui-tree-item-title {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-tree-item-description {
+    overflow: hidden;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-md);
+  }
+
+  .ui-timeline-item {
+    display: grid;
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+    gap: var(--space-stack-md);
+  }
+
+  .ui-timeline-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ui-timeline-dot {
+    display: grid;
+    width: 1.5rem;
+    height: 1.5rem;
+    place-items: center;
+    border-radius: 9999px;
+    background: hsl(var(--success));
+    color: hsl(var(--success-foreground));
+  }
+
+  .ui-timeline-dot[data-current="true"] {
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .ui-timeline-dot svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .ui-timeline-line {
+    width: 1px;
+    min-height: 2.25rem;
+    flex: 1;
+    background: hsl(var(--border));
+  }
+
+  .ui-timeline-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-inline-sm);
+  }
+
+  .ui-timeline-title {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-timeline-time,
+  .ui-timeline-location,
+  .ui-timeline-note {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-timeline-note {
+    margin-top: var(--space-1);
+    font-size: var(--font-size-sm);
+  }
+
+  .ui-scan-panel {
+    display: grid;
+    aspect-ratio: 1 / 1;
+    place-items: center;
+    border: 2px dashed hsl(var(--primary) / 0.3);
+    border-radius: calc(var(--radius) + 0.25rem);
+    background: hsl(var(--primary) / 0.05);
+    text-align: center;
+  }
+
+  .ui-scan-panel svg {
+    width: 4rem;
+    height: 4rem;
+    margin-inline: auto;
+    color: hsl(var(--primary));
+  }
+
+  .ui-scan-title {
+    margin-top: var(--space-3);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ui-scan-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-sm);
+  }
+}

package/src/styles/density.css

@@ -0,0 +1,43 @@
+/*
+ * DENSITY — one knob retunes φ-unit, controls, tables (PageContainer density prop).
+ * Owner: .ui-density-* classes only. Apps use <PageContainer density>, never these classes.
+ */
+
+@layer components {
+  .ui-density-compact {
+    --control-height: var(--control-height-compact);
+    --control-padding-x: var(--control-padding-x-compact);
+    --table-row-height: var(--table-row-height-compact);
+    --phi-unit: var(--space-3);
+    --checkbox-size: 0.875rem;
+    --switch-width: 2rem;
+    --switch-height: 1.125rem;
+    --switch-thumb-size: 0.875rem;
+    --switch-thumb-translate: 0.875rem;
+    --table-cell-padding-y: var(--space-1);
+  }
+
+  .ui-density-default {
+    --control-height: var(--control-height-default);
+    --control-padding-x: var(--control-padding-x-default);
+    --table-row-height: var(--table-row-height-default);
+    --table-cell-padding-y: var(--space-2);
+  }
+
+  .ui-density-comfortable {
+    --control-height: var(--control-height-comfortable);
+    /* Comfortable steps 44 → 36 → 32 (design spacing-density), steeper than the
+     * default 4px step so sm/xs aren't left 4px too tall. */
+    --control-height-sm: calc(var(--control-height) - 0.5rem);
+    --control-height-xs: calc(var(--control-height) - 0.75rem);
+    --control-padding-x: var(--control-padding-x-comfortable);
+    --table-row-height: var(--table-row-height-comfortable);
+    --phi-unit: var(--space-6);
+    --checkbox-size: 1.125rem;
+    --switch-width: 2.5rem;
+    --switch-height: 1.375rem;
+    --switch-thumb-size: 1.125rem;
+    --switch-thumb-translate: 1.125rem;
+    --table-cell-padding-y: var(--space-2);
+  }
+}

package/src/styles/dialog-layout.css

@@ -0,0 +1,84 @@
+/*
+ * DIALOG — overlay content shell (form + confirm modes share tokens).
+ */
+
+@layer components {
+  .ui-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background-color: rgb(0 0 0 / 0.5);
+  }
+
+  [data-slot="dialog-content"] {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    z-index: 50;
+    display: grid;
+    width: 100%;
+    max-width: 32rem;
+    transform: translate(-50%, -50%);
+    gap: var(--space-dialog-gap);
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background));
+    padding: var(--space-dialog-inset);
+    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  }
+
+  @media (min-width: 640px) {
+    [data-slot="dialog-content"] {
+      border-radius: var(--radius-lg);
+    }
+  }
+
+  [data-slot="dialog-header"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-xs);
+    text-align: center;
+  }
+
+  @media (min-width: 640px) {
+    [data-slot="dialog-header"] {
+      text-align: left;
+    }
+  }
+
+  [data-slot="dialog-footer"] {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--space-inline-sm);
+  }
+
+  @media (min-width: 640px) {
+    [data-slot="dialog-footer"] {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+
+  [data-slot="dialog-close"] {
+    position: absolute;
+    inset-inline-end: var(--space-dialog-close-offset);
+    top: var(--space-dialog-close-offset);
+    border-radius: var(--radius-sm);
+    opacity: 0.7;
+  }
+
+  [data-slot="dialog-close"]:hover {
+    opacity: 1;
+  }
+
+  [data-slot="dialog-title"] {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  [data-slot="dialog-description"] {
+    font-size: var(--font-size-sm);
+    color: hsl(var(--muted-foreground));
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,105 @@
+@import "sonner/dist/styles.css";
+@import "react-day-picker/style.css";
+/* Default sans font — self-contained so consumers need no font config (subsetted: latin/vi/jp). */
+@import "@fontsource/m-plus-2/400.css";
+@import "@fontsource/m-plus-2/500.css";
+@import "@fontsource/m-plus-2/600.css";
+@import "@fontsource/m-plus-2/700.css";
+@import "tailwindcss";
+@source "../**/*.{tsx,ts}";
+@import "../tokens/base.css";
+@import "./density.css";
+@import "./shell-layout.css";
+@import "./layout.css";
+@import "./control.css";
+@import "./card-layout.css";
+@import "./table-layout.css";
+@import "./dialog-layout.css";
+@import "./alert-layout.css";
+@import "./badge-layout.css";
+@import "./data-display-layout.css";
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+  --color-attention: hsl(var(--attention));
+  --color-attention-foreground: hsl(var(--attention-foreground));
+  --color-tracking-internal: hsl(var(--tracking-internal));
+  --color-tracking-seller: hsl(var(--tracking-seller));
+  --color-tracking-yamato: hsl(var(--tracking-yamato));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  /* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+  /* 和色 (wa-iro) accents → bg-wa / text-wa utilities (charts, tags, decoration). */
+  --color-wa-ai: var(--wa-ai);
+  --color-wa-gunjo: var(--wa-gunjo);
+  --color-wa-ruri: var(--wa-ruri);
+  --color-wa-kon: var(--wa-kon);
+  --color-wa-wakatake: var(--wa-wakatake);
+  --color-wa-moegi: var(--wa-moegi);
+  --color-wa-yamabuki: var(--wa-yamabuki);
+  --color-wa-shu: var(--wa-shu);
+  --color-wa-akane: var(--wa-akane);
+  --color-wa-enji: var(--wa-enji);
+  --color-wa-sakura: var(--wa-sakura);
+  --color-wa-sumi: var(--wa-sumi);
+  --color-wa-nezu: var(--wa-nezu);
+  /* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
+  --text-xs: var(--font-size-xs);
+  --text-sm: var(--font-size-sm);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-lg);
+  --text-xl: var(--font-size-xl);
+  --text-2xl: var(--font-size-2xl);
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-body);
+    font-feature-settings:
+      "cv02",
+      "cv03",
+      "cv04",
+      "cv11",
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  code {
+    font-family: var(--font-family-mono);
+  }
+}