@godxjp/ui 5.0.2 → 6.0.0

package/src/props/vocabulary/index.ts

@@ -0,0 +1,73 @@
+/** Barrel — all vocabulary prop types. */
+
+export type {
+  ClassNameProp,
+  ChildrenProp,
+  IdProp,
+  OpenProp,
+  OnOpenChangeProp,
+  HandlerProp,
+  PendingProp,
+  RequiredProp,
+  DisabledProp,
+  LabelProp,
+  HelperProp,
+  ErrorProp,
+  PlaceholderProp,
+  NameProp,
+  ValueProp,
+  OnChangeProp,
+  OnClickProp,
+  AsChildProp,
+} from "./shared.prop";
+
+export type {
+  TitleProp,
+  SubtitleProp,
+  DescriptionProp,
+  ExtraProp,
+  FooterProp,
+  ActionProp,
+  IconProp,
+  ConfirmLabelProp,
+  CancelLabelProp,
+  ActionsProp,
+} from "./content.prop";
+
+export type {
+  PageDensityProp,
+  PageContainerVariantProp,
+  StackGapProp,
+  InlineGapProp,
+  TableDensityProp,
+  /** @deprecated Alias — use PageDensityProp */
+  DensityProp,
+  /** @deprecated Alias — use StackGapProp */
+  GapProp,
+} from "./layout.prop";
+
+export type {
+  ButtonVariantProp,
+  ButtonSizeProp,
+  ConfirmVariantProp,
+  StatusToneProp,
+  AlertVariantProp,
+  SortDirectionProp,
+  ColumnAlignProp,
+  SortStateProp,
+} from "./interaction.prop";
+
+export type { BreadcrumbItemProp, BreadcrumbProp, PageTitleProp } from "./navigation.prop";
+
+export type {
+  GetRowIdProp,
+  OnRowClickProp,
+  ColumnDefProp,
+  SelectedIdsProp,
+  OnSelectChangeProp,
+  OnTableDensityChangeProp,
+  OnSortChangeProp,
+  OnSearchChangeProp,
+  OnClearFiltersProp,
+  HasActiveFiltersProp,
+} from "./data.prop";

package/src/props/vocabulary/interaction.prop.ts

@@ -0,0 +1,42 @@
+/**
+ * Interaction & visual variant prop types.
+ * @see docs/PROPS-VOCABULARY.md#interaction-variants
+ */
+
+/** Button visual style. */
+export type ButtonVariantProp =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "link";
+
+/** Button size preset. */
+export type ButtonSizeProp =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+/** Dialog confirm button emphasis. */
+export type ConfirmVariantProp = "default" | "destructive";
+
+/** Badge / status pill color mapping key. */
+export type StatusToneProp = "default" | "success" | "warning" | "destructive" | "muted";
+
+/** Inline Alert banner — default maps to informational tone. */
+export type AlertVariantProp = "default" | "destructive" | "warning" | "success";
+
+/** Sort direction for table columns. */
+export type SortDirectionProp = "asc" | "desc";
+
+/** Table column text alignment. */
+export type ColumnAlignProp = "left" | "center" | "right";
+
+/** Active sort state on DataTable. */
+export type SortStateProp = { key: string; direction: SortDirectionProp };

package/src/props/vocabulary/layout.prop.ts

@@ -0,0 +1,25 @@
+/**
+ * Layout & spacing prop types.
+ * @see docs/PROPS-VOCABULARY.md#layout--density
+ */
+
+/** Page-level density — affects padding, control heights across PageContainer subtree. */
+export type PageDensityProp = "compact" | "default" | "comfortable";
+
+/** Page shell layout — orthogonal to PageDensityProp. */
+export type PageContainerVariantProp = "default" | "narrow" | "flush" | "ghost";
+
+/** Vertical stack gap between block-level children. */
+export type StackGapProp = "xs" | "sm" | "md" | "lg" | "xl";
+
+/** Horizontal inline gap between row items. */
+export type InlineGapProp = "xs" | "sm" | "md" | "lg";
+
+/** DataTable row density — NOT the same as PageDensityProp. */
+export type TableDensityProp = "compact" | "comfortable";
+
+/** @deprecated Alias — use PageDensityProp. Kept for lib/variants compat. */
+export type DensityProp = PageDensityProp;
+
+/** @deprecated Alias — use StackGapProp. */
+export type GapProp = StackGapProp;

package/src/props/vocabulary/navigation.prop.ts

@@ -0,0 +1,19 @@
+/**
+ * Navigation & wayfinding prop types.
+ * @see docs/PROPS-VOCABULARY.md#navigation
+ */
+import type { LabelProp } from "./shared.prop";
+import type { TitleProp } from "./content.prop";
+
+/** Single breadcrumb segment. */
+export type BreadcrumbItemProp = {
+  label: LabelProp;
+  /** Router path — omit on current (last) segment. */
+  to?: string;
+};
+
+/** Ordered breadcrumb trail above page title. */
+export type BreadcrumbProp = BreadcrumbItemProp[];
+
+/** Same as TitleProp — explicit name in page/navigation context. */
+export type PageTitleProp = TitleProp;

package/src/props/vocabulary/shared.prop.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared atomic prop types used across multiple components.
+ * @see docs/PROPS-VOCABULARY.md
+ */
+import type * as React from "react";
+
+/** Extra CSS class names on a component root. */
+export type ClassNameProp = string;
+
+/** Child nodes slot. */
+export type ChildrenProp = React.ReactNode;
+
+/** Stable DOM / form identifier. */
+export type IdProp = string;
+
+/** Controlled open state for panels (Dialog, Sheet, Popover). */
+export type OpenProp = boolean;
+
+/** Callback when open state changes. */
+export type OnOpenChangeProp = (open: boolean) => void;
+
+/** Async or sync handler — no return value expected. */
+export type HandlerProp = () => void | Promise<void>;
+
+/** Loading / pending state — disables actions and shows spinners. */
+export type PendingProp = boolean;
+
+/** Field or control is required. */
+export type RequiredProp = boolean;
+
+/** Disable user interaction. */
+export type DisabledProp = boolean;
+
+/** Generic label text (filters, form fields, nav groups). */
+export type LabelProp = React.ReactNode;
+
+/** Helper / hint text below inputs. */
+export type HelperProp = React.ReactNode;
+
+/** Validation error message. */
+export type ErrorProp = React.ReactNode;
+
+/** Placeholder text for inputs. */
+export type PlaceholderProp = string;
+
+/** HTML input `name` attribute. */
+export type NameProp = string;
+
+/** HTML input `value` — string form. */
+export type ValueProp = string;
+
+/** Change handler for text inputs. */
+export type OnChangeProp = React.ChangeEventHandler<HTMLInputElement>;
+
+/** Click handler for buttons and interactive elements. */
+export type OnClickProp = React.MouseEventHandler<HTMLButtonElement>;
+
+/** Radix/shadcn `asChild` polymorphism — render as child element. */
+export type AsChildProp = boolean;

package/src/styles/alert-layout.css

@@ -0,0 +1,191 @@
+/*
+ * ALERT — inset, gaps, dismiss offset; colors via data-variant + semantic tokens.
+ */
+
+@layer components {
+  [data-slot="alert"] {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-alert-gap);
+    width: 100%;
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    padding: var(--space-alert-inset);
+    font-size: var(--font-size-sm);
+  }
+
+  [data-slot="alert"][data-variant="default"] {
+    border-color: hsl(var(--border));
+    background-color: hsl(var(--muted) / 0.4);
+    color: hsl(var(--foreground));
+  }
+
+  [data-slot="alert"][data-variant="destructive"] {
+    border-color: hsl(var(--destructive) / 0.3);
+    background-color: hsl(var(--destructive) / 0.05);
+    color: hsl(var(--foreground));
+  }
+
+  [data-slot="alert"][data-variant="warning"] {
+    border-color: hsl(var(--warning) / 0.3);
+    background-color: hsl(var(--warning) / 0.05);
+    color: hsl(var(--foreground));
+  }
+
+  [data-slot="alert"][data-variant="success"] {
+    border-color: hsl(var(--success) / 0.3);
+    background-color: hsl(var(--success) / 0.05);
+    color: hsl(var(--foreground));
+  }
+
+  [data-slot="alert"][data-dismissible] {
+    padding-right: calc(var(--space-alert-inset) + var(--space-8));
+  }
+
+  [data-slot="alert-icon"] {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+  }
+
+  [data-slot="alert-icon"][data-variant="default"] {
+    color: hsl(var(--foreground));
+  }
+
+  [data-slot="alert-icon"][data-variant="destructive"] {
+    color: hsl(var(--destructive));
+  }
+
+  [data-slot="alert-icon"][data-variant="warning"] {
+    color: hsl(var(--warning));
+  }
+
+  [data-slot="alert-icon"][data-variant="success"] {
+    color: hsl(var(--success));
+  }
+
+  [data-slot="alert-body"] {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-alert-inner-gap);
+  }
+
+  @media (min-width: 640px) {
+    [data-slot="alert-body"] {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+  }
+
+  [data-slot="alert-title"] {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+  }
+
+  [data-slot="alert-title"][data-variant="destructive"] {
+    color: hsl(var(--destructive));
+  }
+
+  [data-slot="alert-title"][data-variant="warning"] {
+    color: hsl(var(--warning));
+  }
+
+  [data-slot="alert-title"][data-variant="success"] {
+    color: hsl(var(--success));
+  }
+
+  [data-slot="alert-description"] {
+    margin-top: var(--space-1);
+    font-size: var(--font-size-sm);
+    color: hsl(var(--muted-foreground));
+    overflow-wrap: break-word;
+  }
+
+  [data-slot="alert-actions"] {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    gap: var(--space-inline-sm);
+    width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    [data-slot="alert-actions"] {
+      width: auto;
+      justify-content: flex-end;
+    }
+  }
+
+  [data-slot="alert-dismiss"] {
+    position: absolute;
+    top: var(--space-alert-dismiss-offset);
+    right: var(--space-alert-dismiss-offset);
+    border-radius: var(--radius-sm);
+    opacity: 0.7;
+  }
+
+  .ui-skeleton-block {
+    border-radius: var(--skeleton-radius);
+    background: hsl(var(--muted));
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .ui-skeleton-rows,
+  .ui-skeleton-detail-stack,
+  .ui-skeleton-card {
+    display: grid;
+    gap: var(--skeleton-row-gap);
+  }
+
+  .ui-skeleton-row,
+  .ui-skeleton-table-row {
+    display: flex;
+    align-items: center;
+    gap: var(--skeleton-cell-gap);
+  }
+
+  .ui-skeleton-table {
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--skeleton-radius);
+  }
+
+  .ui-skeleton-table-head {
+    display: flex;
+    align-items: center;
+    gap: var(--skeleton-cell-gap);
+    padding-inline: var(--space-3);
+    background: hsl(var(--muted) / 0.5);
+  }
+
+  .ui-skeleton-table-body {
+    display: grid;
+  }
+
+  .ui-skeleton-table-row + .ui-skeleton-table-row {
+    border-top: 1px solid hsl(var(--border));
+  }
+
+  .ui-skeleton-detail {
+    max-width: 56rem;
+  }
+
+  .ui-skeleton-detail-box,
+  .ui-skeleton-card {
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--skeleton-radius);
+    padding: var(--skeleton-card-inset);
+  }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

package/src/styles/badge-layout.css

@@ -0,0 +1,22 @@
+/*
+ * STATUS BADGE — compact chip spacing + semantic tones (control-styles.ts maps tones).
+ */
+
+@layer components {
+  [data-slot="status-badge"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-badge-gap);
+    padding: var(--space-badge-y) var(--space-badge-x);
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+  }
+
+  [data-slot="status-badge-icon"] {
+    width: 0.75rem;
+    height: 0.75rem;
+    flex-shrink: 0;
+  }
+}