@shipfox/react-ui 0.31.1 → 0.32.1

package/dist/components/shipql-editor/suggestions/shipql-range-facet-panel.js

@@ -5,6 +5,22 @@ import { Slider } from '../../../components/slider/index.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../utils/cn.js';
 const RECENT_MAX = 5;
+const RANGE_BRACKET_RE = /^\[(\S+)\s+TO\s+(\S+)\]$/;
+const RANGE_OP_RE = /^([<>]=?)(.+)$/;
+function formatRangeDisplay(raw, fmt) {
+    const bracketMatch = RANGE_BRACKET_RE.exec(raw);
+    if (bracketMatch) {
+        const min = bracketMatch[1];
+        const max = bracketMatch[2];
+        if (min && max) return `[${fmt(min)} TO ${fmt(max)}]`;
+    }
+    const opMatch = RANGE_OP_RE.exec(raw);
+    if (opMatch) {
+        const v = opMatch[2];
+        if (v) return `${opMatch[1]}${fmt(v)}`;
+    }
+    return raw;
+}
 const INPUT_CLASSES = 'w-40 shrink-0 rounded-4 border border-border-neutral-base-component bg-background-field-base shadow-button-neutral transition-[color,box-shadow] outline-none px-4 py-2 text-center text-xs text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
 function getRecentKey(facetName) {
     return `shipql-range-recent-${facetName}`;
@@ -37,7 +53,7 @@ function clearRecent(facetName) {
     // ignore storage errors
     }
 }
-function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
+function PresetRow({ value, displayValue, onClick, isRecent, isHighlighted, rowRef }) {
     return /*#__PURE__*/ _jsxs("button", {
         ref: rowRef,
         type: "button",
@@ -53,7 +69,7 @@ function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
             }),
             /*#__PURE__*/ _jsx("span", {
                 className: "flex-1 truncate text-sm text-foreground-neutral-subtle",
-                children: value
+                children: displayValue ?? value
             })
         ]
     });
@@ -61,6 +77,7 @@ function PresetRow({ value, onClick, isRecent, isHighlighted, rowRef }) {
 export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingRef }) {
     const absMin = Number(config.min);
     const absMax = Number(config.max);
+    const fmt = config.format ?? String;
     const [sliderValues, setSliderValues] = useState([
         absMin,
         absMax
@@ -71,19 +88,59 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
     selectedPresetIndexRef.current = selectedPresetIndex;
     const presetRowRefs = useRef([]);
     // Local string state for inputs so mid-edit typing isn't clamped
-    const [minText, setMinText] = useState(String(absMin));
-    const [maxText, setMaxText] = useState(String(absMax));
+    const [minText, setMinText] = useState(fmt(String(absMin)));
+    const [maxText, setMaxText] = useState(fmt(String(absMax)));
+    const [isEditingMin, setIsEditingMin] = useState(false);
+    const [isEditingMax, setIsEditingMax] = useState(false);
     const [lo, hi] = sliderValues;
-    // Keep input text in sync when slider moves
+    // Keep input text in sync when slider moves (only when not actively editing)
     useEffect(()=>{
-        setMinText(String(lo));
+        if (!isEditingMin) setMinText(fmt(String(lo)));
     }, [
-        lo
+        lo,
+        fmt,
+        isEditingMin
     ]);
     useEffect(()=>{
-        setMaxText(String(hi));
+        if (!isEditingMax) setMaxText(fmt(String(hi)));
     }, [
-        hi
+        hi,
+        fmt,
+        isEditingMax
+    ]);
+    const commitMin = useCallback((text)=>{
+        setIsEditingMin(false);
+        const n = Number(text);
+        if (!Number.isNaN(n)) {
+            const clamped = Math.max(absMin, Math.min(n, hi));
+            setSliderValues([
+                clamped,
+                hi
+            ]);
+        }
+        setMinText(fmt(String(lo)));
+    }, [
+        absMin,
+        hi,
+        lo,
+        fmt
+    ]);
+    const commitMax = useCallback((text)=>{
+        setIsEditingMax(false);
+        const n = Number(text);
+        if (!Number.isNaN(n)) {
+            const clamped = Math.max(lo, Math.min(n, absMax));
+            setSliderValues([
+                lo,
+                clamped
+            ]);
+        }
+        setMaxText(fmt(String(hi)));
+    }, [
+        absMax,
+        lo,
+        hi,
+        fmt
     ]);
     // Hold dropdown open for any pointer interaction inside the panel
     const panelRef = useRef(null);
@@ -109,15 +166,18 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
         isSelectingRef
     ]);
     const addLabel = useMemo(()=>{
-        if (lo === absMin && hi === absMax) return `Add ">=${lo},<=${hi}"`;
-        if (lo === absMin) return `Add "<=${hi}"`;
-        if (hi === absMax) return `Add ">=${lo}"`;
-        return `Add ">=${lo},<=${hi}"`;
+        const fmtLo = fmt(String(lo));
+        const fmtHi = fmt(String(hi));
+        if (lo === absMin && hi === absMax) return `Add ">=${fmtLo},<=${fmtHi}"`;
+        if (lo === absMin) return `Add "<=${fmtHi}"`;
+        if (hi === absMax) return `Add ">=${fmtLo}"`;
+        return `Add ">=${fmtLo},<=${fmtHi}"`;
     }, [
         lo,
         hi,
         absMin,
-        absMax
+        absMax,
+        fmt
     ]);
     const buildValue = useCallback(()=>{
         if (lo === absMin && hi === absMax) return `[${lo} TO ${hi}]`;
@@ -206,44 +266,6 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
     }, [
         selectedPresetIndex
     ]);
-    // Commit min input on blur or Enter
-    const commitMin = useCallback(()=>{
-        const v = Number(minText);
-        if (!Number.isNaN(v)) {
-            const clamped = Math.min(Math.max(v, absMin), hi);
-            setSliderValues([
-                clamped,
-                hi
-            ]);
-            setMinText(String(clamped));
-        } else {
-            setMinText(String(lo));
-        }
-    }, [
-        minText,
-        absMin,
-        hi,
-        lo
-    ]);
-    // Commit max input on blur or Enter
-    const commitMax = useCallback(()=>{
-        const v = Number(maxText);
-        if (!Number.isNaN(v)) {
-            const clamped = Math.max(Math.min(v, absMax), lo);
-            setSliderValues([
-                lo,
-                clamped
-            ]);
-            setMaxText(String(clamped));
-        } else {
-            setMaxText(String(hi));
-        }
-    }, [
-        maxText,
-        absMax,
-        lo,
-        hi
-    ]);
     return /*#__PURE__*/ _jsxs("div", {
         ref: panelRef,
         className: "flex flex-col",
@@ -262,19 +284,27 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                         className: "flex items-center gap-12",
                         children: [
                             /*#__PURE__*/ _jsx("input", {
-                                type: "number",
+                                type: "text",
+                                className: INPUT_CLASSES,
                                 value: minText,
-                                onChange: (e)=>setMinText(e.target.value),
-                                onBlur: commitMin,
+                                onChange: (e)=>{
+                                    setIsEditingMin(true);
+                                    setMinText(e.target.value);
+                                },
+                                onBlur: (e)=>commitMin(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if (e.key === 'Enter') commitMin();
+                                    if (e.key === 'Enter') e.target.blur();
                                 },
-                                className: INPUT_CLASSES
+                                onFocus: ()=>{
+                                    setIsEditingMin(true);
+                                    setMinText(String(lo));
+                                }
                             }),
                             /*#__PURE__*/ _jsx(Slider, {
                                 className: "flex-1",
                                 min: absMin,
                                 max: absMax,
+                                step: config.step,
                                 value: sliderValues,
                                 onValueChange: (vals)=>{
                                     const newLo = vals[0];
@@ -288,14 +318,21 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                                 }
                             }),
                             /*#__PURE__*/ _jsx("input", {
-                                type: "number",
+                                type: "text",
+                                className: INPUT_CLASSES,
                                 value: maxText,
-                                onChange: (e)=>setMaxText(e.target.value),
-                                onBlur: commitMax,
+                                onChange: (e)=>{
+                                    setIsEditingMax(true);
+                                    setMaxText(e.target.value);
+                                },
+                                onBlur: (e)=>commitMax(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if (e.key === 'Enter') commitMax();
+                                    if (e.key === 'Enter') e.target.blur();
                                 },
-                                className: INPUT_CLASSES
+                                onFocus: ()=>{
+                                    setIsEditingMax(true);
+                                    setMaxText(String(hi));
+                                }
                             })
                         ]
                     }),
@@ -336,6 +373,7 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                             }),
                             recentValues.slice(0, 3).map((v, i)=>/*#__PURE__*/ _jsx(PresetRow, {
                                     value: v,
+                                    displayValue: formatRangeDisplay(v, fmt),
                                     onClick: handlePreset,
                                     isRecent: true,
                                     isHighlighted: selectedPresetIndex === i,
@@ -358,6 +396,7 @@ export function ShipQLRangeFacetPanel({ facetName, config, onApply, isSelectingR
                                 const idx = recentValues.slice(0, 3).length + i;
                                 return /*#__PURE__*/ _jsx(PresetRow, {
                                     value: v,
+                                    displayValue: formatRangeDisplay(v, fmt),
                                     onClick: handlePreset,
                                     isHighlighted: selectedPresetIndex === idx,
                                     rowRef: (el)=>{

package/dist/components/shipql-editor/suggestions/shipql-suggestions-plugin.js

@@ -3,6 +3,17 @@ import { $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isRan
 import { useEffect, useRef } from 'react';
 import { $isShipQLLeafNode } from '../lexical/shipql-leaf-node.js';
 import { buildSuggestionItems, detectFacetContext, extractFacetFromLeaf, negationPrefixFromSource, normalizeFacets, stripNegationPrefix, tryParse } from './generate-suggestions.js';
+const NEEDS_QUOTING = /[\s"()[\]]/;
+const RANGE_SYNTAX = /^(\[.*\s+TO\s+.*\]|[<>]=?.+)$/;
+const ALREADY_QUOTED = /^"[^"]*"$/;
+function quoteIfNeeded(value) {
+    if (RANGE_SYNTAX.test(value)) return value;
+    if (ALREADY_QUOTED.test(value)) return value;
+    if (value === '' || NEEDS_QUOTING.test(value)) {
+        return `"${value}"`;
+    }
+    return value;
+}
 function getActiveSegment(para) {
     const children = para.getChildren();
     let active = '';
@@ -15,6 +26,11 @@ function getActiveSegment(para) {
             const leafText = child.getTextContent();
             if (active.length > 0 && active[0] !== ' ' && leafText.includes(':')) {
                 active = leafText + active;
+            } else if (active.length === 0 && leafText.endsWith(':')) {
+                // Cursor is immediately after a facet leaf like "status:" (no trailing
+                // text yet). Include the leaf so detectFacetContext can identify the
+                // facet and show value suggestions instead of facet-name suggestions.
+                active = leafText;
             }
             break;
         }
@@ -153,7 +169,7 @@ export function ShipQLSuggestionsPlugin({ facets, currentFacet, setCurrentFacet,
             editor.update(()=>{
                 const para = $getRoot().getFirstChild();
                 if (!para) return;
-                const insertText = currentFacetRef.current ? `${negationPrefixRef.current}${currentFacetRef.current}:${selectedValue} ` : `${negationPrefixRef.current}${selectedValue}:`;
+                const insertText = currentFacetRef.current ? `${negationPrefixRef.current}${currentFacetRef.current}:${quoteIfNeeded(selectedValue)} ` : `${negationPrefixRef.current}${selectedValue}:`;
                 // Case 1: Cursor is inside a focused leaf chip — replace the chip in-place
                 if (focusedLeafNodeRef.current) {
                     const sel = $getSelection();

package/dist/components/shipql-editor/suggestions/types.d.ts

@@ -1,13 +1,17 @@
+import type { AstNode } from '@shipfox/shipql-parser';
 export interface RangeFacetConfig {
     type: 'range';
     min: string;
     max: string;
+    step?: number;
     presets?: string[];
+    format?: (value: string) => string;
 }
 export type FacetDef = string | {
     name: string;
     config: RangeFacetConfig;
 };
+export type FormatLeafDisplay = (source: string, node: AstNode) => string;
 export interface SuggestionItem {
     value: string;
     label: React.ReactNode;

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

@@ -0,0 +1,2 @@
+export * from './switch';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -0,0 +1,3 @@
+export * from './switch.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,12 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const switchThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>;
+export declare function Switch({ className, size, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const switchVariants = cva('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-none outline-none transition-colors duration-200', {
+    variants: {
+        size: {
+            sm: 'h-20 w-36',
+            md: 'h-24 w-44',
+            lg: 'h-28 w-52'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const switchThumbVariants = cva('pointer-events-none block rounded-full bg-white shadow-button-neutral transition-transform duration-200', {
+    variants: {
+        size: {
+            sm: 'size-16 data-[state=checked]:translate-x-18 data-[state=unchecked]:translate-x-2',
+            md: 'size-20 data-[state=checked]:translate-x-22 data-[state=unchecked]:translate-x-2',
+            lg: 'size-24 data-[state=checked]:translate-x-26 data-[state=unchecked]:translate-x-2'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export function Switch({ className, size, ...props }) {
+    return /*#__PURE__*/ _jsx(SwitchPrimitive.Root, {
+        "data-slot": "switch",
+        className: cn(switchVariants({
+            size
+        }), // Unchecked state
+        'bg-background-switch-off', 'hover:bg-background-switch-off-hover', // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg', 'data-[state=checked]:hover:bg-checkbox-checked-bg-hover', // Focus
+        'focus-visible:shadow-checkbox-unchecked-focus', 'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus', // Disabled
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(SwitchPrimitive.Thumb, {
+            className: cn(switchThumbVariants({
+                size
+            }))
+        })
+    });
+}
+
+//# sourceMappingURL=switch.js.map

package/dist/components/table/table.d.ts

@@ -7,5 +7,5 @@ declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import
 declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
 declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
 declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react/jsx-runtime").JSX.Element;
-export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 //# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.js

@@ -60,6 +60,6 @@ function TableCaption({ className, ...props }) {
         ...props
     });
 }
-export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 
 //# sourceMappingURL=table.js.map

package/dist/components/tabs/tabs.d.ts

@@ -46,5 +46,5 @@ type TabsContentProps = ComponentProps<'div'> & {
     children: ReactNode;
 };
 declare function TabsContent({ children, value, className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
-export { Tabs, TabsList, TabsTrigger, TabsContents, TabsContent, useTabs, type TabsContextType, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentsProps, type TabsContentProps, };
+export { Tabs, TabsContent, type TabsContentProps, TabsContents, type TabsContentsProps, type TabsContextType, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, useTabs, };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.js

@@ -238,6 +238,6 @@ function TabsContent({ children, value, className, ...props }) {
         children: children
     });
 }
-export { Tabs, TabsList, TabsTrigger, TabsContents, TabsContent, useTabs };
+export { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, useTabs };
 
 //# sourceMappingURL=tabs.js.map

package/dist/components/toast/toast.d.ts

@@ -1,5 +1,5 @@
 import { type ToasterProps as SonnerToasterProps, toast as sonnerToast } from 'sonner';
 type ToasterProps = Omit<SonnerToasterProps, 'theme'>;
 declare function Toaster({ ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
-export { Toaster, sonnerToast as toast, type ToasterProps };
+export { sonnerToast as toast, Toaster, type ToasterProps };
 //# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.js

@@ -35,6 +35,6 @@ function Toaster({ ...props }) {
         ...props
     });
 }
-export { Toaster, sonnerToast as toast };
+export { sonnerToast as toast, Toaster };
 
 //# sourceMappingURL=toast.js.map

package/dist/components/tooltip/tooltip.d.ts

@@ -15,6 +15,6 @@ type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> & Var
     transition?: Transition;
 };
 declare function TooltipContent({ className, sideOffset, children, variant, size, animated, transition, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipContentVariants, defaultTransition, };
 export type { TooltipContentProps };
+export { defaultTransition, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, tooltipContentVariants, };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.js

@@ -93,6 +93,6 @@ function TooltipContent({ className, sideOffset = 8, children, variant, size, an
         })
     });
 }
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipContentVariants, defaultTransition };
+export { defaultTransition, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, tooltipContentVariants };
 
 //# sourceMappingURL=tooltip.js.map