@arobo/react 1.0.1

package/dist/components/text-field/text-field.js

@@ -0,0 +1,38 @@
+import React, { createContext } from 'react';
+import { TextField } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { textFieldVariants } from '../../styles/src/components/text-field/text-field.styles.js';
+
+const TextFieldContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * TextField Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TextFieldRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const styles = React.useMemo(() => textFieldVariants({
+    fullWidth
+  }), [fullWidth]);
+  return /*#__PURE__*/jsx(TextField, {
+    "data-slot": "text-field",
+    ...props,
+    className: composeTwRenderProps(className, styles),
+    children: values => /*#__PURE__*/jsx(TextFieldContext, {
+      value: {
+        variant
+      },
+      children: /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+export { TextFieldContext, TextFieldRoot };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/index.js

@@ -0,0 +1,62 @@
+export { buttonVariants } from './styles/src/components/button/button.styles.js';
+export { Button } from './components/button/index.js';
+export { ButtonRoot } from './components/button/button.js';
+export { BUTTON_GROUP_CHILD, ButtonGroupContext, ButtonGroupRoot } from './components/button-group/button-group.js';
+export { buttonGroupVariants } from './styles/src/components/button-group/button-group.styles.js';
+export { ButtonGroup } from './components/button-group/index.js';
+export { CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeader, CalendarRoot } from './components/calendar/calendar.js';
+export { calendarVariants } from './styles/src/components/calendar/calendar.styles.js';
+export { Calendar } from './components/calendar/index.js';
+export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot } from './components/checkbox/checkbox.js';
+export { checkboxVariants } from './styles/src/components/checkbox/checkbox.styles.js';
+export { Checkbox } from './components/checkbox/index.js';
+export { CheckboxGroup } from './components/checkbox-group/checkbox-group.js';
+export { checkboxGroupVariants } from './styles/src/components/checkbox-group/checkbox-group.styles.js';
+export { closeButtonVariants } from './styles/src/components/close-button/close-button.styles.js';
+export { CloseButton } from './components/close-button/index.js';
+export { CloseButtonRoot } from './components/close-button/close-button.js';
+export { comboboxVariants } from './styles/src/components/combobox/combobox.styles.js';
+export { ComboBox } from './components/combobox/index.js';
+export { ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger } from './components/combobox/combobox.js';
+export { dateFieldVariants } from './styles/src/components/date-field/date-field.styles.js';
+export { DateField } from './components/date-field/index.js';
+export { DateFieldRoot } from './components/date-field/date-field.js';
+export { dateInputGroupVariants } from './styles/src/components/date-input-group/date-input-group.styles.js';
+export { DateInputGroup } from './components/date-input-group/index.js';
+export { DateInputGroupInput, DateInputGroupInputCompound, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix } from './components/date-input-group/date-input-group.js';
+export { DatePickerRoot } from './components/date-picker/date-picker.js';
+export { datePickerVariants } from './styles/src/components/date-picker/date-picker.styles.js';
+export { DatePicker } from './components/date-picker/index.js';
+export { DateRangePickerRoot } from './components/date-range-picker/date-range-picker.js';
+export { dateRangePickerVariants } from './styles/src/components/date-range-picker/date-range-picker.styles.js';
+export { DateRangePicker } from './components/date-range-picker/index.js';
+export { descriptionVariants } from './styles/src/components/description/description.styles.js';
+export { Description } from './components/description/index.js';
+export { DescriptionRoot } from './components/description/description.js';
+export { errorMessageVariants } from './styles/src/components/error-message/error-message.styles.js';
+export { ErrorMessage } from './components/error-message/index.js';
+export { ErrorMessageRoot } from './components/error-message/error-message.js';
+export { fieldErrorVariants } from './styles/src/components/field-error/field-error.styles.js';
+export { FieldError } from './components/field-error/index.js';
+export { FieldErrorRoot } from './components/field-error/field-error.js';
+export { FieldGroupRoot } from './components/field-group/field-group.js';
+export { fieldGroupVariants } from './styles/src/components/field-group/field-group.styles.js';
+export { FieldGroup } from './components/field-group/index.js';
+export { InputRoot } from './components/input/input.js';
+export { inputVariants } from './styles/src/components/input/input.styles.js';
+export { Input } from './components/input/index.js';
+export { labelVariants } from './styles/src/components/label/label.styles.js';
+export { Label } from './components/label/index.js';
+export { LabelRoot } from './components/label/label.js';
+export { popoverVariants } from './styles/src/components/popover/popover.styles.js';
+export { Popover } from './components/popover/index.js';
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from './components/popover/popover.js';
+export { RangeCalendarRoot } from './components/range-calendar/range-calendar.js';
+export { rangeCalendarVariants } from './styles/src/components/range-calendar/range-calendar.styles.js';
+export { RangeCalendar } from './components/range-calendar/index.js';
+export { SurfaceContext, SurfaceRoot } from './components/surface/surface.js';
+export { surfaceVariants } from './styles/src/components/surface/surface.styles.js';
+export { Surface } from './components/surface/index.js';
+export { TextFieldContext, TextFieldRoot } from './components/text-field/text-field.js';
+export { textFieldVariants } from './styles/src/components/text-field/text-field.styles.js';
+export { TextField } from './components/text-field/index.js';

package/dist/styles/src/components/button/button.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+const buttonVariants = tv({
+  base: "button",
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: "md",
+    variant: "primary"
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "button--full-width"
+    },
+    isIconOnly: {
+      true: "button--icon-only"
+    },
+    size: {
+      lg: "button--lg",
+      md: "button--md",
+      sm: "button--sm"
+    },
+    variant: {
+      danger: "button--danger",
+      "danger-soft": "button--danger-soft",
+      ghost: "button--ghost",
+      outline: "button--outline",
+      primary: "button--primary",
+      secondary: "button--secondary",
+      tertiary: "button--tertiary"
+    }
+  }
+});
+
+export { buttonVariants };

package/dist/styles/src/components/button-group/button-group.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const buttonGroupVariants = tv({
+  base: "button-group",
+  defaultVariants: {
+    fullWidth: false
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "button-group--full-width"
+    }
+  }
+});
+
+export { buttonGroupVariants };

package/dist/styles/src/components/calendar/calendar.styles.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+const calendarVariants = tv({
+  base: "calendar",
+  slots: {
+    cell: "calendar__cell"
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      primary: "calendar--primary",
+      secondary: "calendar--secondary"
+    },
+    size: {
+      sm: "calendar--sm",
+      md: "calendar--md",
+      lg: "calendar--lg"
+    }
+  }
+});
+
+export { calendarVariants };

package/dist/styles/src/components/card/card.styles.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+
+const cardVariants = tv({
+  defaultVariants: {
+    variant: "default"
+  },
+  slots: {
+    base: "card",
+    content: "card__content",
+    description: "card__description",
+    footer: "card__footer",
+    header: "card__header",
+    title: "card__title"
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "card--default"
+      },
+      secondary: {
+        base: "card--secondary"
+      },
+      tertiary: {
+        base: "card--tertiary"
+      },
+      transparent: {
+        base: "card--transparent"
+      }
+    }
+  }
+});
+
+export { cardVariants };

package/dist/styles/src/components/checkbox/checkbox.styles.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxVariants = tv({
+  defaultVariants: {
+    variant: "primary"
+  },
+  slots: {
+    base: "checkbox",
+    content: "checkbox__content",
+    control: "checkbox__control",
+    indicator: "checkbox__indicator"
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "checkbox--primary"
+      },
+      secondary: {
+        base: "checkbox--secondary"
+      }
+    }
+  }
+});
+
+export { checkboxVariants };

package/dist/styles/src/components/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxGroupVariants = tv({
+  base: "checkbox-group",
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      primary: "checkbox-group--primary",
+      secondary: "checkbox-group--secondary"
+    },
+    size: {
+      sm: "checkbox-group--sm",
+      md: "checkbox-group--md",
+      lg: "checkbox-group--lg"
+    }
+  }
+});
+
+export { checkboxGroupVariants };

package/dist/styles/src/components/close-button/close-button.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+const closeButtonVariants = tv({
+  base: "close-button",
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: "close-button--default"
+    }
+  }
+});
+
+export { closeButtonVariants };

package/dist/styles/src/components/combobox/combobox.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const comboboxVariants = tv({
+  defaultVariants: {
+    fullWidth: false
+  },
+  slots: {
+    base: "combobox",
+    inputGroup: "combobox__input-group",
+    popover: "combobox__popover",
+    trigger: "combobox__trigger"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "combobox--full-width",
+        inputGroup: "combobox__input-group--full-width"
+      }
+    }
+  }
+});
+
+export { comboboxVariants };

package/dist/styles/src/components/date-field/date-field.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const dateFieldVariants = tv({
+  base: "date-field",
+  defaultVariants: {
+    fullWidth: false
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "date-field--full-width"
+    }
+  }
+});
+
+export { dateFieldVariants };

package/dist/styles/src/components/date-input-group/date-input-group.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const dateInputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false
+  },
+  slots: {
+    base: "date-input-group",
+    input: "date-input-group__input",
+    prefix: "date-input-group__prefix",
+    segment: "date-input-group__segment",
+    suffix: "date-input-group__suffix"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "date-input-group--full-width"
+      }
+    }
+  }
+});
+
+export { dateInputGroupVariants };

package/dist/styles/src/components/date-picker/date-picker.styles.js

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+const datePickerVariants = tv({
+  base: "date-picker",
+  slots: {
+    trigger: "date-picker__trigger",
+    input: "date-picker__input"
+  }
+});
+
+export { datePickerVariants };

package/dist/styles/src/components/date-range-picker/date-range-picker.styles.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+
+const dateRangePickerVariants = tv({
+  base: "date-range-picker",
+  slots: {
+    trigger: "date-range-picker__trigger",
+    inputGroup: "date-range-picker__input-group",
+    input: "date-range-picker__input",
+    separator: "date-range-picker__separator"
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      primary: "date-range-picker--primary",
+      secondary: "date-range-picker--secondary"
+    },
+    size: {
+      sm: "date-range-picker--sm",
+      md: "date-range-picker--md",
+      lg: "date-range-picker--lg"
+    }
+  }
+});
+
+export { dateRangePickerVariants };

package/dist/styles/src/components/description/description.styles.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const descriptionVariants = tv({
+  base: "description"
+});
+
+export { descriptionVariants };

package/dist/styles/src/components/error-message/error-message.styles.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const errorMessageVariants = tv({
+  base: "error-message"
+});
+
+export { errorMessageVariants };

package/dist/styles/src/components/field-error/field-error.styles.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const fieldErrorVariants = tv({
+  base: "field-error"
+});
+
+export { fieldErrorVariants };

package/dist/styles/src/components/field-group/field-group.styles.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+import { focusRing } from '../../utils/state.js';
+
+const fieldBorderStyles = tv({
+  base: "transition",
+  variants: {
+    isFocusWithin: {
+      false: "border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]",
+      true: "border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]"
+    },
+    isInvalid: {
+      true: "border-red-600 dark:border-red-600 forced-colors:border-[Mark]"
+    },
+    isDisabled: {
+      true: "border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]"
+    }
+  }
+});
+const fieldGroupVariants = tv({
+  extend: focusRing,
+  base: "field-group",
+  variants: fieldBorderStyles.variants
+});
+
+export { fieldBorderStyles, fieldGroupVariants };

package/dist/styles/src/components/input/input.styles.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+const inputVariants = tv({
+  base: "input",
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "input--full-width"
+    },
+    variant: {
+      primary: "input--primary",
+      secondary: "input--secondary"
+    }
+  }
+});
+
+export { inputVariants };

package/dist/styles/src/components/label/label.styles.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+const labelVariants = tv({
+  base: "label",
+  defaultVariants: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  },
+  variants: {
+    isDisabled: {
+      true: "label--disabled"
+    },
+    isInvalid: {
+      true: "label--invalid"
+    },
+    isRequired: {
+      true: "label--required"
+    }
+  }
+});
+
+export { labelVariants };

package/dist/styles/src/components/popover/popover.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const popoverVariants = tv({
+  slots: {
+    base: "popover",
+    dialog: "popover__dialog",
+    heading: "popover__heading",
+    trigger: "popover__trigger"
+  }
+});
+
+export { popoverVariants };

package/dist/styles/src/components/range-calendar/range-calendar.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+const rangeCalendarVariants = tv({
+  base: "range-calendar",
+  slots: {
+    cell: "range-calendar__cell",
+    grid: "range-calendar__grid"
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  },
+  variants: {
+    variant: {
+      primary: "range-calendar--primary",
+      secondary: "range-calendar--secondary"
+    },
+    size: {
+      sm: "range-calendar--sm",
+      md: "range-calendar--md",
+      lg: "range-calendar--lg"
+    }
+  }
+});
+
+export { rangeCalendarVariants };

package/dist/styles/src/components/surface/surface.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+const surfaceVariants = tv({
+  base: "surface",
+  defaultVariants: {
+    variant: "default",
+    effect: "none"
+  },
+  variants: {
+    effect: {
+      none: "",
+      liquid: "surface--liquid"
+    },
+    variant: {
+      default: "surface--default",
+      secondary: "surface--secondary",
+      tertiary: "surface--tertiary",
+      transparent: "surface--transparent"
+    }
+  },
+  compoundVariants: [{
+    effect: "liquid",
+    variant: "transparent",
+    class: "surface--liquid-transparent"
+  }, {
+    effect: "liquid",
+    variant: "default",
+    class: "surface--liquid-default"
+  }]
+});
+
+export { surfaceVariants };

package/dist/styles/src/components/text-field/text-field.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const textFieldVariants = tv({
+  base: "text-field",
+  defaultVariants: {
+    fullWidth: false
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "text-field--full-width"
+    }
+  }
+});
+
+export { textFieldVariants };

package/dist/styles/src/utils/state.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+const focusRing = tv({
+  base: "focus-ring",
+  variants: {
+    isFocusVisible: {
+      false: "",
+      true: "outline-2"
+    }
+  }
+});
+
+export { focusRing };

package/dist/utils/assertion.d.ts

@@ -0,0 +1,9 @@
+export type Dict<T = any> = Record<string, T>;
+export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isEmptyArray(value: any): boolean;
+export declare function isObject(value: any): value is Dict;
+export declare function isEmptyObject(value: any): boolean;
+export declare function isEmpty(value: any): boolean;
+export type Booleanish = boolean | "true" | "false";
+export declare const dataAttr: (condition: boolean | undefined) => Booleanish;
+export declare const isNumeric: (value?: string | number) => boolean;

package/dist/utils/assertion.js

@@ -0,0 +1,3 @@
+const dataAttr = condition => condition ? "true" : undefined;
+
+export { dataAttr };

package/dist/utils/compose.d.ts

@@ -0,0 +1,6 @@
+declare function composeTwRenderProps<T>(className: string | ((v: T) => string) | undefined, tailwind?: string | ((v: T) => string | undefined)): string | ((v: T) => string);
+export declare const composeSlotClassName: (slotFn: ((args?: {
+    className?: string;
+    [key: string]: any;
+}) => string) | undefined, className?: string, variants?: Record<string, any>) => string | undefined;
+export { composeTwRenderProps };

package/dist/utils/compose.js

@@ -0,0 +1,18 @@
+import { composeRenderProps } from 'react-aria-components';
+import { cx } from 'tailwind-variants';
+
+function composeTwRenderProps(className, tailwind) {
+  return composeRenderProps(className, (className, renderProps) => {
+    const tw = typeof tailwind === "function" ? tailwind(renderProps) ?? "" : tailwind ?? "";
+    const cls = className ?? "";
+    return cx(tw, cls) ?? "";
+  });
+}
+const composeSlotClassName = (slotFn, className, variants) => {
+  return typeof slotFn === "function" ? slotFn({
+    ...({}),
+    className
+  }) : className;
+};
+
+export { composeSlotClassName, composeTwRenderProps };

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./compose";
+export * from "./styles";
+export * from "./assertion";

package/dist/utils/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const focusRing: import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "focus-ring", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "focus-ring", unknown, unknown, undefined>>;