@optiaxiom/react 0.1.0-next.9 → 0.2.0

package/dist/src/autocomplete-item/AutocompletItem.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
+import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AutocompleteItem = forwardRef(({ addonAfter, addonBefore, children, description, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { downshift, highlightedItem } = useAutocompleteContext("AutocompleteItem");
+  const { item } = useAutocompleteListContext("AutocompleteItem");
+  const itemProps = downshift.getItemProps({ item });
+  return /* @__PURE__ */ jsx(
+    MenuItemBase,
+    {
+      addonAfter,
+      addonBefore,
+      description,
+      ...sprinkleProps,
+      children: /* @__PURE__ */ jsx(
+        "li",
+        {
+          "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+          "data-highlighted": highlightedItem === item ? "" : void 0,
+          "data-selected": downshift.selectedItem === item ? "" : void 0,
+          ref,
+          ...restProps,
+          ...itemProps,
+          children
+        }
+      )
+    }
+  );
+});
+AutocompleteItem.displayName = "@optiaxiom/react/AutocompleteItem";
+
+export { AutocompleteItem };

package/dist/src/autocomplete-item-indicator/AutocompleteItemIndicator.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
+import { Box } from '../box/Box.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AutocompleteItemIndicator = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { active } = useAutocompleteListContext("AutocompleteItemIndicator");
+  if (!active) {
+    return /* @__PURE__ */ jsx(Box, { w: "12" });
+  }
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
+});
+AutocompleteItemIndicator.displayName = "@optiaxiom/react/AutocompleteItemIndicator";
+
+export { AutocompleteItemIndicator };

package/dist/src/autocomplete-list/AutocompleteList.js

@@ -0,0 +1,19 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { AutocompleteListContextProvider } from '../autocomplete-list-context/AutocompleteListContext.js';
+
+function AutocompleteList({ children }) {
+  const { downshift, items, itemToKey } = useAutocompleteContext("AutocompleteList");
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(
+    AutocompleteListContextProvider,
+    {
+      active: downshift.selectedItem === item,
+      item,
+      children: children(item)
+    },
+    itemToKey(item)
+  )) });
+}
+AutocompleteList.displayName = "@optiaxiom/react/AutocompleteList";
+
+export { AutocompleteList };

package/dist/src/autocomplete-list-context/AutocompleteListContext.js

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

package/dist/src/autocomplete-trigger/AutocompleteTrigger.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PopperAnchor } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconX } from '../icons/IconX.js';
+import { Input } from '../input/Input.js';
+import { Separator } from '../separator/Separator.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { disabled, downshift, setInputValue } = useAutocompleteContext("AutocompleteInput");
+  return /* @__PURE__ */ jsx(PopperAnchor, { children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      addonAfter: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          alignItems: "stretch",
+          alignSelf: "stretch",
+          flexDirection: "row",
+          gap: "0",
+          mr: "0",
+          children: [
+            downshift.selectedItem && /* @__PURE__ */ jsx(Flex, { onClick: () => downshift.reset(), w: "32", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true, focusable: false }) }) }),
+            /* @__PURE__ */ jsx(Separator, { my: "xs", orientation: "vertical" }),
+            /* @__PURE__ */ jsx(Flex, { onClick: downshift.getToggleButtonProps().onClick, w: "32", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, { "aria-hidden": true, focusable: false }) }) })
+          ]
+        }
+      ),
+      ...sprinkleProps,
+      ...downshift.getInputProps({
+        ...restProps,
+        disabled,
+        onChange: (event) => {
+          setInputValue("value" in event.target ? event.target.value : "");
+        },
+        ref
+      })
+    }
+  ) });
+});
+AutocompleteTrigger.displayName = "@optiaxiom/react/AutocompleteTrigger";
+
+export { AutocompleteTrigger };

package/dist/src/avatar/Avatar-css.js

@@ -0,0 +1,10 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/avatar/Avatar.css.ts.vanilla-Cc1W2rt5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_3ghmrm'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'senq3l'],sm:[{fontSize:'xs',size:'sm'},'y46ckq'],md:[{fontSize:'md',size:'md'},'_1iee1na'],lg:[{fontSize:'lg',size:'lg'},'_1b1qw8b'],xl:[{fontSize:'2xl',size:'xl'},'h421z4'],'5xl':[{fontSize:'4xl',size:'5xl'},'_41jyrc']}}});
+var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
+var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
+
+export { avatar, fallback, icon };

package/dist/{avatar → src/avatar}/Avatar.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
-import { avatar, fallback } from './Avatar-css.js';
+import { avatar, fallback, icon } from './Avatar-css.js';
 
-const FALLBACK_DELAY_IN_MS = 600;
 function getInitialsFromName(name) {
   const names = name.trim().split(" ");
   const firstName = names[0] ?? "";
@@ -16,12 +16,14 @@ const Avatar = forwardRef(
     children,
     className,
     colorScheme = "neutral",
-    icon,
+    icon: icon$1,
     name,
-    size = "md",
+    size: sizeProp,
     src,
     ...props
   }, ref) => {
+    const context = useContext(AvatarContext);
+    const size = sizeProp || context?.size || "md";
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -29,8 +31,8 @@ const Avatar = forwardRef(
         ...avatar({ colorScheme, size }, className),
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({ size }), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon ? icon : name ? getInitialsFromName(name) : children }) })
+          src && /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children }) })
         ] })
       }
     );

package/dist/src/avatar-context/AvatarContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const AvatarContext = createContext({
+  size: void 0
+});
+
+export { AvatarContext };

package/dist/src/avatar-group/AvatarGroup-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var avatarGroup = recipeRuntime({base:['ncz9ng',{display:'flex'}]});
+
+export { avatarGroup };

package/dist/src/avatar-group/AvatarGroup.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
+import { Box } from '../box/Box.js';
+import { avatarGroup } from './AvatarGroup-css.js';
+
+const AvatarGroup = forwardRef(
+  ({ children, className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size }, children }) });
+  }
+);
+AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";
+
+export { AvatarGroup };

package/dist/src/axiom-provider/AxiomProvider.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { AxiomVersionContext } from '@optiaxiom/globals';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { useContext } from 'react';
+import { version } from '../../package.json.js';
+import { ThemeProvider } from '../theme-provider/ThemeProvider.js';
+import { ToastProvider } from '../toast-provider/ToastProvider.js';
+
+function AxiomProvider({
+  children,
+  toast,
+  tooltip
+}) {
+  const axiom = useContext(AxiomVersionContext);
+  if (axiom) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(RadixTooltip.Provider, { ...tooltip, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+    children,
+    /* @__PURE__ */ jsx(ToastProvider, { ...toast })
+  ] }) }) });
+}
+AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
+
+export { AxiomProvider };

package/dist/src/badge/Badge-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-B0wZYAIY.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_1qklq0'],variants:{colorScheme:{danger:'_12fe138',information:'_8n41pk',neutral:'_1hzm8zd',primary:'_1yry1mi',success:'lrkd3c',warning:'_1hj560k'},variant:{light:'_10ttap0',solid:'ainpn7'}}});
+
+export { badge };

package/dist/src/badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+import { badge } from './Badge-css.js';
+
+const Badge = forwardRef(
+  ({
+    asChild,
+    children,
+    className,
+    colorScheme = "neutral",
+    variant = "light",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        asChild: true,
+        role: "presentation",
+        ...badge({ colorScheme, variant }, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Comp, { ref, children })
+      }
+    );
+  }
+);
+Badge.displayName = "@optiaxiom/react/Badge";
+
+export { Badge };

package/dist/src/banner/Banner-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{colorScheme:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var icon = recipeRuntime({base:[{mt:'4'}],variants:{colorScheme:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+
+export { banner, icon };

package/dist/src/banner/Banner.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createElement } from 'react';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { IconCircleCheckFilled } from '../icons/IconCircleCheckFilled.js';
+import { IconCircleExclamationFilled } from '../icons/IconCircleExclamationFilled.js';
+import { IconCircleInfoFilled } from '../icons/IconCircleInfoFilled.js';
+import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationFilled.js';
+import { IconX } from '../icons/IconX.js';
+import { banner, icon } from './Banner-css.js';
+
+const iconMap = {
+  danger: IconCircleExclamationFilled,
+  information: IconCircleInfoFilled,
+  neutral: IconCircleInfoFilled,
+  success: IconCircleCheckFilled,
+  warning: IconTriangleExclamationFilled
+};
+const Banner = forwardRef(
+  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...banner({ colorScheme }, className), ...props, children: [
+      /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
+      !!onClose && /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-label": "close",
+          color: "fg.default",
+          flex: "none",
+          icon: /* @__PURE__ */ jsx(IconX, {}),
+          onClick: onClose,
+          size: "sm"
+        }
+      )
+    ] });
+  }
+);
+Banner.displayName = "@optiaxiom/react/Banner";
+
+export { Banner };

package/dist/src/banner-description/BannerDescription.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const BannerDescription = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { gap: "xs", ref, ...props, children });
+});
+BannerDescription.displayName = "@optiaxiom/react/BannerDescription";
+
+export { BannerDescription };

package/dist/src/banner-title/BannerTitle.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const BannerTitle = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { fontWeight: "600", ref, ...props, children });
+  }
+);
+BannerTitle.displayName = "@optiaxiom/react/BannerTitle";
+
+export { BannerTitle };

package/dist/src/box/Box-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/box/Box.css.ts.vanilla-CJfUe_xA.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var box = recipeRuntime({base:'_1jzx1ia'});
+
+export { box };

package/dist/{box → src/box}/Box.js

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import '@fontsource-variable/fira-code';
+import '@optiaxiom/globals/fonts';
 import { Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import 'inter-ui/inter-variable.css';
 import { forwardRef } from 'react';
+import { version } from '../../package.json.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import { sprinkles } from '../sprinkles/sprinkles-css.js';
+import { sprinkles } from '../sprinkles/sprinkles.js';
+import { sprinklesMerge } from '../sprinkles/sprinklesMerge.js';
 import { box } from './Box-css.js';
 
 const Box = forwardRef(
@@ -15,8 +15,9 @@ const Box = forwardRef(
     return /* @__PURE__ */ jsx(
       Comp,
       {
+        "data-axiom": version,
         ref,
-        ...box({}, clsx(className, sprinkles(sprinkleProps))),
+        ...box({}, sprinklesMerge(className, sprinkles(sprinkleProps))),
         ...restProps
       }
     );

package/dist/src/breadcrumb/Breadcrumb.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const Breadcrumb = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsx(Box, { alignItems: "center", asChild: true, display: "flex", gap: "xs", children: /* @__PURE__ */ jsx("ol", { children }) }) }) });
+  }
+);
+Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
+
+export { Breadcrumb };

package/dist/src/breadcrumb-ellipsis/BreadcrumbEllipsis.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+import { IconEllipsis } from '../icons/IconEllipsis.js';
+
+function BreadcrumbEllipsis({ ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", ...props, children: /* @__PURE__ */ jsx(IconEllipsis, {}) });
+}
+BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
+
+export { BreadcrumbEllipsis };

package/dist/src/breadcrumb-item/BreadcrumbItem.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const BreadcrumbItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
+  }
+);
+BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
+
+export { BreadcrumbItem };

package/dist/src/breadcrumb-link/BreadcrumbLink.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Link } from '../link/Link.js';
+
+const BreadcrumbLink = forwardRef(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : Link;
+  return /* @__PURE__ */ jsx(Comp, { ref, ...props });
+});
+BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
+
+export { BreadcrumbLink };

package/dist/src/breadcrumb-page/BreadcrumbPage.js

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

package/dist/src/breadcrumb-separator/BreadcrumbSeparator.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+
+function BreadcrumbSeparator({
+  asChild,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Box : "span";
+  return /* @__PURE__ */ jsx(Comp, { ...props, children: children ?? /* @__PURE__ */ jsx("span", { children: "/" }) });
+}
+BreadcrumbSeparator.displayName = "@optiaxiom/react/BreadcrumbSeparator";
+
+export { BreadcrumbSeparator };

package/dist/src/button/Button-css.js

@@ -0,0 +1,12 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/button/Button.css.ts.vanilla-f0BfuF2p.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var addon = recipeRuntime({base:[{transition:'opacity'},'_30lma4']});
+var button = recipeRuntime({base:['p2cmh6',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_3fpl1h'],variants:{colorScheme:{danger:'buk0vy',neutral:'phwgl6',primary:'l4irbb'},iconOnly:{false:'_9un8j1',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1oaiof',solid:'mtgnq7',subtle:'_1xgtzxc'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_17x7nto',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_1o604va',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'wumzna',variants:{iconOnly:false,size:'lg'}}]});
+var icon = recipeRuntime({base:[{transition:'opacity'},'_30lma4']});
+var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'_30lma4']});
+var spinner = recipeRuntime({base:'msudw5'});
+
+export { addon, button, icon, label, spinner };

package/dist/src/button/Button.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import { forwardRef, isValidElement, cloneElement, useEffect } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { icon, label, button, spinner, addon } from './Button-css.js';
+
+const appearances = {
+  danger: { colorScheme: "danger", variant: "solid" },
+  "danger-outline": { colorScheme: "danger", variant: "outline" },
+  default: { colorScheme: "neutral", variant: "outline" },
+  inverse: { colorScheme: "neutral", variant: "solid" },
+  primary: { colorScheme: "primary", variant: "solid" },
+  subtle: { colorScheme: "neutral", variant: "subtle" }
+};
+const Button = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    appearance = "default",
+    asChild,
+    children,
+    className,
+    disabled,
+    icon: icon$1,
+    iconPosition = "start",
+    loading,
+    size = "md",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const presetProps = appearances[appearance];
+    const colorScheme = presetProps.colorScheme;
+    const variant = presetProps.variant;
+    let isIconOnly = Boolean(!children && icon$1);
+    if (asChild) {
+      const newElement = isValidElement(children) ? children : null;
+      isIconOnly = Boolean(!newElement?.props.children && icon$1);
+      children = newElement ? cloneElement(
+        newElement,
+        void 0,
+        isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(newElement.props.children) })
+      ) : children;
+    } else {
+      children = isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(children) });
+    }
+    if (icon$1 && !isIconOnly) {
+      if (iconPosition === "start") {
+        addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
+      } else if (iconPosition === "end") {
+        addonAfter = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
+      }
+    }
+    const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
+    useEffect(() => {
+      if (isIconMissingAriaLabel) {
+        console.error(
+          `Icon only \`Button\` requires an \`aria-label\` for the component to be accessible for screen reader users.`
+        );
+      }
+    }, [isIconMissingAriaLabel]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        cursor: disabled || loading ? "not-allowed" : "pointer",
+        "data-disabled": disabled ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
+        ...button(
+          {
+            colorScheme,
+            iconOnly: isIconOnly,
+            size,
+            variant
+          },
+          className
+        ),
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              "aria-hidden": "true",
+              colorScheme: variant === "solid" ? "inverse" : "default",
+              size: "2xs",
+              ...spinner()
+            }
+          ) }),
+          addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "@optiaxiom/react/Button";
+
+export { Button };

package/dist/src/button-group/ButtonGroup-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var buttonGroup = recipeRuntime({base:'kx0qtf'});
+
+export { buttonGroup };