@cognitiv/components-web 1.0.5 → 1.1.0

package/dist/components/checkbox/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+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/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,14 @@
+import type { CheckboxVariants } from "../checkbox";
+import type { CheckboxGroupVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "react-aria-components";
+interface CheckboxGroupContext {
+    variant?: CheckboxVariants["variant"];
+}
+declare const CheckboxGroupContext: React.Context<CheckboxGroupContext>;
+interface CheckboxGroupProps extends ComponentPropsWithRef<typeof CheckboxGroupPrimitive>, CheckboxGroupVariants {
+}
+declare const CheckboxGroup: ({ children, className, variant, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxGroup, CheckboxGroupContext };
+export type { CheckboxGroupProps };

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

@@ -0,0 +1,33 @@
+"use client";
+import React__default, { createContext } from 'react';
+import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { checkboxGroupVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const CheckboxGroupContext = /*#__PURE__*/createContext({});
+const CheckboxGroup = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => checkboxGroupVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(CheckboxGroupContext.Provider, {
+    value: {
+      variant
+    },
+    children: /*#__PURE__*/jsx(CheckboxGroup$1, {
+      className: composeTwRenderProps(className, styles),
+      "data-slot": "checkbox-group",
+      ...props,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+export { CheckboxGroup, CheckboxGroupContext };

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

@@ -0,0 +1,3 @@
+export { CheckboxGroup } from "./checkbox-group";
+export type { CheckboxGroupProps } from "./checkbox-group";
+export { checkboxGroupVariants, type CheckboxGroupVariants } from "./styles";

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

@@ -0,0 +1,3 @@
+"use strict";
+export { CheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupVariants } from './styles.js';

package/dist/components/checkbox-group/styles.d.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "checkbox-group", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "checkbox-group", unknown, unknown, undefined>>;
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;

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

@@ -0,0 +1,17 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const checkboxGroupVariants = tv({
+  base: "checkbox-group",
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: "checkbox-group--primary",
+      secondary: "checkbox-group--secondary"
+    }
+  }
+});
+
+export { checkboxGroupVariants };

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

@@ -0,0 +1,14 @@
+import type { ChipVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React 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;
+interface ChipLabelProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const ChipLabel: ({ children, className, ...props }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
+export { ChipRoot, ChipLabel };
+export type { ChipRootProps, ChipLabelProps };

package/dist/components/chip/chip.js

@@ -0,0 +1,67 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { chipVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ChipContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Chip Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ChipRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => chipVariants({
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  const chipChildren = React__default.useMemo(() => {
+    if (typeof children === "string" || typeof children === "number") {
+      return /*#__PURE__*/jsx(ChipLabel, {
+        children: children
+      });
+    }
+    return children;
+  }, [children]);
+  return /*#__PURE__*/jsx(ChipContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("span", {
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      "data-slot": "chip",
+      children: chipChildren
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Chip Label
+ * -----------------------------------------------------------------------------------------------*/
+
+const ChipLabel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ChipContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.label, className),
+    "data-slot": "chip-label",
+    ...props,
+    children: children
+  });
+};
+
+export { ChipLabel, ChipRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ChipLabel, ChipRoot } from "./chip";
+export declare const Chip: (({ children, className, color, size, variant, ...props }: import("./chip").ChipRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Label: ({ children, className, ...props }: import("./chip").ChipLabelProps) => 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>;
+    LabelProps: ComponentProps<typeof ChipLabel>;
+};
+export { ChipRoot, ChipLabel };
+export type { ChipRootProps, ChipRootProps as ChipProps, ChipLabelProps } from "./chip";
+export { chipVariants } from "./styles";
+export type { ChipVariants } from "./styles";

package/dist/components/chip/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ChipRoot, ChipLabel } from './chip.js';
+export { chipVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Chip = Object.assign(ChipRoot, {
+  Label: ChipLabel,
+  Root: ChipRoot
+});
+
+export { Chip, ChipLabel, ChipRoot };

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

@@ -0,0 +1,141 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChipVariants = VariantProps<typeof chipVariants>;

package/dist/components/chip/styles.js

@@ -0,0 +1,59 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const chipVariants = tv({
+  defaultVariants: {
+    color: "default",
+    variant: "secondary"
+  },
+  slots: {
+    base: "chip",
+    label: "chip__label"
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "chip--accent"
+      },
+      danger: {
+        base: "chip--danger"
+      },
+      default: {
+        base: "chip--default"
+      },
+      success: {
+        base: "chip--success"
+      },
+      warning: {
+        base: "chip--warning"
+      }
+    },
+    size: {
+      lg: {
+        base: "chip--lg"
+      },
+      md: {
+        base: "chip--md"
+      },
+      sm: {
+        base: "chip--sm"
+      }
+    },
+    variant: {
+      primary: {
+        base: "chip--primary"
+      },
+      secondary: {
+        base: "chip--secondary"
+      },
+      soft: {
+        base: "chip--soft"
+      },
+      tertiary: {
+        base: "chip--tertiary"
+      }
+    }
+  }
+});
+
+export { chipVariants };

package/dist/components/close-button/close-button.d.ts

@@ -0,0 +1,8 @@
+import type { CloseButtonVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Button as ButtonPrimitive } from "react-aria-components";
+interface CloseButtonRootProps extends ComponentPropsWithRef<typeof ButtonPrimitive>, CloseButtonVariants {
+}
+declare const CloseButtonRoot: ({ children, className, slot, style, variant, ...rest }: CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { CloseButtonRoot };
+export type { CloseButtonRootProps };

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

@@ -0,0 +1,33 @@
+"use client";
+import { useMemo } from 'react';
+import { Button } from 'react-aria-components';
+import { CloseIcon } from '../icons.js';
+import { closeButtonVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const CloseButtonRoot = ({
+  children,
+  className,
+  slot,
+  style,
+  variant,
+  ...rest
+}) => {
+  const styles = useMemo(() => closeButtonVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(Button, {
+    "aria-label": "Close",
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "close-button",
+    slot: slot,
+    style: style,
+    ...rest,
+    children: renderProps => typeof children === "function" ? children(renderProps) : children ?? /*#__PURE__*/jsx(CloseIcon, {
+      "data-slot": "close-button-icon"
+    })
+  });
+};
+
+export { CloseButtonRoot };

package/dist/components/close-button/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { CloseButtonRoot } from "./close-button";
+export declare const CloseButton: (({ children, className, slot, style, variant, ...rest }: import("./close-button").CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, slot, style, variant, ...rest }: import("./close-button").CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type CloseButton = {
+    Props: ComponentProps<typeof CloseButtonRoot>;
+    RootProps: ComponentProps<typeof CloseButtonRoot>;
+};
+export { CloseButtonRoot };
+export type { CloseButtonRootProps, CloseButtonRootProps as CloseButtonProps, } from "./close-button";
+export { closeButtonVariants } from "./styles";
+export type { CloseButtonVariants } from "./styles";

package/dist/components/close-button/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { CloseButtonRoot } from './close-button.js';
+export { closeButtonVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const CloseButton = Object.assign(CloseButtonRoot, {
+  Root: CloseButtonRoot
+});
+
+export { CloseButton, CloseButtonRoot };

package/dist/components/close-button/styles.d.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", {
+    variant: {
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", unknown, unknown, undefined>>;
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;

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

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

package/dist/components/color-area/color-area.d.ts

@@ -0,0 +1,11 @@
+import type { ColorAreaVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { ColorArea as ColorAreaPrimitive, ColorThumb as ColorThumbPrimitive } from "react-aria-components";
+interface ColorAreaRootProps extends ComponentPropsWithRef<typeof ColorAreaPrimitive>, ColorAreaVariants {
+}
+declare const ColorAreaRoot: ({ children, className, showDots, style, ...props }: ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorAreaThumbProps extends ComponentPropsWithRef<typeof ColorThumbPrimitive> {
+}
+declare const ColorAreaThumb: ({ className, style, ...props }: ColorAreaThumbProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorAreaRoot, ColorAreaThumb };
+export type { ColorAreaRootProps, ColorAreaThumbProps };

package/dist/components/color-area/color-area.js

@@ -0,0 +1,70 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ColorArea, ColorThumb } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { colorAreaVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorAreaContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorArea Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorAreaRoot = ({
+  children,
+  className,
+  showDots,
+  style,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorAreaVariants({
+    showDots
+  }), [showDots]);
+  return /*#__PURE__*/jsx(ColorAreaContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorArea, {
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "color-area",
+      style: renderProps => {
+        const userStyle = typeof style === "function" ? style(renderProps) : style;
+        return {
+          "--color-area-background": renderProps.defaultStyle.background,
+          ...userStyle
+        };
+      },
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorArea Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorAreaThumb = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorAreaContext);
+  return /*#__PURE__*/jsx(ColorThumb, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "color-area-thumb",
+    style: renderProps => {
+      const userStyle = typeof style === "function" ? style(renderProps) : style;
+      return {
+        "--color-area-thumb-color": renderProps.defaultStyle.backgroundColor,
+        ...userStyle
+      };
+    },
+    ...props
+  });
+};
+
+export { ColorAreaRoot, ColorAreaThumb };

package/dist/components/color-area/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ColorAreaRoot, ColorAreaThumb } from "./color-area";
+export declare const ColorArea: (({ children, className, showDots, style, ...props }: import("./color-area").ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, showDots, style, ...props }: import("./color-area").ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ className, style, ...props }: import("./color-area").ColorAreaThumbProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorArea = {
+    Props: ComponentProps<typeof ColorAreaRoot>;
+    RootProps: ComponentProps<typeof ColorAreaRoot>;
+    ThumbProps: ComponentProps<typeof ColorAreaThumb>;
+};
+export { ColorAreaRoot, ColorAreaThumb };
+export type { ColorAreaRootProps, ColorAreaRootProps as ColorAreaProps, ColorAreaThumbProps, } from "./color-area";
+export { colorAreaVariants } from "./styles";
+export type { ColorAreaVariants } from "./styles";

package/dist/components/color-area/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ColorAreaRoot, ColorAreaThumb } from './color-area.js';
+export { colorAreaVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorArea = Object.assign(ColorAreaRoot, {
+  Root: ColorAreaRoot,
+  Thumb: ColorAreaThumb
+});
+
+export { ColorArea, ColorAreaRoot, ColorAreaThumb };