@optiaxiom/react 0.1.0-next.4 → 0.1.0-next.6

package/dist/text/Text.js

@@ -1,24 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { lineClamp, truncate } from './Text-css.js';
+import { text } from './Text-css.js';
 
 const Text = forwardRef(
-  ({ as = "p", asChild, children, className, lineClamp: lineClamp$1, truncate: truncate$1, ...props }, ref) => {
+  ({ as = "p", asChild, children, className, lineClamp, truncate, ...props }, ref) => {
     const Comp = asChild ? Slot : as;
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
-        className: clsx(
-          lineClamp$1 && lineClamp[lineClamp$1],
-          truncate$1 && truncate,
-          className
-        ),
         fontSize: "md",
         ref,
+        ...text({ lineClamp, truncate }, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { children })
       }

package/dist/tokens/borderRadius.js

@@ -6,7 +6,7 @@ const borderRadius = {
   md: rem("6px"),
   lg: rem("8px"),
   xl: rem("12px"),
-  full: "100%",
+  full: "9999px",
   none: "0"
 };
 

package/dist/tokens/zIndex.js

@@ -5,7 +5,8 @@ const zIndex = {
   "30": "30",
   "40": "40",
   "50": "50",
-  auto: "auto"
+  auto: "auto",
+  popover: "1500"
 };
 
 export { zIndex };

package/dist/tooltip/Tooltip.js

@@ -1,20 +1,32 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { AnimatePresence } from 'framer-motion';
 import { forwardRef, useState } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
 import { Text } from '../text/Text.js';
 import { Transition } from '../transition/Transition.js';
 
 const Tooltip = forwardRef(
-  ({ children, content, delayDuration, withArrow, ...props }, ref) => {
+  ({ children, content, delayDuration, withArrow, z = "popover", ...props }, ref) => {
     const [open, setOpen] = useState(false);
     return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(RadixTooltip.Root, { onOpenChange: setOpen, open, children: [
       /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, children }),
-      /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(RadixTooltip.Content, { asChild: true, sideOffset: 5, ...props, children: /* @__PURE__ */ jsxs(Box, { bg: "dark.600", color: "white", px: "6", py: "4", rounded: "sm", children: [
-        /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: content }),
-        withArrow && /* @__PURE__ */ jsx(RadixTooltip.Arrow, {})
-      ] }) }) }) }) })
+      /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(RadixTooltip.Content, { asChild: true, sideOffset: 5, ...props, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          bg: "dark.600",
+          color: "white",
+          px: "6",
+          py: "4",
+          rounded: "sm",
+          z,
+          children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: content }),
+            withArrow && /* @__PURE__ */ jsx(RadixTooltip.Arrow, {})
+          ]
+        }
+      ) }) }) }) })
     ] }) });
   }
 );

package/dist/transition/Transition-css.js

@@ -1,7 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
-import './../assets/src/transition/Transition.css.ts.vanilla-qjeQECVe.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/transition/Transition.css.ts.vanilla-COX8x_Bo.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var base = '_1p67mhc0';
-var transitions = {fade:'_1p67mhc1','fade-down':'_1p67mhc2','fade-left':'_1p67mhc3','fade-right':'_1p67mhc4','fade-up':'_1p67mhc5',pop:'_1p67mhc6','pop-down':'_1p67mhc7','pop-left':'_1p67mhc8','pop-right':'_1p67mhc9','pop-up':'_1p67mhca'};
+var transition = recipeRuntime({base:'_1p67mhc0',variants:{duration:{sm:'_1p67mhc1',md:'_1p67mhc2',lg:'_1p67mhc3'},type:{fade:'_1p67mhc4','fade-down':'_1p67mhc5','fade-left':'_1p67mhc6','fade-right':'_1p67mhc7','fade-up':'_1p67mhc8',pop:'_1p67mhc9','pop-down':'_1p67mhca','pop-left':'_1p67mhcb','pop-right':'_1p67mhcc','pop-up':'_1p67mhcd'}}});
+var transitionDuration = {sm:250,md:400,lg:550};
 
-export { base, transitions };
+export { transition, transitionDuration };

package/dist/transition/Transition.js

@@ -1,17 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import { usePresence } from 'framer-motion';
 import { forwardRef, useState, useEffect } from 'react';
-import { base, transitions } from './Transition-css.js';
+import '../animate-presence/PresenceContext.js';
+import { usePresence } from '../animate-presence/usePresence.js';
+import { Box } from '../box/Box.js';
+import { transitionDuration, transition } from './Transition-css.js';
 
-const transitionDuration = {
-  sm: 250,
-  md: 400,
-  lg: 550
-};
 const Transition = forwardRef(
-  ({ children, className, duration = "sm", style, type = "fade", ...props }, ref) => {
+  ({ children, className, duration = "sm", type = "fade", ...props }, ref) => {
     const [isPresent, safeToRemove] = usePresence();
     const [enter, setEnter] = useState(false);
     useEffect(() => {
@@ -21,18 +16,14 @@ const Transition = forwardRef(
       !isPresent && setTimeout(safeToRemove, transitionDuration[duration]);
     }, [isPresent]);
     return /* @__PURE__ */ jsx(
-      Slot,
+      Box,
       {
-        className: clsx(
-          className,
-          base,
-          enter !== isPresent && transitions[type]
-        ),
+        asChild: true,
         ref,
-        style: {
-          ...style,
-          transitionDuration: `${transitionDuration[duration]}ms`
-        },
+        ...transition(
+          { duration, type: enter !== isPresent ? type : void 0 },
+          className
+        ),
         ...props,
         children
       }

package/dist/vanilla-extract/recipeRuntime.js

@@ -0,0 +1,51 @@
+const recipeRuntime = ({
+  base = {},
+  variants,
+  variantsCompounded = []
+}) => {
+  return (options, className) => {
+    const selections = options ?? {};
+    const classNames = className ? [className] : [];
+    const sprinkleProps = {};
+    function process(rule) {
+      for (const item of Array.isArray(rule) ? rule : [rule]) {
+        if (typeof item === "string") {
+          classNames.push(item);
+        } else {
+          for (const [name, value] of Object.entries(item)) {
+            sprinkleProps[name] = value;
+          }
+        }
+      }
+    }
+    process(base);
+    for (const variantName in variants) {
+      if (!selections[variantName]) {
+        continue;
+      }
+      const variant = variants[variantName];
+      const selection = typeof selections[variantName] === "boolean" ? selections[variantName] ? "true" : "false" : selections[variantName];
+      process(variant[selection]);
+    }
+    for (const { style, variants: variants2 } of variantsCompounded) {
+      if (!shouldApplyCompound(variants2, selections)) {
+        continue;
+      }
+      process(style);
+    }
+    return {
+      ...sprinkleProps,
+      className: classNames.join(" ")
+    };
+  };
+};
+const shouldApplyCompound = (compoundCheck, selections) => {
+  for (const key of Object.keys(compoundCheck)) {
+    if (compoundCheck[key] !== selections[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export { recipeRuntime };

package/package.json

@@ -6,13 +6,13 @@
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0-next.4",
+  "version": "0.1.0-next.6",
   "files": [
     "dist/**",
     "LICENSE"
   ],
   "license": "Apache-2.0",
-  "module": "dist/index.js",
+  "exports": "./dist/index.js",
   "sideEffects": [
     "*.css"
   ],
@@ -21,15 +21,15 @@
     "@fontsource-variable/fira-code": "^5.0.18",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-compose-refs": "^1.0.1",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@vanilla-extract/recipes": "^0.5.3",
+    "@reach/auto-id": "^0.18.0",
     "@vanilla-extract/sprinkles": "^1.6.2",
     "clsx": "^2.1.1",
-    "framer-motion": "^6.0.0",
     "inter-ui": "^4.0.2"
   },
   "devDependencies": {
@@ -43,7 +43,6 @@
   },
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production rollup -c",
-    "bundle-size": "oas-bundle-size",
     "dev": "rm -rf dist && rollup -cw",
     "lint": "oas-lint",
     "test": "vitest"

package/dist/assets/src/avatar/Avatar.css.ts.vanilla-DdarHYxU.css

@@ -1,11 +0,0 @@
-@layer optiaxiom._1kfj4ga1;
-@layer optiaxiom._1kfj4ga1 {
-  .t64xwph {
-    align-items: center;
-    border-radius: 100%;
-    display: inline-flex;
-    justify-content: center;
-    overflow: hidden;
-    user-select: none;
-  }
-}

package/dist/assets/src/input/Input.css.ts.vanilla-CICpzaz6.css

@@ -1,68 +0,0 @@
-@layer optiaxiom._1kfj4ga1;
-@layer optiaxiom._1kfj4ga1 {
-  ._5j10wf0 {
-    align-items: center;
-    border: 1px;
-    border-color: var(--ax-colors-border-default);
-    border-radius: var(--ax-borderRadius-sm);
-    border-style: solid;
-    color: var(--ax-colors-fg-default);
-    display: flex;
-    flex-direction: row;
-  }
-  ._5j10wf0:focus-within:is([data-invalid="true"]) {
-    outline-color: var(--ax-colors-red-200);
-    outline-offset: 1px;
-    outline-style: solid;
-    outline-width: 2px;
-  }
-  ._5j10wf0:focus-within:not([data-invalid="true"]) {
-    outline-color: var(--ax-colors-brand-200);
-    outline-offset: 1px;
-    outline-style: solid;
-    outline-width: 2px;
-  }
-  ._5j10wf0:hover {
-    border-color: var(--ax-colors-border-brand);
-  }
-  ._5j10wf0[data-disabled="true"] {
-    background-color: var(--ax-colors-bg-disabled);
-    border-color: var(--ax-colors-border-secondary);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  ._5j10wf0[data-invalid="true"] {
-    border-color: var(--ax-colors-border-error);
-  }
-  ._5j10wf1 {
-    font-size: var(--ax-fontSize-sm-fontSize);
-    height: 24px;
-    line-height: var(--ax-fontSize-sm-lineHeight);
-    padding: 8px 8px;
-  }
-  ._5j10wf2 {
-    font-size: var(--ax-fontSize-md-fontSize);
-    height: 32px;
-    line-height: var(--ax-fontSize-md-lineHeight);
-    padding: 8px 8px;
-  }
-  ._5j10wf3 {
-    font-size: var(--ax-fontSize-lg-fontSize);
-    height: 40px;
-    line-height: var(--ax-fontSize-lg-lineHeight);
-    padding: 4px 8px;
-  }
-  ._5j10wf6 {
-    background: var(--ax-colors-transparent);
-    width: 100%;
-  }
-  ._5j10wf6:focus-visible {
-    outline-width: 0px;
-  }
-  ._5j10wf7 {
-    text-align: start;
-  }
-  ._5j10wf8 {
-    text-align: end;
-  }
-}

package/dist/assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css

@@ -1,3 +0,0 @@
-@layer optiaxiom;
-@layer optiaxiom._1kfj4ga0;
-@layer optiaxiom._1kfj4ga1;