@optiaxiom/react 0.1.0-next.3 → 0.1.0-next.5

package/dist/animate-presence/AnimatePresence.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { PresenceContext } from './PresenceContext.js';
+
+const AnimatePresence = ({
+  children
+}) => {
+  const [exiting, setExiting] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const lastChildren = useRef(children);
+  if (children) {
+    lastChildren.current = children;
+  }
+  const isPresent = !!children;
+  const onExitComplete = useCallback((id) => {
+    setExiting((state) => {
+      state.delete(id);
+      return new Map(state.entries());
+    });
+  }, []);
+  const register = useCallback((id) => {
+    setExiting((state) => {
+      state.set(id, true);
+      return new Map(state.entries());
+    });
+  }, []);
+  useEffect(() => {
+    if (!isPresent && [...exiting.values()].some(Boolean)) {
+      lastChildren.current = false;
+    }
+  }, [exiting, isPresent]);
+  return /* @__PURE__ */ jsx(PresenceContext.Provider, { value: { isPresent, onExitComplete, register }, children: children || ([...exiting.values()].some(Boolean) ? lastChildren.current : null) });
+};
+
+export { AnimatePresence };

package/dist/animate-presence/PresenceContext.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const PresenceContext = createContext({
+  isPresent: true,
+  onExitComplete: (_id) => {
+  },
+  register: (_id) => {
+  }
+});
+
+export { PresenceContext };

package/dist/animate-presence/usePresence.js

@@ -0,0 +1,13 @@
+import { useContext, useRef, useEffect } from 'react';
+import { PresenceContext } from './PresenceContext.js';
+
+const usePresence = () => {
+  const { isPresent, onExitComplete, register } = useContext(PresenceContext);
+  const id = useRef();
+  useEffect(() => {
+    return register(id);
+  }, [id, register]);
+  return !isPresent ? [false, () => onExitComplete(id)] : [true];
+};
+
+export { usePresence };

package/dist/assets/src/box/{Box.css.ts.vanilla-CfxlZUmV.css → Box.css.ts.vanilla-DMx7YI4c.css}

@@ -3,9 +3,8 @@
   ._1jn0ep0 {
     border: 0 solid var(--ax-colors-border-default);
     box-sizing: border-box;
-    font: inherit;
+    font-family: var(--ax-fontFamily-sans);
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-    font-size: 100%;
     margin: 0;
     padding: 0;
   }
@@ -14,6 +13,10 @@
     color: inherit;
     height: 0;
   }
+  ._1jn0ep0:is(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
   ._1jn0ep0:is(b, strong) {
     font-weight: bolder;
   }
@@ -24,6 +27,7 @@
   }
   ._1jn0ep0:is(button, input, optgroup, select, textarea) {
     color: inherit;
+    font-size: 100%;
     letter-spacing: inherit;
   }
   ._1jn0ep0:is(button, input:where([type=button], [type=reset], [type=submit])) {

package/dist/assets/src/input/{Input.css.ts.vanilla-BfvNp8CZ.css → Input.css.ts.vanilla-CucST5E4.css}

@@ -9,7 +9,6 @@
     color: var(--ax-colors-fg-default);
     display: flex;
     flex-direction: row;
-    font-family: var(--ax-fontFamily-sans);
   }
   ._5j10wf0:focus-within:is([data-invalid="true"]) {
     outline-color: var(--ax-colors-red-200);
@@ -29,7 +28,6 @@
   ._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"] {
@@ -55,7 +53,6 @@
   }
   ._5j10wf6 {
     background: var(--ax-colors-transparent);
-    font-family: var(--ax-fontFamily-sans);
     width: 100%;
   }
   ._5j10wf6:focus-visible {

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

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

package/dist/avatar/Avatar-css.js

@@ -1,10 +1,10 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
 import './../assets/src/sprinkles/sprinkles.css.ts.vanilla-NXW-pecy.css';
 import './../assets/src/avatar/Avatar.css.ts.vanilla-DdarHYxU.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var avatar = createRuntimeFn({compoundVariants:[],defaultClassName:'t64xwph',defaultVariants:{},variantClassNames:{colorScheme:{blue:'yukyx7a yukyx797',brand:'yukyx7f yukyx79f',dark:'yukyx7p yukyx79m',gray:'yukyx7t yukyx79t',green:'yukyx713 yukyx7a3',magenta:'yukyx71d yukyx7aa',neutral:'yukyx71h yukyx7ah',orange:'yukyx71t yukyx7aq',purple:'yukyx71x yukyx7au',red:'yukyx722 yukyx7b2',slate:'yukyx72c yukyx7bc',yellow:'yukyx72n yukyx7bn'},size:{xs:'yukyx7oo yukyx71m8 yukyx7h4',sm:'yukyx7os yukyx71mc yukyx7h8',md:'yukyx7ow yukyx71mg yukyx7hc',lg:'yukyx7p0 yukyx71mk yukyx7hg',xl:'yukyx7p4 yukyx71mo yukyx7hk'}}});
-var fallback = createRuntimeFn({compoundVariants:[],defaultClassName:'t64xwp15 yukyx78l yukyx7q4 yukyx71no yukyx7ec yukyx7f0 yukyx7d4 yukyx7qg yukyx7dy',defaultVariants:{},variantClassNames:{size:{xs:'yukyx71co yukyx71es',sm:'yukyx71cs yukyx71ew',md:'yukyx71cw yukyx71f0',lg:'yukyx71d0 yukyx71f4',xl:'yukyx71dc yukyx71fg'}}});
+var fallback = createRuntimeFn({compoundVariants:[],defaultClassName:'t64xwp15 yukyx78l yukyx7q4 yukyx71no yukyx7ec yukyx7f0 yukyx7qg yukyx7dy',defaultVariants:{},variantClassNames:{size:{xs:'yukyx71co yukyx71es',sm:'yukyx71cs yukyx71ew',md:'yukyx71cw yukyx71f0',lg:'yukyx71d0 yukyx71f4',xl:'yukyx71dc yukyx71fg'}}});
 
 export { avatar, fallback };

package/dist/box/Box-css.js

@@ -1,6 +1,6 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/box/Box.css.ts.vanilla-CfxlZUmV.css';
+import './../assets/src/box/Box.css.ts.vanilla-DMx7YI4c.css';
 
 var base = '_1jn0ep0';
 

package/dist/button/Button-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
 import './../assets/src/button/Button.css.ts.vanilla-VaFYcYGO.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';

package/dist/code/Code-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/code/Code.css.ts.vanilla-Dz07Qp9h.css';
 
 var base = 'go7emt0';

package/dist/field/Field.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixLabel from '@radix-ui/react-label';
+import { useId } from '@reach/auto-id';
+import { forwardRef, cloneElement } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+const Field = forwardRef(
+  ({
+    children,
+    description,
+    disabled,
+    error,
+    id: idProp,
+    label,
+    required,
+    ...props
+  }, ref) => {
+    const id = useId(idProp);
+    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "2", maxW: "sm", ref, ...props, children: [
+      label && /* @__PURE__ */ jsx(Text, { asChild: true, children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: id, children: [
+        label,
+        required && /* @__PURE__ */ jsxs(Text, { "aria-hidden": "true", as: "span", color: "fg.error", children: [
+          " ",
+          "*"
+        ] })
+      ] }) }),
+      cloneElement(children, {
+        disabled,
+        error: !!error,
+        id,
+        required
+      }),
+      description && /* @__PURE__ */ jsx(Text, { as: "p", color: "fg.default", fontSize: "sm", children: description }),
+      error && /* @__PURE__ */ jsx(Text, { as: "p", color: "fg.error", fontSize: "sm", children: error })
+    ] });
+  }
+);
+Field.displayName = "@optiaxiom/react/Field";
+
+export { Field };

package/dist/heading/Heading.js

@@ -23,18 +23,7 @@ const Heading = forwardRef(
   ({ asChild, children, level = "1", variant, ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
     const fontSize = mapTagToFontSize[variant ?? mapLevelToTag[level]];
-    return /* @__PURE__ */ jsx(
-      Text,
-      {
-        asChild: true,
-        fontFamily: "sans",
-        fontSize,
-        fontWeight: "700",
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsx(Comp, { children })
-      }
-    );
+    return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );
 Heading.displayName = "@optiaxiom/react/Heading";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
 import { RecipeVariants } from '@vanilla-extract/recipes';
@@ -511,6 +511,17 @@ declare const Flex: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<rea
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 }, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+type FieldProps = ExtendProps<ComponentPropsWithRef<typeof Flex>, {
+    children: ReactElement;
+    description?: string;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    label?: string;
+    required?: boolean;
+}>;
+declare const Field: react.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 declare const Grid: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 }, "color" | "className"> & Omit<{
@@ -649,14 +660,16 @@ type SkeletonProps = ExtendProps<ComponentPropsWithRef<typeof Box>, {
 declare const Skeleton: react.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const axiom: string;
+declare const base: string;
 declare const reset: string;
 declare const components: string;
 
 declare const layers_css_axiom: typeof axiom;
+declare const layers_css_base: typeof base;
 declare const layers_css_components: typeof components;
 declare const layers_css_reset: typeof reset;
 declare namespace layers_css {
-  export { layers_css_axiom as axiom, layers_css_components as components, layers_css_reset as reset };
+  export { layers_css_axiom as axiom, layers_css_base as base, layers_css_components as components, layers_css_reset as reset };
 }
 
 declare const theme: {
@@ -1773,4 +1786,4 @@ type TooltipProps = ExtendProps<ComponentPropsWithRef<typeof RadixTooltip.Conten
 }>;
 declare const Tooltip: react.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Avatar, Box, Button, Code, Flex, Grid, Heading, Input, Kbd, Paper, Progress, Separator, Skeleton, type Sprinkles, Text, Tooltip, extractSprinkles, layers_css as layers, mapResponsiveValue, sprinkles, theme, tokens, tokensDark };
+export { Avatar, Box, Button, Code, Field, Flex, Grid, Heading, Input, Kbd, Paper, Progress, Separator, Skeleton, type Sprinkles, Text, Tooltip, extractSprinkles, layers_css as layers, mapResponsiveValue, sprinkles, theme, tokens, tokensDark };

package/dist/index.js

@@ -2,6 +2,7 @@ export { Avatar } from './avatar/Avatar.js';
 export { Box } from './box/Box.js';
 export { Button } from './button/Button.js';
 export { Code } from './code/Code.js';
+export { Field } from './field/Field.js';
 export { Flex } from './flex/Flex.js';
 export { Grid } from './grid/Grid.js';
 export { Heading } from './heading/Heading.js';

package/dist/input/Input-css.js

@@ -1,6 +1,6 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/input/Input.css.ts.vanilla-BfvNp8CZ.css';
+import './../assets/src/input/Input.css.ts.vanilla-CucST5E4.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var input = createRuntimeFn({compoundVariants:[],defaultClassName:'_5j10wf6',defaultVariants:{},variantClassNames:{variant:{'default':'_5j10wf7',number:'_5j10wf8'}}});

package/dist/kbd/Kbd-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/kbd/Kbd.css.ts.vanilla-DB-l95Nr.css';
 
 var base = 'q5e32p0';

package/dist/separator/Separator-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
 import './../assets/src/separator/Separator.css.ts.vanilla-DYzKo87M.css';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';

package/dist/skeleton/Skeleton-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/skeleton/Skeleton.css.ts.vanilla-Cl5oEbvn.css';
 
 var base = '_15dwmwy0';

package/dist/sprinkles/sprinkles-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
 import './../assets/src/sprinkles/sprinkles.css.ts.vanilla-NXW-pecy.css';
 import { createMapValueFn } from '@vanilla-extract/sprinkles/createUtils';

package/dist/styles/layers-css.js

@@ -1,7 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 
 var axiom = 'optiaxiom';
+var base = 'optiaxiom.base';
 var components = 'optiaxiom._1kfj4ga1';
 var reset = 'optiaxiom._1kfj4ga0';
 
-export { axiom, components, reset };
+export { axiom, base, components, reset };

package/dist/text/Text-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/text/Text.css.ts.vanilla-BtaUGYv3.css';
 
 var lineClamp = {'1':'_13y7bdy2 _13y7bdy1 _13y7bdy0','2':'_13y7bdy3 _13y7bdy1 _13y7bdy0','3':'_13y7bdy4 _13y7bdy1 _13y7bdy0','4':'_13y7bdy5 _13y7bdy1 _13y7bdy0'};

package/dist/text/Text.js

@@ -17,7 +17,6 @@ const Text = forwardRef(
           truncate$1 && truncate,
           className
         ),
-        fontFamily: "sans",
         fontSize: "md",
         ref,
         ...props,

package/dist/tooltip/Tooltip.js

@@ -1,7 +1,8 @@
 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';

package/dist/transition/Transition-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/transition/Transition.css.ts.vanilla-qjeQECVe.css';
 
 var base = '_1p67mhc0';

package/dist/transition/Transition.js

@@ -1,8 +1,9 @@
 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 '../animate-presence/PresenceContext.js';
+import { usePresence } from '../animate-presence/usePresence.js';
 import { base, transitions } from './Transition-css.js';
 
 const transitionDuration = {

package/package.json

@@ -6,13 +6,13 @@
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0-next.3",
+  "version": "0.1.0-next.5",
   "files": [
     "dist/**",
     "LICENSE"
   ],
   "license": "Apache-2.0",
-  "module": "dist/index.js",
+  "exports": "./dist/index.js",
   "sideEffects": [
     "*.css"
   ],
@@ -21,15 +21,16 @@
     "@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",
+    "@reach/auto-id": "^0.18.0",
     "@vanilla-extract/recipes": "^0.5.3",
     "@vanilla-extract/sprinkles": "^1.6.2",
     "clsx": "^2.1.1",
-    "framer-motion": "^6.0.0",
     "inter-ui": "^4.0.2"
   },
   "devDependencies": {
@@ -43,7 +44,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/styles/layers.css.ts.vanilla-D6EvK_O8.css

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