@cognitiv/components-web 1.0.5 → 1.1.0

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

@@ -0,0 +1,75 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const autocompleteVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;

package/dist/components/autocomplete/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const autocompleteVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  slots: {
+    base: "autocomplete",
+    clearButton: "autocomplete__clear-button",
+    filter: "autocomplete__filter",
+    indicator: "autocomplete__indicator",
+    popover: "autocomplete__popover",
+    trigger: "autocomplete__trigger",
+    value: "autocomplete__value"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "autocomplete--full-width",
+        trigger: "autocomplete__trigger--full-width"
+      }
+    },
+    variant: {
+      primary: {
+        base: "autocomplete--primary"
+      },
+      secondary: {
+        base: "autocomplete--secondary"
+      }
+    }
+  }
+});
+
+export { autocompleteVariants };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+import type { AvatarVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+interface AvatarRootProps extends Omit<ComponentPropsWithRef<typeof AvatarPrimitive.Root>, "color">, AvatarVariants {
+}
+declare const AvatarRoot: ({ children, className, color, size, variant, ...props }: AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarImageProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarFallbackProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Fallback> {
+    color?: AvatarVariants["color"];
+}
+declare const AvatarFallback: ({ className, color, ...props }: AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,93 @@
+"use client";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React__default, { createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { avatarVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const AvatarContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => avatarVariants({
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  return /*#__PURE__*/jsx(AvatarContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(AvatarPrimitive.Root, {
+      className: slots.base({
+        className
+      }),
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Image
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarImage = ({
+  className,
+  crossOrigin,
+  loading,
+  onError,
+  onLoad,
+  sizes,
+  src,
+  srcSet,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Image, {
+    className: composeSlotClassName(slots?.image, className),
+    crossOrigin: crossOrigin,
+    loading: loading,
+    sizes: sizes,
+    src: src,
+    srcSet: srcSet,
+    onError: onError,
+    onLoad: onLoad,
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Fallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarFallback = ({
+  className,
+  color,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Fallback, {
+    className: composeSlotClassName(slots?.fallback, className, {
+      color
+    }),
+    "data-slot": "avatar-fallback",
+    ...props
+  });
+};
+
+export { AvatarFallback, AvatarImage, AvatarRoot };

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./avatar";
+export declare const Avatar: (({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Fallback: ({ className, color, ...props }: import("./avatar").AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: import("./avatar").AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Avatar = {
+    Props: ComponentProps<typeof AvatarRoot>;
+    RootProps: ComponentProps<typeof AvatarRoot>;
+    ImageProps: ComponentProps<typeof AvatarImage>;
+    FallbackProps: ComponentProps<typeof AvatarFallback>;
+};
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarRootProps as AvatarProps, AvatarImageProps, AvatarFallbackProps, } from "./avatar";
+export { avatarVariants } from "./styles";
+export type { AvatarVariants } from "./styles";

package/dist/components/avatar/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { AvatarRoot, AvatarImage, AvatarFallback } from './avatar.js';
+export { avatarVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Avatar = Object.assign(AvatarRoot, {
+  Fallback: AvatarFallback,
+  Image: AvatarImage,
+  Root: AvatarRoot
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

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

@@ -0,0 +1,120 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, undefined, {
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarVariants = VariantProps<typeof avatarVariants>;

package/dist/components/avatar/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const avatarVariants = tv({
+  defaultVariants: {
+    color: "default",
+    size: "md"
+  },
+  slots: {
+    base: "avatar",
+    fallback: "avatar__fallback",
+    image: "avatar__image"
+  },
+  variants: {
+    color: {
+      accent: {
+        fallback: "avatar__fallback--accent"
+      },
+      danger: {
+        fallback: "avatar__fallback--danger"
+      },
+      default: {
+        fallback: "avatar__fallback--default"
+      },
+      success: {
+        fallback: "avatar__fallback--success"
+      },
+      warning: {
+        fallback: "avatar__fallback--warning"
+      }
+    },
+    size: {
+      lg: {
+        base: "avatar--lg"
+      },
+      md: {
+        base: "avatar--md"
+      },
+      sm: {
+        base: "avatar--sm"
+      }
+    },
+    variant: {
+      default: {},
+      soft: {
+        base: "avatar--soft"
+      }
+    }
+  }
+});
+
+export { avatarVariants };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,19 @@
+import type { BadgeVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+interface BadgeAnchorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const BadgeAnchor: ({ children, className, ...props }: BadgeAnchorProps) => import("react/jsx-runtime").JSX.Element;
+interface BadgeRootProps extends Omit<ComponentPropsWithRef<"span">, "color">, BadgeVariants {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const BadgeRoot: ({ children, className, color, placement, size, variant, ...props }: BadgeRootProps) => import("react/jsx-runtime").JSX.Element;
+interface BadgeLabelProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const BadgeLabel: ({ children, className, ...props }: BadgeLabelProps) => import("react/jsx-runtime").JSX.Element;
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeLabelProps, BadgeAnchorProps };

package/dist/components/badge/badge.js

@@ -0,0 +1,87 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { cx } from 'tailwind-variants';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { badgeVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const BadgeContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Anchor
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeAnchor = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    ...props,
+    className: cx("badge-anchor", className) ?? undefined,
+    "data-slot": "badge-anchor",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeRoot = ({
+  children,
+  className,
+  color,
+  placement,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => badgeVariants({
+    color,
+    placement,
+    size,
+    variant
+  }), [color, placement, size, variant]);
+  const badgeChildren = React__default.useMemo(() => {
+    if (typeof children === "string" || typeof children === "number") {
+      return /*#__PURE__*/jsx(BadgeLabel, {
+        children: children
+      });
+    }
+    return children;
+  }, [children]);
+  return /*#__PURE__*/jsx(BadgeContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("span", {
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      "data-slot": "badge",
+      children: badgeChildren
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Label
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeLabel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(BadgeContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.label, className),
+    "data-slot": "badge-label",
+    ...props,
+    children: children
+  });
+};
+
+export { BadgeAnchor, BadgeLabel, BadgeRoot };

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./badge";
+export declare const Badge: (({ children, className, color, placement, size, variant, ...props }: import("./badge").BadgeRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Anchor: ({ children, className, ...props }: import("./badge").BadgeAnchorProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, className, ...props }: import("./badge").BadgeLabelProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, color, placement, size, variant, ...props }: import("./badge").BadgeRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Badge = {
+    AnchorProps: ComponentProps<typeof BadgeAnchor>;
+    LabelProps: ComponentProps<typeof BadgeLabel>;
+    Props: ComponentProps<typeof BadgeRoot>;
+    RootProps: ComponentProps<typeof BadgeRoot>;
+};
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeRootProps as BadgeProps, BadgeLabelProps, BadgeAnchorProps, } from "./badge";
+export { badgeVariants } from "./styles";
+export type { BadgeVariants } from "./styles";

package/dist/components/badge/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { BadgeRoot, BadgeLabel, BadgeAnchor } from './badge.js';
+export { badgeVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Badge = Object.assign(BadgeRoot, {
+  Anchor: BadgeAnchor,
+  Label: BadgeLabel,
+  Root: BadgeRoot
+});
+
+export { Badge, BadgeAnchor, BadgeLabel, BadgeRoot };