@arobo/react 1.0.1 → 1.1.1

package/dist/components/calendar/calendar.js

@@ -3,7 +3,7 @@ import { Calendar, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarCel
 import { tv } from 'tailwind-variants';
 import { Button } from '../button/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { calendarVariants } from '../../styles/src/components/calendar/calendar.styles.js';
+import { calendarVariants } from '../../packages/styles/src/components/calendar/calendar.styles.js';
 import { focusRing } from '../../utils/styles.js';
 import { composeTwRenderProps } from '../../utils/compose.js';
 

package/dist/components/calendar/index.js

@@ -1,6 +1,6 @@
 import { CalendarRoot } from './calendar.js';
 export { CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeader } from './calendar.js';
-export { calendarVariants } from '../../styles/src/components/calendar/calendar.styles.js';
+export { calendarVariants } from '../../packages/styles/src/components/calendar/calendar.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/card/card.js

@@ -1,7 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React__default, { createContext, useContext } from 'react';
 import { composeSlotClassName } from '../../utils/compose.js';
 import { jsx } from 'react/jsx-runtime';
-import { cardVariants } from '../../styles/src/components/card/card.styles.js';
+import { cardVariants } from '../../packages/styles/src/components/card/card.styles.js';
 import { SurfaceContext } from '../surface/surface.js';
 
 const CardContext = /*#__PURE__*/createContext({});
@@ -16,7 +16,7 @@ const CardRoot = ({
   variant = "default",
   ...props
 }) => {
-  const slots = React.useMemo(() => cardVariants({
+  const slots = React__default.useMemo(() => cardVariants({
     variant
   }), [variant]);
   const content = /*#__PURE__*/jsx("div", {

package/dist/components/card/index.js

@@ -1,5 +1,5 @@
 import { CardRoot, CardFooter, CardContent, CardDescription, CardTitle, CardHeader } from './card.js';
-export { cardVariants } from '../../styles/src/components/card/card.styles.js';
+export { cardVariants } from '../../packages/styles/src/components/card/card.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,26 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
+import * as React from "react";
+import { Button } from "../button";
+export type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+type CarouselRootProps = React.ComponentProps<"div"> & CarouselProps;
+declare function Carousel({ children, className, opts, orientation, plugins, setApi, ...props }: CarouselRootProps): import("react/jsx-runtime").JSX.Element;
+type CarouselContentProps = React.ComponentProps<"div">;
+declare function CarouselContent({ className, ...props }: CarouselContentProps): import("react/jsx-runtime").JSX.Element;
+type CarouselItemProps = React.ComponentProps<"div">;
+declare function CarouselItem({ className, ...props }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
+type CarouselPreviousProps = React.ComponentProps<typeof Button>;
+declare function CarouselPrevious({ className, size, variant, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
+type CarouselNextProps = React.ComponentProps<typeof Button>;
+declare function CarouselNext({ className, size, variant, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
+export { Carousel as CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+export type { CarouselProps as CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, };

package/dist/components/carousel/carousel.js

@@ -0,0 +1,170 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import { ArrowRight, ArrowLeft } from 'lucide-react';
+import * as React from 'react';
+import { cn } from 'tailwind-variants';
+import { Button } from '../button/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const CarouselContext = /*#__PURE__*/React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  children,
+  className,
+  opts,
+  orientation = "horizontal",
+  plugins,
+  setApi,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y"
+  }, plugins);
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const onSelect = React.useCallback(api => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React.useCallback(event => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+  }, [scrollPrev, scrollNext]);
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /*#__PURE__*/jsx(CarouselContext.Provider, {
+    value: {
+      carouselRef,
+      api: api,
+      opts,
+      orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext
+    },
+    children: /*#__PURE__*/jsx("div", {
+      "aria-roledescription": "carousel",
+      className: cn("relative", className),
+      "data-slot": "carousel",
+      role: "region",
+      onKeyDownCapture: handleKeyDown,
+      ...props,
+      children: children
+    })
+  });
+}
+function CarouselContent({
+  className,
+  ...props
+}) {
+  const {
+    carouselRef,
+    orientation
+  } = useCarousel();
+  return /*#__PURE__*/jsx("div", {
+    ref: carouselRef,
+    className: "overflow-hidden",
+    "data-slot": "carousel-content",
+    children: /*#__PURE__*/jsx("div", {
+      className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+      ...props
+    })
+  });
+}
+function CarouselItem({
+  className,
+  ...props
+}) {
+  const {
+    orientation
+  } = useCarousel();
+  return /*#__PURE__*/jsx("div", {
+    "aria-roledescription": "slide",
+    "data-slot": "carousel-item",
+    role: "group",
+    className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+    ...props
+  });
+}
+function CarouselPrevious({
+  className,
+  size = "md",
+  variant = "outline",
+  ...props
+}) {
+  const {
+    orientation,
+    scrollPrev,
+    canScrollPrev
+  } = useCarousel();
+  return /*#__PURE__*/jsxs(Button, {
+    "data-slot": "carousel-previous",
+    isDisabled: !canScrollPrev,
+    size: size,
+    variant: variant,
+    className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+    onClick: scrollPrev,
+    ...props,
+    children: [/*#__PURE__*/jsx(ArrowLeft, {}), /*#__PURE__*/jsx("span", {
+      className: "sr-only",
+      children: "Previous slide"
+    })]
+  });
+}
+function CarouselNext({
+  className,
+  size = "md",
+  variant = "outline",
+  ...props
+}) {
+  const {
+    orientation,
+    scrollNext,
+    canScrollNext
+  } = useCarousel();
+  return /*#__PURE__*/jsxs(Button, {
+    "data-slot": "carousel-next",
+    isDisabled: !canScrollNext,
+    size: size,
+    variant: variant,
+    className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+    onClick: scrollNext,
+    ...props,
+    children: [/*#__PURE__*/jsx(ArrowRight, {}), /*#__PURE__*/jsx("span", {
+      className: "sr-only",
+      children: "Next slide"
+    })]
+  });
+}
+
+export { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel as CarouselRoot };

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,17 @@
+import { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from "./carousel";
+export declare const Carousel: typeof CarouselRoot & {
+    Content: typeof CarouselContent;
+    Item: typeof CarouselItem;
+    Previous: typeof CarouselPrevious;
+    Next: typeof CarouselNext;
+};
+export type Carousel = {
+    Props: React.ComponentProps<typeof CarouselRoot>;
+    RootProps: React.ComponentProps<typeof CarouselRoot>;
+    ContentProps: React.ComponentProps<typeof CarouselContent>;
+    ItemProps: React.ComponentProps<typeof CarouselItem>;
+    PreviousProps: React.ComponentProps<typeof CarouselPrevious>;
+    NextProps: React.ComponentProps<typeof CarouselNext>;
+};
+export { CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+export type { CarouselApi, CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, } from "./carousel";

package/dist/components/carousel/index.js

@@ -0,0 +1,10 @@
+import { CarouselRoot as Carousel$1, CarouselNext, CarouselPrevious, CarouselItem, CarouselContent } from './carousel.js';
+
+const Carousel = Object.assign(Carousel$1, {
+  Content: CarouselContent,
+  Item: CarouselItem,
+  Previous: CarouselPrevious,
+  Next: CarouselNext
+});
+
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel$1 as CarouselRoot };

package/dist/components/checkbox/checkbox.d.ts

@@ -3,11 +3,14 @@ import type { ComponentPropsWithRef } from "react";
 import type { CheckboxRenderProps } from "react-aria-components";
 import React from "react";
 import { Checkbox as CheckboxPrimitive } from "react-aria-components";
+type CheckboxRenderable = React.ReactNode | ((props: CheckboxRenderProps) => React.ReactNode);
 interface CheckboxRootProps extends ComponentPropsWithRef<typeof CheckboxPrimitive>, CheckboxVariants {
-    /** The name of the checkbox, used when submitting an HTML form. */
     name?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    isPreventLabelClick?: boolean;
 }
-declare const CheckboxRoot: ({ children, className, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxRoot: ({ children, className, checked, defaultChecked, isPreventLabelClick, isSelected, defaultSelected, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
 interface CheckboxControlProps extends ComponentPropsWithRef<"span"> {
 }
 declare const CheckboxControl: ({ children, className, ...props }: CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
@@ -18,5 +21,15 @@ declare const CheckboxIndicator: ({ children, className, ...props }: CheckboxInd
 interface CheckboxContentProps extends ComponentPropsWithRef<"div"> {
 }
 declare const CheckboxContent: ({ children, className, ...props }: CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxProps extends Omit<CheckboxRootProps, "children"> {
+    label?: CheckboxRenderable;
+    description?: CheckboxRenderable;
+    indicator?: CheckboxRenderable;
+    controlClassName?: string;
+    contentClassName?: string;
+}
+export declare const Checkbox: (({ contentClassName, controlClassName, description, indicator, label, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, checked, defaultChecked, isPreventLabelClick, isSelected, defaultSelected, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+};
 export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxContent };
-export type { CheckboxRootProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, };
+export type { CheckboxProps, CheckboxRootProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, };

package/dist/components/checkbox/checkbox.js

@@ -1,30 +1,60 @@
-import React, { useContext, createContext } from 'react';
-import { Checkbox } from 'react-aria-components';
+import React__default, { useContext, createContext } from 'react';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
 import { CheckboxGroupContext } from '../checkbox-group/checkbox-group.js';
-import { jsx } from 'react/jsx-runtime';
-import { checkboxVariants } from '../../styles/src/components/checkbox/checkbox.styles.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { checkboxVariants } from '../../packages/styles/src/components/checkbox/checkbox.styles.js';
 
 const CheckboxContext = /*#__PURE__*/createContext({});
+const resolveRenderProp = (renderable, values) => typeof renderable === "function" ? renderable(values) : renderable;
+const resolveSelectionProps = ({
+  checked,
+  defaultChecked,
+  defaultSelected,
+  isSelected
+}) => {
+  const isControlled = checked !== undefined || isSelected !== undefined;
+  return {
+    defaultSelected: isControlled ? undefined : defaultChecked ?? defaultSelected,
+    isSelected: checked ?? isSelected
+  };
+};
 const CheckboxRoot = ({
   children,
   className,
+  checked,
+  defaultChecked,
+  isPreventLabelClick = true,
+  isSelected,
+  defaultSelected,
   variant,
   ...props
 }) => {
   const checkboxGroupContext = useContext(CheckboxGroupContext);
   const effectiveVariant = variant ?? checkboxGroupContext.variant;
-  const slots = React.useMemo(() => checkboxVariants({
+  const slots = React__default.useMemo(() => checkboxVariants({
     variant: effectiveVariant
   }), [effectiveVariant]);
-  return /*#__PURE__*/jsx(Checkbox, {
+  const {
+    defaultSelected: resolvedDefaultSelected,
+    isSelected: resolvedSelected
+  } = resolveSelectionProps({
+    checked,
+    defaultChecked,
+    defaultSelected,
+    isSelected
+  });
+  return /*#__PURE__*/jsx(Checkbox$1, {
     "data-slot": "checkbox",
+    defaultSelected: resolvedDefaultSelected,
+    isSelected: resolvedSelected,
     ...props,
     className: composeTwRenderProps(className, slots.base()),
     children: values => /*#__PURE__*/jsx(CheckboxContext, {
       value: {
         slots,
-        state: values
+        state: values,
+        isPreventLabelClick
       },
       children: typeof children === "function" ? children(values) : children
     })
@@ -51,33 +81,29 @@ const CheckboxControl = ({
 
 /* -----------------------------------------------------------------------------------------------*/
 
-const CheckboxIndicator = ({
-  children,
-  className,
-  ...props
+const getDefaultIndicator = ({
+  isIndeterminate,
+  isSelected
 }) => {
-  const {
-    slots,
-    state
-  } = useContext(CheckboxContext);
-  const isSelected = state?.isSelected;
-  const isIndeterminate = state?.isIndeterminate;
-  const content = typeof children === "function" ? children(state ?? {}) : children ? children : isIndeterminate ? /*#__PURE__*/jsx("svg", {
-    "aria-hidden": "true",
-    "data-slot": "checkbox-default-indicator--indeterminate",
-    fill: "none",
-    role: "presentation",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 3,
-    viewBox: "0 0 24 24",
-    children: /*#__PURE__*/jsx("line", {
-      x1: "21",
-      x2: "3",
-      y1: "12",
-      y2: "12"
-    })
-  }) : /*#__PURE__*/jsx("svg", {
+  if (isIndeterminate) {
+    return /*#__PURE__*/jsx("svg", {
+      "aria-hidden": "true",
+      "data-slot": "checkbox-default-indicator--indeterminate",
+      fill: "none",
+      role: "presentation",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 3,
+      viewBox: "0 0 24 24",
+      children: /*#__PURE__*/jsx("line", {
+        x1: "21",
+        x2: "3",
+        y1: "12",
+        y2: "12"
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("svg", {
     "aria-hidden": "true",
     "data-slot": "checkbox-default-indicator--checkmark",
     fill: "none",
@@ -93,6 +119,22 @@ const CheckboxIndicator = ({
       points: "1 9 7 14 15 4"
     })
   });
+};
+const CheckboxIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(CheckboxContext);
+  const isSelected = state?.isSelected;
+  const isIndeterminate = state?.isIndeterminate;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : getDefaultIndicator({
+    isIndeterminate,
+    isSelected
+  });
   return /*#__PURE__*/jsx("span", {
     "aria-hidden": "true",
     className: composeSlotClassName(slots?.indicator, className),
@@ -110,14 +152,86 @@ const CheckboxContent = ({
   ...props
 }) => {
   const {
-    slots
+    slots,
+    isPreventLabelClick
   } = useContext(CheckboxContext);
+  const handlePrevent = event => {
+    if (event.defaultPrevented || !isPreventLabelClick) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handlePointerDown = event => {
+    props.onPointerDown?.(event);
+    handlePrevent(event);
+  };
+  const handleClick = event => {
+    props.onClick?.(event);
+    handlePrevent(event);
+  };
   return /*#__PURE__*/jsx("div", {
     className: composeSlotClassName(slots?.content, className),
     "data-slot": "checkbox-content",
     ...props,
+    onPointerDown: handlePointerDown,
+    onClick: handleClick,
     children: children
   });
 };
 
-export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };
+/* ----------------------------------------------------------------------------------------------*/
+
+const renderContent = ({
+  description,
+  label,
+  values
+}) => {
+  const resolvedLabel = resolveRenderProp(label, values);
+  const resolvedDescription = resolveRenderProp(description, values);
+  const hasLabel = !!resolvedLabel;
+  const hasDescription = !!resolvedDescription;
+  if (!hasLabel && !hasDescription) return null;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [hasLabel && /*#__PURE__*/jsx("span", {
+      "data-slot": "label",
+      children: resolvedLabel
+    }), hasDescription && /*#__PURE__*/jsx("span", {
+      "data-slot": "description",
+      children: resolvedDescription
+    })]
+  });
+};
+const CheckboxBase = ({
+  contentClassName,
+  controlClassName,
+  description,
+  indicator,
+  label,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(CheckboxRoot, {
+    ...props,
+    children: values => {
+      const content = renderContent({
+        description,
+        label,
+        values
+      });
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(CheckboxControl, {
+          className: controlClassName,
+          children: /*#__PURE__*/jsx(CheckboxIndicator, {
+            children: indicator
+          })
+        }), content && /*#__PURE__*/jsx(CheckboxContent, {
+          className: contentClassName,
+          children: content
+        })]
+      });
+    }
+  });
+};
+const Checkbox = Object.assign(CheckboxBase, {
+  Root: CheckboxRoot
+});
+
+export { Checkbox, CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };

package/dist/components/checkbox/index.d.ts

@@ -1,19 +1,6 @@
-import type { ComponentProps } from "react";
-import { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot } from "./checkbox";
-export declare const Checkbox: (({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element) & {
-    Root: ({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
-    Control: ({ children, className, ...props }: import("./checkbox").CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: ({ children, className, ...props }: import("./checkbox").CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, className, ...props }: import("./checkbox").CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: (({ contentClassName, controlClassName, description, indicator, label, ...props }: import("./checkbox").CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, checked, defaultChecked, isPreventLabelClick, isSelected, defaultSelected, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
 };
-export type Checkbox = {
-    Props: ComponentProps<typeof CheckboxRoot>;
-    RootProps: ComponentProps<typeof CheckboxRoot>;
-    ControlProps: ComponentProps<typeof CheckboxControl>;
-    IndicatorProps: ComponentProps<typeof CheckboxIndicator>;
-    ContentProps: ComponentProps<typeof CheckboxContent>;
-};
-export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxContent, } from "./checkbox";
-export type { CheckboxRootProps, CheckboxRootProps as CheckboxProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, } from "./checkbox";
+export type { CheckboxProps, } from "./checkbox";
 export { checkboxVariants } from "@arobo/styles";
 export type { CheckboxVariants } from "@arobo/styles";

package/dist/components/checkbox/index.js

@@ -1,14 +1,6 @@
-import { CheckboxRoot, CheckboxContent, CheckboxIndicator, CheckboxControl } from './checkbox.js';
-export { checkboxVariants } from '../../styles/src/components/checkbox/checkbox.styles.js';
+import { Checkbox as Checkbox$1 } from './checkbox.js';
+export { checkboxVariants } from '../../packages/styles/src/components/checkbox/checkbox.styles.js';
 
-/* -------------------------------------------------------------------------------------------------
- * Compound Component
- * -----------------------------------------------------------------------------------------------*/
-const Checkbox = Object.assign(CheckboxRoot, {
-  Root: CheckboxRoot,
-  Control: CheckboxControl,
-  Indicator: CheckboxIndicator,
-  Content: CheckboxContent
-});
+const Checkbox = Checkbox$1;
 
-export { Checkbox, CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };
+export { Checkbox };

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

@@ -1,8 +1,8 @@
-import React, { createContext } from 'react';
+import React__default, { createContext } from 'react';
 import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { composeTwRenderProps } from '../../utils/compose.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { checkboxGroupVariants } from '../../styles/src/components/checkbox-group/checkbox-group.styles.js';
+import { checkboxGroupVariants } from '../../packages/styles/src/components/checkbox-group/checkbox-group.styles.js';
 
 const CheckboxGroupContext = /*#__PURE__*/createContext({});
 const CheckboxGroup = ({
@@ -11,7 +11,7 @@ const CheckboxGroup = ({
   variant,
   ...props
 }) => {
-  const styles = React.useMemo(() => checkboxGroupVariants({
+  const styles = React__default.useMemo(() => checkboxGroupVariants({
     variant
   }), [variant]);
   return /*#__PURE__*/jsx(CheckboxGroupContext.Provider, {

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

@@ -1,2 +1,2 @@
 export { CheckboxGroup } from './checkbox-group.js';
-export { checkboxGroupVariants } from '../../styles/src/components/checkbox-group/checkbox-group.styles.js';
+export { checkboxGroupVariants } from '../../packages/styles/src/components/checkbox-group/checkbox-group.styles.js';

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,9 @@
+import type { ChipVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface ChipRootProps extends Omit<ComponentPropsWithRef<"div">, "type" | "color">, ChipVariants {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const ChipRoot: ({ children, className, color, size, variant, ...props }: ChipRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ChipRoot };
+export type { ChipRootProps };

package/dist/components/chip/chip.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { chipVariants } from '../../packages/styles/src/components/chip/chip.styles.js';
+
+const ChipRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    ...props,
+    className: chipVariants({
+      className,
+      size,
+      color,
+      variant
+    }),
+    children: children
+  });
+};
+
+export { ChipRoot };

package/dist/components/chip/index.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { ChipRoot } from "./chip";
+export declare const Chip: (({ children, className, color, size, variant, ...props }: import("./chip").ChipRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, color, size, variant, ...props }: import("./chip").ChipRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Chip = {
+    Props: ComponentProps<typeof ChipRoot>;
+    RootProps: ComponentProps<typeof ChipRoot>;
+};
+export { ChipRoot };
+export type { ChipRootProps, ChipRootProps as ChipProps } from "./chip";