@optiaxiom/react 0.5.3 → 0.6.0

package/dist/packages/react/src/input-addon/InputAddon.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useInputContext } from '../input-context/InputContext.js';
+
+const InputAddon = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { addonPointerEvents, inputRef } = useInputContext("InputAddon");
+    const addonProps = addonPointerEvents === "none" ? {
+      cursor: "text",
+      fontSize: "md",
+      onMouseDown: (event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        inputRef.current?.focus();
+      }
+    } : {
+      fontSize: "md"
+    };
+    return /* @__PURE__ */ jsx(Box, { ref, ...addonProps, ...props, children });
+  }
+);
+InputAddon.displayName = "@optiaxiom/react/InputAddon";
+
+export { InputAddon };

package/dist/packages/react/src/input-context/InputContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [InputContextProvider, useInputContext] = createContext("InputRoot");
+
+export { InputContextProvider, useInputContext };

package/dist/packages/react/src/input-control/InputControl-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Cfus85Nv.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:['pmnobd',{bg:'transparent',flex:'auto',w:'full'},'_84pnlu','_4ah5dz'],variants:{size:{md:{},lg:{},'2xl':['_10jeaci']}}});
+
+export { control };

package/dist/packages/react/src/input-control/InputControl.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { useInputContext } from '../input-context/InputContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { control } from './InputControl-css.js';
+
+const InputControl = forwardRef(
+  ({ asChild, children, error: errorProp, size = "md", ...props }, outerRef) => {
+    const Comp = asChild ? Slot : "input";
+    const disabled = props.disabled;
+    const readOnly = props.readOnly;
+    const { descriptionId, error, errorId, inputId } = useFieldContext({
+      error: errorProp
+    });
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { inputRef } = useInputContext("InputControl");
+    const ref = useComposedRefs(inputRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+        "aria-disabled": disabled,
+        "aria-invalid": error ? true : void 0,
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": error ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        ...control({ size }),
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
+      }
+    );
+  }
+);
+InputControl.displayName = "@optiaxiom/react/InputControl";
+
+export { InputControl };

package/dist/packages/react/src/input-root/InputRoot-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Cfus85Nv.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Djh5ghmY.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1ua490q']});
+
+export { root };

package/dist/packages/react/src/input-root/InputRoot.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { InputContextProvider } from '../input-context/InputContext.js';
+import { root } from './InputRoot-css.js';
+
+const InputRoot = forwardRef(({ addonPointerEvents = "auto", children, className, ...props }, ref) => {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsx(Flex, { ref, ...root({}, className), ...props, children: /* @__PURE__ */ jsx(
+    InputContextProvider,
+    {
+      addonPointerEvents,
+      inputRef,
+      children
+    }
+  ) });
+});
+InputRoot.displayName = "@optiaxiom/react/InputRoot";
+
+export { InputRoot };

package/dist/{src → packages/react/src}/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-B0D1g-vw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CY5AH6Ql.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var kbd = recipeRuntime({base:{alignItems:'center',display:'inline-flex',flexDirection:'row',whiteSpace:'nowrap'},variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_10842ex',variants:{variant:{outline:'_1bbk99i',subtle:{}}}});
+var keys = recipeRuntime({base:'_6wsiv',variants:{variant:{outline:'uzasf3',subtle:{}}}});
 
 export { kbd, keys };

package/dist/packages/react/src/layers/layers-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+
+var axiom = 'optiaxiom';
+var base = 'optiaxiom.base';
+var components = 'optiaxiom._178w3s8';
+var reset = 'optiaxiom._2ask9u';
+
+export { axiom, base, components, reset };

package/dist/packages/react/src/link/Link-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CLYvmhqR.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1iv8fmq']});
+var link = recipeRuntime({base:['_14yjwrp'],variants:{appearance:{'default':'_13q9mvz',inverse:'_142c383',subtle:'wfwl1v'}}});
+
+export { icon, link };

package/dist/packages/react/src/listbox/Listbox.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const Listbox = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        gap: "2",
+        overflow: "auto",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Listbox.displayName = "@optiaxiom/react/Listbox";
+
+export { Listbox };

package/dist/packages/react/src/listbox-checkbox-item/ListboxCheckboxItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
+
+const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ListboxItem,
+    {
+      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(props["aria-selected"]),
+            disabled: Boolean(props["aria-disabled"]),
+            pointerEvents: "none",
+            tabIndex: -1
+          }
+        ),
+        addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null
+      ] }),
+      ref,
+      ...props
+    }
+  );
+});
+ListboxCheckboxItem.displayName = "@optiaxiom/react/ListboxCheckboxItem";
+
+export { ListboxCheckboxItem };

package/dist/{src/command-empty/CommandEmpty.js → packages/react/src/listbox-empty/ListboxEmpty.js}

@@ -1,14 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useCommandContext } from '../command-context/CommandContext.js';
 
-const CommandEmpty = forwardRef(
+const ListboxEmpty = forwardRef(
   ({ children, ...props }, ref) => {
-    const { items } = useCommandContext("CommandEmpty");
-    if (items.length > 0) {
-      return null;
-    }
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -25,6 +20,6 @@ const CommandEmpty = forwardRef(
     );
   }
 );
-CommandEmpty.displayName = "@optiaxiom/react/CommandEmpty";
+ListboxEmpty.displayName = "@optiaxiom/react/ListboxEmpty";
 
-export { CommandEmpty };
+export { ListboxEmpty };

package/dist/{src/command-footer/CommandFooter.js → packages/react/src/listbox-footer/ListboxFooter.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 
-const CommandFooter = forwardRef(
+const ListboxFooter = forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Flex,
@@ -20,6 +20,6 @@ const CommandFooter = forwardRef(
     );
   }
 );
-CommandFooter.displayName = "@optiaxiom/react/CommandFooter";
+ListboxFooter.displayName = "@optiaxiom/react/ListboxFooter";
 
-export { CommandFooter };
+export { ListboxFooter };

package/dist/packages/react/src/listbox-group/ListboxGroup.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@reach/auto-id';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { ListboxGroupContextProvider } from '../listbox-group-context/ListboxGroupContext.js';
+
+const ListboxGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(ListboxGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsx(Box, { "aria-labelledby": groupId, ref, role: "group", ...props, children }) });
+  }
+);
+ListboxGroup.displayName = "@optiaxiom/react/ListboxGroup";
+
+export { ListboxGroup };

package/dist/packages/react/src/listbox-group-context/ListboxGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [ListboxGroupContextProvider, useListboxGroupContext] = createContext("ListboxGroup", { id: void 0 });
+
+export { ListboxGroupContextProvider, useListboxGroupContext };

package/dist/packages/react/src/listbox-item/ListboxItem-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-BNLhxeLq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1ul5sho']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_1p32v0e'],variants:{intent:{danger:'u80qrr',neutral:'_195o7de'}}});
+var title = recipeRuntime({base:['_1co0ex8']});
+
+export { description, item, title };

package/dist/{src/listbox-item-base/ListboxItemBase.js → packages/react/src/listbox-item/ListboxItem.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import { useId } from '@reach/auto-id';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
@@ -8,12 +8,13 @@ import { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { title, description, item } from './ListboxItemBase-css.js';
+import { title, description, item } from './ListboxItem-css.js';
 
-const ListboxItemBase = forwardRef(
+const ListboxItem = forwardRef(
   ({
     addonAfter,
     addonBefore,
+    asChild,
     children,
     className,
     description: description$1,
@@ -21,17 +22,25 @@ const ListboxItemBase = forwardRef(
     intent = "neutral",
     ...props
   }, ref) => {
+    const Comp = asChild ? Slot : "div";
     const labelId = useId();
     const descriptionId = useId();
-    const newElement = isValidElement(children) ? children : null;
-    children = newElement ? cloneElement(
-      newElement,
-      void 0,
-      /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(newElement.props.children) }),
+    if (asChild) {
+      const newElement = isValidElement(children) ? children : null;
+      children = newElement ? cloneElement(
+        newElement,
+        void 0,
+        /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(newElement.props.children) }),
+          description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
+        ] })
+      ) : children;
+    } else {
+      children = /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
+        /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children) }),
         description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
-      ] })
-    ) : children;
+      ] });
+    }
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -41,7 +50,7 @@ const ListboxItemBase = forwardRef(
         ref,
         ...item({ intent }, className),
         ...props,
-        children: /* @__PURE__ */ jsxs(Slot, { children: [
+        children: /* @__PURE__ */ jsxs(Comp, { children: [
           addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,
           /* @__PURE__ */ jsx(Slottable, { children }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
@@ -50,6 +59,6 @@ const ListboxItemBase = forwardRef(
     );
   }
 );
-ListboxItemBase.displayName = "@optiaxiom/react/ListboxItemBase";
+ListboxItem.displayName = "@optiaxiom/react/ListboxItem";
 
-export { ListboxItemBase };
+export { ListboxItem };

package/dist/{src/command-item-indicator/CommandItemIndicator.js → packages/react/src/listbox-item-indicator/ListboxItemIndicator.js}

@@ -1,20 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useCommandItemContext } from '../command-item-context/CommandItemContext.js';
 import { IconCheck } from '../icons/IconCheck.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const CommandItemIndicator = forwardRef(({ children, ...props }, ref) => {
+const ListboxItemIndicator = forwardRef(({ active, children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
-  const { active } = useCommandItemContext("CommandItemIndicator");
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { w: "12" });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "20", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
 });
-CommandItemIndicator.displayName = "@optiaxiom/react/CommandItemIndicator";
+ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";
 
-export { CommandItemIndicator };
+export { ListboxItemIndicator };

package/dist/{src/select-label/SelectLabel.js → packages/react/src/listbox-label/ListboxLabel.js}

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useSelectGroupContext } from '../select-group-context/SelectGroupContext.js';
+import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupContext.js';
 
-const SelectLabel = forwardRef(
+const ListboxLabel = forwardRef(
   ({ children, ...props }, ref) => {
-    const { id } = useSelectGroupContext("SelectLabel");
+    const { id } = useListboxGroupContext("ListboxLabel");
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -20,6 +20,6 @@ const SelectLabel = forwardRef(
     );
   }
 );
-SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
+ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";
 
-export { SelectLabel };
+export { ListboxLabel };

package/dist/packages/react/src/listbox-radio-item/ListboxRadioItem.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
+import { ListboxItemIndicator } from '../listbox-item-indicator/ListboxItemIndicator.js';
+
+const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ListboxItem,
+    {
+      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+        addonAfter,
+        /* @__PURE__ */ jsx(ListboxItemIndicator, { active: Boolean(props["aria-selected"]) })
+      ] }),
+      ref,
+      ...props
+    }
+  );
+});
+ListboxRadioItem.displayName = "@optiaxiom/react/ListboxRadioItem";
+
+export { ListboxRadioItem };

package/dist/packages/react/src/listbox-scroll-area/ListboxScrollArea.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const ListboxScrollArea = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      flex: "1",
+      flexDirection: "column",
+      gap: "2",
+      overflow: "auto",
+      ref,
+      ...props
+    }
+  );
+});
+ListboxScrollArea.displayName = "@optiaxiom/react/ListboxScrollArea";
+
+export { ListboxScrollArea };

package/dist/packages/react/src/listbox-separator/ListboxSeparator.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Separator } from '../separator/Separator.js';
+
+const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Separator,
+  {
+    bg: "border.secondary",
+    flex: "none",
+    mx: "8",
+    my: "4",
+    ref,
+    ...props
+  }
+));
+ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
+
+export { ListboxSeparator };

package/dist/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BjXPArek.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_4zhimu'],variants:{minW:{'0':{},trigger:'_1qlwwah'},provider:{'dropdown-menu':'_1cwpc51',popover:'_1abslq1',popper:'yjn6ki'}}});
+
+export { listbox };

package/dist/packages/react/src/menu-listbox/MenuListbox.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Listbox } from '../listbox/Listbox.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { listbox } from './MenuListbox-css.js';
+
+const MenuListbox = forwardRef(
+  ({ children, className, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
+    Listbox,
+    {
+      ref,
+      ...listbox({ minW, provider }, className),
+      ...props,
+      children
+    }
+  ) }) })
+);
+MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
+
+export { MenuListbox };

package/dist/packages/react/src/pagination/Pagination-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-D9XMVRUc.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'i9ogx3'});
+var cursor = recipeRuntime({base:[{z:'10'},'yiir0k'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1wetvny']});
+
+export { button, cursor, list };

package/dist/{src → packages/react/src}/pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { usePagination } from '@mantine/hooks';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { ButtonBase } from '../button-base/ButtonBase.js';
@@ -12,7 +12,7 @@ import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { button } from './Pagination-css.js';
+import { list, cursor, button } from './Pagination-css.js';
 
 const Pagination = forwardRef(
   ({ defaultPage, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {
@@ -27,7 +27,31 @@ const Pagination = forwardRef(
       siblings: 2,
       total
     });
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "2", children: /* @__PURE__ */ jsxs("ul", { children: [
+    const [animation, setAnimation] = useState(false);
+    const activeRef = useRef(null);
+    const cursorRef = useRef(null);
+    useEffect(() => {
+      if (!activeRef.current || !cursorRef.current) {
+        return;
+      }
+      cursorRef.current.style.transform = `translateX(${activeRef.current.offsetLeft}px)`;
+      cursorRef.current.style.visibility = "visible";
+      setTimeout(() => setAnimation(true), 150);
+    }, [active]);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...list(), children: /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx(
+        ButtonBase,
+        {
+          appearance: "subtle",
+          "aria-hidden": true,
+          asChild: true,
+          "data-state": "active",
+          disabled,
+          ref: cursorRef,
+          ...cursor({ animation }),
+          children: /* @__PURE__ */ jsx("span", { children: active })
+        }
+      ),
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Prev", disabled: disabled || active === 1, children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -65,9 +89,9 @@ const Pagination = forwardRef(
             {
               appearance: "subtle",
               "aria-current": active === page ? "page" : void 0,
-              "data-state": active === page ? "active" : void 0,
               disabled,
               onClick: () => setPage(page),
+              ref: active === page ? activeRef : void 0,
               ...button(),
               children: [
                 /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),

package/dist/packages/react/src/paper/Paper-css.js

@@ -0,0 +1,6 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var paper = recipeRuntime({base:{bg:'bg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});
+
+export { paper };

package/dist/packages/react/src/paper/Paper.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { paper } from './Paper-css.js';
+
+const Paper = forwardRef(
+  ({ className, elevation = "menu", ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, ...paper({ elevation }, className), ...props })
+);
+Paper.displayName = "@optiaxiom/react/Paper";
+
+export { Paper };

package/dist/packages/react/src/pill/Pill-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-Bna2beye.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_1a8f273'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+
+export { pill };