@svadmin/ui 0.72.0 → 0.73.0

package/dist/design-contract.d.ts

@@ -0,0 +1,13 @@
+/** 仅公开稳定语义；不向模型暴露 CSS、类名或内部 recipe 实现。 */
+export declare const surfaceDesignContract: {
+    readonly version: "svadmin/design-v1";
+    readonly metric: {
+        readonly tone: readonly ["neutral", "success", "warning", "danger", "info"];
+        readonly density: readonly ["comfortable", "compact"];
+    };
+    readonly table: {
+        readonly density: readonly ["comfortable", "compact"];
+    };
+};
+export type SurfaceTone = typeof surfaceDesignContract.metric.tone[number];
+export type SurfaceDensity = typeof surfaceDesignContract.metric.density[number];

package/dist/design-contract.js

@@ -0,0 +1,11 @@
+/** 仅公开稳定语义；不向模型暴露 CSS、类名或内部 recipe 实现。 */
+export const surfaceDesignContract = {
+    version: 'svadmin/design-v1',
+    metric: {
+        tone: ['neutral', 'success', 'warning', 'danger', 'info'],
+        density: ['comfortable', 'compact'],
+    },
+    table: {
+        density: ['comfortable', 'compact'],
+    },
+};

package/dist/design-system.d.ts

@@ -0,0 +1,15 @@
+import type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
+export declare function metricSurfaceClasses(tone?: SurfaceTone): {
+    state: string;
+    description: string;
+    root: string;
+    card: string;
+};
+export declare function tableSurfaceClasses(density?: SurfaceDensity): {
+    state: string;
+    content: string;
+    head: string;
+    header: string;
+    root: string;
+    cell: string;
+};

package/dist/design-system.js

@@ -0,0 +1,7 @@
+import { surfaceMetric, surfaceTable } from "./styled-system/recipes/index.js";
+export function metricSurfaceClasses(tone = "neutral") {
+    return surfaceMetric({ tone });
+}
+export function tableSurfaceClasses(density = "comfortable") {
+    return surfaceTable({ density });
+}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { surfaceDesignContract } from "./design-contract.js";
+export type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
 export { default as AdminApp } from './components/AdminApp.svelte';
 export { default as AutoTable } from './components/AutoTable.svelte';
 export { default as AutoForm } from './components/AutoForm.svelte';
@@ -120,6 +122,14 @@ export type { PendingMutation } from './components/OfflineSyncBanner.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
+export { default as NumericInput } from './components/NumericInput.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as MoneyInput } from './components/MoneyInput.svelte';
+export { default as PercentInput } from './components/PercentInput.svelte';
+export { default as DateTimeInput } from './components/DateTimeInput.svelte';
+export type { DateTimeInputMode } from './components/DateTimeInput.svelte';
+export { default as DateRangeInput } from './components/DateRangeInput.svelte';
+export type { DateRangeInputValue } from './components/DateRangeInput.svelte';
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
@@ -266,6 +276,8 @@ export type { SecurityEvent } from './components/content/SecurityEventTable.svel
 export { default as MemberList } from './components/content/MemberList.svelte';
 export type { MemberSummary } from './components/content/MemberList.svelte';
 export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
+export { default as FileUpload } from './components/FileUpload.svelte';
+export type { UploadItem, UploadItemStatus, UploadSession } from './components/FileUpload.svelte';
 export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
 export type { NetworkUser, NetworkMetric } from './components/content/NetworkUserCard.svelte';
 export { default as NetworkTable } from './components/content/NetworkTable.svelte';
@@ -292,3 +304,5 @@ export type { RatingSize } from './components/fields/RatingField.svelte';
 export type { CurrencyTone } from './components/fields/CurrencyField.svelte';
 export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';
 export type { MediaThumbnailSize, MediaThumbnailFit } from './components/content/MediaThumbnail.svelte';
+export { default as FileBrowser } from './components/content/FileBrowser.svelte';
+export type { FileBrowserData, FileBrowserInit, FileBrowserMenuOptions, FileBrowserProps } from './components/content/FileBrowser.svelte';

package/dist/index.js

@@ -1,4 +1,5 @@
 // @svadmin/ui — Pre-built admin UI components
+export { surfaceDesignContract } from "./design-contract.js";
 // Entry component
 export { default as AdminApp } from './components/AdminApp.svelte';
 // Admin components
@@ -95,6 +96,12 @@ export { default as OfflineSyncBanner } from './components/OfflineSyncBanner.sve
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
+export { default as NumericInput } from './components/NumericInput.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as MoneyInput } from './components/MoneyInput.svelte';
+export { default as PercentInput } from './components/PercentInput.svelte';
+export { default as DateTimeInput } from './components/DateTimeInput.svelte';
+export { default as DateRangeInput } from './components/DateRangeInput.svelte';
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
@@ -238,6 +245,7 @@ export { default as ApiKeyList } from './components/content/ApiKeyList.svelte';
 export { default as SecurityEventTable } from './components/content/SecurityEventTable.svelte';
 export { default as MemberList } from './components/content/MemberList.svelte';
 export { default as ImportDropzone } from './components/content/ImportDropzone.svelte';
+export { default as FileUpload } from './components/FileUpload.svelte';
 export { default as NetworkUserCard } from './components/content/NetworkUserCard.svelte';
 export { default as NetworkTable } from './components/content/NetworkTable.svelte';
 export { default as OtpInput } from './components/content/OtpInput.svelte';
@@ -250,3 +258,4 @@ export { default as AuditTimeline } from './components/content/AuditTimeline.sve
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as BatchActionBar } from './components/BatchActionBar.svelte';
 export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';
+export { default as FileBrowser } from './components/content/FileBrowser.svelte';

package/dist/page-chrome.css

@@ -3,61 +3,45 @@
     --svadmin-page-header-gap: 0.5rem;
     min-width: 0;
   }
-
   .svadmin-page-header[data-density="compact"] {
     --svadmin-page-header-gap: 0.375rem;
   }
-
   .svadmin-page-header__breadcrumbs {
     margin-bottom: 1rem;
   }
-
   .svadmin-page-header[data-density="compact"] .svadmin-page-header__breadcrumbs {
     margin-bottom: 0.375rem;
     font-size: 0.75rem;
   }
-
-  .svadmin-page-header__row,
-  .svadmin-filter-toolbar__row {
+  .svadmin-page-header__row, .svadmin-filter-toolbar__row {
     display: flex;
     flex-direction: column;
     min-width: 0;
     gap: 0.5rem;
   }
-
   .svadmin-page-header__row {
     gap: var(--svadmin-page-header-gap);
   }
-
   .svadmin-page-header__heading {
     display: flex;
     align-items: center;
     min-width: 0;
     gap: 0.625rem;
   }
-
   .svadmin-page-header__text {
     min-width: 0;
   }
-
-  .svadmin-page-header__title-row,
-  .svadmin-page-header__tags,
-  .svadmin-page-header__actions,
-  .svadmin-filter-toolbar__filters,
-  .svadmin-filter-toolbar__actions {
+  .svadmin-page-header__title-row, .svadmin-page-header__tags, .svadmin-page-header__actions, .svadmin-filter-toolbar__filters, .svadmin-filter-toolbar__actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     min-width: 0;
     gap: 0.5rem;
   }
-
-  .svadmin-page-header__tags,
-  .svadmin-page-header__actions {
+  .svadmin-page-header__tags, .svadmin-page-header__actions {
     max-width: 100%;
     gap: var(--svadmin-page-header-gap);
   }
-
   .svadmin-page-header__title {
     min-width: 0;
     color: var(--foreground);
@@ -66,73 +50,59 @@
     line-height: 1.75rem;
     overflow-wrap: anywhere;
   }
-
   .svadmin-page-header__description {
     color: var(--muted-foreground);
     font-size: 0.875rem;
     line-height: 1.25rem;
     overflow-wrap: anywhere;
   }
-
   .svadmin-page-header[data-density="compact"] .svadmin-page-header__title {
     font-size: 1.125rem;
   }
-
   .svadmin-page-header[data-density="compact"] .svadmin-page-header__description {
     font-size: 0.75rem;
     line-height: 1rem;
   }
-
   .svadmin-page-header .svadmin-page-header__back {
     flex-shrink: 0;
     color: var(--muted-foreground);
   }
-
   .svadmin-page-header .svadmin-page-header__back:hover {
     color: var(--foreground);
   }
-
   .svadmin-page-header .svadmin-page-header__back-icon {
     width: 1rem;
     height: 1rem;
   }
-
   .svadmin-breadcrumbs {
     min-width: 0;
   }
-
   .svadmin-breadcrumbs--spaced {
     margin-bottom: 1rem;
   }
-
   .svadmin-breadcrumbs__item {
     display: inline-flex;
     min-width: 0;
     overflow-wrap: anywhere;
   }
-
   .svadmin-breadcrumbs__label {
     color: var(--muted-foreground);
   }
-
   .svadmin-filter-toolbar {
     --svadmin-filter-control-height: 2.25rem;
     --svadmin-filter-control-font: 0.875rem;
     --svadmin-filter-search-icon-size: 1rem;
     min-width: 0;
   }
-
   .svadmin-filter-toolbar[data-density="compact"] {
     --svadmin-filter-control-height: 2rem;
     --svadmin-filter-control-font: 0.75rem;
     --svadmin-filter-search-icon-size: 0.875rem;
   }
-
   .svadmin-filter-toolbar__search {
     position: relative;
     min-width: 0;
   }
-
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
@@ -143,21 +113,18 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__input {
     height: var(--svadmin-filter-control-height);
     padding-inline: 2.25rem;
     font-size: var(--svadmin-filter-control-font);
     line-height: 1rem;
   }
-
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
     right: 0.25rem;
     transform: translateY(-50%);
   }
-
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
     gap: 0.375rem;
@@ -167,23 +134,19 @@
     white-space: normal;
     overflow-wrap: anywhere;
   }
-
   .svadmin-filter-toolbar[data-density="compact"] .svadmin-filter-toolbar__toggle {
     padding-inline: 0.625rem;
   }
-
   .svadmin-filter-toolbar .svadmin-filter-toolbar__control-icon {
     width: 0.875rem;
     height: 0.875rem;
   }
-
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
     width: 0.75rem;
     height: 0.75rem;
     margin-left: 0.125rem;
     color: var(--muted-foreground);
   }
-
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
     height: 1rem;
     min-height: 1rem;
@@ -195,32 +158,32 @@
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
-
   .svadmin-filter-toolbar .svadmin-filter-toolbar-advanced {
     margin-top: 0.5rem;
-    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
+    border: 1px solid var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
+    }
     border-radius: var(--radius-lg);
-    background: color-mix(in oklch, var(--muted) 20%, transparent);
+    background: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklch, var(--muted) 20%, transparent);
+    }
     padding: 0.75rem;
     overflow-wrap: anywhere;
   }
-
   @media (min-width: 640px) {
-    .svadmin-page-header__row,
-    .svadmin-filter-toolbar__row {
+    .svadmin-page-header__row, .svadmin-filter-toolbar__row {
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
     }
-
     .svadmin-page-header__row {
       justify-content: space-between;
     }
-
     .svadmin-page-header__heading {
       flex: 1 1 16rem;
     }
-
     .svadmin-filter-toolbar__search {
       flex: 1 1 14rem;
     }

package/dist/recipes.d.ts

@@ -0,0 +1,4 @@
+/** 只选择构建期已生成的类名，不在浏览器生成 CSS。 */
+export { surfaceMetric, surfaceTable, uiButton, uiBadge, uiInput, uiTextarea } from './styled-system/recipes/index.js';
+/** Stripe-first 产品组合部件，消费端仅选择已生成 CSS。 */
+export { productSection, productToolbar, productWorkspace, productSettings, productSettingsRow, productList, productStatus } from './styled-system/recipes/index.js';

package/dist/recipes.js

@@ -0,0 +1,4 @@
+/** 只选择构建期已生成的类名，不在浏览器生成 CSS。 */
+export { surfaceMetric, surfaceTable, uiButton, uiBadge, uiInput, uiTextarea } from './styled-system/recipes/index.js';
+/** Stripe-first 产品组合部件，消费端仅选择已生成 CSS。 */
+export { productSection, productToolbar, productWorkspace, productSettings, productSettingsRow, productList, productStatus } from './styled-system/recipes/index.js';

package/dist/rendering/index.d.ts

@@ -0,0 +1,87 @@
+import type { Component, Snippet } from 'svelte';
+import type { BaseRecord, FieldDefinition } from '@svadmin/core';
+import { type ContractFormAction, type ContractFormDraft, type ContractFormValues, type ContractId, type ContractRecord, type ContractSchemas, type ResourceContract } from '@svadmin/core/resource-contract';
+export type RecordField<S extends ContractSchemas> = Extract<keyof ContractRecord<S>, string>;
+export type FormField<S extends ContractSchemas, A extends ContractFormAction> = Extract<keyof ContractFormValues<S, A>, string>;
+/** 与 AutoTable 的现有 snippet 参数兼容；未经校验的数据保持 unknown。 */
+export interface CellInput {
+    value: unknown;
+    record: Record<string, unknown>;
+}
+export interface FieldInput {
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (value: unknown) => void;
+}
+export interface CellContext<S extends ContractSchemas, K extends RecordField<S>> {
+    key: K;
+    record: ContractRecord<S>;
+    value: ContractRecord<S>[K];
+}
+export type FieldState<T> = {
+    valid: true;
+    value: T;
+} | {
+    valid: false;
+};
+export interface FieldContext<S extends ContractSchemas, A extends ContractFormAction, K extends FormField<S, A>> {
+    field: FieldDefinition & {
+        key: K;
+    };
+    state: FieldState<ContractFormValues<S, A>[K]>;
+    readonly: boolean;
+    /** 只接收符合当前操作契约的值，运行时也会重新校验。 */
+    onchange: (value: ContractFormValues<S, A>[K]) => void;
+    /** 草稿可以暂时不满足业务约束，但必须是可快照的普通数据。 */
+    onDraftChange: (value: unknown) => void;
+}
+export type CellSnippets<S extends ContractSchemas> = Partial<Record<RecordField<S>, Snippet<[CellInput]>>>;
+export interface RowContext<S extends ContractSchemas> {
+    record: ContractRecord<S>;
+    id: ContractId<S>;
+}
+/** 动态路由只擦除资源类型，不把未知记录或草稿假定为业务类型。 */
+export interface ResourceRendering {
+    readonly resource: ResourceContract;
+    record(value: unknown): BaseRecord;
+    records(value: unknown): BaseRecord[];
+    draft(action: ContractFormAction, value: unknown): Record<string, unknown>;
+}
+/** 同名但不同实例的契约也不可混用；宿主配置必须绑定实际查询契约。 */
+export declare function bindResourceRendering(rendering: ResourceRendering | undefined, resource: ResourceContract): ResourceRendering | undefined;
+/** 业务记录/草稿边界；无需自定义 snippet 时，不把完整渲染工具链加入首屏。 */
+export declare function createResourceRendering<S extends ContractSchemas>(resource: ResourceContract<S>): Readonly<{
+    resource: ResourceContract<S>;
+    record: (value: unknown) => ContractRecord<S>;
+    records: (value: unknown) => ContractRecord<S>[];
+    draft: <A extends ContractFormAction>(action: A, value: unknown) => ContractFormDraft<S, A>;
+}>;
+/** 原生 Svelte 渲染适配器：不执行生成代码，不发请求，也不改变组件生命周期。 */
+export declare function createResourceRenderers<S extends ContractSchemas>(resource: ResourceContract<S>): Readonly<{
+    resource: ResourceContract<S>;
+    record: (value: unknown) => ContractRecord<S>;
+    records: (value: unknown) => ContractRecord<S>[];
+    draft: <A extends ContractFormAction>(action: A, value: unknown) => Partial<Record<Extract<keyof ContractFormValues<S, A>, string>, unknown>>;
+    cell: <K extends RecordField<S>>(key: K, input: CellInput) => CellContext<S, K>;
+    row: (input: {
+        record: Record<string, unknown>;
+        id: string | number;
+    }) => RowContext<S>;
+    summary: (input: {
+        data: readonly unknown[];
+        total: number;
+        visibleColumnsCount: number;
+    }) => {
+        data: ContractRecord<S>[];
+        total: number;
+        visibleColumnsCount: number;
+    };
+    columns: <const C extends CellSnippets<S>>(snippets: C & Record<Exclude<keyof C, RecordField<S>>, never>) => C;
+    field: <A extends ContractFormAction, K extends FormField<S, A>>(action: A, key: K, input: FieldInput) => FieldContext<S, A, K>;
+}>;
+/** 在普通 .ts 配置中保留组件与属性的类型关联；使用原生 <view.component {...view.props} />。 */
+export interface ComponentView<P extends Record<string, unknown>> {
+    component: Component<P>;
+    props: P;
+}
+export declare function componentView<P extends Record<string, unknown>>(component: Component<P>, props: NoInfer<P>): ComponentView<P>;

package/dist/rendering/index.js

@@ -0,0 +1,117 @@
+import { snapshotPlainData } from '@svadmin/core/schema';
+import { contractFormInvalidFields, contractKey, getContractFormFields, parseContractId, parseContractRecord, snapshotContractFormDraft, } from '@svadmin/core/resource-contract';
+/** 同名但不同实例的契约也不可混用；宿主配置必须绑定实际查询契约。 */
+export function bindResourceRendering(rendering, resource) {
+    if (rendering && rendering.resource !== resource) {
+        throw new TypeError('Renderer resource contract mismatch');
+    }
+    return rendering;
+}
+function assertAction(action) {
+    if (!['create', 'edit', 'clone', 'show'].includes(action)) {
+        throw new TypeError('Invalid renderer form action');
+    }
+}
+function fieldState(resource, action, key, value) {
+    try {
+        const draft = snapshotContractFormDraft(resource, action, { [key]: value });
+        const invalid = contractFormInvalidFields(resource, action, draft);
+        if (invalid.includes(key) || invalid.includes('_root'))
+            return { valid: false };
+        return { valid: true, value: Object.hasOwn(draft, key) ? draft[key] : undefined };
+    }
+    catch {
+        return { valid: false };
+    }
+}
+/** 业务记录/草稿边界；无需自定义 snippet 时，不把完整渲染工具链加入首屏。 */
+export function createResourceRendering(resource) {
+    contractKey(resource);
+    function record(value) {
+        return parseContractRecord(resource, value);
+    }
+    function records(value) {
+        const snapshot = snapshotPlainData(value);
+        if (!Array.isArray(snapshot))
+            throw new TypeError('Renderer records must be an array');
+        return snapshot.map(record);
+    }
+    function draft(action, value) {
+        assertAction(action);
+        return snapshotContractFormDraft(resource, action, value);
+    }
+    return Object.freeze({ resource, record, records, draft });
+}
+/** 原生 Svelte 渲染适配器：不执行生成代码，不发请求，也不改变组件生命周期。 */
+export function createResourceRenderers(resource) {
+    const boundary = createResourceRendering(resource);
+    const { record, records, draft } = boundary;
+    const recordFields = new Set(getContractFormFields(resource, 'show'));
+    function cell(key, input) {
+        if (!recordFields.has(key))
+            throw new TypeError('Unknown renderer record field');
+        const checked = record(input.record);
+        // value 从已校验记录读取，不相信调用方传入的脱离记录的 value。
+        return { key, record: checked, value: checked[key] };
+    }
+    function row(input) {
+        const checked = record(input.record);
+        const id = parseContractId(resource, input.id);
+        if (!Object.is(id, checked['id']))
+            throw new TypeError('Renderer row identity mismatch');
+        return { record: checked, id };
+    }
+    function summary(input) {
+        if (!Array.isArray(input.data) || !Number.isSafeInteger(input.total) || input.total < 0
+            || !Number.isSafeInteger(input.visibleColumnsCount) || input.visibleColumnsCount < 0) {
+            throw new TypeError('Invalid renderer summary');
+        }
+        return { data: input.data.map(record), total: input.total, visibleColumnsCount: input.visibleColumnsCount };
+    }
+    function columns(snippets) {
+        if (!snippets || ![Object.prototype, null].includes(Object.getPrototypeOf(snippets))
+            || Object.getOwnPropertySymbols(snippets).length) {
+            throw new TypeError('Invalid renderer column map');
+        }
+        for (const [key, property] of Object.entries(Object.getOwnPropertyDescriptors(snippets))) {
+            if (!recordFields.has(key) || !property.enumerable || !('value' in property)
+                || typeof property.value !== 'function')
+                throw new TypeError('Invalid renderer column');
+        }
+        // 不冻结调用方对象，也不保留可被后来添加属性的原始映射。
+        return { ...snippets };
+    }
+    function field(action, key, input) {
+        assertAction(action);
+        if (!getContractFormFields(resource, action).includes(key) || input.field.key !== key) {
+            throw new TypeError('Renderer form field mismatch');
+        }
+        const change = input.onchange;
+        const readonly = action === 'show';
+        function assertWritable() {
+            if (readonly)
+                throw new TypeError('Cannot update a read-only renderer');
+        }
+        return {
+            field: { ...input.field, key },
+            state: fieldState(resource, action, key, input.value),
+            readonly,
+            onchange(value) {
+                assertWritable();
+                const checked = fieldState(resource, action, key, value);
+                if (!checked.valid)
+                    throw new TypeError('Invalid renderer field value');
+                change(checked.value);
+            },
+            onDraftChange(value) {
+                assertWritable();
+                const draft = snapshotContractFormDraft(resource, action, { [key]: value });
+                change(Object.hasOwn(draft, key) ? draft[key] : undefined);
+            },
+        };
+    }
+    return Object.freeze({ resource, record, records, draft, cell, row, summary, columns, field });
+}
+export function componentView(component, props) {
+    return { component, props };
+}

package/dist/styled-system/css/conditions.js

@@ -0,0 +1,36 @@
+import { withoutSpace } from '../helpers.js';
+
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,base"
+const conditions = new Set(conditionsStr.split(','))
+
+const conditionRegex = /^@|&|&$/
+
+export function isCondition(value){
+  return conditions.has(value) || conditionRegex.test(value)
+}
+
+const underscoreRegex = /^_/
+const conditionsSelectorRegex = /&|@/
+
+export function finalizeConditions(paths){
+  return paths.map((path) => {
+    if (conditions.has(path)){
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (conditionsSelectorRegex.test(path)){
+      return `[${withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })}
+
+  export function sortConditions(paths){
+    return paths.sort((a, b) => {
+      const aa = isCondition(a)
+      const bb = isCondition(b)
+      if (aa && !bb) return 1
+      if (!aa && bb) return -1
+      return 0
+    })
+  }

package/dist/styled-system/css/css.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
+interface CssFunction {
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
+}
+
+export declare const css: CssFunction;