@optiaxiom/react 0.1.0-next.8 → 0.1.0

package/dist/src/hover-card/HoverCard.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { HoverCardContextProvider } from '../hover-card-context/HoverCardContext.js';
+
+function HoverCard({
+  children,
+  defaultOpen,
+  keepOpenOnActivation,
+  onOpenChange,
+  open: openProp,
+  openDelay = 500,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(
+    RadixHoverCard.Root,
+    {
+      onOpenChange: setOpen,
+      open,
+      openDelay,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        HoverCardContextProvider,
+        {
+          keepOpenOnActivation,
+          open,
+          setOpen,
+          children
+        }
+      )
+    }
+  );
+}
+HoverCard.displayName = "@optiaxiom/react/HoverCard";
+
+export { HoverCard };

package/dist/src/hover-card-content/HoverCardContent-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-C2rYzgoD.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_15wuvp2']});
+
+export { content };

package/dist/src/hover-card-content/HoverCardContent.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import { forwardRef, useRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
+import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
+import { theme } from '@optiaxiom/globals';
+import { Transition } from '../transition/Transition.js';
+import { content } from './HoverCardContent-css.js';
+
+const HoverCardContent = forwardRef(
+  ({
+    align = "center",
+    children,
+    className,
+    sideOffset = 2,
+    withArrow,
+    ...props
+  }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const { keepOpenOnActivation, open } = useHoverCardContext("HoverCardContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+      RadixHoverCard.Content,
+      {
+        align,
+        onPointerDownOutside: keepOpenOnActivation ? (event) => {
+          if (innerRef.current?.contains(
+            event.target
+          ))
+            event.preventDefault();
+        } : void 0,
+        ref,
+        sideOffset,
+        children: [
+          children,
+          withArrow && /* @__PURE__ */ jsx(RadixHoverCard.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              fill: theme.colors["bg.default"],
+              height: 4,
+              preserveAspectRatio: "none",
+              stroke: theme.colors["border.secondary"],
+              viewBox: "0 0 30 10",
+              width: 8,
+              children: [
+                /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
+                /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    points: "0,0 15,10 30,0",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2.5"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ) }) }) }) });
+  }
+);
+HoverCardContent.displayName = "@optiaxiom/react/HoverCardContent";
+
+export { HoverCardContent };

package/dist/src/hover-card-context/HoverCardContext.js

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

package/dist/src/hover-card-trigger/HoverCardTrigger.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import { forwardRef } from 'react';
+import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
+import { Link } from '../link/Link.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const HoverCardTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+  const { keepOpenOnActivation, setOpen } = useHoverCardContext("HoverCardTrigger");
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(
+    RadixHoverCard.Trigger,
+    {
+      asChild: true,
+      onClick: keepOpenOnActivation ? (event) => {
+        event.preventDefault();
+        setOpen(true);
+      } : void 0,
+      ref,
+      ...sprinkleProps,
+      children: asChild ? children : /* @__PURE__ */ jsx(Link, { cursor: "pointer", ...restProps, children })
+    }
+  );
+});
+HoverCardTrigger.displayName = "@optiaxiom/react/HoverCardTrigger";
+
+export { HoverCardTrigger };

package/dist/src/icon/Icon.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const Icon = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "16", ref, w: "auto", ...props, children });
+  }
+);
+Icon.displayName = "@optiaxiom/react/Icon";
+
+export { Icon };

package/dist/src/icons/IconAngleDown.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconAngleDown = withIcon(
+  {
+    name: "IconAngleDown",
+    viewBox: "0 0 448 512"
+  },
+  // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconAngleDown };

package/dist/src/icons/IconAngleLeft.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconAngleLeft = withIcon(
+  {
+    fill: "none",
+    height: 16,
+    name: "IconAngleLeft",
+    width: 20
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.3832 8.34376L11.8832 13.3438C12.0707 13.5625 12.3832 13.5625 12.5707 13.375C12.7894 13.1875 12.7894 12.875 12.6019 12.6875L8.41445 8.00001L12.6019 3.34376C12.7894 3.15626 12.7894 2.84376 12.5707 2.65626C12.3832 2.46876 12.0707 2.46876 11.8832 2.68751L7.3832 7.65626C7.1957 7.87501 7.1957 8.15626 7.3832 8.34376Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+
+export { IconAngleLeft };

package/dist/src/icons/IconAngleRight.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconAngleRight = withIcon(
+  {
+    fill: "none",
+    height: 16,
+    name: "IconAngleLeft",
+    width: 20
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12.5982 8.34373L8.09825 13.3437C7.91075 13.5625 7.59825 13.5625 7.41075 13.375C7.192 13.1875 7.192 12.875 7.3795 12.6875L11.567 7.99998L7.3795 3.34373C7.192 3.15623 7.192 2.84373 7.41075 2.65623C7.59825 2.46873 7.91075 2.46873 8.09825 2.68748L12.5982 7.65623C12.7857 7.87498 12.7857 8.15623 12.5982 8.34373Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+
+export { IconAngleRight };

package/dist/src/icons/IconCheck.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCheck = withIcon(
+  {
+    fill: "none",
+    height: 8,
+    name: "IconCheck",
+    width: 12
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M1.5 3.47059L4.83333 7L10.5 1",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }
+  )
+);
+
+export { IconCheck };

package/dist/src/icons/IconCircleCheckFilled.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCircleCheckFilled = withIcon(
+  {
+    name: "IconCircleCheckFilled",
+    viewBox: "0 0 512 512"
+  },
+  // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconCircleCheckFilled };

package/dist/src/icons/IconCircleExclamationFilled.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCircleExclamationFilled = withIcon(
+  {
+    name: "IconCircleExclamationFilled",
+    viewBox: "0 0 512 512"
+  },
+  // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconCircleExclamationFilled };

package/dist/src/icons/IconCircleInfoFilled.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCircleInfoFilled = withIcon(
+  {
+    name: "IconCircleInfoFilled",
+    viewBox: "0 0 512 512"
+  },
+  // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconCircleInfoFilled };

package/dist/src/icons/IconCircleQuestion.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCircleQuestion = withIcon(
+  {
+    height: 12,
+    name: "IconCircleQuestion",
+    width: 12
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.99355 0.400024C2.8873 0.400024 0.393555 2.91565 0.393555 6.00002C0.393555 9.10627 2.8873 11.6 5.99355 11.6C9.07793 11.6 11.5936 9.10627 11.5936 6.00002C11.5936 2.91565 9.07793 0.400024 5.99355 0.400024ZM5.99355 10.9C3.28105 10.9 1.09355 8.71252 1.09355 6.00002C1.09355 3.3094 3.28105 1.10002 5.99355 1.10002C8.68418 1.10002 10.8936 3.3094 10.8936 6.00002C10.8936 8.71252 8.68418 10.9 5.99355 10.9ZM5.64355 7.92502C5.3373 7.92502 5.11855 8.16565 5.11855 8.45002C5.11855 8.75627 5.3373 8.97502 5.64355 8.97502C5.92793 8.97502 6.16855 8.75627 6.16855 8.45002C6.16855 8.16565 5.92793 7.92502 5.64355 7.92502ZM6.62793 3.20002H5.3373C4.52793 3.20002 3.89355 3.85627 3.89355 4.66565V4.86252C3.89355 5.0594 4.04668 5.21252 4.24355 5.21252C4.41855 5.21252 4.59355 5.0594 4.59355 4.86252V4.66565C4.59355 4.25002 4.92168 3.90002 5.3373 3.90002H6.62793C7.04355 3.90002 7.39355 4.25002 7.39355 4.66565C7.39355 4.92815 7.24043 5.19065 6.9998 5.3219L5.6873 5.97815C5.44668 6.1094 5.29355 6.3719 5.29355 6.65627V7.05002C5.29355 7.2469 5.44668 7.40002 5.64355 7.40002C5.81855 7.40002 5.99355 7.2469 5.99355 7.05002V6.65627C5.99355 6.6344 5.99355 6.61252 6.01543 6.59065L7.32793 5.9344C7.7873 5.6719 8.09355 5.19065 8.09355 4.66565C8.09355 3.85627 7.4373 3.20002 6.62793 3.20002Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconCircleQuestion };

package/dist/src/icons/IconEllipsis.js

@@ -0,0 +1,35 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconEllipsis = withIcon(
+  {
+    height: 2,
+    name: "IconEllipsis",
+    width: 10
+  },
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M1.24456 2C0.752369 2 0.34967 1.5973 0.34967 1.10511C0.34967 0.612927 0.752369 0.210228 1.24456 0.210228C1.73674 0.210228 2.13944 0.612927 2.13944 1.10511C2.13944 1.5973 1.73674 2 1.24456 2Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.00003 2C4.50784 2 4.10514 1.5973 4.10514 1.10511C4.10514 0.612927 4.50784 0.210228 5.00003 0.210228C5.49221 0.210228 5.89491 0.612927 5.89491 1.10511C5.89491 1.5973 5.49221 2 5.00003 2Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.75549 2C8.26331 2 7.86061 1.5973 7.86061 1.10511C7.86061 0.612927 8.26331 0.210228 8.75549 0.210228C9.24768 0.210228 9.65038 0.612927 9.65038 1.10511C9.65038 1.5973 9.24768 2 8.75549 2Z",
+        fill: "currentColor"
+      }
+    )
+  ] })
+);
+
+export { IconEllipsis };

package/dist/src/icons/IconMagnifyingGlass.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconMagnifyingGlass = withIcon(
+  {
+    name: "IconMagnifyingGlass"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M17.8428 15.1562L13.4053 10.75C14.4053 9.59375 14.9678 8.125 14.9678 6.5C14.9678 2.9375 12.0303 0 8.46777 0C4.87402 0 1.99902 2.9375 1.99902 6.5C1.99902 10.0938 4.90527 13 8.46777 13C10.0615 13 11.5303 12.4375 12.6865 11.4375L17.0928 15.875C17.2178 15.9688 17.3428 16 17.499 16C17.624 16 17.749 15.9688 17.8428 15.875C18.0303 15.6875 18.0303 15.3438 17.8428 15.1562ZM8.49902 12C5.43652 12 2.99902 9.53125 2.99902 6.5C2.99902 3.46875 5.43652 1 8.49902 1C11.5303 1 13.999 3.46875 13.999 6.5C13.999 9.5625 11.5303 12 8.49902 12Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconMagnifyingGlass };

package/dist/src/icons/IconMinus.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconMinus = withIcon(
+  {
+    height: 8,
+    name: "IconMinus",
+    width: 12
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.85714 3.19995C2.35714 3.19995 2 3.56662 2 3.99995C2 4.46662 2.35714 4.79995 2.85714 4.79995H9.14286C9.60714 4.79995 10 4.46662 10 3.99995C10 3.56662 9.60714 3.19995 9.14286 3.19995H2.85714Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconMinus };

package/dist/src/icons/IconTriangleExclamationFilled.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconTriangleExclamationFilled = withIcon(
+  {
+    name: "IconTriangleExclamationFilled",
+    viewBox: "0 0 512 512"
+  },
+  // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconTriangleExclamationFilled };

package/dist/src/icons/IconUpRightFromSquare.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconUpRightFromSquare = withIcon(
+  {
+    name: "IconUpRightFromSquare"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M14.4907 9C14.2095 9 13.9907 9.25 13.9907 9.5V14C13.9907 14.5625 13.522 15 12.9907 15H3.99072C3.42822 15 2.99072 14.5625 2.99072 14V5C2.99072 4.46875 3.42822 4 3.99072 4H7.49072C7.74072 4 7.99072 3.78125 7.99072 3.5C7.99072 3.25 7.74072 3 7.49072 3H3.99072C2.86572 3 1.99072 3.90625 1.99072 5V14C1.99072 15.125 2.86572 16 3.99072 16H12.9907C14.0845 16 14.9907 15.125 14.9907 14V9.5C14.9907 9.25 14.7407 9 14.4907 9ZM17.4907 0H12.4907C12.2095 0 11.9907 0.25 11.9907 0.5C11.9907 0.78125 12.2095 1 12.4907 1H16.272L7.61572 9.65625C7.42822 9.84375 7.42822 10.1875 7.61572 10.375C7.70947 10.4688 7.83447 10.5 7.99072 10.5C8.11572 10.5 8.24072 10.4688 8.33447 10.375L16.9907 1.71875V5.5C16.9907 5.78125 17.2095 6 17.4907 6C17.7407 6 17.9907 5.78125 17.9907 5.5V0.5C17.9907 0.25 17.7407 0 17.4907 0Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconUpRightFromSquare };

package/dist/src/icons/IconX.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconX = withIcon(
+  {
+    name: "IconX"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M14.8436 12.875C14.6561 13.0625 14.3124 13.0625 14.1249 12.875L9.99988 8.71875L5.84363 12.875C5.65613 13.0625 5.31238 13.0625 5.12488 12.875C4.93738 12.6875 4.93738 12.3438 5.12488 12.1562L9.28113 8L5.12488 3.875C4.93738 3.6875 4.93738 3.34375 5.12488 3.15625C5.31238 2.96875 5.65613 2.96875 5.84363 3.15625L9.99988 7.3125L14.1249 3.15625C14.3124 2.96875 14.6561 2.96875 14.8436 3.15625C15.0311 3.34375 15.0311 3.6875 14.8436 3.875L10.6874 8L14.8436 12.1562C15.0311 12.3438 15.0311 12.6875 14.8436 12.875Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconX };

package/dist/src/icons/withIcon.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const withIcon = ({
+  fill,
+  height = 16,
+  name,
+  viewBox,
+  width = 20
+}, children) => {
+  const Icon = forwardRef(
+    (props, ref) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill,
+        height,
+        ref,
+        role: "img",
+        viewBox: viewBox ?? `0 0 ${width} ${height}`,
+        width,
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children
+      }
+    )
+  );
+  Icon.displayName = `@optiaxiom/react/${name}`;
+  return Icon;
+};
+
+export { withIcon };

package/dist/src/indicator/Indicator-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-VGeZf61K.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:'_1xcndhx',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_86ljul']},ping:{false:{},true:[{animation:'ping',color:'transparent'},'_1vn6xqj']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_13weodm'],variants:{offset:{false:'tei1o6',true:{}},position:{'bottom-right':'_16o1jsz','top-right':'nyd93t'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1ddzktk']});
+
+export { badge, floating, indicator };

package/dist/src/indicator/Indicator.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { indicator, floating, badge } from './Indicator-css.js';
+
+const Indicator = forwardRef(
+  ({
+    asChild,
+    children,
+    className,
+    colorScheme,
+    content,
+    disabled,
+    offset = true,
+    ping,
+    position = "top-right",
+    variant,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...indicator({}, className), ...props, children: [
+      !disabled && /* @__PURE__ */ jsxs(Box, { ...floating({ offset, position }), children: [
+        ping && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            "aria-hidden": "true",
+            asChild,
+            colorScheme,
+            variant,
+            ...badge({ offset, ping: true }),
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            asChild,
+            colorScheme,
+            variant,
+            ...badge({ offset }),
+            children: content
+          }
+        )
+      ] }),
+      children
+    ] });
+  }
+);
+Indicator.displayName = "@optiaxiom/react/Indicator";
+
+export { Indicator };

package/dist/src/input/Input-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var addon = recipeRuntime({base:{flex:'none'},variants:{position:{end:{mr:'8'},start:{ml:'8'}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:{mr:'4'},variants:{position:'end',size:'sm'}},{style:{ml:'4'},variants:{position:'start',size:'sm'}}]});
+var input = recipeRuntime({variants:{appearance:{'default':{textAlign:'start'},number:{textAlign:'end'}}}});
+
+export { addon, input };

package/dist/src/input/Input.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { InputBase } from '../input-base/InputBase.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { addon, input } from './Input-css.js';
+
+const Input = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    appearance = "default",
+    asChild,
+    children,
+    size = "md",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "input";
+    return /* @__PURE__ */ jsx(
+      InputBase,
+      {
+        addonAfter: addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon({ position: "end", size }), children: fallbackSpan(addonAfter) }),
+        addonBefore: addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon({ position: "start", size }), children: fallbackSpan(addonBefore) }),
+        size,
+        ...props,
+        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance }), children: /* @__PURE__ */ jsx(Comp, { ref, children }) })
+      }
+    );
+  }
+);
+Input.displayName = "@optiaxiom/react/Input";
+
+export { Input };

package/dist/src/input-base/InputBase-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-BWyzXodK.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var input = recipeRuntime({base:['_1ocifj9',{bg:'transparent',flex:'auto',w:'full'},'do1dv4','_1guywm1'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{border:'1',flexDirection:'row',gap:'0',rounded:'md'},'lnh6mx']});
+
+export { input, wrapper };