@optiaxiom/react 0.1.0-next.12 → 0.1.0-next.14

package/dist/combobox-multi-trigger/ComboboxMultiTrigger.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxTrigger } from '../combobox-trigger/ComboboxTrigger.js';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+const ComboboxMultiTrigger = forwardRef(({ maxDisplayedItems = 2, title = "Select Items", ...props }, ref) => {
+  const { mode, value } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { alignItems: "center", ref, w: "full", ...props, children: /* @__PURE__ */ jsx(Box, { overflow: "hidden", children: mode === "multiple" && Array.isArray(value) && value.length > 0 ? /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      alignItems: "center",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: "2",
+      overflow: "hidden",
+      children: [
+        value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(Badge, { children: item }) }, item)),
+        value.length > maxDisplayedItems && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxs(Text, { children: [
+          "+",
+          value.length - maxDisplayedItems,
+          " more"
+        ] }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Text, { children: title }) }) }) });
+});
+ComboboxMultiTrigger.displayName = "@optiaxiom/react/ComboboxMultiTrigger";
+
+export { ComboboxMultiTrigger };

package/dist/combobox-single-trigger/ComboboxSingleTrigger.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxTrigger } from '../combobox-trigger/ComboboxTrigger.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+
+const ComboboxSingleTrigger = forwardRef(({ title, ...props }, ref) => {
+  const { value } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxs(Button, { children: [
+    value || title,
+    /* @__PURE__ */ jsx(IconAngleDown, {})
+  ] }) });
+});
+ComboboxSingleTrigger.displayName = "@optiaxiom/react/ComboboxSingleTrigger";
+
+export { ComboboxSingleTrigger };

package/dist/combobox-trigger/ComboboxTrigger.js

@@ -1,17 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { Button } from '../button/Button.js';
-import { ComboboxContext } from '../combobox-context/ComboboxContext.js';
-import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxMultiTrigger } from '../combobox-multi-trigger/ComboboxMultiTrigger.js';
+import { ComboboxSingleTrigger } from '../combobox-single-trigger/ComboboxSingleTrigger.js';
 import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 
-const ComboboxTrigger = forwardRef(({ asChild, children, title, ...props }, ref) => {
-  const context = useContext(ComboboxContext);
-  if (!context)
-    throw new Error("ComboboxTrigger must be used within a Combobox");
-  const { items, value } = context;
-  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ...props, children: value ? items?.find((item) => item.value === value)?.label : title ?? "Select item" }) });
+const ComboboxTrigger = forwardRef(({ asChild, children, maxDisplayedItems = 2, title, ...props }, ref) => {
+  const { mode } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref, children: asChild ? children : mode === "single" ? /* @__PURE__ */ jsx(ComboboxSingleTrigger, { title, ...props }) : mode === "multiple" ? /* @__PURE__ */ jsx(
+    ComboboxMultiTrigger,
+    {
+      maxDisplayedItems,
+      title,
+      ...props
+    }
+  ) : children });
 });
 ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
 
-export { ComboboxTrigger };
+export { ComboboxTrigger, ComboboxTrigger as default };

package/dist/command-checkbox-item/CommandCheckboxItem.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const CommandCheckboxItem = forwardRef(({ children, disabled, onCheckedChange, value, ...props }, ref) => {
+  const {
+    mode,
+    setValue,
+    value: contextValue
+  } = useComboboxContext("ComboboxContext");
+  const isChecked = Array.isArray(contextValue) ? contextValue.includes(value) : contextValue === value;
+  const handleChange = () => {
+    const newChecked = !isChecked;
+    if (mode === "multiple") {
+      if (Array.isArray(contextValue)) {
+        setValue(
+          newChecked ? [...contextValue, value] : contextValue.filter((v) => v !== value)
+        );
+      } else {
+        setValue([value]);
+      }
+    } else {
+      setValue(newChecked ? value : "");
+    }
+    if (onCheckedChange) {
+      onCheckedChange(newChecked);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      "data-disabled": disabled ? "" : void 0,
+      "data-selected": isChecked ? "" : void 0,
+      disabled,
+      onSelect: handleChange,
+      ref,
+      value,
+      ...props,
+      children: /* @__PURE__ */ jsxs(Box, { alignItems: "center", display: "flex", w: "full", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isChecked,
+            disabled,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { mt: "2", children })
+      ] })
+    }
+  );
+});
+CommandCheckboxItem.displayName = "@optiaxiom/react/CommandCheckboxItem";
+
+export { CommandCheckboxItem };

package/dist/command-empty/CommandEmpty.js

@@ -8,7 +8,7 @@ import '../sprinkles/sprinkles-css.js';
 const CommandEmpty = forwardRef(
   ({ children, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandEmpty$1, { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandEmpty$1, { ref, ...restProps, children: children || "No results found" }) });
   }
 );
 CommandEmpty.displayName = "@optiaxiom/react/CommandEmpty";

package/dist/command-footer/CommandFooter-css.js

@@ -0,0 +1,6 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'space-between',p:'sm'}]});
+
+export { footer };

package/dist/command-footer/CommandFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './CommandFooter-css.js';
+
+const CommandFooter = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children });
+  }
+);
+CommandFooter.displayName = "@optiaxiom/react/CommandFooter";
+
+export { CommandFooter };

package/dist/command-item/CommandItem-css.js

@@ -1,8 +1,8 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
-import './../assets/src/command-item/CommandItem.css.ts.vanilla-DUMU-Chn.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/command-item/CommandItem.css.ts.vanilla-ml8xjFWy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'xxa7fd2'],variants:{colorScheme:{danger:'xxa7fd3',neutral:'xxa7fd4'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'xxa7fd0']});
 
 export { item };

package/dist/command-item/CommandItem.js

@@ -1,23 +1,39 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { CommandItem as CommandItem$1 } from 'cmdk';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Flex } from '../flex/Flex.js';
+import { IconCheck } from '../icons/IconCheck.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
 import { item } from './CommandItem-css.js';
 
 const CommandItem = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, className, onSelect, value, ...props }, ref) => {
+    const {
+      mode,
+      setOpen,
+      setValue,
+      value: contextValue
+    } = useComboboxContext("ComboboxContext");
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ...item({ colorScheme: "neutral" }),
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(CommandItem$1, { ref, ...restProps, children })
+    const handleSelect = () => {
+      if (mode === "single") {
+        setOpen(false);
+        setValue(value);
+      } else if (mode === "multiple" && Array.isArray(contextValue)) {
+        const newValue = contextValue.includes(value) ? contextValue.filter((v) => v !== value) : [...contextValue, value];
+        setValue(newValue);
       }
-    );
+      if (onSelect)
+        onSelect(value);
+    };
+    const isSelected = mode === "single" ? contextValue === value : Array.isArray(contextValue) && contextValue.includes(value);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandItem$1, { onSelect: handleSelect, ref, ...restProps, children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", w: "full", children: [
+      children,
+      isSelected && mode === "single" && /* @__PURE__ */ jsx(IconCheck, {})
+    ] }) }) });
   }
 );
 CommandItem.displayName = "@optiaxiom/react/CommandItem";

package/dist/command-list/CommandList-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/command-list/CommandList.css.ts.vanilla-1Rf8xvwM.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var list = recipeRuntime({base:['_1ykehzm0']});
+
+export { list };

package/dist/command-list/CommandList.js

@@ -4,11 +4,12 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
+import { list } from './CommandList-css.js';
 
 const CommandList = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandList$1, { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...list({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandList$1, { ref, ...restProps, children }) });
   }
 );
 CommandList.displayName = "@optiaxiom/react/CommandList";

package/dist/control-base/ControlBase-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/control-base/ControlBase.js

@@ -11,15 +11,15 @@ import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { controlBase, indicator, label, decorator } from './ControlBase-css.js';
 
 const ControlBase = forwardRef(
-  ({ children, className, endDecorator, id: idProp, label: label$1, ...props }, ref) => {
+  ({ children, className, control, endDecorator, id: idProp, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const id = useId(idProp);
     return /* @__PURE__ */ jsxs(Box, { ref, ...controlBase({}, className), ...sprinkleProps, children: [
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: cloneElement(children, {
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: cloneElement(control, {
         id,
         ...restProps
       }) }),
-      /* @__PURE__ */ jsx(Text, { asChild: true, ...label(), children: /* @__PURE__ */ jsx(RadixLabel.Root, { htmlFor: id, children: label$1 }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, ...label(), children: /* @__PURE__ */ jsx(RadixLabel.Root, { htmlFor: id, children }) }),
       endDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator(), children: fallbackSpan(endDecorator) })
     ] });
   }

package/dist/dialog-title/DialogTitle.js

@@ -11,8 +11,8 @@ const DialogTitle = forwardRef(
   ({ children, description, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ...sprinkleProps, children: [
-      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "4", children: /* @__PURE__ */ jsx(RadixDialog.Title, { ref, ...restProps, children }) }),
-      /* @__PURE__ */ jsx(Text, { asChild: true, empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
+      /* @__PURE__ */ jsx(Heading, { asChild: true, fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixDialog.Title, { ref, ...restProps, children }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
     ] });
   }
 );

package/dist/grid/Grid.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
 const Grid = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { cols: "1", display: "grid", gap: "md", ref, ...props });
+  return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "md", gridTemplateColumns: "1", ref, ...props });
 });
 Grid.displayName = "@optiaxiom/react/Grid";
 

package/dist/heading/Heading.js

@@ -20,9 +20,9 @@ const mapTagToFontSize = {
   h6: "md"
 };
 const Heading = forwardRef(
-  ({ asChild, children, level = "1", variant, ...props }, ref) => {
+  ({ appearance, asChild, children, level = "1", ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
-    const fontSize = mapTagToFontSize[variant ?? mapLevelToTag[level]];
+    const fontSize = mapTagToFontSize[appearance ?? mapLevelToTag[level]];
     return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );