@arobo/react 1.0.1 → 1.1.1

package/dist/packages/styles/src/components/textarea/textarea.styles.js

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

package/dist/packages/styles/src/components/toast/toast.styles.js

@@ -0,0 +1,65 @@
+import { tv } from 'tailwind-variants';
+
+const toastVariants = tv({
+  defaultVariants: {
+    placement: "bottom",
+    variant: "default"
+  },
+  slots: {
+    action: "toast__action",
+    close: "toast__close-button",
+    content: "toast__content",
+    description: "toast__description",
+    indicator: "toast__indicator",
+    region: "toast-region",
+    title: "toast__title",
+    toast: "toast"
+  },
+  variants: {
+    placement: {
+      bottom: {
+        region: "toast-region--bottom",
+        toast: "toast--bottom"
+      },
+      "bottom end": {
+        region: "toast-region--bottom-end",
+        toast: "toast--bottom-end"
+      },
+      "bottom start": {
+        region: "toast-region--bottom-start",
+        toast: "toast--bottom-start"
+      },
+      top: {
+        region: "toast-region--top",
+        toast: "toast--top"
+      },
+      "top end": {
+        region: "toast-region--top-end",
+        toast: "toast--top-end"
+      },
+      "top start": {
+        region: "toast-region--top-start",
+        toast: "toast--top-start"
+      }
+    },
+    variant: {
+      accent: {
+        toast: "toast--accent"
+      },
+      danger: {
+        toast: "toast--danger"
+      },
+      default: {
+        toast: "toast--default"
+      },
+      success: {
+        toast: "toast--success"
+      },
+      warning: {
+        toast: "toast--warning"
+      }
+    }
+  }
+});
+
+export { toastVariants };

package/dist/packages/styles/src/components/toggle-button/toggle-button.styles.js

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

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

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

package/dist/packages/styles/src/components/tooltip/tooltip.styles.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const tooltipVariants = tv({
+  slots: {
+    base: "tooltip",
+    trigger: "tooltip__trigger"
+  }
+});
+
+export { tooltipVariants };

package/dist/utils/children.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement[];
+export declare const pickChildren: <T = ReactNode>(children: T | undefined, targetChild: React.ElementType) => [T | undefined, T[] | undefined];

package/dist/utils/children.js

@@ -0,0 +1,17 @@
+import { Children, isValidElement } from 'react';
+
+const pickChildren = (children, targetChild) => {
+  const target = [];
+  const withoutTargetChildren = Children.map(children, item => {
+    if (! /*#__PURE__*/isValidElement(item)) return item;
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  })?.filter(Boolean);
+  const targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutTargetChildren, targetChildren];
+};
+
+export { pickChildren };

package/dist/utils/compose.js

@@ -10,7 +10,7 @@ function composeTwRenderProps(className, tailwind) {
 }
 const composeSlotClassName = (slotFn, className, variants) => {
   return typeof slotFn === "function" ? slotFn({
-    ...({}),
+    ...(variants ?? {}),
     className
   }) : className;
 };

package/dist/utils/index.d.ts

@@ -1,3 +1,7 @@
 export * from "./compose";
+export * from "./assertion";
 export * from "./styles";
 export * from "./assertion";
+export * from "./merge-props";
+export * from "./merge-refs";
+export * from "./children";

package/dist/utils/merge-props.d.ts

@@ -0,0 +1,26 @@
+type Props = Record<string, any>;
+/**
+ * Merges multiple props objects into a single props object.
+ *
+ * - Event handlers (e.g., onClick, onChange) are chained so that all handlers are called in order.
+ * - The `className` property is merged using `mergeClassNames`.
+ * - The `id` property is merged using `mergeIds`.
+ * - All other properties are overwritten by the last occurrence.
+ *
+ * @typeParam T - An array of props objects to be merged.
+ * @param {...T} propsList - The list of props objects to merge.
+ * @returns {Props} The merged props object.
+ *
+ * @example
+ * ```typescript
+ * const merged = mergeProps(
+ *   { onClick: handleClick1, className: 'foo', id: 'a' },
+ *   { onClick: handleClick2, className: 'bar', id: 'b' }
+ * );
+ * // merged.onClick will call both handleClick1 and handleClick2
+ * // merged.className will be 'foo bar'
+ * // merged.id will be merged by mergeIds
+ * ```
+ */
+export declare const mergeProps: <T extends Props[]>(...propsList: T) => Props;
+export {};

package/dist/utils/merge-props.js

@@ -0,0 +1,72 @@
+const isEventHandler = key => {
+  return /^on[A-Z]/.test(key);
+};
+const chainHandlers = (...handlers) => {
+  return function chainedHandler(...args) {
+    for (const handler of handlers) {
+      if (typeof handler === 'function') {
+        handler.apply(this, args);
+      }
+    }
+  };
+};
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const mergeIds = (...ids) => {
+  const seen = new Set();
+  for (const id of ids) {
+    if (id && !seen.has(id)) {
+      seen.add(id);
+    }
+  }
+  return seen.size > 0 ? Array.from(seen).join(' ') : undefined;
+};
+
+/**
+ * Merges multiple props objects into a single props object.
+ *
+ * - Event handlers (e.g., onClick, onChange) are chained so that all handlers are called in order.
+ * - The `className` property is merged using `mergeClassNames`.
+ * - The `id` property is merged using `mergeIds`.
+ * - All other properties are overwritten by the last occurrence.
+ *
+ * @typeParam T - An array of props objects to be merged.
+ * @param {...T} propsList - The list of props objects to merge.
+ * @returns {Props} The merged props object.
+ *
+ * @example
+ * ```typescript
+ * const merged = mergeProps(
+ *   { onClick: handleClick1, className: 'foo', id: 'a' },
+ *   { onClick: handleClick2, className: 'bar', id: 'b' }
+ * );
+ * // merged.onClick will call both handleClick1 and handleClick2
+ * // merged.className will be 'foo bar'
+ * // merged.id will be merged by mergeIds
+ * ```
+ */
+const mergeProps = (...propsList) => {
+  const result = {};
+  for (const props of propsList) {
+    for (const key in props) {
+      const value = props[key];
+      if (isEventHandler(key)) {
+        if (result[key]) {
+          result[key] = chainHandlers(result[key], value);
+        } else {
+          result[key] = value;
+        }
+      } else if (key === 'className') {
+        result['className'] = mergeClassNames(result['className'], value);
+      } else if (key === 'id') {
+        result['id'] = mergeIds(result['id'], value);
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+};
+
+export { mergeProps };

package/dist/utils/merge-refs.d.ts

@@ -0,0 +1,5 @@
+import type { MutableRefObject, Ref } from 'react';
+/**
+ * Merges multiple refs into one. Works with either callback or object refs.
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | MutableRefObject<T> | null | undefined>): Ref<T>;

package/dist/utils/merge-refs.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Merges multiple refs into one. Works with either callback or object refs.
+ */
+function mergeRefs(...refs) {
+  if (refs.length === 1 && refs[0]) {
+    return refs[0];
+  }
+  return value => {
+    let hasCleanup = false;
+    const cleanups = refs.map(ref => {
+      const cleanup = setRef(ref, value);
+      hasCleanup ||= typeof cleanup == 'function';
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        cleanups.forEach((cleanup, i) => {
+          if (typeof cleanup === 'function') {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        });
+      };
+    }
+  };
+}
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    return ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+}
+
+export { mergeRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arobo/react",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "private": false,
   "type": "module",
   "files": [
@@ -21,12 +21,18 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@internationalized/date": "^3.10.1",
-    "@radix-ui/react-slot": "^1.2.4",
-    "lucide-react": "^0.563.0",
-    "react-aria-components": "^1.14.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2"
+    "@iconify/react": "6.0.2",
+    "@internationalized/date": "3.10.1",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-slot": "1.2.4",
+    "@react-types/shared": "3.32.1",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.4.2",
+    "lucide-react": "0.563.0",
+    "react-aria-components": "1.14.0",
+    "tailwind-merge": "3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "vaul": "1.1.2"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/dist/components/field-group/field-group.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import type { ComponentPropsWithRef } from "react";
-import { type FieldGroupVariants } from "@arobo/styles";
-import { Group } from "react-aria-components";
-interface FieldGroupRootProps extends FieldGroupVariants, ComponentPropsWithRef<typeof Group> {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const FieldGroupRoot: React.ForwardRefExoticComponent<Omit<FieldGroupRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { FieldGroupRoot };
-export type { FieldGroupRootProps };

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

@@ -1,18 +0,0 @@
-import { forwardRef } from 'react';
-import { Group, composeRenderProps } from 'react-aria-components';
-import { jsx } from 'react/jsx-runtime';
-import { fieldGroupVariants } from '../../styles/src/components/field-group/field-group.styles.js';
-
-const FieldGroupRoot = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/jsx(Group, {
-    ...props,
-    ref: ref,
-    className: composeRenderProps(props.className, (className, renderProps) => fieldGroupVariants({
-      ...renderProps,
-      className
-    }))
-  });
-});
-FieldGroupRoot.displayName = "HeroUI.FieldGroup";
-
-export { FieldGroupRoot };

package/dist/components/field-group/index.d.ts

@@ -1,13 +0,0 @@
-import type { ComponentProps } from "react";
-import { FieldGroupRoot } from "./field-group";
-export declare const FieldGroup: import("react").ForwardRefExoticComponent<Omit<import("./field-group").FieldGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<import("./field-group").FieldGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-};
-export type FieldGroup = {
-    Props: ComponentProps<typeof FieldGroupRoot>;
-    RootProps: ComponentProps<typeof FieldGroupRoot>;
-};
-export { FieldGroupRoot } from "./field-group";
-export type { FieldGroupRootProps, FieldGroupRootProps as FieldGroupProps, } from "./field-group";
-export { fieldGroupVariants } from "@arobo/styles";
-export type { FieldGroupVariants } from "@arobo/styles";

package/dist/components/field-group/index.js

@@ -1,11 +0,0 @@
-import { FieldGroupRoot } from './field-group.js';
-export { fieldGroupVariants } from '../../styles/src/components/field-group/field-group.styles.js';
-
-/* -------------------------------------------------------------------------------------------------
- * Compound Component
- * -----------------------------------------------------------------------------------------------*/
-const FieldGroup = Object.assign(FieldGroupRoot, {
-  Root: FieldGroupRoot
-});
-
-export { FieldGroup, FieldGroupRoot };

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

@@ -1,25 +0,0 @@
-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/utils/state.js

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