@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/menu/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import { MenuItem } from '../menu-item/index.js';
+import { MenuSection } from '../menu-section/index.js';
+import { MenuRoot } from './menu.js';
+export { menuVariants } from './styles.js';
+import { MenuItemIndicator } from '../menu-item/menu-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Menu = Object.assign(MenuRoot, {
+  Item: MenuItem,
+  ItemIndicator: MenuItemIndicator,
+  Root: MenuRoot,
+  Section: MenuSection
+});
+
+export { Menu, MenuRoot };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,9 @@
+import type { MenuVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Menu as MenuPrimitive } from "react-aria-components";
+interface MenuRootProps<T extends object> extends ComponentPropsWithRef<typeof MenuPrimitive<T>>, MenuVariants {
+    className?: string;
+}
+declare function MenuRoot<T extends object>({ className, ...props }: MenuRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { MenuRoot };
+export type { MenuRootProps };

package/dist/components/menu/menu.js

@@ -0,0 +1,20 @@
+"use client";
+import React__default from 'react';
+import { Menu } from 'react-aria-components';
+import { menuVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+function MenuRoot({
+  className,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => menuVariants(), []);
+  return /*#__PURE__*/jsx(Menu, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "menu",
+    ...props
+  });
+}
+
+export { MenuRoot };

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

@@ -0,0 +1,3 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "menu", unknown, unknown, undefined>>;
+export type MenuVariants = VariantProps<typeof menuVariants>;

package/dist/components/menu/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const menuVariants = tv({
+  base: "menu"
+});
+
+export { menuVariants };

package/dist/components/menu-item/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator } from "./menu-item";
+export declare const MenuItem: (({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Indicator: ({ children, className, type, ...props }: import("./menu-item").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+    SubmenuIndicator: ({ children, className, ...props }: import("./menu-item").MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export type MenuItem = {
+    Props: ComponentProps<typeof MenuItemRoot>;
+    RootProps: ComponentProps<typeof MenuItemRoot>;
+    IndicatorProps: ComponentProps<typeof MenuItemIndicator>;
+    SubmenuIndicatorProps: ComponentProps<typeof MenuItemSubmenuIndicator>;
+};
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemRootProps as MenuItemProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, } from "./menu-item";
+export { menuItemVariants } from "./styles";
+export type { MenuItemVariants } from "./styles";

package/dist/components/menu-item/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { MenuItemRoot, MenuItemSubmenuIndicator, MenuItemIndicator } from './menu-item.js';
+export { menuItemVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuItem = Object.assign(MenuItemRoot, {
+  Indicator: MenuItemIndicator,
+  Root: MenuItemRoot,
+  SubmenuIndicator: MenuItemSubmenuIndicator
+});
+
+export { MenuItem, MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-item/menu-item.d.ts

@@ -0,0 +1,20 @@
+import type { MenuItemVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { MenuItemRenderProps } from "react-aria-components";
+import React from "react";
+import { MenuItem as MenuItemPrimitive } from "react-aria-components";
+interface MenuItemRootProps extends ComponentPropsWithRef<typeof MenuItemPrimitive>, MenuItemVariants {
+    className?: string;
+}
+declare const MenuItemRoot: ({ children, className, variant, ...props }: MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: MenuItemRenderProps) => React.ReactNode);
+    type?: "checkmark" | "dot";
+}
+declare const MenuItemIndicator: ({ children, className, type, ...props }: MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemSubmenuIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode;
+}
+declare const MenuItemSubmenuIndicator: ({ children, className, ...props }: MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps };

package/dist/components/menu-item/menu-item.js

@@ -0,0 +1,123 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { MenuItem } from 'react-aria-components';
+import { IconChevronRight } from '../icons.js';
+import { menuItemVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const MenuItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => menuItemVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(MenuItem, {
+    className: composeTwRenderProps(className, slots.item()),
+    "data-slot": "menu-item",
+    ...props,
+    children: values => /*#__PURE__*/jsx(MenuItemContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemIndicator = ({
+  children,
+  className,
+  type = "checkmark",
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const isSelected = state?.isSelected;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : type === "dot" ? /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--dot",
+    fill: "currentColor",
+    fillRule: "evenodd",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      clipRule: "evenodd",
+      d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14",
+      fillRule: "evenodd"
+    })
+  }) : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "menu-item-indicator",
+    "data-type": type,
+    "data-visible": isSelected || undefined,
+    ...props,
+    children: content
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Submenu Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemSubmenuIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const hasSubmenu = state?.hasSubmenu;
+
+  // Only render if hasSubmenu is true
+  if (!hasSubmenu) {
+    return null;
+  }
+  const defaultContent = /*#__PURE__*/jsx(IconChevronRight, {});
+  const content = children ?? defaultContent;
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.submenuIndicator, className),
+    "data-slot": "submenu-indicator",
+    ...props,
+    children: content
+  });
+};
+
+export { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-item/styles.d.ts

@@ -0,0 +1,42 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const menuItemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, undefined, {
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>;

package/dist/components/menu-item/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const menuItemVariants = tv({
+  defaultVariants: {
+    variant: "default"
+  },
+  slots: {
+    indicator: "menu-item__indicator",
+    item: "menu-item",
+    submenuIndicator: "menu-item__indicator menu-item__indicator--submenu"
+  },
+  variants: {
+    variant: {
+      danger: {
+        item: "menu-item--danger"
+      },
+      default: {
+        item: "menu-item--default"
+      }
+    }
+  }
+});
+
+export { menuItemVariants };

package/dist/components/menu-section/index.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { MenuSectionRoot } from "./menu-section";
+export declare const MenuSection: ({ children, className, ...props }: import("./menu-section").MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export type MenuSection = {
+    Props: ComponentProps<typeof MenuSectionRoot>;
+};
+export { MenuSectionRoot };
+export type { MenuSectionRootProps, MenuSectionRootProps as MenuSectionProps, } from "./menu-section";
+export { menuSectionVariants } from "./styles";
+export type { MenuSectionVariants } from "./styles";

package/dist/components/menu-section/index.js

@@ -0,0 +1,10 @@
+"use strict";
+import { MenuSectionRoot } from './menu-section.js';
+export { menuSectionVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuSection = MenuSectionRoot;
+
+export { MenuSection, MenuSectionRoot };

package/dist/components/menu-section/menu-section.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { MenuSection as MenuSectionPrimitive } from "react-aria-components";
+interface MenuSectionRootProps extends ComponentPropsWithRef<typeof MenuSectionPrimitive> {
+    className?: string;
+}
+declare const MenuSectionRoot: ({ children, className, ...props }: MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuSectionRoot };
+export type { MenuSectionRootProps };

package/dist/components/menu-section/menu-section.js

@@ -0,0 +1,22 @@
+"use client";
+import React__default from 'react';
+import { MenuSection } from 'react-aria-components';
+import { menuSectionVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MenuSectionRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => menuSectionVariants({
+    class: typeof className === "string" ? className : undefined
+  }), [className]);
+  return /*#__PURE__*/jsx(MenuSection, {
+    className: styles,
+    ...props,
+    children: children
+  });
+};
+
+export { MenuSectionRoot };

package/dist/components/menu-section/styles.d.ts

@@ -0,0 +1,3 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const menuSectionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu-section", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "menu-section", unknown, unknown, undefined>>;
+export type MenuSectionVariants = VariantProps<typeof menuSectionVariants>;

package/dist/components/menu-section/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const menuSectionVariants = tv({
+  base: "menu-section"
+});
+
+export { menuSectionVariants };

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

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { MeterFill, MeterOutput, MeterRoot, MeterTrack } from "./meter";
+export declare const Meter: {
+    ({ children, className, color, size, ...props }: import("./meter").MeterRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Fill: {
+        ({ className, style, ...props }: import("./meter").MeterFillProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Output: {
+        ({ children, className, ...props }: import("./meter").MeterOutputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Root: {
+        ({ children, className, color, size, ...props }: import("./meter").MeterRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Track: {
+        ({ children, className, ...props }: import("./meter").MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type Meter = {
+    Props: ComponentProps<typeof MeterRoot>;
+    RootProps: ComponentProps<typeof MeterRoot>;
+    OutputProps: ComponentProps<typeof MeterOutput>;
+    TrackProps: ComponentProps<typeof MeterTrack>;
+    FillProps: ComponentProps<typeof MeterFill>;
+};
+export { MeterRoot, MeterOutput, MeterTrack, MeterFill };
+export type { MeterRootProps, MeterRootProps as MeterProps, MeterOutputProps, MeterTrackProps, MeterFillProps, } from "./meter";
+export { meterVariants } from "./styles";
+export type { MeterVariants } from "./styles";

package/dist/components/meter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { MeterRoot, MeterTrack, MeterOutput, MeterFill } from './meter.js';
+export { meterVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Meter = Object.assign(MeterRoot, {
+  Fill: MeterFill,
+  Output: MeterOutput,
+  Root: MeterRoot,
+  Track: MeterTrack
+});
+
+export { Meter, MeterFill, MeterOutput, MeterRoot, MeterTrack };

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,29 @@
+import type { MeterVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Meter as MeterPrimitive } from "react-aria-components";
+interface MeterRootProps extends ComponentPropsWithRef<typeof MeterPrimitive>, MeterVariants {
+}
+declare const MeterRoot: {
+    ({ children, className, color, size, ...props }: MeterRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterOutputProps extends ComponentPropsWithRef<"span"> {
+}
+declare const MeterOutput: {
+    ({ children, className, ...props }: MeterOutputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterTrackProps extends ComponentPropsWithRef<"div"> {
+}
+declare const MeterTrack: {
+    ({ children, className, ...props }: MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterFillProps extends ComponentPropsWithRef<"div"> {
+}
+declare const MeterFill: {
+    ({ className, style, ...props }: MeterFillProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MeterRoot, MeterOutput, MeterTrack, MeterFill };
+export type { MeterRootProps, MeterOutputProps, MeterTrackProps, MeterFillProps };

package/dist/components/meter/meter.js

@@ -0,0 +1,108 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Meter } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { meterVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MeterContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterRoot = ({
+  children,
+  className,
+  color,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => meterVariants({
+    color,
+    size
+  }), [color, size]);
+  return /*#__PURE__*/jsx(Meter, {
+    "data-slot": "meter",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(MeterContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+MeterRoot.displayName = "Cognitiv.Meter";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.output, className),
+    "data-slot": "meter-output",
+    ...props,
+    children: children ?? state?.valueText
+  });
+};
+MeterOutput.displayName = "Cognitiv.Meter.Output";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.track, className),
+    "data-slot": "meter-track",
+    ...props,
+    children: children
+  });
+};
+MeterTrack.displayName = "Cognitiv.Meter.Track";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Fill
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterFill = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fill, className),
+    "data-slot": "meter-fill",
+    style: {
+      ...style,
+      width: `${state?.percentage ?? 0}%`
+    },
+    ...props
+  });
+};
+MeterFill.displayName = "Cognitiv.Meter.Fill";
+
+export { MeterFill, MeterOutput, MeterRoot, MeterTrack };

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

@@ -0,0 +1,105 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const meterVariants: 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;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: 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;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: 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;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MeterVariants = VariantProps<typeof meterVariants>;