@luxonis/depthai-pipeline-lib 1.4.8

package/dist/src/components/Node.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { NodeProps } from '@xyflow/react';
+import type { ParsedNode } from '../services/pipeline.js';
+export type PipelineNodeProps = NodeProps<ParsedNode>;
+export declare const PipelineNode: React.FC<PipelineNodeProps>;

package/dist/src/components/Node.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from '@xyflow/react';
+import { clsx } from '@luxonis/common-fe-components/helpers';
+import { Button, Flex, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
+import { css } from '../styled-system/css/css.mjs';
+const DOCS_BASE_URL = `https://docs.luxonis.com/software/depthai-components/nodes/`;
+const NodeHandles = props => {
+    const { handles, type } = props;
+    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name }) => (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
+                        width: 'custom.handle.dot!',
+                        height: 'custom.handle.dot!',
+                        backgroundColor: blocking ? 'dark.warning!' : 'dark.success!',
+                        border: 'none!',
+                    }) }), _jsx(SubLabel, { className: css({
+                        ...(type === 'input' //
+                            ? { 'marginLeft': 'xs' }
+                            : { 'marginRight': 'xs' }),
+                    }), text: type === 'input' ? `[${queueSize}] ${name}` : name, break: "none" })] }, id))) }));
+};
+export const PipelineNode = props => {
+    const { data: node } = props;
+    return (_jsxs(Flex, { direction: "column", className: css({
+            'minWidth': 'container.smaller.xxs',
+            'border': 'base',
+            'rounded': 'common',
+            'backgroundColor': 'white',
+            '&:hover .node-help-icon': {
+                color: 'text.normal',
+            },
+        }), children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: "xs", className: css({
+                    width: 'full',
+                    backgroundColor: 'light.gray',
+                    roundedTop: 'common',
+                }), children: [_jsx("span", { className: css({
+                            width: 'icon.sm',
+                            height: 'icon.sm',
+                        }) }), _jsx(Label, { text: node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(DOCS_BASE_URL, '_blank'), className: clsx('node-help-icon', css({
+                            width: 'auto',
+                            height: 'auto',
+                            right: 'xs',
+                        })) })] }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] })] }));
+};

package/dist/src/components/PipelineCanvas.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FlexProps } from '@luxonis/common-fe-components';
+import type { Pipeline } from '../services/pipeline.js';
+export type PipelineCanvasProps = FlexProps & {
+    pipeline: Pipeline | null;
+};
+export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, } from '@xyflow/react';
+import { Flex, Header } from '@luxonis/common-fe-components';
+import Dagre from '@dagrejs/dagre';
+import { PipelineNode } from './Node.js';
+const getLayoutedElements = (nodes, edges) => {
+    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    graph.setGraph({ rankdir: 'LR' });
+    for (const edge of edges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+    for (const node of nodes) {
+        graph.setNode(node.id, {
+            ...node,
+            width: node.measured?.width ?? 200,
+            height: node.measured?.height ?? 100,
+        });
+    }
+    Dagre.layout(graph);
+    return {
+        nodes: nodes.map((node) => {
+            const position = graph.node(node.id);
+            // Shift Dagre anchor (center) to React Flow anchor (top left)
+            const x = position.x - (node.measured?.width ?? 200) / 2;
+            const y = position.y - (node.measured?.height ?? 100) / 2;
+            return { ...node, position: { x, y } };
+        }),
+        edges,
+    };
+};
+const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
+    const { fitView, setViewport, getViewport } = useReactFlow();
+    const autoArrangeRef = React.useRef(true);
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges] = useEdgesState([]);
+    React.useEffect(() => {
+        if (!autoArrangeRef.current) {
+            return;
+        }
+        const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
+        setNodes([...layouted.nodes]);
+        setEdges([...layouted.edges]);
+        window.requestAnimationFrame(async () => {
+            await fitView({ minZoom: 1 });
+            const viewport = getViewport();
+            await setViewport({
+                x: 50,
+                y: viewport.y,
+                zoom: 1,
+            });
+        });
+    }, [fitView, getViewport, pipeline?.edges, pipeline?.nodes, setEdges, setNodes, setViewport]);
+    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode } }))] }));
+};
+export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export { parsePipeline } from './services/pipeline.js';
+export type { Pipeline, RawPipelinePayload } from './services/pipeline.js';
+export { PipelineCanvas } from './components/PipelineCanvas.js';
+export type { PipelineCanvasProps } from './components/PipelineCanvas.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { parsePipeline } from './services/pipeline.js';
+export { PipelineCanvas } from './components/PipelineCanvas.js';

package/dist/src/services/pipeline.d.ts

@@ -0,0 +1,51 @@
+import type { Edge, Node } from '@xyflow/react';
+export type RawPipelineNodeIO = [
+    [
+        string,
+        string
+    ],
+    {
+        id: number;
+        name: string;
+        type: 0 | 3;
+        blocking: boolean;
+        queueSize: number;
+    }
+];
+export type RawPipelineNode = {
+    id: number;
+    ioInfo: RawPipelineNodeIO[];
+    name: string;
+};
+export type RawPipelineEdge = {
+    node1Id: number;
+    node1Output: string;
+    node2Id: number;
+    node2Input: string;
+};
+export type RawPipelinePayload = {
+    pipeline: RawPipeline;
+};
+export type RawPipeline = {
+    connections: RawPipelineEdge[];
+    nodes: [number, RawPipelineNode][];
+};
+export type Pipeline = {
+    nodes: ParsedNode[];
+    edges: Edge[];
+};
+export type ParsedHandle = {
+    id: number;
+    name: string;
+    type: 'input' | 'output';
+    blocking: boolean;
+    queueSize: number;
+};
+export type ParsedNode = Node<{
+    name: string;
+    handles: {
+        input: ParsedHandle[];
+        output: ParsedHandle[];
+    };
+}>;
+export declare function parsePipeline(rawPayload: RawPipelinePayload): Pipeline;

package/dist/src/services/pipeline.js

@@ -0,0 +1,40 @@
+function parseHandles(handles) {
+    const parsedHandles = {
+        input: [],
+        output: [],
+    };
+    for (const [_, handle] of handles) {
+        const type = handle.type === 3 ? 'input' : 'output';
+        const parsed = {
+            id: handle.id,
+            name: handle.name,
+            type,
+            blocking: handle.blocking,
+            queueSize: handle.queueSize,
+        };
+        parsedHandles[type].push(parsed);
+    }
+    return parsedHandles;
+}
+export function parsePipeline(rawPayload) {
+    const { pipeline } = rawPayload;
+    const nodes = pipeline.nodes
+        .filter(([_, node]) => pipeline.connections.some(connection => connection.node1Id === node.id || connection.node2Id === node.id))
+        .map(([id, node]) => ({
+        type: 'generic',
+        id: id.toString(),
+        position: { x: 0, y: 0 },
+        data: {
+            name: node.name,
+            handles: parseHandles(node.ioInfo),
+        },
+    })) ?? [];
+    const edges = pipeline.connections.map(connection => ({
+        id: `${connection.node1Id}-${connection.node2Id}`,
+        source: connection.node1Id.toString(),
+        target: connection.node2Id.toString(),
+        sourceHandle: connection.node1Output,
+        targetHandle: connection.node2Input,
+    })) ?? [];
+    return { nodes, edges };
+}

package/dist/src/styled-system/chunks/src__components__Node.css

@@ -0,0 +1,195 @@
+@layer utilities {
+  .bg_dark\.warning\! {
+    background-color: var(--colors-dark-warning) !important
+    }
+
+  .bg_dark\.success\! {
+    background-color: var(--colors-dark-success) !important
+    }
+
+  .w_custom\.handle\.dot\! {
+    width: var(--sizes-custom-handle-dot) !important
+    }
+
+  .h_custom\.handle\.dot\! {
+    height: var(--sizes-custom-handle-dot) !important
+    }
+
+  .border_none\! {
+    border: var(--borders-none) !important
+    }
+
+  .ml_xs {
+    margin-left: var(--spacing-xs)
+    }
+
+  .mr_xs {
+    margin-right: var(--spacing-xs)
+    }
+
+  .min-w_container\.smaller\.xxs {
+    min-width: var(--sizes-container-smaller-xxs)
+    }
+
+  .border_base {
+    border: var(--borders-base)
+    }
+
+  .rounded_common {
+    border-radius: var(--radii-common)
+    }
+
+  .bg_white {
+    background-color: var(--colors-white)
+    }
+
+  .w_full {
+    width: var(--sizes-full)
+    }
+
+  .bg_light\.gray {
+    background-color: var(--colors-light-gray)
+    }
+
+  .rounded-t_common {
+    border-top-left-radius: var(--radii-common);
+    border-top-right-radius: var(--radii-common)
+    }
+
+  .w_icon\.sm {
+    width: var(--sizes-icon-sm)
+    }
+
+  .h_icon\.sm {
+    height: var(--sizes-icon-sm)
+    }
+
+  .w_auto {
+    width: auto
+    }
+
+  .h_auto {
+    height: auto
+    }
+
+  .right_xs {
+    right: var(--spacing-xs)
+    }
+
+  .text_unset {
+    color: unset
+    }
+
+  .text_transparent {
+    color: var(--colors-transparent)
+    }
+
+  .items_start {
+    align-items: start
+    }
+
+  .flex_row {
+    flex-direction: row
+    }
+
+  .flex_row-reverse {
+    flex-direction: row-reverse
+    }
+
+  .items_end {
+    align-items: end
+    }
+
+  .pos_relative {
+    position: relative
+    }
+
+  .flex_column {
+    flex-direction: column
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_space-between {
+    justify-content: space-between
+    }
+
+  .gap_xs {
+    gap: var(--spacing-xs)
+    }
+
+  .d_flex {
+    display: flex
+    }
+
+  .gap_sm {
+    gap: var(--spacing-sm)
+    }
+
+  .py_xs {
+    padding-block: var(--spacing-xs)
+    }
+    .\[\&\:hover_\.node-help-icon\]\:text_text\.normal:hover .node-help-icon {
+      color: var(--colors-text-normal)
+        }
+}
+
+@layer recipes {
+    .button--variant_ghost:is(:hover, [data-hover]) {
+      background: var(--colors-accent);
+      color: var(--colors-accent-foreground)
+        }
+
+  .button--size_default {
+    height: var(--sizes-10);
+    padding-inline: var(--spacing-4);
+    padding-block: var(--spacing-2)
+    }
+
+  @layer _base {
+    .label {
+      font-size: 0.875rem;
+      line-height: var(--line-heights-none);
+      font-weight: var(--font-weights-medium);
+        }
+      .peer:is(:disabled, [disabled], [data-disabled]) ~ .label {
+        cursor: not-allowed;
+        opacity: 0.7
+            }
+    }
+
+  @layer _base {
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radii-md);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      font-weight: var(--font-weights-medium);
+      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);
+      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+      transition-duration: var(--transition-duration, 150ms);
+      cursor: pointer;
+      --shadow-panda-ring-offset-color: var(--colors-background);
+      gap: var(--spacing-2);
+        }
+      .button:is(:disabled, [disabled], [data-disabled]) {
+        pointer-events: none;
+        opacity: 50%
+            }
+      .button:is(:focus-visible, [data-focus-visible]) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);
+        --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);
+        box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);
+        --shadow-panda-ring-color: var(--colors-ring)
+    ;
+        --shadow-panda-ring-offset-width: 2px
+    
+            }
+    }
+}

package/dist/src/styled-system/chunks/src__components__PipelineCanvas.css

@@ -0,0 +1,25 @@
+@layer utilities {
+  .d_flex {
+    display: flex
+    }
+
+  .items_center {
+    align-items: center
+    }
+
+  .justify_center {
+    justify-content: center
+    }
+
+  .h_container\.xs {
+    height: var(--sizes-container-xs)
+    }
+
+  .rounded_common {
+    border-radius: var(--radii-common)
+    }
+
+  .border_base {
+    border: var(--borders-base)
+    }
+}

package/dist/src/styled-system/css/conditions.mjs

@@ -0,0 +1,34 @@
+import { withoutSpace } from '../helpers.mjs';
+
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,2lg,2lgOnly,2lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smTo2lg,smToXl,smTo2xl,mdToLg,mdTo2lg,mdToXl,mdTo2xl,lgTo2lg,lgToXl,lgTo2xl,2lgToXl,2lgTo2xl,xlTo2xl,base"
+const conditions = new Set(conditionsStr.split(','))
+
+export function isCondition(value){
+  return conditions.has(value) || /^@|&|&$/.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/src/styled-system/css/css.d.mts

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

package/dist/src/styled-system/css/css.mjs

@@ -0,0 +1,44 @@
+import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
+import { sortConditions, finalizeConditions } from './conditions.mjs';
+
+const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking/1,lineHeight:leading/1,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop_blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate_x/x,translateY:translate_y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,animateIn:animate_in,animateOut:animate_out,fadeIn:animate_fade_in,fadeOut:animate_fade_out,zoomIn:animate_zoom_in,zoomOut:animate_zoom_out,spinIn:animate_spin_in,spinOut:animate_spin_out,slideInFromTop:animate_slide_in_from_top,slideInFromBottom:animate_slide_in_from_bottom,slideInFromLeft:animate_slide_in_from_left,slideInFromRight:animate_slide_in_from_right,slideOutToTop:animate_slide_out_to_top,slideOutToBottom:animate_slide_out_to_bottom,slideOutToLeft:animate_slide_out_to_left,slideOutToRight:animate_slide_out_to_right,backgroundAlpha:background-alpha/bga,gradientFromAlpha:from-alpha,gradientToAlpha:to-alpha,borderAlpha:border_color_alpha/bca,container:container,focusRingWidth:focus-ring-width,focusRingColor:focus-ring-color,focusRingOffsetWidth:focus-ring-offset-width,focusRingOffsetColor:focus-ring-offset-color,focusRingInset:focus-ring-inset,spaceY:space_y,spaceX:space_x,textAlpha:text_alpha/ca,textStyle:textStyle,layerStyle:layerStyle"
+
+const classNameByProp = new Map()
+const shorthands = new Map()
+utilities.split(',').forEach((utility) => {
+  const [prop, meta] = utility.split(':')
+  const [className, ...shorthandList] = meta.split('/')
+  classNameByProp.set(prop, className)
+  if (shorthandList.length) {
+    shorthandList.forEach((shorthand) => {
+      shorthands.set(shorthand === '1' ? className : shorthand, prop)
+    })
+  }
+})
+
+const resolveShorthand = (prop) => shorthands.get(prop) || prop
+
+const context = {
+  
+  conditions: {
+    shift: sortConditions,
+    finalize: finalizeConditions,
+    breakpoints: { keys: ["base","sm","md","lg","2lg","xl","2xl"] }
+  },
+  utility: {
+    
+    transform: (prop, value) => {
+              const key = resolveShorthand(prop)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
+              return { className: `${propKey}_${withoutSpace(value)}` }
+            },
+    hasShorthand: true,
+    resolveShorthand: resolveShorthand,
+  }
+}
+
+const cssFn = createCss(context)
+export const css = (...styles) => cssFn(mergeCss(...styles))
+css.raw = (...styles) => mergeCss(...styles)
+
+export const { mergeCss, assignCss } = createMergeCss(context)

package/dist/src/styled-system/css/cva.d.mts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe.d.mts';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariantProps } from '../types/recipe.d.mts';

package/dist/src/styled-system/css/cva.mjs

@@ -0,0 +1,63 @@
+import { compact, splitProps } from '../helpers.mjs';
+import { css, mergeCss } from './css.mjs';
+
+export function cva(config) {
+  const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+
+  function resolve(props = {}) {
+    const computedVariants = { ...defaultVariants, ...compact(props) }
+    let variantCss = { ...base }
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value])
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+    return mergeCss(variantCss, compoundVariantCss)
+  }
+
+  function cvaFn(props) {
+    return css(resolve(props))
+  }
+
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
+
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variantMap,
+    variantKeys,
+    raw: resolve,
+    config,
+    splitVariantProps,
+  })
+}
+
+export function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {}
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === 'css') return true
+
+      const values = Array.isArray(value) ? value : [value]
+      return values.some((value) => variantMap[key] === value)
+    })
+
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css)
+    }
+  })
+
+  return result
+}
+
+export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
+    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
+  }
+}

package/dist/src/styled-system/css/cx.d.mts

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

package/dist/src/styled-system/css/cx.mjs

@@ -0,0 +1,15 @@
+function cx() {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}
+
+export { cx }

package/dist/src/styled-system/css/index.d.mts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export * from './css.d.mts';
+export * from './cx.d.mts';
+export * from './cva.d.mts';
+export * from './sva.d.mts';

package/dist/src/styled-system/css/index.mjs

@@ -0,0 +1,4 @@
+export * from './css.mjs';
+export * from './cx.mjs';
+export * from './cva.mjs';
+export * from './sva.mjs';

package/dist/src/styled-system/css/sva.d.mts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe.d.mts';
+
+export declare const sva: SlotRecipeCreatorFn