@godxjp/ui 5.0.2 → 6.0.1

package/dist/query.prop-hIPrk2zI.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { UseQueryResult, UseInfiniteQueryResult, InfiniteData, UseMutationResult, 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';
+
+/** Query / async lifecycle helpers — @see docs/COMPONENTS.md#query */
+
+/** @see DataState — TanStack Query lifecycle widget (not a visual component). */
+type DataStateProp<T> = {
+    query: UseQueryResult<T>;
+    skeleton: React.ReactNode;
+    empty?: React.ReactNode;
+    isEmpty?: (data: NonNullable<T>) => boolean;
+    errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
+    /** Default error UI retry button. Default `true`. */
+    showRetry?: boolean;
+    /** Default `() => query.refetch()`. */
+    onRetry?: HandlerProp;
+    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 = {
+    mutation: MutationLike;
+    onRetry?: HandlerProp;
+    showRetry?: boolean;
+    /** Optional inline pending slot while `mutation.isPending`. */
+    pending?: React.ReactNode;
+    className?: ClassNameProp;
+};
+type QueryRefetchLike = Pick<UseQueryResult<unknown>, "isFetching" | "refetch">;
+/** @see QueryRefetchButton — header Refresh wired to `query.refetch()`. */
+type QueryRefetchButtonProp = Omit<ButtonProp, "onClick" | "disabled"> & {
+    query: QueryRefetchLike;
+    label?: React.ReactNode;
+};
+type InfiniteQueryLike<TPage> = Pick<UseInfiniteQueryResult<InfiniteData<TPage>, unknown>, "isPending" | "isError" | "isFetching" | "isFetchingNextPage" | "error" | "data" | "hasNextPage" | "fetchNextPage" | "refetch">;
+type InfiniteQueryHelpers = {
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+};
+/** @see InfiniteQueryState — useInfiniteQuery lifecycle + load more. */
+type InfiniteQueryStateProp<TPage, TFlat> = {
+    query: InfiniteQueryLike<TPage>;
+    skeleton: React.ReactNode;
+    empty?: React.ReactNode;
+    flatten: (data: {
+        pages: TPage[];
+    }) => TFlat;
+    isEmpty?: (flat: TFlat) => boolean;
+    errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
+    showRetry?: boolean;
+    onRetry?: HandlerProp;
+    loadingMore?: React.ReactNode;
+    /** Custom load-more footer; `false` hides footer entirely. */
+    loadMore?: React.ReactNode | false;
+    /** Show default load-more button when `hasNextPage`. Default `true`. */
+    showLoadMore?: boolean;
+    children: (flat: TFlat, helpers: InfiniteQueryHelpers) => React.ReactNode;
+};
+/** @see PrefetchLink — Link + prefetchQuery on hover/focus. */
+type PrefetchLinkProp = LinkProps & {
+    queryKey: QueryKey;
+    queryFn: () => Promise<unknown>;
+    prefetchOn?: "hover" | "focus" | "both" | "none";
+    staleTime?: number;
+};
+
+export type { DataStateProp as D, InfiniteQueryHelpers as I, MutationFeedbackProp as M, PrefetchLinkProp as P, QueryRefetchButtonProp as Q, InfiniteQueryStateProp as a };

package/dist/search-input-uP01rY1L.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { F as FormFieldProp } from './data-entry.prop-BEGA1lTq.js';
+import * as React from 'react';
+
+declare function FormField({ id, label, required, helper, error, labelAddon, className, children, }: FormFieldProp): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    debounce?: number;
+    onSearch: (q: string) => void;
+    label?: React.ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    inputClassName?: string;
+    id?: string;
+    disabled?: boolean;
+}
+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 };

package/dist/shared.prop-BNRJc9K0.d.ts

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

package/dist/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/dist/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;
+  }
+}