@tuuject/koi-react 0.0.0-stage → 0.1.0

package/dist/toast/Toast.d.ts

@@ -0,0 +1,23 @@
+import { type ToastApi, type ToastOwnProps, type ToastProviderOwnProps } from '@tuuject/koi-core';
+import { type ToastSlot } from '@tuuject/koi-react/styled-system/recipes';
+import { type HTMLAttributes } from 'react';
+import type { SlotClassNames } from '../types.js';
+export type { ToastOptions, ToastTone } from '@tuuject/koi-core';
+export interface ToastProps extends ToastOwnProps, Omit<HTMLAttributes<HTMLDivElement>, keyof ToastOwnProps> {
+    classNames?: SlotClassNames<Exclude<ToastSlot, 'viewport'>>;
+}
+export interface ToastProviderProps extends ToastProviderOwnProps {
+}
+/**
+ * A toast on its own, outside ToastProvider (the provider renders the same thing). Error is role="alert", the
+ * other tones role="status".
+ */
+export declare function Toast({ tone, title, description, action, onClose, className, classNames, ...rest }: ToastProps): import("react").JSX.Element;
+/**
+ * Wrap the app once; then call `useToast().toast({...})` anywhere inside. Base UI's toast manager does the timing
+ * (paused while the stack is hovered or focused, or the window is in the background), swipe-to-dismiss, F6 to
+ * reach the toasts from the keyboard, and the screen reader announcements.
+ */
+export declare function ToastProvider({ children, position }: ToastProviderProps): import("react").JSX.Element;
+/** `toast(options)` shows one and returns its id; `dismiss(id)` closes it. Only inside ToastProvider. */
+export declare function useToast(): ToastApi;

package/dist/toast/Toast.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { strings, TOAST_DURATION, TOAST_LIMIT, } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { toast as toastRecipe } from '@tuuject/koi-react/styled-system/recipes';
+import { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../icons.js';
+const toneIcon = { info: InfoIcon, success: SuccessIcon, warning: WarningIcon, error: ErrorIcon };
+/**
+ * A toast on its own, outside ToastProvider (the provider renders the same thing). Error is role="alert", the
+ * other tones role="status".
+ */
+export function Toast({ tone = 'info', title, description, action, onClose, className, classNames, ...rest }) {
+    const s = toastRecipe({ tone, closable: !!onClose });
+    const Icon = toneIcon[tone] ?? InfoIcon;
+    return (_jsxs("div", { role: tone === 'error' ? 'alert' : 'status', ...rest, className: cx(s.root, className), children: [_jsx("span", { className: cx(s.icon, classNames?.icon), children: _jsx(Icon, {}) }), _jsxs("div", { className: cx(s.content, classNames?.content), children: [title ? _jsx("p", { className: cx(s.title, classNames?.title), children: title }) : null, description ? _jsx("p", { className: cx(s.description, classNames?.description), children: description }) : null] }), action ? _jsx("div", { className: cx(s.action, classNames?.action), children: action }) : null, onClose ? (_jsx("button", { type: "button", className: cx(s.close, classNames?.close), "aria-label": strings.close, title: strings.close, onClick: onClose, children: _jsx(CloseIcon, {}) })) : null] }));
+}
+const ToastContext = createContext(null);
+/**
+ * Wrap the app once; then call `useToast().toast({...})` anywhere inside. Base UI's toast manager does the timing
+ * (paused while the stack is hovered or focused, or the window is in the background), swipe-to-dismiss, F6 to
+ * reach the toasts from the keyboard, and the screen reader announcements.
+ */
+export function ToastProvider({ children, position = 'bottom' }) {
+    const s = toastRecipe({ position });
+    return (_jsxs(BaseToast.Provider, { limit: TOAST_LIMIT, timeout: TOAST_DURATION, children: [_jsx(ToastApiProvider, { children: children }), _jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { "aria-label": strings.notifications, className: s.viewport, children: _jsx(ToastList, { position: position }) }) })] }));
+}
+// Talks to Base UI's store through the hook rather than a createToastManager() instance: the instance only hears
+// calls once the provider has subscribed in its effect, which runs after the children's, so a toast() fired from a
+// child's mount effect would be lost.
+function ToastApiProvider({ children }) {
+    const { add, close } = BaseToast.useToastManager();
+    const seq = useRef(0);
+    const api = useMemo(() => ({
+        toast({ tone = 'info', title, description, action, duration }) {
+            const id = ++seq.current;
+            add({
+                id: String(id),
+                type: tone,
+                title,
+                description,
+                timeout: duration,
+                // Errors are announced right away (legacy: role="alert"); the rest wait their turn.
+                priority: tone === 'error' ? 'high' : 'low',
+                data: { action },
+            });
+            return id;
+        },
+        dismiss(id) {
+            close(String(id));
+        },
+    }), [add, close]);
+    return _jsx(ToastContext.Provider, { value: api, children: children });
+}
+function ToastList({ position }) {
+    const { toasts, close } = BaseToast.useToastManager();
+    // At most 4 at once, and the oldest goes for good (legacy). Base UI only marks the extras `limited` and brings
+    // them back when a newer one closes, so close them.
+    useEffect(() => {
+        for (const t of toasts) {
+            if (t.limited && t.transitionStatus !== 'ending') {
+                close(t.id);
+            }
+        }
+    }, [toasts, close]);
+    return toasts.map((t) => {
+        const tone = (t.type ?? 'info');
+        const s = toastRecipe({ tone, closable: true, position });
+        const Icon = toneIcon[tone] ?? InfoIcon;
+        return (_jsxs(BaseToast.Root, { toast: t, swipeDirection: [position === 'top' ? 'up' : 'down', 'left', 'right'], className: s.root, children: [_jsx("span", { className: s.icon, children: _jsx(Icon, {}) }), _jsxs("div", { className: s.content, children: [_jsx(BaseToast.Title, { className: s.title, render: _jsx("p", {}) }), _jsx(BaseToast.Description, { className: s.description })] }), t.data?.action ? _jsx("div", { className: s.action, children: t.data.action }) : null, _jsx(BaseToast.Close, { className: s.close, "aria-label": strings.close, title: strings.close, children: _jsx(CloseIcon, {}) })] }, t.id));
+    });
+}
+/** `toast(options)` shows one and returns its id; `dismiss(id)` closes it. Only inside ToastProvider. */
+export function useToast() {
+    const api = useContext(ToastContext);
+    if (!api) {
+        throw new Error('useToast must be used inside <ToastProvider>');
+    }
+    return api;
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import type { TooltipOwnProps } from '@tuuject/koi-core';
+export type { TooltipSide } from '@tuuject/koi-core';
+export interface TooltipProps extends TooltipOwnProps<Event> {
+}
+/**
+ * Inverted bubble naming or explaining its child, on hover and keyboard focus. Base UI handles the delays, focus,
+ * Esc, the portal and positioning (8px from the trigger, flipping near the viewport edge).
+ */
+export declare function Tooltip({ content, children, side, open, defaultOpen, onOpenChange, delay, closeDelay, disabled, }: TooltipProps): import("react").JSX.Element;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { tooltip } from '@tuuject/koi-react/styled-system/recipes';
+import { components } from '@tuuject/koi-tokens/dimensions';
+import { Children, cloneElement, useId, useState } from 'react';
+/**
+ * Inverted bubble naming or explaining its child, on hover and keyboard focus. Base UI handles the delays, focus,
+ * Esc, the portal and positioning (8px from the trigger, flipping near the viewport edge).
+ */
+export function Tooltip({ content, children, side = 'top', open, defaultOpen, onOpenChange, delay = 0, closeDelay = 0, disabled, }) {
+    const s = tooltip();
+    const autoId = useId();
+    const popupId = `${autoId}tooltip`;
+    const child = Children.only(children);
+    const triggerId = child.props.id ?? `${autoId}trigger`;
+    // Base UI doesn't describe the trigger by the popup; the spec wants aria-describedby while it's shown.
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const shown = open ?? uncontrolledOpen;
+    // Skip it when the tooltip only repeats the trigger's name (IconButton label="关闭" + content="关闭"), or it's read twice.
+    const repeatsName = typeof content === 'string' && (child.props['aria-label'] === content || child.props.label === content);
+    const describedBy = [child.props['aria-describedby'], shown && !repeatsName ? popupId : undefined].filter(Boolean).join(' ') ||
+        undefined;
+    // title: undefined drops the native tooltip (IconButton sets one from its label), so the two don't stack.
+    const trigger = cloneElement(child, { 'aria-describedby': describedBy, title: undefined });
+    return (_jsxs(BaseTooltip.Root, { open: open, defaultOpen: defaultOpen, triggerId: open === undefined ? undefined : triggerId, defaultTriggerId: defaultOpen ? triggerId : undefined, disabled: disabled, onOpenChange: (next, details) => {
+            setUncontrolledOpen(next);
+            onOpenChange?.(next, details);
+        }, children: [_jsx(BaseTooltip.Trigger, { id: triggerId, delay: delay, closeDelay: closeDelay, render: trigger }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: components.tooltip.offset, className: s.positioner, children: _jsx(BaseTooltip.Popup, { id: popupId, role: "tooltip", className: s.popup, children: content }) }) })] }));
+}

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeDetails as CoreChangeDetails } from '@tuuject/koi-core';
+/**
+ * The second argument of Koi's change callbacks on the web: `ChangeDetails` from @tuuject/koi-core with a DOM `Event`.
+ * Base UI's own details object already satisfies it, so it's passed straight through (agent-doc/headless.md, rule 5).
+ */
+export type ChangeDetails = CoreChangeDetails<Event>;
+/**
+ * Extra classes for a component's inner elements, keyed by its recipe's slot names (`CardSlot`, …), so
+ * consumers can restyle parts that `className` can't reach. The root keeps `className`.
+ */
+export type SlotClassNames<Slot extends string> = Partial<Record<Exclude<Slot, 'root'>, string>>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,221 @@
 {
   "name": "@tuuject/koi-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Koi components for React web: Base UI for behavior, Panda CSS v2 for styling.",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styled-system/*": "./styled-system/*/index.js",
+    "./alert": {
+      "types": "./dist/alert/Alert.d.ts",
+      "default": "./dist/alert/Alert.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar/Avatar.d.ts",
+      "default": "./dist/avatar/Avatar.js"
+    },
+    "./badge": {
+      "types": "./dist/badge/Badge.d.ts",
+      "default": "./dist/badge/Badge.js"
+    },
+    "./button": {
+      "types": "./dist/button/Button.d.ts",
+      "default": "./dist/button/Button.js"
+    },
+    "./card": {
+      "types": "./dist/card/Card.d.ts",
+      "default": "./dist/card/Card.js"
+    },
+    "./chat-bubble": {
+      "types": "./dist/chat-bubble/ChatBubble.d.ts",
+      "default": "./dist/chat-bubble/ChatBubble.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/Checkbox.d.ts",
+      "default": "./dist/checkbox/Checkbox.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/Dialog.d.ts",
+      "default": "./dist/dialog/Dialog.js"
+    },
+    "./divider": {
+      "types": "./dist/divider/Divider.d.ts",
+      "default": "./dist/divider/Divider.js"
+    },
+    "./field": {
+      "types": "./dist/field/Field.d.ts",
+      "default": "./dist/field/Field.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./input": {
+      "types": "./dist/input/Input.d.ts",
+      "default": "./dist/input/Input.js"
+    },
+    "./link": {
+      "types": "./dist/link/Link.d.ts",
+      "default": "./dist/link/Link.js"
+    },
+    "./pagination": {
+      "types": "./dist/pagination/Pagination.d.ts",
+      "default": "./dist/pagination/Pagination.js"
+    },
+    "./progress": {
+      "types": "./dist/progress/Progress.d.ts",
+      "default": "./dist/progress/Progress.js"
+    },
+    "./prose": {
+      "types": "./dist/prose/Prose.d.ts",
+      "default": "./dist/prose/Prose.js"
+    },
+    "./radio-group": {
+      "types": "./dist/radio-group/RadioGroup.d.ts",
+      "default": "./dist/radio-group/RadioGroup.js"
+    },
+    "./select": {
+      "types": "./dist/select/Select.d.ts",
+      "default": "./dist/select/Select.js"
+    },
+    "./select-panel": {
+      "types": "./dist/select/SelectPanel.d.ts",
+      "default": "./dist/select/SelectPanel.js"
+    },
+    "./shape": {
+      "types": "./dist/shape.d.ts",
+      "default": "./dist/shape.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton/Skeleton.d.ts",
+      "default": "./dist/skeleton/Skeleton.js"
+    },
+    "./spinner": {
+      "types": "./dist/spinner/Spinner.d.ts",
+      "default": "./dist/spinner/Spinner.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/Switch.d.ts",
+      "default": "./dist/switch/Switch.js"
+    },
+    "./table": {
+      "types": "./dist/table/Table.d.ts",
+      "default": "./dist/table/Table.js"
+    },
+    "./data-table": {
+      "types": "./dist/table/DataTable.d.ts",
+      "default": "./dist/table/DataTable.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/Tabs.d.ts",
+      "default": "./dist/tabs/Tabs.js"
+    },
+    "./tag": {
+      "types": "./dist/tag/Tag.d.ts",
+      "default": "./dist/tag/Tag.js"
+    },
+    "./textarea": {
+      "types": "./dist/textarea/Textarea.d.ts",
+      "default": "./dist/textarea/Textarea.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/Toast.d.ts",
+      "default": "./dist/toast/Toast.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/Tooltip.d.ts",
+      "default": "./dist/tooltip/Tooltip.js"
+    },
+    "./package.json": "./package.json",
+    "./panda/*": "./dist/panda/*",
+    "./css": {
+      "types": "./styled-system/css/index.d.ts",
+      "default": "./styled-system/css/index.js"
+    },
+    "./css/*": {
+      "types": "./styled-system/css/*.d.ts",
+      "default": "./styled-system/css/*.js"
+    },
+    "./recipes": {
+      "types": "./styled-system/recipes/index.d.ts",
+      "default": "./styled-system/recipes/index.js"
+    },
+    "./recipes/*": {
+      "types": "./styled-system/recipes/*.d.ts",
+      "default": "./styled-system/recipes/*.js"
+    },
+    "./patterns": {
+      "types": "./styled-system/patterns/index.d.ts",
+      "default": "./styled-system/patterns/index.js"
+    },
+    "./patterns/*": {
+      "types": "./styled-system/patterns/*.d.ts",
+      "default": "./styled-system/patterns/*.js"
+    },
+    "./jsx": {
+      "types": "./styled-system/jsx/index.d.ts",
+      "default": "./styled-system/jsx/index.js"
+    },
+    "./jsx/*": {
+      "types": "./styled-system/jsx/*.d.ts",
+      "default": "./styled-system/jsx/*.js"
+    },
+    "./tokens": {
+      "types": "./styled-system/tokens/index.d.ts",
+      "default": "./styled-system/tokens/index.js"
+    },
+    "./helpers": {
+      "types": "./styled-system/helpers.d.ts",
+      "default": "./styled-system/helpers.js"
+    },
+    "./types": {
+      "types": "./styled-system/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "styled-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@iconify-icons/fa7-solid": "^2.0.0",
+    "@tuuject/koi-tokens": "0.1.0",
+    "@tuuject/koi-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "@pandacss/dev": "~2.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@pandacss/dev": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^7.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tuuject/design.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/tuuject/design#readme",
+  "license": "MIT",
+  "scripts": {
+    "build": "panda codegen --clean && tsc -p tsconfig.build.json && pnpm run lib",
+    "lib": "panda lib --files './**/*.js' && node ../../scripts/sync-publish-exports.mjs .",
+    "typecheck": "tsc -p tsconfig.json"
+  }
 }

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

@@ -0,0 +1,7 @@
+export declare const breakpointKeys: string[];
+
+export declare function isCondition(v: string): boolean;
+
+export declare function finalizeConditions(paths: string[]): string[];
+
+export declare function sortConditions(paths: string[]): string[];

package/styled-system/css/conditions.js

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

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

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

package/styled-system/css/css.js

@@ -0,0 +1,63 @@
+import { createAssignCss, createMergeCss, createSerializeCss, createSerializeCssArgs, hypenateProperty, isObject, withoutSpace } from '../helpers';
+import { breakpointKeys, finalizeConditions, sortConditions } from './conditions';
+
+const utilities = "WebkitTextFillColor:wktf-c,accentColor:ac-c,alignContent:ac,alignItems:ai,alignSelf:as,animation:anim,animationComposition:anim-comp,animationDelay:anim-dly,animationDirection:anim-dir,animationDuration:anim-dur,animationFillMode:anim-fm,animationIterationCount:anim-ic,animationName:anim-n,animationPlayState:anim-ps,animationRange:anim-r,animationRangeEnd:anim-re,animationRangeStart:anim-rs,animationState:anim-s,animationTimeline:anim-tl,animationTimingFunction:anim-tmf,appearance:ap,aspectRatio:asp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropFilter:bkdp,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,backfaceVisibility:bfv,background:bg/1,backgroundAttachment:bg-a/bgAttachment,backgroundBlendMode:bg-bm/bgBlendMode,backgroundClip:bg-cp/bgClip,backgroundColor:bg-c/bgColor,backgroundConic:bg-conic/bgConic,backgroundGradient:bg-grad/bgGradient,backgroundImage:bg-i/bgImage,backgroundLinear:bg-linear/bgLinear,backgroundOrigin:bg-o/bgOrigin,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundRadial:bg-radial/bgRadial,backgroundRepeat:bg-r/bgRepeat,backgroundSize:bg-s/bgSize,blockSize:h-bs,border:bd,borderBlock:bd-y/borderY,borderBlockColor:bd-y-c/borderYColor,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockEndWidth:bd-be-w,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,borderBlockStartWidth:bd-bs-w,borderBlockWidth:bd-y-w/borderYWidth,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderBottomRadius:bdr-b/roundedBottom,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomWidth:bd-b-w,borderCollapse:bd-cl,borderColor:bd-c,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,borderEndStartRadius:bdr-es/roundedEndStart,borderInline:bd-x/borderX,borderInlineColor:bd-x-c/borderXColor,borderInlineEnd:bd-e/borderEnd,borderInlineEndColor:bd-e-c/borderEndColor,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineStart:bd-s/borderStart,borderInlineStartColor:bd-s-c/borderStartColor,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineWidth:bd-x-w/borderXWidth,borderLeft:bd-l,borderLeftColor:bd-l-c,borderLeftRadius:bdr-l/roundedLeft,borderLeftWidth:bd-l-w,borderRadius:bdr/rounded,borderRight:bd-r,borderRightColor:bd-r-c,borderRightRadius:bdr-r/roundedRight,borderRightWidth:bd-r-w,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderStartStartRadius:bdr-ss/roundedStartStart,borderTop:bd-t,borderTopColor:bd-t-c,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRadius:bdr-t/roundedTop,borderTopRightRadius:bdr-tr/roundedTopRight,borderTopWidth:bd-t-w,borderWidth:bd-w,boxDecorationBreak:bx-db,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,boxSize:size,boxSizing:bx-s,caretColor:ca-c,clipPath:cp-path,color:c,columnGap:cg,container:cq,containerName:cq-n,containerType:cq-t,display:d,divideColor:dvd-c,divideStyle:dvd-s,divideX:dvd-x,divideY:dvd-y,flexBasis:flex-b,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,focusRingColor:focus-ring-c,focusRingOffset:focus-ring-o,focusRingStyle:focus-ring-s,focusRingWidth:focus-ring-w,focusVisibleRing:focus-v-ring,fontFamily:ff,fontFeatureSettings:ff-s,fontKerning:fk,fontPalette:fp,fontSize:fs,fontSizeAdjust:fs-a,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariantNumeric:fv-num,fontVariationSettings:fv-s,fontWeight:fw,gradientFrom:grad-from,gradientFromPosition:grad-from-pos,gradientTo:grad-to,gradientToPosition:grad-to-pos,gradientVia:grad-via,gradientViaPosition:grad-via-pos,gridAutoColumns:grid-ac,gridAutoFlow:grid-af,gridAutoRows:grid-ar,gridColumn:grid-c,gridColumnEnd:grid-ce,gridColumnGap:grid-cg,gridColumnStart:grid-cs,gridGap:grid-g,gridRow:grid-r,gridRowGap:grid-rg,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,height:h/1,hideBelow:show,hideFrom:hide,hyphens:hy,inlineSize:w-is,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInline:inset-x/insetX,insetInlineEnd:inset-e/end/insetEnd,insetInlineStart:inset-s/insetStart/start,justifyContent:jc,letterSpacing:ls,lineClamp:lc,lineHeight:lh,listStyle:li-s,listStyleImage:li-img,listStylePosition:li-pos,listStyleType:li-t,margin:m/1,marginBlock:my/marginY/1,marginBlockEnd:mbe,marginBlockStart:mbs,marginBottom:mb/1,marginInline:mx/marginX/1,marginInlineEnd:me/marginEnd/1,marginInlineStart:ms/marginStart/1,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,mask:msk,maskBottomFrom:msk-b-from,maskBottomFromColor:msk-b-from-c,maskBottomTo:msk-b-to,maskBottomToColor:msk-b-to-c,maskClip:msk-cp,maskComposite:msk-cmp,maskConic:msk-conic,maskConicFrom:msk-conic-from,maskConicFromColor:msk-conic-from-c,maskConicTo:msk-conic-to,maskConicToColor:msk-conic-to-c,maskImage:msk-i,maskLeftFrom:msk-l-from,maskLeftFromColor:msk-l-from-c,maskLeftTo:msk-l-to,maskLeftToColor:msk-l-to-c,maskLinear:msk-linear,maskLinearFrom:msk-linear-from,maskLinearFromColor:msk-linear-from-c,maskLinearTo:msk-linear-to,maskLinearToColor:msk-linear-to-c,maskMode:msk-md,maskOrigin:msk-o,maskPosition:msk-p,maskRadial:msk-radial,maskRadialAt:msk-radial-at,maskRadialFrom:msk-radial-from,maskRadialFromColor:msk-radial-from-c,maskRadialShape:msk-radial-shape,maskRadialSize:msk-radial-sz,maskRadialTo:msk-radial-to,maskRadialToColor:msk-radial-to-c,maskRepeat:msk-r,maskRightFrom:msk-r-from,maskRightFromColor:msk-r-from-c,maskRightTo:msk-r-to,maskRightToColor:msk-r-to-c,maskSize:msk-s,maskTopFrom:msk-t-from,maskTopFromColor:msk-t-from-c,maskTopTo:msk-t-to,maskTopToColor:msk-t-to-c,maskType:msk-t,maskXFrom:msk-x-from,maskXFromColor:msk-x-from-c,maskXTo:msk-x-to,maskXToColor:msk-x-to-c,maskYFrom:msk-y-from,maskYFromColor:msk-y-from-c,maskYTo:msk-y-to,maskYToColor:msk-y-to-c,maxBlockSize:max-b,maxHeight:max-h/maxH,maxInlineSize:max-w-is,maxWidth:max-w/maxW,minBlockSize:min-h-bs,minHeight:min-h/minH,minInlineSize:min-w-is,minWidth:min-w/minW,mixBlendMode:mix-bm,objectFit:obj-f,objectPosition:obj-p,opacity:op,outline:ring/1,outlineColor:ring-c/ringColor,outlineOffset:ring-o/ringOffset,outlineWidth:ring-w/ringWidth,overflow:ov,overflowAnchor:ov-a,overflowBlock:ov-b,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overflowInline:ov-i,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overscrollBehavior:ovs-b,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,padding:p/1,paddingBlock:py/paddingY/1,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingBottom:pb/1,paddingInline:px/paddingX/1,paddingInlineEnd:pe/paddingEnd/1,paddingInlineStart:ps/paddingStart/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,position:pos/1,rowGap:rg,scrollBehavior:scr-bhv,scrollMargin:scr-m,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginBottom:scr-mb,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockEnd:scr-pbe,scrollPaddingBlockStart:scr-pbs,scrollPaddingBottom:scr-pb,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollSnapAlign:scr-sa,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapMargin:scrs-m,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapMarginTop:scrs-mt,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapStop:scrs-s,scrollSnapStrictness:scrs-strt,scrollSnapType:scrs-t,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarThumb:scr-bar-th,scrollbarTrack:scr-bar-tk,scrollbarWidth:scr-bar-w,spaceX:sx,spaceY:sy,srOnly:sr,stroke:stk,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,strokeWidth:stk-w,tableLayout:tbl,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textEmphasisColor:te-c,textGradient:txt-grad,textIndent:ti,textOverflow:tov,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,textSizeAdjust:txt-adj,textStyle:textStyle,textTransform:tt,textUnderlineOffset:tu-o,textWrap:tw,touchAction:tch-a,transform:trf,transformBox:trf-b,transformOrigin:trf-o,transformStyle:trf-s,transition:trs,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transitionTimingFunction:trs-tmf,translateX:/x,translateY:/y,translateZ:/z,truncate:trunc,userSelect:us,verticalAlign:va,visibility:vis,width:w/1,wordBreak:wb,zIndex:z"
+
+function createCssContext() {
+  const classNameByProp = new Map()
+  const shorthands = new Map()
+  if (utilities) {
+    utilities.split(",").forEach((utility) => {
+      const [prop, meta] = utility.split(":")
+      const [className, ...shorthandList] = meta.split("/")
+      if (className) classNameByProp.set(prop, className)
+      shorthandList.forEach((shorthand) => {
+        const key = shorthand === "1" ? className : shorthand
+        shorthands.set(key, prop)
+      })
+    })
+  }
+
+  const resolveShorthand = (prop) => shorthands.get(prop) || prop
+
+  return {
+    hash: false,
+    conditions: {
+      shift: sortConditions,
+      finalize: finalizeConditions,
+      breakpoints: { keys: breakpointKeys },
+    },
+    utility: {
+      prefix: null,
+      hasShorthand: true,
+      toHash(path, hashFn) {
+        return hashFn(path.join(":"))
+      },
+      transform(prop, value) {
+        const key = resolveShorthand(prop)
+        const propKey = classNameByProp.get(key) || hypenateProperty(key)
+        return { className: `${propKey}_${withoutSpace(value)}` }
+      },
+      resolveShorthand,
+    },
+  }
+}
+
+const cssContext = /* @__PURE__ */ createCssContext()
+const serializeCss = /* @__PURE__ */ createSerializeCss(cssContext)
+export const mergeCss = /* @__PURE__ */ createMergeCss(cssContext)
+const serializeCssArgs = /* @__PURE__ */ createSerializeCssArgs(serializeCss, mergeCss)
+
+export const css = /* @__PURE__ */ Object.assign(
+  function css(...styles) {
+    if (styles.length === 1 && isObject(styles[0])) return serializeCss(styles[0])
+    return serializeCssArgs(...styles)
+  },
+  {
+    raw: function cssRaw(...styles) {
+      return mergeCss(...styles)
+    },
+  },
+)
+
+export const assignCss = /* @__PURE__ */ createAssignCss(cssContext)

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

@@ -0,0 +1,5 @@
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn;
+
+export { RecipeVariant, RecipeVariantProps } from '../types/recipe';

package/styled-system/css/cva.js

@@ -0,0 +1,51 @@
+import { getCompoundVariantCss, memo, mergeProps, splitProps, toVariantMap, uniq, withDefaults } from '../helpers';
+import { css, mergeCss } from './css';
+
+export const cva = (config) => {
+  const defaults = (c) => ({ base: {}, variants: {}, defaultVariants: {}, compoundVariants: [], ...c })
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
+
+  const getVariantProps = (props) => withDefaults(defaultVariants, props)
+
+  const resolve = (props = {}) => {
+    const computed = getVariantProps(props)
+    const styles = [base]
+    for (const key in computed) {
+      const value = computed[key]
+      if (variants[key]?.[value]) styles.push(variants[key][value])
+    }
+    styles.push(getCompoundVariantCss(compoundVariants, computed))
+    return mergeCss(...styles)
+  }
+
+  const variantKeys = Object.keys(variants)
+  const variantMap = toVariantMap(variants)
+  const resolveMemo = memo(resolve)
+
+  const merge = (other) => {
+    const override = defaults(other.config)
+    const keys = uniq(other.variantKeys, variantKeys)
+    return cva({
+      base: mergeCss(base, override.base),
+      variants: Object.fromEntries(keys.map((key) => [key, mergeCss(variants[key], override.variants[key])])),
+      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+      compoundVariants: [...compoundVariants, ...override.compoundVariants],
+    })
+  }
+
+  return Object.assign(memo(function cvaFn(props) {
+    return css(resolve(props))
+  }), {
+    __cva__: true,
+    variantMap,
+    variantKeys,
+    raw: resolve,
+    __memoizedRaw__: resolveMemo,
+    config,
+    merge,
+    splitVariantProps(props) {
+      return splitProps(props, variantKeys)
+    },
+    getVariantProps,
+  })
+}

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

@@ -0,0 +1,6 @@
+type Argument = string | boolean | null | undefined;
+
+/**
+ * Conditionally join classNames into a single string
+ */
+export declare function cx(...args: Argument[]): string;

package/styled-system/css/cx.js

@@ -0,0 +1,16 @@
+/**
+ * Conditionally join classNames into a single string
+ */
+export function cx(...args) {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}

package/styled-system/css/first-that-works.d.ts

@@ -0,0 +1,22 @@
+export type FirstThatWorksMember = string | number;
+
+export type FirstThatWorksMemberOf<T> = Extract<T, FirstThatWorksMember>;
+
+export type FirstThatWorksFn = <
+  T = FirstThatWorksMember,
+  A extends FirstThatWorksMemberOf<T> = FirstThatWorksMemberOf<T>,
+  B extends FirstThatWorksMemberOf<T> = FirstThatWorksMemberOf<T>,
+  C extends FirstThatWorksMemberOf<T> = never,
+  D extends FirstThatWorksMemberOf<T> = never,
+  E extends FirstThatWorksMemberOf<T> = never,
+  F extends FirstThatWorksMemberOf<T> = never,
+>(
+  first: A,
+  second: B,
+  third?: C,
+  fourth?: D,
+  fifth?: E,
+  sixth?: F,
+) => T extends FirstThatWorksMember ? A | B | C | D | E | F : FirstThatWorksMemberOf<T>;
+
+export declare const firstThatWorks: FirstThatWorksFn;

package/styled-system/css/first-that-works.js

@@ -0,0 +1 @@
+export const firstThatWorks = (...values) => `firstThatWorks(${values.join(', ')})`

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

@@ -0,0 +1,8 @@
+export * from './css';
+export * from './cva';
+export * from './cx';
+export * from './sva';
+export * from './view-transition';
+export * from './position-try';
+export * from './keyframes';
+export * from './first-that-works';