@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/toggle-button-group/toggle-button-group.js

@@ -0,0 +1,70 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { useSlottedContext, ToggleButtonGroupContext as ToggleButtonGroupContext$1, ToggleButtonGroup } from 'react-aria-components';
+import { toggleButtonGroupVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const ToggleButtonGroupContext = /*#__PURE__*/createContext({});
+
+// Property name to mark direct children of ToggleButtonGroup
+const TOGGLE_BUTTON_GROUP_CHILD = "__toggle_button_group_child";
+
+/* -------------------------------------------------------------------------------------------------
+ * ToggleButtonGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ToggleButtonGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  isDetached = false,
+  isDisabled,
+  orientation: orientationProp,
+  size,
+  ...rest
+}) => {
+  const racContext = useSlottedContext(ToggleButtonGroupContext$1);
+  const orientation = orientationProp ?? racContext?.orientation ?? "horizontal";
+  const slots = React__default.useMemo(() => toggleButtonGroupVariants({
+    fullWidth,
+    isDetached,
+    orientation
+  }), [fullWidth, isDetached, orientation]);
+  return /*#__PURE__*/jsx(ToggleButtonGroupContext, {
+    value: {
+      isDisabled,
+      size,
+      slots
+    },
+    children: /*#__PURE__*/jsx(ToggleButtonGroup, {
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "toggle-button-group",
+      isDisabled: isDisabled,
+      orientation: orientation,
+      ...rest,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ToggleButtonGroup Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const ToggleButtonGroupSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ToggleButtonGroupContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "toggle-button-group-separator",
+    ...props
+  });
+};
+
+export { TOGGLE_BUTTON_GROUP_CHILD, ToggleButtonGroupContext, ToggleButtonGroupRoot, ToggleButtonGroupSeparator };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ToolbarRoot } from "./toolbar";
+export declare const Toolbar: {
+    ({ children, className, isAttached, orientation, ...props }: import("./toolbar").ToolbarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, className, isAttached, orientation, ...props }: import("./toolbar").ToolbarRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type Toolbar = {
+    Props: ComponentProps<typeof ToolbarRoot>;
+    RootProps: ComponentProps<typeof ToolbarRoot>;
+};
+export { ToolbarRoot } from "./toolbar";
+export type { ToolbarRootProps, ToolbarRootProps as ToolbarProps } from "./toolbar";
+export { toolbarVariants } from "./styles";
+export type { ToolbarVariants } from "./styles";

package/dist/components/toolbar/index.js

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

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from "tailwind-variants";
+declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "toolbar", {
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "toolbar", unknown, unknown, undefined>>;
+export { toolbarVariants };
+export type ToolbarVariants = VariantProps<typeof toolbarVariants>;

package/dist/components/toolbar/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const toolbarVariants = tv({
+  base: "toolbar",
+  defaultVariants: {
+    isAttached: false,
+    orientation: "horizontal"
+  },
+  variants: {
+    isAttached: {
+      true: "toolbar--attached"
+    },
+    orientation: {
+      horizontal: "toolbar--horizontal",
+      vertical: "toolbar--vertical"
+    }
+  }
+});
+
+export { toolbarVariants };

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { ToolbarVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Toolbar as ToolbarPrimitive } from "react-aria-components";
+interface ToolbarRootProps extends ComponentPropsWithRef<typeof ToolbarPrimitive>, ToolbarVariants {
+}
+declare const ToolbarRoot: {
+    ({ children, className, isAttached, orientation, ...props }: ToolbarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ToolbarRoot };
+export type { ToolbarRootProps };

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,39 @@
+"use client";
+import React__default from 'react';
+import { ToggleButtonGroupContext, SeparatorContext, Toolbar } from 'react-aria-components';
+import { toolbarVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const ToolbarRoot = ({
+  children,
+  className,
+  isAttached,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => toolbarVariants({
+    isAttached,
+    orientation
+  }), [isAttached, orientation]);
+  return /*#__PURE__*/jsx(ToggleButtonGroupContext.Provider, {
+    value: {
+      orientation
+    },
+    children: /*#__PURE__*/jsx(SeparatorContext.Provider, {
+      value: {
+        orientation: orientation === "horizontal" ? "vertical" : "horizontal"
+      },
+      children: /*#__PURE__*/jsx(Toolbar, {
+        className: composeTwRenderProps(className, styles),
+        "data-slot": "toolbar",
+        orientation: orientation,
+        ...props,
+        children: children
+      })
+    })
+  });
+};
+ToolbarRoot.displayName = "Cognitiv.Toolbar";
+
+export { ToolbarRoot };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger } from "./tooltip";
+export declare const Tooltip: (({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").TooltipTrigger>) => import("react/jsx-runtime").JSX.Element) & {
+    Arrow: ({ children, className, ...props }: import("./tooltip").TooltipArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, offset: offsetProp, showArrow, ...props }: import("./tooltip").TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").TooltipTrigger>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./tooltip").TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tooltip = {
+    Props: ComponentProps<typeof TooltipRoot>;
+    RootProps: ComponentProps<typeof TooltipRoot>;
+    TriggerProps: ComponentProps<typeof TooltipTrigger>;
+    ContentProps: ComponentProps<typeof TooltipContent>;
+    ArrowProps: ComponentProps<typeof TooltipArrow>;
+};
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };
+export type { TooltipRootProps, TooltipRootProps as TooltipProps, TooltipArrowProps, TooltipContentProps, TooltipTriggerProps, } from "./tooltip";
+export { tooltipVariants } from "./styles";
+export type { TooltipVariants } from "./styles";

package/dist/components/tooltip/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from './tooltip.js';
+export { tooltipVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipArrow,
+  Content: TooltipContent,
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger
+});
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger };

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

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

package/dist/components/tooltip/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const tooltipVariants = tv({
+  slots: {
+    base: "tooltip",
+    trigger: "tooltip__trigger"
+  }
+});
+
+export { tooltipVariants };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import type { TooltipVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { OverlayArrow, Tooltip as TooltipPrimitive, TooltipTrigger as TooltipTriggerPrimitive } from "react-aria-components";
+type TooltipRootProps = ComponentPropsWithRef<typeof TooltipTriggerPrimitive>;
+declare const TooltipRoot: ({ children, ...props }: ComponentPropsWithRef<typeof TooltipTriggerPrimitive>) => import("react/jsx-runtime").JSX.Element;
+interface TooltipContentProps extends Omit<ComponentPropsWithRef<typeof TooltipPrimitive>, "children">, TooltipVariants {
+    showArrow?: boolean;
+    children: React.ReactNode;
+}
+declare const TooltipContent: ({ children, className, offset: offsetProp, showArrow, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+type TooltipArrowProps = Omit<ComponentPropsWithRef<typeof OverlayArrow>, "children"> & {
+    children?: React.ReactNode;
+};
+declare const TooltipArrow: ({ children, className, ...props }: TooltipArrowProps) => import("react/jsx-runtime").JSX.Element;
+interface TooltipTriggerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const TooltipTrigger: ({ children, className, ...props }: TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };
+export type { TooltipRootProps, TooltipArrowProps, TooltipContentProps, TooltipTriggerProps };

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,106 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { TooltipTrigger as TooltipTrigger$1, Focusable, Tooltip, OverlayArrow } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { tooltipVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TooltipContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipRoot = ({
+  children,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => tooltipVariants(), []);
+  return /*#__PURE__*/jsx(TooltipContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(TooltipTrigger$1, {
+      "data-slot": "tooltip-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipContent = ({
+  children,
+  className,
+  offset: offsetProp,
+  showArrow = false,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TooltipContext);
+  const offset = offsetProp ? offsetProp : showArrow ? 7 : 3;
+  return /*#__PURE__*/jsx(Tooltip, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.base()),
+    offset: offset,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipArrow = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultArrow = /*#__PURE__*/jsx("svg", {
+    "data-slot": "overlay-arrow",
+    height: 12,
+    viewBox: "0 0 12 12",
+    width: 12,
+    children: /*#__PURE__*/jsx("path", {
+      d: "M0 0 Q6 9 12 0"
+    })
+  });
+  const arrow = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    "data-slot": "overlay-arrow"
+  }) : defaultArrow;
+  return /*#__PURE__*/jsx(OverlayArrow, {
+    "data-slot": "tooltip-arrow",
+    ...props,
+    className: className,
+    children: arrow
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tooltip Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const TooltipTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TooltipContext);
+  return /*#__PURE__*/jsx(Focusable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "tooltip-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+export { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger };

package/dist/css/base.css

@@ -0,0 +1,17 @@
+/* Border color inheritance */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border, currentColor);
+}
+
+/* Keeps main page content interactive during view transitions */
+:root {
+  view-transition-name: none;
+}
+
+::view-transition {
+  pointer-events: none;
+}

package/dist/css/components.css

@@ -0,0 +1,117 @@
+/* Component Styles
+ * Import order matters: shared/primitive components FIRST to allow proper overrides.
+ * Grouped by Storybook category. */
+
+/* Shared Components - MUST Import FIRST */
+@import "../components/close-button/styles.css";
+@import "../components/description/styles.css";
+@import "../components/error-message/styles.css";
+@import "../components/field-error/styles.css";
+@import "../components/label/styles.css";
+
+/* Navigation */
+@import "../components/accordion/styles.css";
+@import "../components/breadcrumbs/styles.css";
+@import "../components/disclosure-group/styles.css";
+@import "../components/disclosure/styles.css";
+@import "../components/link/styles.css";
+@import "../components/pagination/styles.css";
+@import "../components/tabs/styles.css";
+
+/* Buttons */
+@import "../components/button/styles.css";
+@import "../components/button-group/styles.css";
+@import "../components/toggle-button/styles.css";
+@import "../components/toggle-button-group/styles.css";
+@import "../components/toolbar/styles.css";
+
+/* Collections */
+@import "../components/dropdown/styles.css";
+@import "../components/list-box-item/styles.css";
+@import "../components/list-box-section/styles.css";
+@import "../components/list-box/styles.css";
+@import "../components/menu-item/styles.css";
+@import "../components/menu-section/styles.css";
+@import "../components/menu/styles.css";
+@import "../components/tag-group/styles.css";
+@import "../components/tag/styles.css";
+
+/* Colors */
+@import "../components/color-area/styles.css";
+@import "../components/color-picker/styles.css";
+@import "../components/color-slider/styles.css";
+@import "../components/color-swatch/styles.css";
+@import "../components/color-swatch-picker/styles.css";
+@import "../components/color-input-group/styles.css";
+@import "../components/color-field/styles.css";
+
+/* Controls */
+@import "../components/slider/styles.css";
+@import "../components/switch/styles.css";
+@import "../components/switch-group/styles.css";
+
+/* DataDisplay */
+@import "../components/badge/styles.css";
+@import "../components/chip/styles.css";
+@import "../components/table/styles.css";
+
+/* Feedback */
+@import "../components/alert/styles.css";
+@import "../components/empty-state/styles.css";
+@import "../components/skeleton/styles.css";
+@import "../components/meter/styles.css";
+@import "../components/progress-bar/styles.css";
+@import "../components/progress-circle/styles.css";
+@import "../components/spinner/styles.css";
+@import "../components/toast/styles.css";
+
+/* Forms */
+@import "../components/checkbox-group/styles.css";
+@import "../components/checkbox/styles.css";
+@import "../components/fieldset/styles.css";
+@import "../components/input-otp/styles.css";
+@import "../components/input/styles.css";
+@import "../components/input-group/styles.css";
+@import "../components/number-field/styles.css";
+@import "../components/radio-group/styles.css";
+@import "../components/radio/styles.css";
+@import "../components/textfield/styles.css";
+@import "../components/search-field/styles.css";
+@import "../components/textarea/styles.css";
+
+/* Date & Time */
+@import "../components/calendar/styles.css";
+@import "../components/range-calendar/styles.css";
+@import "../components/calendar-year-picker/styles.css";
+@import "../components/date-field/styles.css";
+@import "../components/time-field/styles.css";
+@import "../components/date-input-group/styles.css";
+@import "../components/date-picker/styles.css";
+@import "../components/date-range-picker/styles.css";
+
+/* Layout */
+@import "../components/card/styles.css";
+@import "../components/header/styles.css";
+@import "../components/separator/styles.css";
+@import "../components/surface/styles.css";
+
+/* Media */
+@import "../components/avatar/styles.css";
+
+/* Overlays */
+@import "../components/alert-dialog/styles.css";
+@import "../components/drawer/styles.css";
+@import "../components/modal/styles.css";
+@import "../components/popover/styles.css";
+@import "../components/tooltip/styles.css";
+
+/* Pickers */
+@import "../components/combo-box/styles.css";
+@import "../components/select/styles.css";
+@import "../components/autocomplete/styles.css";
+
+/* Typography */
+@import "../components/kbd/styles.css";
+
+/* Utilities */
+@import "../components/scroll-shadow/styles.css";

package/dist/css/index.css

@@ -0,0 +1,22 @@
+@layer theme, base, components, utilities;
+
+/* Cognitiv Components Styles - Layered Theme Architecture */
+
+/* Base layer - Tailwind CSS v4 */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Base styles */
+@import "./base.css" layer(base);
+
+/* Base component structures (unstyled) */
+@import "./components.css" layer(components);
+
+/* Default theme (variables + component customizations) */
+@import "./themes/default/index.css" layer(theme);
+
+/* Utilities */
+@import "./utilities.css";
+
+/* Variants */
+@import "./variants.css";

package/dist/css/themes/default/index.css

@@ -0,0 +1,5 @@
+/* Declares the theme variables - @see https://tailwindcss.com/docs/theme */
+@import "../shared/theme.css";
+
+/* Default Theme */
+@import "./variables.css" layer(theme);