@optiaxiom/react 1.7.9 → 1.7.11

package/README.md

@@ -4,8 +4,107 @@ A React implementation of Optimizely's Axiom Design System.
 
 ## Installation
 
+Install the package using your package manager of choice:
+
 ```sh
 npm install @optiaxiom/react
 ```
 
-Please read the full [documentation](https://optimizely-axiom.github.io/optiaxiom/) for guides, examples, and API.
+## Getting Started
+
+### 1. Setup CSS Imports
+
+Configure your bundler to handle CSS imports. For most modern bundlers (Vite, Next.js, Create React App), this works out of the box. For custom setups, see our [CSS imports guide](https://optimizely-axiom.github.io/optiaxiom/guides/css-imports).
+
+### 2. Add the Provider
+
+Wrap your application with `AxiomProvider`:
+
+```jsx
+import { AxiomProvider } from "@optiaxiom/react";
+
+export function App() {
+  return <AxiomProvider>{/* Your app code here */}</AxiomProvider>;
+}
+```
+
+### 3. Use Components
+
+Import and use components in your application:
+
+```jsx
+import { Button, Input, Box, Flex } from "@optiaxiom/react";
+
+export function MyComponent() {
+  return (
+    <Flex alignItems="start">
+      <Input placeholder="Enter text..." />
+      <Button appearance="primary">Submit</Button>
+    </Flex>
+  );
+}
+```
+
+## Examples
+
+### Basic Button
+
+```jsx
+import { Button } from "@optiaxiom/react";
+
+<Button>Click me</Button>;
+```
+
+### Form with Validation
+
+```jsx
+import { Field, Input, Button, Flex } from "@optiaxiom/react";
+
+function LoginForm() {
+  return (
+    <Flex alignItems="start">
+      <Field label="Email">
+        <Input placeholder="you@example.com" type="email" />
+      </Field>
+      <Field label="Password">
+        <Input type="password" />
+      </Field>
+      <Button appearance="primary">Sign In</Button>
+    </Flex>
+  );
+}
+```
+
+### Layout with Box and Flex
+
+```jsx
+import { Box, Flex, Heading, Text } from "@optiaxiom/react";
+
+function Sample() {
+  return (
+    <Box bg="bg.default" color="fg.default" p="16" rounded="md" shadow="sm">
+      <Flex>
+        <Heading level="3">Sample Title</Heading>
+        <Text>Sample description goes here</Text>
+      </Flex>
+    </Box>
+  );
+}
+```
+
+## Documentation
+
+For comprehensive guides, component API reference, and more examples:
+
+- [Documentation](https://optimizely-axiom.github.io/optiaxiom/)
+- [Component Library](https://optimizely-axiom.github.io/optiaxiom/components/button)
+- [Styling Guide](https://optimizely-axiom.github.io/optiaxiom/guides/styling)
+- [Icons Guide](https://optimizely-axiom.github.io/optiaxiom/guides/icons)
+
+## Contributing
+
+See the [main repository](https://github.com/optimizely-axiom/optiaxiom) for contribution guidelines.
+
+## License
+
+Apache-2.0

package/dist/{MenuTrigger-CZD1p7nB.d.ts → MenuTrigger-C0Ab8gBW.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef, MouseEvent, ReactElement, ContextType, RefObject } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef, MouseEvent, ReactElement, ContextType } from 'react';
 import { DayPicker, Matcher } from 'react-day-picker';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _radix_ui_react_popover from '@radix-ui/react-popover';
@@ -3029,186 +3029,6 @@ type DateRange = {
 };
 declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
 
-declare const input: (props?: {
-    appearance?: "number" | "default" | undefined;
-    size?: "md" | "lg" | "xl" | undefined;
-} | undefined, className?: string) => {
-    className: string;
-};
-type InputVariants = RecipeVariants<typeof input>;
-
-declare const control: (props?: {
-    size?: "md" | "lg" | "xl" | undefined;
-} | undefined, className?: string) => {
-    className: string;
-};
-type ControlVariants = RecipeVariants<typeof control>;
-
-type InputControlProps<T extends ElementType = "input" | "textarea", P = unknown> = BoxProps<T, ExtendProps<ControlVariants & {
-    /**
-     * Whether the input is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show the input error state.
-     */
-    error?: boolean;
-    /**
-     * Handler that is called when the value changes.
-     */
-    onValueChange?: (value: string) => void;
-}, P>>;
-declare const InputControl: react.ForwardRefExoticComponent<Omit<NonNullable<{
-    size?: "md" | "lg" | "xl" | undefined;
-} & {
-    /**
-     * Whether the input is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show the input error state.
-     */
-    error?: boolean;
-    /**
-     * Handler that is called when the value changes.
-     */
-    onValueChange?: (value: string) => void;
-}>, never> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<NonNullable<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> | Omit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">>, "color" | "disabled" | "className"> & react.RefAttributes<HTMLInputElement & HTMLTextAreaElement>>;
-
-declare const InputProvider: react.FC<{
-    /**
-     * When this prop is set to `none` clicking empty space inside the
-     * addon will focus the input box.
-     */
-    addonPointerEvents?: "auto" | "none";
-    inputRef: RefObject<HTMLInputElement & HTMLTextAreaElement>;
-} & {
-    children: React.ReactNode;
-}>;
-
-type InputRootProps = BoxProps<"div", Pick<ComponentPropsWithoutRef<typeof InputProvider>, "addonPointerEvents">>;
-declare const InputRoot: react.ForwardRefExoticComponent<Pick<{
-    addonPointerEvents?: "auto" | "none";
-    inputRef: react.RefObject<HTMLInputElement & HTMLTextAreaElement>;
-} & {
-    children: React.ReactNode;
-}, "addonPointerEvents"> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLInputElement & HTMLTextAreaElement>>;
-
-type InputProps = InputControlProps<"input", Pick<ComponentPropsWithoutRef<typeof InputRoot>, "addonPointerEvents"> & InputVariants & {
-    /**
-     * Display content inside the input at the end.
-     */
-    addonAfter?: ReactNode;
-    /**
-     * Display content inside the input at the start.
-     */
-    addonBefore?: ReactNode;
-    /**
-     * Control the native input `size` attribute.
-     */
-    htmlSize?: number;
-}>;
-declare const Input: react.ForwardRefExoticComponent<Pick<Omit<Pick<{
-    addonPointerEvents?: "auto" | "none";
-    inputRef: react.RefObject<HTMLInputElement & HTMLTextAreaElement>;
-} & {
-    children: React.ReactNode;
-}, "addonPointerEvents"> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLInputElement & HTMLTextAreaElement>, "ref">, "addonPointerEvents"> & {
-    appearance?: "number" | "default" | undefined;
-    size?: "md" | "lg" | "xl" | undefined;
-} & {
-    /**
-     * Display content inside the input at the end.
-     */
-    addonAfter?: ReactNode;
-    /**
-     * Display content inside the input at the start.
-     */
-    addonBefore?: ReactNode;
-    /**
-     * Control the native input `size` attribute.
-     */
-    htmlSize?: number;
-} & Omit<NonNullable<{
-    size?: "md" | "lg" | "xl" | undefined;
-} & {
-    disabled?: boolean;
-    error?: boolean;
-    onValueChange?: (value: string) => void;
-}>, "size"> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "color" | "disabled" | "className"> & react.RefAttributes<HTMLInputElement>>;
-
-type ListboxItemizedProps = BoxProps<"div", {
-    children?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ((item: any, index: number, prevItem: any) => ReactNode) | ReactNode;
-    /**
-     * Custom empty state content.
-     */
-    empty?: ReactNode;
-    /**
-     * The currently highlighted item.
-     */
-    highlightedItem?: any;
-    /**
-     * The collection of items to display.
-     */
-    items: any[] | readonly any[];
-    /**
-     * Function to get the unique key for each item as a string.
-     */
-    itemToKey: (item: any) => string;
-    /**
-     * Whether to show loading spinner inside the menu.
-     */
-    loading?: "both" | "skeleton" | "spinner";
-    /**
-     * Handler that is called when the element mounts or unmounts from the DOM.
-     */
-    onPlacedChange?: (placed: boolean) => void;
-}>;
-declare const ListboxItemized: react.ForwardRefExoticComponent<{
-    children?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ((item: any, index: number, prevItem: any) => ReactNode) | ReactNode;
-    /**
-     * Custom empty state content.
-     */
-    empty?: ReactNode;
-    /**
-     * The currently highlighted item.
-     */
-    highlightedItem?: any;
-    /**
-     * The collection of items to display.
-     */
-    items: any[] | readonly any[];
-    /**
-     * Function to get the unique key for each item as a string.
-     */
-    itemToKey: (item: any) => string;
-    /**
-     * Whether to show loading spinner inside the menu.
-     */
-    loading?: "both" | "skeleton" | "spinner";
-    /**
-     * Handler that is called when the element mounts or unmounts from the DOM.
-     */
-    onPlacedChange?: (placed: boolean) => void;
-} & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className" | "children"> & react.RefAttributes<HTMLDivElement>>;
-
 declare const ModalListbox: react.ForwardRefExoticComponent<{
     maxH?: "xs" | "sm" | "md" | "lg" | "full" | undefined;
     minW?: "0" | "trigger" | undefined;
@@ -3472,5 +3292,5 @@ declare const MenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
     className?: string;
 }>, "size"> & Omit<Omit<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { vars as A, Calendar as C, Flex as F, sprinkles as G, mapResponsiveValue as H, Input as I, normalizeResponsiveValue as J, ModalListbox as M, TableHeaderCell as N, PopoverContent as P, Command as U, createDialogKit as V, Button as b, dialogkit as d, Box as f, PopoverTrigger as i, ButtonRoot as j, InputRoot as l, DialogContent as m, InputControl as p, ListboxItemized as r, Menu as u, MenuContent as w, MenuTrigger as y };
-export type { BoxProps as B, DialogContentProps as D, ExcludeProps as E, LonghandProps as K, ListboxItemizedProps as L, CommandOption as O, CommandProps as Q, RecipeVariants as R, Sprinkles as S, TableHeaderCellProps as T, ButtonProps as a, ExtendProps as c, CalendarProps as e, ResponsiveArray as g, PopoverContentProps as h, InputControlProps as k, FlexProps as n, InputProps as o, InputRootProps as q, MenuOption as s, MenuProps as t, MenuContentProps as v, MenuTriggerProps as x, PopoverTriggerProps as z };
+export { Calendar as C, Flex as F, ModalListbox as M, PopoverContent as P, Button as b, dialogkit as d, Box as f, PopoverTrigger as i, ButtonRoot as j, DialogContent as k, Menu as o, MenuContent as q, MenuTrigger as s, sprinkles as u, vars as v, mapResponsiveValue as w, normalizeResponsiveValue as x, TableHeaderCell as y, createDialogKit as z };
+export type { BoxProps as B, DialogContentProps as D, ExcludeProps as E, LonghandProps as L, RecipeVariants as R, Sprinkles as S, TableHeaderCellProps as T, ButtonProps as a, ExtendProps as c, CalendarProps as e, ResponsiveArray as g, PopoverContentProps as h, FlexProps as l, MenuOption as m, MenuProps as n, MenuContentProps as p, MenuTriggerProps as r, PopoverTriggerProps as t };