@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,37 @@
+import type { TabsVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { SelectionIndicator as SelectionIndicatorPrimitive, TabList as TabListPrimitive, TabPanel as TabPanelPrimitive, Tab as TabPrimitive, Tabs as TabsPrimitive } from "react-aria-components";
+interface TabsRootProps extends ComponentPropsWithRef<typeof TabsPrimitive>, TabsVariants {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabsRoot: ({ children, className, orientation, variant, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListContainerProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const TabListContainer: ({ children, className, ...props }: TabListContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListProps extends ComponentPropsWithRef<typeof TabListPrimitive<object>> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabList: ({ children, className, ...props }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+interface TabProps extends ComponentPropsWithRef<typeof TabPrimitive> {
+    className?: string;
+}
+declare const Tab: ({ children, className, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+interface TabIndicatorProps extends ComponentPropsWithRef<typeof SelectionIndicatorPrimitive> {
+    className?: string;
+}
+declare const TabIndicator: ({ className, ...props }: TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface TabPanelProps extends Omit<ComponentPropsWithRef<typeof TabPanelPrimitive>, "children"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabPanel: ({ children, className, ...props }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+interface TabSeparatorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const TabSeparator: ({ className, ...props }: TabSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabPanel, TabSeparator };
+export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabPanelProps, TabSeparatorProps, };

package/dist/components/tabs/tabs.js

@@ -0,0 +1,156 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Tabs, Tab as Tab$1, TabPanel as TabPanel$1, TabList as TabList$1, SelectionIndicator } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { tabsVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TabsContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabsRoot = ({
+  children,
+  className,
+  orientation = "horizontal",
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => tabsVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(TabsContext, {
+    value: {
+      orientation,
+      slots
+    },
+    children: /*#__PURE__*/jsx(Tabs, {
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "tabs",
+      orientation: orientation,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabListContainer = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.tabListContainer, className),
+    "data-slot": "tabs-list-container",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabList = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabList$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabList()),
+    "data-slot": "tabs-list",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab
+ * -----------------------------------------------------------------------------------------------*/
+
+const Tab = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(Tab$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tab()),
+    "data-slot": "tabs-tab",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabIndicator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(SelectionIndicator, {
+    className: composeSlotClassName(slots?.tabIndicator, className),
+    "data-slot": "tabs-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Panel
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabPanel$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabPanel()),
+    "data-slot": "tabs-panel",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "tabs-separator",
+    ...props
+  });
+};
+
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, TabsRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { TagRemoveButton, TagRoot } from "./tag";
+export declare const Tag: (({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    RemoveButton: ({ children, className, ...restProps }: import("./tag").TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tag = {
+    Props: ComponentProps<typeof TagRoot>;
+    RootProps: ComponentProps<typeof TagRoot>;
+    RemoveButtonProps: ComponentProps<typeof TagRemoveButton>;
+};
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps } from "./tag";
+export { tagVariants } from "./styles";
+export type { TagVariants } from "./styles";

package/dist/components/tag/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { TagRoot, TagRemoveButton } from './tag.js';
+export { tagVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tag = Object.assign(TagRoot, {
+  RemoveButton: TagRemoveButton,
+  Root: TagRoot
+});
+
+export { Tag, TagRemoveButton, TagRoot };

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

@@ -0,0 +1,72 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagVariants = VariantProps<typeof tagVariants>;

package/dist/components/tag/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const tagVariants = tv({
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  },
+  slots: {
+    base: "tag",
+    removeButton: "tag__remove-button"
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "tag--lg"
+      },
+      md: {
+        base: "tag--md"
+      },
+      sm: {
+        base: "tag--sm"
+      }
+    },
+    variant: {
+      default: {
+        base: "tag--default"
+      },
+      surface: {
+        base: "tag--surface"
+      }
+    }
+  }
+});
+
+export { tagVariants };

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,14 @@
+import type { TagVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { Button as ButtonPrimitive } from "react-aria-components";
+import React from "react";
+import { Tag as TagPrimitive } from "react-aria-components";
+interface TagRootProps extends ComponentPropsWithRef<typeof TagPrimitive>, TagVariants {
+}
+declare const TagRoot: ({ children, className, ...restProps }: TagRootProps) => import("react/jsx-runtime").JSX.Element;
+type TagRemoveButtonProps = ComponentPropsWithRef<typeof ButtonPrimitive> & {
+    children?: React.ReactNode;
+};
+declare const TagRemoveButton: ({ children, className, ...restProps }: TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps };

package/dist/components/tag/tag.js

@@ -0,0 +1,85 @@
+"use client";
+import { useContext, useMemo, Children, createContext } from 'react';
+import { Tag } from 'react-aria-components';
+import { pickChildren } from '../../utils/children.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import '../tag-group/index.js';
+import { tagVariants } from './styles.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TagGroupContext } from '../tag-group/tag-group.js';
+
+const TagContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tag Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagRoot = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    size,
+    variant
+  } = useContext(TagGroupContext);
+  const slots = useMemo(() => tagVariants({
+    size,
+    variant
+  }), [size, variant]);
+  const textValue = useMemo(() => {
+    if (typeof children === "string") {
+      return children;
+    }
+    if (typeof children === "object") {
+      return Children.toArray(children).filter(node => typeof node === "string").at(0);
+    }
+    return undefined;
+  }, [children]);
+
+  // Extract custom RemoveButton from children if present
+  const [childrenWithoutRemoveButton, removeButtonChildren] = useMemo(() => {
+    if (typeof children === "function") {
+      return [children, undefined];
+    }
+    return pickChildren(children, TagRemoveButton);
+  }, [children]);
+  return /*#__PURE__*/jsx(Tag, {
+    className: composeTwRenderProps(className, slots.base()),
+    "data-slot": "tag",
+    textValue: textValue,
+    ...restProps,
+    children: renderProps => /*#__PURE__*/jsx(TagContext, {
+      value: {
+        slots
+      },
+      children: typeof children === "function" ? children(renderProps) : /*#__PURE__*/jsxs(Fragment, {
+        children: [childrenWithoutRemoveButton, !!renderProps.allowsRemoving && (removeButtonChildren && removeButtonChildren.length > 0 ? removeButtonChildren : /*#__PURE__*/jsx(TagRemoveButton, {}))]
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tag Remove Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagRemoveButton = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    slots
+  } = useContext(TagContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.removeButton()),
+    "data-slot": "tag-remove-button",
+    slot: "remove",
+    ...restProps,
+    children: children
+  });
+};
+
+export { TagRemoveButton, TagRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { TagGroupContext, TagGroupList, TagGroupRoot } from "./tag-group";
+export declare const TagGroup: (({ children, className, size, variant, ...restProps }: import("./tag-group").TagGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    List: <T extends object>({ children, className, ...restProps }: import("./tag-group").TagGroupListProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, size, variant, ...restProps }: import("./tag-group").TagGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type TagGroup = {
+    Props: ComponentProps<typeof TagGroupRoot>;
+    RootProps: ComponentProps<typeof TagGroupRoot>;
+    ListProps: ComponentProps<typeof TagGroupList>;
+};
+export { TagGroupRoot, TagGroupList, TagGroupContext };
+export type { TagGroupRootProps, TagGroupRootProps as TagGroupProps, TagGroupListProps, } from "./tag-group";
+export { tagGroupVariants } from "./styles";
+export type { TagGroupVariants } from "./styles";

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

@@ -0,0 +1,14 @@
+"use strict";
+import { TagGroupRoot, TagGroupList } from './tag-group.js';
+export { TagGroupContext } from './tag-group.js';
+export { tagGroupVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const TagGroup = Object.assign(TagGroupRoot, {
+  List: TagGroupList,
+  Root: TagGroupRoot
+});
+
+export { TagGroup, TagGroupList, TagGroupRoot };

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

@@ -0,0 +1,33 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagGroupVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    list: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;

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

@@ -0,0 +1,11 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const tagGroupVariants = tv({
+  slots: {
+    base: "tag-group",
+    list: "tag-group__list"
+  }
+});
+
+export { tagGroupVariants };

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

@@ -0,0 +1,20 @@
+import type { TagVariants } from "../tag";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { TagGroup as TagGroupPrimitive, TagList as TagListPrimitive } from "react-aria-components";
+import { tagGroupVariants } from "./styles";
+type TagGroupContext = {
+    slots?: ReturnType<typeof tagGroupVariants>;
+    size?: TagVariants["size"];
+    variant?: TagVariants["variant"];
+};
+declare const TagGroupContext: React.Context<TagGroupContext>;
+type TagGroupRootProps = ComponentPropsWithRef<typeof TagGroupPrimitive> & {
+    size?: TagVariants["size"];
+    variant?: TagVariants["variant"];
+};
+declare const TagGroupRoot: ({ children, className, size, variant, ...restProps }: TagGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+type TagGroupListProps<T extends object> = ComponentPropsWithRef<typeof TagListPrimitive<T>> & {};
+declare const TagGroupList: <T extends object>({ children, className, ...restProps }: TagGroupListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { TagGroupRoot, TagGroupList, TagGroupContext };
+export type { TagGroupRootProps, TagGroupListProps };

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

@@ -0,0 +1,59 @@
+"use client";
+import { useMemo, useContext, createContext } from 'react';
+import { TagGroup, TagList } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { tagGroupVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TagGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * TagGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagGroupRoot = ({
+  children,
+  className,
+  size,
+  variant,
+  ...restProps
+}) => {
+  const slots = useMemo(() => tagGroupVariants(), []);
+  return /*#__PURE__*/jsx(TagGroupContext, {
+    value: {
+      size,
+      slots,
+      variant
+    },
+    children: /*#__PURE__*/jsx(TagGroup, {
+      className: slots.base({
+        className
+      }),
+      "data-slot": "tag-group",
+      ...restProps,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * TagGroup List
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagGroupList = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const {
+    slots
+  } = useContext(TagGroupContext);
+  return /*#__PURE__*/jsx(TagList, {
+    className: composeTwRenderProps(className, slots?.list()),
+    "data-slot": "tag-group-list",
+    ...restProps,
+    children: children
+  });
+};
+
+export { TagGroupContext, TagGroupList, TagGroupRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { TextRoot } from "./text";
+export declare const Text: (({ children, className, size, variant, ...rest }: import("./text").TextRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, size, variant, ...rest }: import("./text").TextRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Text = {
+    Props: ComponentProps<typeof TextRoot>;
+    RootProps: ComponentProps<typeof TextRoot>;
+};
+export { TextRoot };
+export type { TextRootProps, TextRootProps as TextProps } from "./text";
+export { textVariants } from "./styles";
+export type { TextVariants } from "./styles";

package/dist/components/text/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { TextRoot } from './text.js';
+export { textVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Text = Object.assign(TextRoot, {
+  Root: TextRoot
+});
+
+export { Text, TextRoot };

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

@@ -0,0 +1,48 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, string[], {
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type TextVariants = VariantProps<typeof textVariants>;