@wallarm-org/design-system 0.67.2 → 0.68.0

package/dist/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -1,3 +1,10 @@
 import type { FC } from 'react';
-import type { AnimatedBackgroundProps } from './module';
+import { type BlurBackgroundProps } from './blur';
+import { type PixelBackgroundProps } from './pixel';
+type AnimatedBackgroundProps = ({
+    variant?: 'pixel';
+} & PixelBackgroundProps) | ({
+    variant?: 'blur';
+} & BlurBackgroundProps);
+export type { AnimatedBackgroundProps };
 export declare const AnimatedBackground: FC<AnimatedBackgroundProps>;

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -1,121 +1,12 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { cn } from "../../utils/cn.js";
-import { createSweepEngine, resolveOptions, useGame } from "./module/index.js";
-const AnimatedBackground = (props)=>{
-    const { ref, texture, paused, game = false, excludeCardSize, className, children, ...rest } = props;
-    const canvasRef = useRef(null);
-    const engineRef = useRef(null);
-    const reducedMotionRef = useRef(null);
-    const options = resolveOptions(props);
-    const optionsRef = useRef(options);
-    const pausedRef = useRef(paused);
-    useEffect(()=>{
-        optionsRef.current = options;
-        pausedRef.current = paused;
-    });
-    const isHalftone = (texture ?? 'halftone') === 'halftone';
-    const { gameActive, onPointerDown, hudElement, onEngineCreated, onEngineDestroyed } = useGame({
-        game,
-        isHalftone,
-        excludeCardSize,
-        canvasRef
-    });
-    useEffect(()=>{
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const engine = createSweepEngine(canvas, optionsRef.current);
-        engineRef.current = engine;
-        onEngineCreated(engine);
-        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
-        reducedMotionRef.current = reduced;
-        const apply = ()=>{
-            if (reduced.matches || pausedRef.current) {
-                engine.stop();
-                engine.renderStatic();
-            } else engine.start();
-        };
-        apply();
-        reduced.addEventListener('change', apply);
-        let frame = 0;
-        const ro = new ResizeObserver(()=>{
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(()=>engine.resize());
-        });
-        ro.observe(canvas);
-        const themeObserver = new MutationObserver(()=>engine.setOptions({}));
-        themeObserver.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: [
-                'data-theme',
-                'class'
-            ]
-        });
-        return ()=>{
-            reduced.removeEventListener('change', apply);
-            reducedMotionRef.current = null;
-            ro.disconnect();
-            themeObserver.disconnect();
-            cancelAnimationFrame(frame);
-            engine.stop();
-            engineRef.current = null;
-            onEngineDestroyed();
-        };
-    }, [
-        onEngineCreated,
-        onEngineDestroyed
-    ]);
-    const syncKey = `${JSON.stringify(options)}|${paused}`;
-    useEffect(()=>{
-        const engine = engineRef.current;
-        if (!engine) return;
-        engine.setOptions(optionsRef.current);
-        const reduced = reducedMotionRef.current;
-        if (reduced?.matches || pausedRef.current) {
-            engine.stop();
-            engine.renderStatic();
-        } else engine.start();
-    }, [
-        syncKey
-    ]);
-    if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("canvas", {
-                "data-slot": "animated-background",
-                ...rest,
-                ref: (node)=>{
-                    canvasRef.current = node;
-                    if ('function' == typeof ref) ref(node);
-                    else if (ref) ref.current = node;
-                },
-                "aria-hidden": "true",
-                className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
-                onPointerDown: onPointerDown
-            }),
-            hudElement
-        ]
-    });
-    return /*#__PURE__*/ jsxs("div", {
-        "data-slot": "animated-background",
-        ...rest,
-        ref: ref,
-        className: cn('relative h-full w-full', className),
-        children: [
-            /*#__PURE__*/ jsx("canvas", {
-                ref: canvasRef,
-                "aria-hidden": "true",
-                className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
-                onPointerDown: onPointerDown
-            }),
-            hudElement,
-            /*#__PURE__*/ jsx("div", {
-                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "pointer-events-auto",
-                    children: children
-                })
-            })
-        ]
+import { jsx } from "react/jsx-runtime";
+import { BlurBackground } from "./blur/index.js";
+import { PixelBackground } from "./pixel/index.js";
+const AnimatedBackground = ({ variant = 'pixel', ...rest })=>{
+    if ('blur' === variant) return /*#__PURE__*/ jsx(BlurBackground, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(PixelBackground, {
+        ...rest
     });
 };
 AnimatedBackground.displayName = 'AnimatedBackground';

package/dist/components/AnimatedBackground/blur/BlurBackground.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface BlurBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const BlurBackground: FC<BlurBackgroundProps>;

package/dist/components/AnimatedBackground/blur/BlurBackground.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+const BLOBS = [
+    {
+        name: 'b1-lavender-top',
+        style: {
+            width: '66%',
+            height: '52%',
+            left: '-8%',
+            top: '-12%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #cdccda 0%, rgba(205,204,218,0) 68%)',
+        anim: 'lg-f1',
+        base: 37
+    },
+    {
+        name: 'b2-cream-right',
+        style: {
+            width: '56%',
+            height: '78%',
+            right: '-13%',
+            top: '6%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f6dba6 0%, rgba(246,219,166,0) 66%)',
+        anim: 'lg-f2',
+        base: 29
+    },
+    {
+        name: 'b3-peach-halo',
+        style: {
+            width: '78%',
+            height: '64%',
+            left: '10%',
+            bottom: '-20%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #ffab70 0%, rgba(255,171,112,0) 68%)',
+        anim: 'lg-f4',
+        base: 31
+    },
+    {
+        name: 'b4-orange-core',
+        style: {
+            width: '60%',
+            height: '48%',
+            left: '22%',
+            bottom: '-10%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #ffb07e 0%, #ffc8a2 33%, rgba(255,200,162,0) 70%)',
+        anim: 'lg-f3',
+        base: 23
+    },
+    {
+        name: 'b5-cream-lower',
+        style: {
+            width: '60%',
+            height: '56%',
+            right: '-11%',
+            bottom: '0%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f9e2b4 0%, rgba(249,226,180,0) 66%)',
+        anim: 'lg-f5',
+        base: 41
+    },
+    {
+        name: 'b6-offwhite-center',
+        style: {
+            width: '76%',
+            height: '62%',
+            left: '13%',
+            top: '24%'
+        },
+        background: 'radial-gradient(circle at 50% 50%, #f3eae0 0%, rgba(243,234,224,0) 70%)',
+        anim: 'lg-f6',
+        base: 43
+    }
+];
+const BLUR = 90;
+const SPEED = 2;
+const BlurBackground = ({ ref, className, style, children, ...rest })=>{
+    const meshContent = /*#__PURE__*/ jsx("div", {
+        className: "lg-mesh",
+        style: {
+            '--lg-blur': BLUR
+        },
+        children: BLOBS.map((b)=>/*#__PURE__*/ jsx("div", {
+                className: "lg-blob",
+                style: {
+                    ...b.style,
+                    background: b.background,
+                    animationName: b.anim,
+                    animationDuration: `${b.base / SPEED}s`,
+                    animationTimingFunction: 'ease-in-out',
+                    animationIterationCount: 'infinite'
+                }
+            }, b.name))
+    });
+    if (null == children) return /*#__PURE__*/ jsx("div", {
+        "data-slot": "blur-background",
+        ...rest,
+        ref: ref,
+        className: cn('lg-frame', className),
+        style: style,
+        "aria-hidden": "true",
+        children: meshContent
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "blur-background",
+        ...rest,
+        ref: ref,
+        className: cn('lg-frame relative', className),
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                className: "absolute inset-0 pointer-events-none",
+                children: meshContent
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+BlurBackground.displayName = 'BlurBackground';
+export { BlurBackground };

package/dist/components/AnimatedBackground/blur/index.d.ts

@@ -0,0 +1 @@
+export { BlurBackground, type BlurBackgroundProps } from './BlurBackground';

package/dist/components/AnimatedBackground/blur/index.js

@@ -0,0 +1,2 @@
+import { BlurBackground } from "./BlurBackground.js";
+export { BlurBackground };

package/dist/components/AnimatedBackground/index.d.ts

@@ -1,2 +1,3 @@
-export { AnimatedBackground } from './AnimatedBackground';
-export type { AnimatedBackgroundProps } from './module';
+export { AnimatedBackground, type AnimatedBackgroundProps } from './AnimatedBackground';
+export { BlurBackground, type BlurBackgroundProps } from './blur/BlurBackground';
+export { PixelBackground, type PixelBackgroundProps } from './pixel/PixelBackground';

package/dist/components/AnimatedBackground/index.js

@@ -1,2 +1,4 @@
 import { AnimatedBackground } from "./AnimatedBackground.js";
-export { AnimatedBackground };
+import { BlurBackground } from "./blur/BlurBackground.js";
+import { PixelBackground } from "./pixel/PixelBackground.js";
+export { AnimatedBackground, BlurBackground, PixelBackground };

package/dist/components/AnimatedBackground/{GameHud.js → pixel/GameHud.js}

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../../utils/cn.js";
 const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain, soundOn })=>{
     const showCounter = caught > 0;
     return /*#__PURE__*/ jsxs(Fragment, {

package/dist/components/AnimatedBackground/pixel/PixelBackground.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface PixelBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    game?: boolean;
+    excludeCardSize?: {
+        width: number;
+        height: number;
+    };
+}
+export declare const PixelBackground: FC<PixelBackgroundProps>;

package/dist/components/AnimatedBackground/pixel/PixelBackground.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../../utils/cn.js";
+import { createSweepEngine, resolveOptions, useGame } from "./module/index.js";
+const ENGINE_OPTIONS = resolveOptions();
+const PixelBackground = (props)=>{
+    const { ref, game = false, excludeCardSize, className, children, ...rest } = props;
+    const canvasRef = useRef(null);
+    const engineRef = useRef(null);
+    const reducedMotionRef = useRef(null);
+    const { gameActive, onPointerDown, hudElement, onEngineCreated, onEngineDestroyed } = useGame({
+        game,
+        isHalftone: true,
+        excludeCardSize,
+        canvasRef
+    });
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const engine = createSweepEngine(canvas, ENGINE_OPTIONS);
+        engineRef.current = engine;
+        onEngineCreated(engine);
+        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+        reducedMotionRef.current = reduced;
+        const apply = ()=>{
+            if (reduced.matches) {
+                engine.stop();
+                engine.renderStatic();
+            } else engine.start();
+        };
+        apply();
+        reduced.addEventListener('change', apply);
+        let frame = 0;
+        const ro = new ResizeObserver(()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(()=>engine.resize());
+        });
+        ro.observe(canvas);
+        const themeObserver = new MutationObserver(()=>engine.setOptions({}));
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                'data-theme',
+                'class'
+            ]
+        });
+        return ()=>{
+            reduced.removeEventListener('change', apply);
+            reducedMotionRef.current = null;
+            ro.disconnect();
+            themeObserver.disconnect();
+            cancelAnimationFrame(frame);
+            engine.stop();
+            engineRef.current = null;
+            onEngineDestroyed();
+        };
+    }, [
+        onEngineCreated,
+        onEngineDestroyed
+    ]);
+    if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                "data-slot": "pixel-background",
+                ...rest,
+                ref: (node)=>{
+                    canvasRef.current = node;
+                    if ('function' == typeof ref) ref(node);
+                    else if (ref) ref.current = node;
+                },
+                "aria-hidden": "true",
+                className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
+                onPointerDown: onPointerDown
+            }),
+            hudElement
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "pixel-background",
+        ...rest,
+        ref: ref,
+        className: cn('relative h-full w-full', className),
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                ref: canvasRef,
+                "aria-hidden": "true",
+                className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
+                onPointerDown: onPointerDown
+            }),
+            hudElement,
+            /*#__PURE__*/ jsx("div", {
+                className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "pointer-events-auto",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+PixelBackground.displayName = 'PixelBackground';
+export { PixelBackground };

package/dist/components/AnimatedBackground/pixel/index.d.ts

@@ -0,0 +1 @@
+export { PixelBackground, type PixelBackgroundProps } from './PixelBackground';

package/dist/components/AnimatedBackground/pixel/index.js

@@ -0,0 +1,2 @@
+import { PixelBackground } from "./PixelBackground.js";
+export { PixelBackground };

package/dist/components/AnimatedBackground/{module → pixel/module}/game-logic.js

@@ -59,7 +59,7 @@ function createGameLogic(host) {
     let roundSpawned = 0;
     let roundDone = false;
     let lastSpawn = -1 / 0;
-    let soundOn = false;
+    let soundOn = true;
     let plugins = {};
     let statsCb = null;
     let exclusionBox = null;

package/dist/components/AnimatedBackground/{module → pixel/module}/index.d.ts

@@ -1,5 +1,5 @@
 export { createSweepEngine, type SweepEngine } from './engine';
 export { resolveOptions } from './lib';
-export type { AnimatedBackgroundProps, EngineOptions, GameStats, Texture } from './types';
+export type { EngineOptions, GameStats } from './types';
 export { useGame } from './useGame';
 export { useGameKeyboard } from './useGameKeyboard';

package/dist/components/AnimatedBackground/pixel/module/lib.d.ts

@@ -0,0 +1,2 @@
+import type { EngineOptions } from './types';
+export declare const resolveOptions: () => EngineOptions;

package/dist/components/AnimatedBackground/pixel/module/lib.js

@@ -0,0 +1,16 @@
+const resolveOptions = ()=>({
+        texture: 'halftone',
+        spacing: 16,
+        sweepPeriod: 12.5,
+        bloomRadius: 80,
+        anomalyInterval: 1.4,
+        intensity: 0.9,
+        bloomAlpha: 0.2,
+        maxDotSize: 20,
+        tilt: 16,
+        dotColorVar: '--animated-bg-dot',
+        accentColorVar: '--animated-bg-accent-dot',
+        baseColorVar: '--color-component-app-shell-bg',
+        caughtColorVar: '--animated-bg-caught-dot'
+    });
+export { resolveOptions };

package/dist/components/AnimatedBackground/pixel/module/types.d.ts

@@ -0,0 +1,38 @@
+export type Texture = 'clean' | 'halftone';
+export interface EngineOptions {
+    texture: Texture;
+    /** Grid cell size in px. */
+    spacing: number;
+    /** Seconds for one L→R sweep pass. */
+    sweepPeriod: number;
+    /** How far from the scan line (px) dots react. */
+    bloomRadius: number;
+    /** Minimum seconds between accent events. */
+    anomalyInterval: number;
+    /** Global opacity multiplier (0–1). */
+    intensity: number;
+    /** Peak alpha of bloomed dots before `intensity`. */
+    bloomAlpha: number;
+    /** Halftone only: cap on a bloomed pixel's edge length (px). */
+    maxDotSize: number;
+    /** Sweep-line tilt in degrees (0 = vertical). */
+    tilt: number;
+    /** CSS custom-property names resolved at runtime. */
+    dotColorVar: string;
+    accentColorVar: string;
+    baseColorVar: string;
+    /** CSS custom-property name for the "caught" (neutralised) color. */
+    caughtColorVar: string;
+}
+export interface GameStats {
+    /** Lifetime catches — drives the arming gate (≥ 5); reset only by exitGame. */
+    kills: number;
+    /** Threats stopped THIS round (HIT numerator). */
+    stopped: number;
+    /** Threats that timed out unshot THIS round. */
+    escaped: number;
+    /** Attacks spawned this round (caps at ROUND_ATTACKS). */
+    spawned: number;
+    /** Round complete — full wave spawned AND field cleared. */
+    done: boolean;
+}

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { DatePicker } from "@ark-ui/react";
+import { CalendarDateTime } from "@internationalized/date";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
@@ -12,7 +13,16 @@ const toArkDateValue = (date)=>{
     if (!date) return;
     return date;
 };
-const SingleDateInputInner = ({ api, readonly })=>{
+const withTime = (value, time)=>{
+    if (!value) return null;
+    if ('hour' in value) return value;
+    return new CalendarDateTime(value.year, value.month, value.day, time.hour, time.minute);
+};
+const SingleDateInputInner = ({ api, readonly, showTime })=>{
+    const [time, setTime] = useState({
+        hour: 0,
+        minute: 0
+    });
     const handleChange = useCallback((newValue)=>{
         const arkValue = toArkDateValue(newValue);
         if (arkValue) api.setValue([
@@ -22,11 +32,26 @@ const SingleDateInputInner = ({ api, readonly })=>{
     }, [
         api
     ]);
+    const handleDateTimeChange = useCallback((newValue)=>{
+        if (newValue && 'hour' in newValue) setTime({
+            hour: newValue.hour,
+            minute: newValue.minute
+        });
+        handleChange(newValue);
+    }, [
+        handleChange
+    ]);
     const inputValue = toReactAriaDateValue(api.value[0]);
     return /*#__PURE__*/ jsx("div", {
         className: "flex flex-1",
         onKeyDown: (e)=>e.stopPropagation(),
-        children: /*#__PURE__*/ jsx(DateInput, {
+        children: showTime ? /*#__PURE__*/ jsx(DateInput, {
+            value: withTime(inputValue, time),
+            onChange: handleDateTimeChange,
+            readOnly: readonly,
+            granularity: "minute",
+            showTimeDropdown: true
+        }) : /*#__PURE__*/ jsx(DateInput, {
             value: inputValue,
             onChange: handleChange,
             readOnly: readonly,
@@ -96,7 +121,7 @@ const RangeDateInputInner = ({ api, readonly })=>{
     });
 };
 const CalendarInputHeader = ({ className })=>{
-    const { isRange, readonly } = useCalendarContext();
+    const { isRange, readonly, showTime } = useCalendarContext();
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-1 items-center', 'pt-20 pb-4 px-20', className),
         children: /*#__PURE__*/ jsx(DatePicker.Context, {
@@ -105,7 +130,8 @@ const CalendarInputHeader = ({ className })=>{
                     readonly: readonly
                 }) : /*#__PURE__*/ jsx(SingleDateInputInner, {
                     api: api,
-                    readonly: readonly
+                    readonly: readonly,
+                    showTime: showTime
                 })
         })
     });

package/dist/components/FilterInput/lib/constants.js

@@ -28,8 +28,8 @@ const OPERATOR_SYMBOLS = {
     not_like: '!~',
     in: 'IN',
     not_in: 'NOT IN',
-    is_null: '!= null',
-    is_not_null: '= null',
+    is_null: '= null',
+    is_not_null: '!= null',
     between: '<>'
 };
 const OPERATOR_LABELS = {
@@ -43,8 +43,8 @@ const OPERATOR_LABELS = {
     not_like: 'not like',
     in: 'is any of',
     not_in: 'is not any of',
-    is_null: 'is set',
-    is_not_null: 'is not set',
+    is_null: 'is not set',
+    is_not_null: 'is set',
     between: 'between'
 };
 const OPERATOR_LABELS_BY_TYPE = {
@@ -54,8 +54,8 @@ const OPERATOR_LABELS_BY_TYPE = {
         in: 'in',
         like: 'like',
         not_like: 'not like',
-        is_null: 'is set',
-        is_not_null: 'is not set'
+        is_null: 'is not set',
+        is_not_null: 'is set'
     },
     integer: {
         '=': 'is',
@@ -86,14 +86,14 @@ const OPERATOR_LABELS_BY_TYPE = {
     boolean: {
         '=': 'is true',
         '!=': 'is false',
-        is_null: 'is set',
-        is_not_null: 'is not set'
+        is_null: 'is not set',
+        is_not_null: 'is set'
     },
     enum: {
         in: 'is any of',
         not_in: 'is not any of',
-        is_null: 'is set',
-        is_not_null: 'is not set'
+        is_null: 'is not set',
+        is_not_null: 'is set'
     }
 };
 const OPERATORS_BY_TYPE = {

package/dist/components/InputGroup/InputGroup.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const inputGroupVariants = cva(cn('group/input-group', 'w-full flex items-center border rounded-8 bg-component-input-bg relative', 'has-[>textarea]:h-auto', '**:data-[slot=input]:flex-1', '**:data-[slot=input]:rounded-none', '**:data-[slot=input]:border-0', '**:data-[slot=input]:bg-transparent', '**:data-[slot=input]:shadow-none', '**:data-[slot=input]:focus-visible:ring-0', '**:data-[slot=input]:focus-within:ring-0', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true]):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:border-border-strong-primary', 'focus-within:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:*:data-[slot=input]:hover:ring-0', 'has-[[data-slot=input]:disabled]:opacity-50', 'has-[[data-slot=input][aria-disabled=true]]:opacity-50', 'has-[[data-slot=input]:disabled]:cursor-not-allowed', 'has-[[data-slot=input][aria-disabled=true]]:cursor-not-allowed'), {
+const inputGroupVariants = cva(cn('group/input-group', 'w-full flex items-center border rounded-8 bg-component-input-bg relative', '**:data-[slot=input]:flex-1', '**:data-[slot=input]:rounded-none', '**:data-[slot=input]:border-0', '**:data-[slot=input]:bg-transparent', '**:data-[slot=input]:shadow-none', '**:data-[slot=input]:focus-visible:ring-0', '**:data-[slot=input]:focus-within:ring-0', 'has-[textarea]:flex-col', 'has-[textarea]:h-auto', 'has-[textarea]:items-stretch', '[&_textarea]:border-0', '[&_textarea]:bg-transparent', '[&_textarea]:shadow-none', '[&_textarea]:rounded-none', '[&_textarea]:ring-0', '[&_textarea:focus-visible]:ring-0', '[&_textarea]:outline-none', '**:data-[slot=textarea]:flex-1', '**:data-[slot=textarea]:w-full', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true]):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:border-border-strong-primary', 'focus-within:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:border-border-strong-primary', 'has-[textarea:not(:disabled):focus-visible]:ring-3', 'has-[textarea:not(:disabled):focus-visible]:ring-focus-primary', 'has-[textarea:not(:disabled):focus-visible]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:*:data-[slot=input]:hover:ring-0', 'has-[textarea[aria-invalid=true]]:border-border-strong-danger', 'has-[textarea[aria-invalid=true]:not(:disabled)]:hover:ring-3', 'has-[textarea[aria-invalid=true]:not(:disabled)]:hover:ring-focus-destructive-hover', 'has-[textarea:not(:disabled):focus-visible]:has-[textarea[aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot=input]:disabled]:opacity-50', 'has-[[data-slot=input][aria-disabled=true]]:opacity-50', 'has-[[data-slot=input]:disabled]:cursor-not-allowed', 'has-[[data-slot=input][aria-disabled=true]]:cursor-not-allowed', 'has-[textarea:disabled]:opacity-50', 'has-[textarea:disabled]:cursor-not-allowed'), {
     variants: {
         size: {
             default: 'h-36',