@godxjp/ui 7.0.0 → 8.1.0

package/dist/{query.prop-hIPrk2zI.d.ts → query.prop-DuODxsiU.d.ts}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { UseQueryResult, UseInfiniteQueryResult, InfiniteData, UseMutationResult, QueryKey } from '@tanstack/react-query';
+import { UseMutationResult, UseQueryResult, UseInfiniteQueryResult, InfiniteData, QueryKey } from '@tanstack/react-query';
 import { LinkProps } from 'react-router-dom';
-import { B as ButtonProp } from './general.prop-D7brMPNL.js';
-import { H as HandlerProp, a as ClassNameProp } from './shared.prop-BNRJc9K0.js';
+import { B as ButtonProp } from './general.prop-DoHDCRmL.js';
+import { H as HandlerProp, a as ClassNameProp } from './shared.prop-BsNSXeqD.js';
 
 /** Query / async lifecycle helpers — @see docs/COMPONENTS.md#query */
 
@@ -20,8 +20,8 @@ type DataStateProp<T> = {
     children: (data: NonNullable<T>) => React.ReactNode;
 };
 type MutationLike = Pick<UseMutationResult<unknown, unknown, unknown, unknown>, "isError" | "error" | "isPending">;
-/** @see MutationFeedback — inline mutation error (form submit, simulator run). */
-type MutationFeedbackProp = {
+/** @see Alert.QueryError — inline mutation error (form submit, simulator run). */
+type AlertMutationFeedbackProp = {
     mutation: MutationLike;
     onRetry?: HandlerProp;
     showRetry?: boolean;
@@ -29,12 +29,16 @@ type MutationFeedbackProp = {
     pending?: React.ReactNode;
     className?: ClassNameProp;
 };
+/** @see MutationFeedback — deprecated alias for AlertMutationFeedback. */
+type MutationFeedbackProp = AlertMutationFeedbackProp;
 type QueryRefetchLike = Pick<UseQueryResult<unknown>, "isFetching" | "refetch">;
-/** @see QueryRefetchButton — header Refresh wired to `query.refetch()`. */
-type QueryRefetchButtonProp = Omit<ButtonProp, "onClick" | "disabled"> & {
+/** @see ButtonRefetch — Button recipe wired to `query.refetch()`. */
+type ButtonRefetchProp = Omit<ButtonProp, "onClick" | "disabled"> & {
     query: QueryRefetchLike;
     label?: React.ReactNode;
 };
+/** @see QueryRefetchButton — deprecated alias for ButtonRefetch. */
+type QueryRefetchButtonProp = ButtonRefetchProp;
 type InfiniteQueryLike<TPage> = Pick<UseInfiniteQueryResult<InfiniteData<TPage>, unknown>, "isPending" | "isError" | "isFetching" | "isFetchingNextPage" | "error" | "data" | "hasNextPage" | "fetchNextPage" | "refetch">;
 type InfiniteQueryHelpers = {
     fetchNextPage: () => void;
@@ -68,4 +72,4 @@ type PrefetchLinkProp = LinkProps & {
     staleTime?: number;
 };
 
-export type { DataStateProp as D, InfiniteQueryHelpers as I, MutationFeedbackProp as M, PrefetchLinkProp as P, QueryRefetchButtonProp as Q, InfiniteQueryStateProp as a };
+export type { AlertMutationFeedbackProp as A, ButtonRefetchProp as B, DataStateProp as D, InfiniteQueryHelpers as I, MutationFeedbackProp as M, PrefetchLinkProp as P, QueryRefetchButtonProp as Q, InfiniteQueryStateProp as a };

package/dist/{search-input-rR2XDrjv.d.ts → search-input-cezAxpgb.d.ts}

@@ -1,9 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FormFieldProp } from './data-entry.prop-CpSx5dX6.js';
+import { l as FormFieldProp, F as FieldProp } from './data-entry.prop-CDkOajPj.js';
 import * as React from 'react';
 
 declare function FormField({ id, label, required, helper, error, labelAddon, className, children, }: FormFieldProp): react_jsx_runtime.JSX.Element;
 
+/** Label + optional description beside a checkbox/radio/switch control. */
+declare function Field({ id, label, description, className, children }: FieldProp): react_jsx_runtime.JSX.Element;
+/** @deprecated Use Field. */
+declare const ChoiceField: typeof Field;
+
 interface SearchInputProps {
     value?: string;
     defaultValue?: string;
@@ -19,4 +24,4 @@ interface SearchInputProps {
 }
 declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onSearch, label, ariaLabel, className, inputClassName, id, disabled, }: SearchInputProps): react_jsx_runtime.JSX.Element;
 
-export { FormField as F, SearchInput as S };
+export { ChoiceField as C, Field as F, SearchInput as S, FormField as a };

package/dist/{shared.prop-BNRJc9K0.d.ts → shared.prop-BsNSXeqD.d.ts}

@@ -13,6 +13,8 @@ type ChildrenProp = React.ReactNode;
 type IdProp = string;
 /** Controlled open state for panels (Dialog, Sheet, Popover). */
 type OpenProp = boolean;
+/** Uncontrolled initial open state for panels (Dialog, Sheet, Popover). */
+type DefaultOpenProp = boolean;
 /** Callback when open state changes. */
 type OnOpenChangeProp = (open: boolean) => void;
 /** Async or sync handler — no return value expected. */
@@ -33,8 +35,12 @@ type ErrorProp = React.ReactNode;
 type PlaceholderProp = string;
 /** HTML input `name` attribute. */
 type NameProp = string;
-/** HTML input `value` — string form. */
-type ValueProp = string;
+/** Abstract controlled value. */
+type ValueProp<T = string> = T;
+/** Abstract uncontrolled initial value. */
+type DefaultValueProp<T = string> = T;
+/** Callback when an abstract value changes. */
+type OnValueChangeProp<T = string> = (value: T) => void;
 /** Change handler for text inputs. */
 type OnChangeProp = React.ChangeEventHandler<HTMLInputElement>;
 /** Click handler for buttons and interactive elements. */
@@ -42,4 +48,4 @@ type OnClickProp = React.MouseEventHandler<HTMLButtonElement>;
 /** Radix/shadcn `asChild` polymorphism — render as child element. */
 type AsChildProp = boolean;
 
-export type { AsChildProp as A, ChildrenProp as C, DisabledProp as D, ErrorProp as E, HandlerProp as H, IdProp as I, LabelProp as L, NameProp as N, OnChangeProp as O, PendingProp as P, RequiredProp as R, ValueProp as V, ClassNameProp as a, HelperProp as b, OnClickProp as c, OnOpenChangeProp as d, OpenProp as e, PlaceholderProp as f };
+export type { AsChildProp as A, ChildrenProp as C, DefaultOpenProp as D, ErrorProp as E, HandlerProp as H, IdProp as I, LabelProp as L, NameProp as N, OnChangeProp as O, PendingProp as P, RequiredProp as R, ValueProp as V, ClassNameProp as a, DefaultValueProp as b, DisabledProp as c, HelperProp as d, OnClickProp as e, OnOpenChangeProp as f, OnValueChangeProp as g, OpenProp as h, PlaceholderProp as i };

package/dist/{skeleton-CqFO4dRc.d.ts → skeleton-uWAjSacg.d.ts}

@@ -15,6 +15,8 @@ declare function SkeletonTable({ rows, columns }: SkeletonRowsProps): react_jsx_
 /** Skeleton matching a Card detail layout — title + 6 metadata rows. */
 declare function SkeletonDetail(): react_jsx_runtime.JSX.Element;
 /** Skeleton matching a stat card / dashboard tile. */
-declare function SkeletonCard(): react_jsx_runtime.JSX.Element;
+declare function SkeletonStat(): react_jsx_runtime.JSX.Element;
+/** @deprecated Use SkeletonStat. */
+declare const SkeletonCard: typeof SkeletonStat;
 
-export { Skeleton as S, SkeletonCard as a, SkeletonDetail as b, type SkeletonProps as c, SkeletonRows as d, SkeletonTable as e };
+export { Skeleton as S, SkeletonCard as a, SkeletonDetail as b, type SkeletonProps as c, SkeletonRows as d, SkeletonStat as e, SkeletonTable as f };

package/dist/styles/alert-layout.css

@@ -1,5 +1,5 @@
 /*
- * ALERT — inset, gaps, dismiss offset; colors via data-variant + semantic tokens.
+ * ALERT — inset, gaps, dismiss offset; colors via data-tone + semantic tokens.
  */
 
 @layer components {
@@ -7,40 +7,48 @@
     position: relative;
     display: flex;
     align-items: flex-start;
-    gap: var(--space-alert-gap);
+    gap: var(--alert-space-gap);
     width: 100%;
     border-radius: var(--radius-md);
     border-width: 1px;
-    padding: var(--space-alert-inset);
+    padding: var(--alert-space-inset);
     font-size: var(--font-size-sm);
   }
 
-  [data-slot="alert"][data-variant="default"] {
+  [data-slot="alert"][data-tone="default"],
+  [data-slot="alert"][data-tone="muted"],
+  [data-slot="alert"][data-tone="neutral"] {
     border-color: hsl(var(--border));
     background-color: hsl(var(--muted) / 0.4);
     color: hsl(var(--foreground));
   }
 
-  [data-slot="alert"][data-variant="destructive"] {
+  [data-slot="alert"][data-tone="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"] {
+  [data-slot="alert"][data-tone="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"] {
+  [data-slot="alert"][data-tone="success"] {
     border-color: hsl(var(--success) / 0.3);
     background-color: hsl(var(--success) / 0.05);
     color: hsl(var(--foreground));
   }
 
+  [data-slot="alert"][data-tone="info"] {
+    border-color: hsl(var(--info) / 0.3);
+    background-color: hsl(var(--info) / 0.05);
+    color: hsl(var(--foreground));
+  }
+
   [data-slot="alert"][data-dismissible] {
-    padding-right: calc(var(--space-alert-inset) + var(--space-8));
+    padding-right: calc(var(--alert-space-inset) + var(--space-8));
   }
 
   [data-slot="alert-icon"] {
@@ -50,28 +58,34 @@
     margin-top: 0.125rem;
   }
 
-  [data-slot="alert-icon"][data-variant="default"] {
+  [data-slot="alert-icon"][data-tone="default"],
+  [data-slot="alert-icon"][data-tone="muted"],
+  [data-slot="alert-icon"][data-tone="neutral"] {
     color: hsl(var(--foreground));
   }
 
-  [data-slot="alert-icon"][data-variant="destructive"] {
+  [data-slot="alert-icon"][data-tone="destructive"] {
     color: hsl(var(--destructive));
   }
 
-  [data-slot="alert-icon"][data-variant="warning"] {
+  [data-slot="alert-icon"][data-tone="warning"] {
     color: hsl(var(--warning));
   }
 
-  [data-slot="alert-icon"][data-variant="success"] {
+  [data-slot="alert-icon"][data-tone="success"] {
     color: hsl(var(--success));
   }
 
+  [data-slot="alert-icon"][data-tone="info"] {
+    color: hsl(var(--info));
+  }
+
   [data-slot="alert-body"] {
     display: flex;
     flex: 1;
     min-width: 0;
     flex-direction: column;
-    gap: var(--space-alert-inner-gap);
+    gap: var(--alert-inner-space-gap);
   }
 
   @media (min-width: 640px) {
@@ -88,18 +102,22 @@
     line-height: 1;
   }
 
-  [data-slot="alert-title"][data-variant="destructive"] {
+  [data-slot="alert-title"][data-tone="destructive"] {
     color: hsl(var(--destructive));
   }
 
-  [data-slot="alert-title"][data-variant="warning"] {
+  [data-slot="alert-title"][data-tone="warning"] {
     color: hsl(var(--warning));
   }
 
-  [data-slot="alert-title"][data-variant="success"] {
+  [data-slot="alert-title"][data-tone="success"] {
     color: hsl(var(--success));
   }
 
+  [data-slot="alert-title"][data-tone="info"] {
+    color: hsl(var(--info));
+  }
+
   [data-slot="alert-description"] {
     margin-top: var(--space-1);
     font-size: var(--font-size-sm);
@@ -124,8 +142,8 @@
 
   [data-slot="alert-dismiss"] {
     position: absolute;
-    top: var(--space-alert-dismiss-offset);
-    right: var(--space-alert-dismiss-offset);
+    top: var(--alert-dismiss-space-offset);
+    right: var(--alert-dismiss-space-offset);
     border-radius: var(--radius-sm);
     opacity: 0.7;
   }
@@ -138,6 +156,7 @@
 
   .ui-skeleton-rows,
   .ui-skeleton-detail-stack,
+  .ui-skeleton-stat,
   .ui-skeleton-card {
     display: grid;
     gap: var(--skeleton-row-gap);
@@ -177,6 +196,7 @@
   }
 
   .ui-skeleton-detail-box,
+  .ui-skeleton-stat,
   .ui-skeleton-card {
     border: 1px solid hsl(var(--border));
     border-radius: var(--skeleton-radius);

package/dist/styles/badge-layout.css

@@ -6,8 +6,8 @@
   [data-slot="badge"] {
     display: inline-flex;
     align-items: center;
-    gap: var(--space-badge-gap);
-    padding: var(--space-badge-y) var(--space-badge-x);
+    gap: var(--badge-space-gap);
+    padding: var(--badge-space-y) var(--badge-space-x);
     border-radius: var(--radius-md);
     border-width: 1px;
     font-size: var(--font-size-xs);

package/dist/styles/card-layout.css

@@ -3,7 +3,7 @@
  * -----------------------------------------------------------------
  * Card* components emit data-slot + data-* flags ONLY. All inset/gap padding lives here.
  *
- * Uses card primitive tokens from src/tokens/primitives/card.css.
+ * Uses card component tokens from src/tokens/components/card.css.
  * Card tokens derive from foundation/layout primitives and are coordinated by tokens/base.css.
  *
  * Slot ownership — one token per vertical gap:
@@ -17,10 +17,10 @@
 
 [data-slot="card"] {
   min-width: 0;
-  border-color: hsl(var(--card-border-token));
+  border-color: hsl(var(--card-border));
   border-radius: var(--card-radius);
   background: hsl(var(--card-background));
-  color: hsl(var(--card-foreground-token));
+  color: hsl(var(--card-foreground));
   overflow: hidden;
 }
 
@@ -98,7 +98,7 @@
 }
 
 .ui-card-header--banded {
-  border-bottom: 1px solid hsl(var(--card-border-token));
+  border-bottom: 1px solid hsl(var(--card-border));
   background-color: hsl(var(--card-header-background) / var(--card-header-background-alpha));
 }
 
@@ -270,7 +270,7 @@
 }
 
 [data-slot="card-footer"][data-separated] {
-  border-top: 1px solid hsl(var(--card-border-token));
+  border-top: 1px solid hsl(var(--card-border));
   padding-block: var(--card-space-footer-y);
   justify-content: flex-end;
 }

package/dist/styles/control.css

@@ -570,3 +570,34 @@
     }
   }
 }
+
+/* PasswordInput */
+.ui-password-input { position: relative; display: block; }
+.ui-password-input-field { padding-right: 2.5rem; }
+.ui-password-input-toggle {
+  position: absolute; inset-block: 0; inset-inline-end: 0; display: inline-flex;
+  align-items: center; justify-content: center; width: 2.5rem;
+  color: hsl(var(--muted-foreground)); background: transparent; border: 0; cursor: pointer;
+}
+.ui-password-input-toggle:hover { color: hsl(var(--foreground)); }
+.ui-password-input-toggle svg { width: 1rem; height: 1rem; }
+
+/* InputOTP */
+.ui-otp-container { display: flex; align-items: center; gap: var(--space-2); }
+.ui-otp-input:disabled { cursor: not-allowed; }
+.ui-otp-group { display: flex; align-items: center; }
+.ui-otp-slot {
+  position: relative; display: flex; width: 2.25rem; height: 2.25rem;
+  align-items: center; justify-content: center; font-size: 0.875rem;
+  border: 1px solid hsl(var(--border)); border-inline-start-width: 0;
+  background: hsl(var(--background)); transition: box-shadow 0.15s ease;
+}
+.ui-otp-group .ui-otp-slot:first-child {
+  border-inline-start-width: 1px; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md);
+}
+.ui-otp-group .ui-otp-slot:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
+.ui-otp-slot[data-active="true"] { z-index: 1; box-shadow: 0 0 0 2px hsl(var(--ring)); }
+.ui-otp-caret-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+.ui-otp-caret { width: 1px; height: 1rem; background: hsl(var(--foreground)); animation: ui-otp-blink 1s step-end infinite; }
+@keyframes ui-otp-blink { 50% { opacity: 0; } }
+.ui-otp-separator-icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }

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

@@ -186,3 +186,28 @@
   }
 
 }
+
+/* Accordion */
+.ui-accordion-item { border-bottom: 1px solid hsl(var(--border)); }
+.ui-accordion-header { display: flex; }
+.ui-accordion-trigger {
+  display: flex; flex: 1; align-items: center; justify-content: space-between;
+  gap: var(--space-2); padding-block: var(--space-4); font-weight: 500; text-align: left;
+  transition: color 0.15s ease;
+}
+.ui-accordion-trigger:hover { text-decoration: underline; }
+.ui-accordion-chevron {
+  width: 1rem; height: 1rem; color: hsl(var(--muted-foreground));
+  transition: transform 0.2s ease; flex-shrink: 0;
+}
+.ui-accordion-trigger[data-state="open"] .ui-accordion-chevron { transform: rotate(180deg); }
+.ui-accordion-content { overflow: hidden; font-size: 0.875rem; }
+.ui-accordion-content-inner { padding-bottom: var(--space-4); }
+
+/* HoverCard */
+.ui-hover-card-content {
+  z-index: 50; width: 16rem; border-radius: var(--radius-md);
+  border: 1px solid hsl(var(--border)); background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground)); padding: var(--space-4);
+  box-shadow: var(--shadow-md); outline: none;
+}

package/dist/styles/density.css

@@ -9,11 +9,11 @@
     --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;
+    --checkbox-size: var(--checkbox-size-compact);
+    --switch-width: var(--switch-width-compact);
+    --switch-height: var(--switch-height-compact);
+    --switch-thumb-size: var(--switch-thumb-size-compact);
+    --switch-thumb-translate: var(--switch-thumb-translate-compact);
     --table-cell-padding-y: var(--space-1);
   }
 
@@ -33,11 +33,11 @@
     --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;
+    --checkbox-size: var(--checkbox-size-comfortable);
+    --switch-width: var(--switch-width-comfortable);
+    --switch-height: var(--switch-height-comfortable);
+    --switch-thumb-size: var(--switch-thumb-size-comfortable);
+    --switch-thumb-translate: var(--switch-thumb-translate-comfortable);
     --table-cell-padding-y: var(--space-2);
   }
 }

package/dist/styles/dialog-layout.css

@@ -19,10 +19,10 @@
     width: 100%;
     max-width: 32rem;
     transform: translate(-50%, -50%);
-    gap: var(--space-dialog-gap);
+    gap: var(--dialog-space-gap);
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--background));
-    padding: var(--space-dialog-inset);
+    padding: var(--dialog-space-inset);
     box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   }
 
@@ -60,8 +60,8 @@
 
   [data-slot="dialog-close"] {
     position: absolute;
-    inset-inline-end: var(--space-dialog-close-offset);
-    top: var(--space-dialog-close-offset);
+    inset-inline-end: var(--dialog-close-space-offset);
+    top: var(--dialog-close-space-offset);
     border-radius: var(--radius-sm);
     opacity: 0.7;
   }

package/dist/styles/feedback-layout.css

@@ -0,0 +1,17 @@
+
+/* Drawer (bottom-sheet, vaul) */
+.ui-drawer-overlay { position: fixed; inset: 0; z-index: 50; background: hsl(var(--overlay, 0 0% 0% / 0.4)); }
+.ui-drawer-content {
+  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
+  display: flex; flex-direction: column; max-height: 82vh;
+  border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg);
+  border: 1px solid hsl(var(--border)); background: hsl(var(--background));
+}
+.ui-drawer-handle {
+  margin: var(--space-3) auto; height: 0.375rem; width: 6rem; flex-shrink: 0;
+  border-radius: 9999px; background: hsl(var(--muted));
+}
+.ui-drawer-header { display: grid; gap: var(--space-1); padding: var(--space-4); text-align: center; }
+.ui-drawer-footer { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding: var(--space-4); }
+.ui-drawer-title { font-weight: 600; line-height: 1.2; }
+.ui-drawer-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

package/dist/styles/index.css

@@ -47,15 +47,12 @@
   --color-info-foreground: hsl(var(--info-foreground));
   --color-attention: hsl(var(--attention));
   --color-attention-foreground: hsl(var(--attention-foreground));
-  --color-chart-1: #0077c7;
-  --color-chart-2: #006e54;
-  --color-chart-3: #f8b500;
-  --color-chart-4: #b7282e;
-  --color-chart-5: #4c6cb3;
-  --color-chart-6: #eb6101;
-  --color-tracking-internal: hsl(var(--tracking-internal));
-  --color-tracking-seller: hsl(var(--tracking-seller));
-  --color-tracking-yamato: hsl(var(--tracking-yamato));
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);