@godxjp/ui 5.0.1 → 6.0.0

package/src/styles/shell-layout.css

@@ -0,0 +1,604 @@
+/*
+ * APP SHELL — canonical chrome layout for admin surfaces.
+ * Slot-based composition: <AppShell sidebar={<Sidebar />} topbar={<Topbar />}>.
+ */
+
+@layer components {
+  .app-root {
+    display: grid;
+    grid-template-areas:
+      "sidebar topbar"
+      "sidebar main"
+      "sidebar footer";
+    grid-template-columns: 16rem minmax(0, 1fr);
+    grid-template-rows: 3.25rem minmax(0, 1fr) auto;
+    height: 100vh;
+    background:
+      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
+      hsl(var(--background));
+  }
+
+  .app-root[data-collapsed="true"] {
+    grid-template-columns: 4rem minmax(0, 1fr);
+  }
+
+  .app-sidebar {
+    grid-area: sidebar;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    overflow: hidden;
+    border-right: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+    color: hsl(var(--foreground));
+  }
+
+  .app-topbar {
+    grid-area: topbar;
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-3);
+    padding-inline: var(--space-4);
+    border-bottom: 1px solid hsl(var(--border));
+    background: hsl(var(--background) / 0.92);
+    backdrop-filter: blur(12px);
+  }
+
+  .app-main {
+    grid-area: main;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .app-footer {
+    grid-area: footer;
+    border-top: 1px solid hsl(var(--border));
+    background: hsl(var(--background));
+  }
+
+  .app-main .ui-page-container {
+    max-width: none;
+  }
+
+  .app-topbar-rail {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .app-topbar-left,
+  .app-topbar-right {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .app-topbar-spacer {
+    flex: 1;
+  }
+
+  .app-breadcrumb {
+    border-bottom: 1px solid hsl(var(--border));
+    padding: var(--space-2) var(--space-4);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-sm);
+  }
+
+  .sb-root {
+    display: contents;
+  }
+
+  .sb-product,
+  .sb-brand {
+    display: flex;
+    min-height: 3.25rem;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-4);
+    border: 0;
+    border-bottom: 1px solid hsl(var(--border));
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .sb-product {
+    cursor: pointer;
+  }
+
+  .sb-product:hover {
+    background: hsl(var(--accent));
+  }
+
+  .sb-logo-mark {
+    display: grid;
+    width: 1.75rem;
+    height: 1.75rem;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: var(--radius);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .sb-product-meta {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+  }
+
+  .sb-product-name {
+    overflow: hidden;
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sb-product-tenant,
+  .sb-product-caret {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .sb-product-tenant {
+    overflow: hidden;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .sb-product-caret svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .sb-nav-scroll {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .sb-section {
+    padding: var(--space-3) var(--space-2);
+  }
+
+  .sb-section + .sb-section {
+    border-top: 1px solid hsl(var(--border));
+  }
+
+  .sb-section-label {
+    padding: 0 var(--space-2) var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  .sb-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .sb-nav-item {
+    display: flex;
+    height: var(--control-height);
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+    border: 0;
+    border-radius: calc(var(--radius) - 1px);
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
+
+  .sb-nav-item:hover,
+  .sb-nav-item[data-active="true"] {
+    background: hsl(var(--accent));
+    color: hsl(var(--foreground));
+  }
+
+  .sb-nav-item[data-active="true"] {
+    font-weight: 600;
+  }
+
+  .sb-icon {
+    display: grid;
+    width: 1rem;
+    height: 1rem;
+    flex: 0 0 auto;
+    place-items: center;
+  }
+
+  .sb-icon svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .sb-label {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sb-badge {
+    display: inline-flex;
+    min-width: 1.125rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background: hsl(var(--secondary));
+    color: hsl(var(--muted-foreground));
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1.125rem;
+    padding-inline: 0.375rem;
+  }
+
+  .sb-footer {
+    margin-top: auto;
+    border-top: 1px solid hsl(var(--border));
+    padding: var(--space-2);
+  }
+
+  /* Collapsible group trigger chevron (rotates when open). */
+  .sb-nav-group-trigger .sb-chevron {
+    margin-left: auto;
+    flex: 0 0 auto;
+    opacity: 0.6;
+    transition: transform 150ms ease;
+  }
+
+  .sb-nav-group-trigger[data-state="open"] .sb-chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Nested rows (submenu) — left guide line + dot markers, design `.sb-nest`.
+   * Active child reads as primary-colored text, never a filled block. */
+  .sb-nav-sub {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 2px 0 var(--space-1) calc(var(--space-2) + 0.6875rem);
+    padding-left: var(--space-3);
+    border-left: 1px solid hsl(var(--border));
+  }
+
+  .sb-nav-item--sub {
+    height: 1.75rem;
+    font-size: var(--font-size-xs);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .sb-nav-item--sub::before {
+    content: "";
+    width: 4px;
+    height: 4px;
+    flex: 0 0 auto;
+    border-radius: 9999px;
+    background: currentColor;
+    opacity: 0.4;
+  }
+
+  .sb-nav-item--sub:hover {
+    background: transparent;
+    color: hsl(var(--foreground));
+  }
+
+  .sb-nav-item--sub[data-active="true"] {
+    background: transparent;
+    color: hsl(var(--primary));
+    font-weight: 500;
+  }
+
+  .sb-nav-item--sub[data-active="true"]::before {
+    background: hsl(var(--primary));
+    opacity: 1;
+  }
+
+  /* Footer user — circular avatar with live dot + overflow menu, design `.sb-user`. */
+  .sb-user {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .sb-user:hover,
+  .sb-user[data-state="open"] {
+    background: hsl(var(--accent));
+  }
+
+  .sb-user:focus {
+    outline: none;
+  }
+
+  .sb-user:focus-visible {
+    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring) / 0.45);
+  }
+
+  .sb-user-avatar {
+    position: relative;
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background: hsl(var(--secondary));
+    color: hsl(var(--muted-foreground));
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .sb-user-live {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    width: 0.5625rem;
+    height: 0.5625rem;
+    border-radius: 9999px;
+    border: 1.5px solid hsl(var(--card));
+    background: hsl(var(--success));
+  }
+
+  .sb-user-meta {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .sb-user-name {
+    overflow: hidden;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sb-user-role {
+    overflow: hidden;
+    color: hsl(var(--muted-foreground));
+    font-size: 10px;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sb-user-menu {
+    flex: 0 0 auto;
+    color: hsl(var(--muted-foreground));
+  }
+
+  [data-collapsed="true"] .sb-user-meta,
+  [data-collapsed="true"] .sb-user-menu {
+    display: none;
+  }
+
+  [data-collapsed="true"] .sb-product-name,
+  [data-collapsed="true"] .sb-product-tenant,
+  [data-collapsed="true"] .sb-product-caret,
+  [data-collapsed="true"] .sb-section-label,
+  [data-collapsed="true"] .sb-label,
+  [data-collapsed="true"] .sb-badge {
+    display: none;
+  }
+
+  [data-collapsed="true"] .sb-product {
+    justify-content: center;
+    padding: 0;
+  }
+
+  [data-collapsed="true"] .sb-nav-item {
+    width: var(--control-height);
+    justify-content: center;
+    margin-inline: auto;
+    padding: 0;
+  }
+
+  .tb-switcher {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .tb-chip {
+    display: inline-flex;
+    max-width: 15rem;
+    min-width: 0;
+    height: calc(var(--control-height) - 0.25rem);
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline: var(--space-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    background: transparent;
+    color: hsl(var(--foreground));
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--font-size-sm);
+  }
+
+  .tb-chip:hover,
+  .tb-chip[data-open="true"] {
+    border-color: hsl(var(--border));
+    background: hsl(var(--accent));
+  }
+
+  .tb-chip-empty {
+    border-color: hsl(var(--border));
+    border-style: dashed;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .tb-chip-icon {
+    display: grid;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: calc(var(--radius) - 2px);
+    color: white;
+    font-size: 10px;
+    font-weight: 700;
+  }
+
+  .tb-chip-label {
+    min-width: 0;
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tb-chip-caret,
+  .tb-chip-sep {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .tb-chip-caret svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .tb-search {
+    display: flex;
+    width: min(20rem, 30vw);
+    height: calc(var(--control-height) - 0.25rem);
+    align-items: center;
+    gap: var(--space-2);
+    padding-inline: var(--space-2);
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius);
+    background: hsl(var(--background));
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--font-size-sm);
+  }
+
+  .tb-search svg,
+  .tb-icon-btn svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .kbd {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    padding: 1px 5px;
+    border: 1px solid hsl(var(--border));
+    border-bottom-width: 2px;
+    border-radius: 4px;
+    background: hsl(var(--secondary));
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    line-height: 1.2;
+  }
+
+  .tb-icon-btn {
+    display: grid;
+    width: calc(var(--control-height) - 0.25rem);
+    height: calc(var(--control-height) - 0.25rem);
+    flex: 0 0 auto;
+    place-items: center;
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+  }
+
+  .tb-icon-btn:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .tb-icon-btn:focus {
+    outline: none;
+  }
+
+  .tb-icon-btn:focus-visible {
+    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring) / 0.45);
+  }
+
+  .tb-bell {
+    position: relative;
+  }
+
+  .tb-bell-dot {
+    position: absolute;
+    top: 0.35rem;
+    right: 0.35rem;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 9999px;
+    background: hsl(var(--attention));
+  }
+
+  @media (max-width: 768px) {
+    .app-root,
+    .app-root[data-collapsed="true"] {
+      grid-template-areas:
+        "topbar"
+        "main";
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: 3rem minmax(0, 1fr);
+    }
+
+    .app-sidebar,
+    .app-footer,
+    .tb-chip-sep,
+    .tb-search .kbd {
+      display: none;
+    }
+
+    .app-topbar {
+      padding-inline: var(--space-3);
+    }
+
+    .tb-search {
+      width: auto;
+      min-width: var(--control-height);
+    }
+
+    .tb-search span {
+      display: none;
+    }
+  }
+}

package/src/styles/table-layout.css

@@ -0,0 +1,109 @@
+/*
+ * TABLE — cell padding + typography owned here (density-aware via --table-cell-* tokens).
+ */
+
+@layer components {
+  [data-slot="table-head"] {
+    height: var(--table-row-height);
+    padding: var(--table-cell-padding-y) var(--space-table-cell-x);
+    text-align: left;
+    vertical-align: middle;
+    background: hsl(var(--secondary));
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: hsl(var(--muted-foreground));
+    white-space: nowrap;
+  }
+
+  [data-slot="table-head"]:has([role="checkbox"]) {
+    padding-right: 0;
+  }
+
+  [data-slot="table-cell"] {
+    padding: var(--table-cell-padding-y) var(--space-table-cell-x);
+    vertical-align: middle;
+  }
+
+  [data-slot="table-cell"]:has([role="checkbox"]) {
+    padding-right: 0;
+  }
+
+  .ui-data-table-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-inline-md);
+  }
+
+  .ui-data-table-bulk {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-sm);
+    font-size: var(--font-size-sm);
+  }
+
+  .ui-data-table-bulk-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-sm);
+  }
+
+  .ui-data-table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-inline-sm);
+    padding-top: var(--space-stack-sm);
+  }
+
+  .ui-data-table-root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-sm);
+  }
+
+  .ui-data-table-surface {
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-md);
+  }
+
+  [data-slot="card-content"][data-flush] .ui-data-table-root {
+    gap: 0;
+  }
+
+  [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
+    border-bottom: 1px solid hsl(var(--card-border-token));
+    padding: var(--card-space-header-y) var(--card-space-inset);
+  }
+
+  .ui-data-table-sort-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-inline-xs);
+  }
+
+  .ui-data-table-scroll {
+    overflow-x: auto;
+    margin-inline: calc(-1 * var(--space-page-active-x));
+    padding-inline: var(--space-page-active-x);
+  }
+
+  [data-slot="card-content"][data-flush] .ui-data-table-scroll {
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  [data-slot="card-content"][data-flush] .ui-data-table-surface {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  @media (min-width: 640px) {
+    .ui-data-table-scroll {
+      margin-inline: 0;
+      padding-inline: 0;
+    }
+  }
+}