@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/range-calendar/range-calendar.js

@@ -0,0 +1,289 @@
+"use client";
+import { CalendarDate } from '@internationalized/date';
+import { useControlledState } from '@react-stately/utils';
+import React__default, { useContext, createContext } from 'react';
+import { RangeCalendar, Button, Heading, CalendarHeaderCell, CalendarGridHeader, CalendarGridBody, CalendarGrid, CalendarCell, RangeCalendarStateContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { YearPickerContext, YearPickerStateContext } from '../calendar-year-picker/year-picker-context.js';
+import { IconChevronLeft, IconChevronRight } from '../icons.js';
+import { rangeCalendarVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const RangeCalendarContext = /*#__PURE__*/createContext({});
+const RangeCalendarYearPickerStateBridge = ({
+  children
+}) => {
+  const state = React__default.useContext(RangeCalendarStateContext);
+  if (!state) {
+    throw new Error("RangeCalendar year picker state must be used within <RangeCalendar>.");
+  }
+  const yearPickerStateValue = {
+    focusedDate: state.focusedDate,
+    maxValue: state.maxValue,
+    minValue: state.minValue,
+    setFocusedDate: value => state.setFocusedDate(value),
+    timeZone: state.timeZone
+  };
+  return /*#__PURE__*/jsx(YearPickerStateContext, {
+    value: yearPickerStateValue,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Root
+| * -----------------------------------------------------------------------------------------------*/
+
+function RangeCalendarRoot({
+  children,
+  className,
+  defaultYearPickerOpen: defaultYearPickerOpenProp = false,
+  isYearPickerOpen: isYearPickerOpenProp,
+  maxValue: maxValueProp,
+  minValue: minValueProp,
+  onYearPickerOpenChange: onYearPickerOpenChangeProp,
+  ...rest
+}) {
+  const slots = React__default.useMemo(() => rangeCalendarVariants(), []);
+  const calendarRef = React__default.useRef(null);
+  const [isYearPickerOpen, setIsYearPickerOpen] = useControlledState(isYearPickerOpenProp, defaultYearPickerOpenProp, onYearPickerOpenChangeProp);
+  const minValue = minValueProp ?? new CalendarDate(1900, 1, 1);
+  const maxValue = maxValueProp ?? new CalendarDate(2099, 12, 31);
+  return /*#__PURE__*/jsx(YearPickerContext, {
+    value: {
+      calendarGridSlot: "range-calendar-grid",
+      calendarRef,
+      isYearPickerOpen,
+      setIsYearPickerOpen
+    },
+    children: /*#__PURE__*/jsx(RangeCalendarContext, {
+      value: {
+        slots
+      },
+      children: /*#__PURE__*/jsx(RangeCalendar, {
+        ref: calendarRef,
+        "data-slot": "range-calendar",
+        maxValue: maxValue,
+        minValue: minValue,
+        ...rest,
+        className: composeTwRenderProps(className, slots.base()),
+        children: values => /*#__PURE__*/jsx(RangeCalendarYearPickerStateBridge, {
+          children: typeof children === "function" ? children(values) : children
+        })
+      })
+    })
+  });
+}
+RangeCalendarRoot.displayName = "Cognitiv.RangeCalendar";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Header
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx("header", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "range-calendar-header",
+    ...props,
+    children: children
+  });
+};
+RangeCalendarHeader.displayName = "Cognitiv.RangeCalendar.Header";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Heading
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeading = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(Heading, {
+    "data-slot": "range-calendar-heading",
+    ...props,
+    className: composeSlotClassName(slots?.heading, className)
+  });
+};
+RangeCalendarHeading.displayName = "Cognitiv.RangeCalendar.Heading";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Nav Button
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarNavButton = ({
+  children,
+  className,
+  slot,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(Button, {
+    "data-slot": "range-calendar-nav-button",
+    slot: slot,
+    ...props,
+    className: composeTwRenderProps(className, slots?.navButton()),
+    children: children || (slot === "previous" ? /*#__PURE__*/jsx(IconChevronLeft, {
+      className: slots?.navButtonIcon(),
+      "data-slot": "range-calendar-nav-button-icon"
+    }) : /*#__PURE__*/jsx(IconChevronRight, {
+      className: slots?.navButtonIcon(),
+      "data-slot": "range-calendar-nav-button-icon"
+    }))
+  });
+};
+RangeCalendarNavButton.displayName = "Cognitiv.RangeCalendar.NavButton";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGrid = ({
+  children,
+  className,
+  weekdayStyle = "short",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGrid, {
+    "data-slot": "range-calendar-grid",
+    weekdayStyle: weekdayStyle,
+    ...props,
+    className: composeSlotClassName(slots?.grid, className),
+    children: children
+  });
+};
+RangeCalendarGrid.displayName = "Cognitiv.RangeCalendar.Grid";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid Header
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGridHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGridHeader, {
+    "data-slot": "range-calendar-grid-header",
+    ...props,
+    className: composeSlotClassName(slots?.gridHeader, className)
+  });
+};
+RangeCalendarGridHeader.displayName = "Cognitiv.RangeCalendar.GridHeader";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Grid Body
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarGridBody = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarGridBody, {
+    "data-slot": "range-calendar-grid-body",
+    ...props,
+    className: composeSlotClassName(slots?.gridBody, className)
+  });
+};
+RangeCalendarGridBody.displayName = "Cognitiv.RangeCalendar.GridBody";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Header Cell
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarHeaderCell = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarHeaderCell, {
+    "data-slot": "range-calendar-header-cell",
+    ...props,
+    className: composeSlotClassName(slots?.headerCell, className)
+  });
+};
+RangeCalendarHeaderCell.displayName = "Cognitiv.RangeCalendar.HeaderCell";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Cell
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarCell = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx(CalendarCell, {
+    "data-slot": "range-calendar-cell",
+    ...props,
+    className: composeTwRenderProps(className, slots?.cell()),
+    children: values => {
+      const {
+        formattedDate,
+        isDisabled,
+        isHovered,
+        isPressed,
+        isSelectionEnd,
+        isSelectionStart
+      } = values;
+      const content = typeof children === "function" ? children(values) : children || formattedDate;
+      return /*#__PURE__*/jsx("span", {
+        className: "range-calendar__cell-button",
+        "data-disabled": dataAttr(isDisabled),
+        "data-hovered": dataAttr(isHovered),
+        "data-pressed": dataAttr(isPressed),
+        "data-selected": dataAttr(isSelectionStart || isSelectionEnd),
+        "data-slot": "range-calendar-cell-button",
+        children: content
+      });
+    }
+  });
+};
+RangeCalendarCell.displayName = "Cognitiv.RangeCalendar.Cell";
+
+/* -------------------------------------------------------------------------------------------------
+| * RangeCalendar Cell Indicator
+| * -----------------------------------------------------------------------------------------------*/
+
+const RangeCalendarCellIndicator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RangeCalendarContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.cellIndicator, className),
+    "data-slot": "range-calendar-cell-indicator",
+    ...props
+  });
+};
+RangeCalendarCellIndicator.displayName = "Cognitiv.RangeCalendar.CellIndicator";
+
+export { RangeCalendarCell, RangeCalendarCellIndicator, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHeader, RangeCalendarHeader, RangeCalendarHeaderCell, RangeCalendarHeading, RangeCalendarNavButton, RangeCalendarRoot };

package/dist/components/range-calendar/styles.d.ts

@@ -0,0 +1,78 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, undefined, {}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;

package/dist/components/range-calendar/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const rangeCalendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root range calendar container */
+    base: "range-calendar",
+    /** Calendar cell (td) */
+    cell: "range-calendar__cell",
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: "range-calendar__cell-indicator",
+    /** Calendar grid (table) */
+    grid: "range-calendar__grid",
+    /** Grid body (tbody) */
+    gridBody: "range-calendar__grid-body",
+    /** Grid header (thead) */
+    gridHeader: "range-calendar__grid-header",
+    /** Grid row (tr) */
+    gridRow: "range-calendar__grid-row",
+    /** Calendar header containing heading and navigation */
+    header: "range-calendar__header",
+    /** Header cell (th - day names) */
+    headerCell: "range-calendar__header-cell",
+    /** Month/year heading text */
+    heading: "range-calendar__heading",
+    /** Previous/Next navigation button */
+    navButton: "range-calendar__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "range-calendar__nav-button-icon"
+  },
+  variants: {}
+});
+
+export { rangeCalendarVariants };

package/dist/components/scroll-shadow/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { ScrollShadowRoot } from "./scroll-shadow";
+export declare const ScrollShadow: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ScrollShadow = {
+    Props: ComponentProps<typeof ScrollShadowRoot>;
+    RootProps: ComponentProps<typeof ScrollShadowRoot>;
+};
+export { ScrollShadowRoot };
+export type { ScrollShadowRootProps, ScrollShadowRootProps as ScrollShadowProps, ScrollShadowVisibility, } from "./scroll-shadow";
+export { scrollShadowVariants } from "./styles";
+export type { ScrollShadowVariants } from "./styles";
+export { useScrollShadow } from "./use-scroll-shadow";
+export type { UseScrollShadowProps } from "./use-scroll-shadow";

package/dist/components/scroll-shadow/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ScrollShadowRoot } from './scroll-shadow.js';
+export { scrollShadowVariants } from './styles.js';
+export { useScrollShadow } from './use-scroll-shadow.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Component
+ * -----------------------------------------------------------------------------------------------*/
+const ScrollShadow = Object.assign(ScrollShadowRoot, {
+  Root: ScrollShadowRoot
+});
+
+export { ScrollShadow, ScrollShadowRoot };

package/dist/components/scroll-shadow/scroll-shadow.d.ts

@@ -0,0 +1,32 @@
+import type { ScrollShadowVariants } from "./styles";
+export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export interface ScrollShadowRootProps extends Omit<React.ComponentProps<"div">, "size">, ScrollShadowVariants {
+    /**
+     * The shadow size in pixels
+     * @default 40
+     */
+    size?: number;
+    /**
+     * The scroll offset before showing shadows (in pixels)
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Controlled shadow visibility state
+     * @default "auto"
+     */
+    visibility?: ScrollShadowVisibility;
+    /**
+     * Whether scroll shadow detection is enabled
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Callback invoked when shadow visibility changes
+     */
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const ScrollShadowRoot: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/scroll-shadow/scroll-shadow.js

@@ -0,0 +1,76 @@
+"use client";
+import { mergeRefs } from '@react-aria/utils';
+import { useRef, useMemo } from 'react';
+import { useSafeLayoutEffect } from '../../hooks/use-safe-layout-effect.js';
+import { scrollShadowVariants } from './styles.js';
+import { useScrollShadow } from './use-scroll-shadow.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ScrollShadowRoot = ({
+  children,
+  className,
+  hideScrollBar = false,
+  isEnabled = true,
+  offset = 0,
+  onVisibilityChange,
+  orientation = "vertical",
+  ref,
+  size = 40,
+  variant = "fade",
+  visibility = "auto",
+  ...props
+}) => {
+  const internalRef = useRef(null);
+  useScrollShadow({
+    containerRef: internalRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  });
+
+  // Handle controlled visibility mode
+  useSafeLayoutEffect(() => {
+    const el = internalRef.current;
+    if (!el || visibility === "auto") return;
+
+    // Clear all data attributes
+    delete el.dataset["topScroll"];
+    delete el.dataset["bottomScroll"];
+    delete el.dataset["topBottomScroll"];
+    delete el.dataset["leftScroll"];
+    delete el.dataset["rightScroll"];
+    delete el.dataset["leftRightScroll"];
+
+    // Set controlled visibility
+    if (visibility === "both") {
+      el.dataset[orientation === "vertical" ? "topBottomScroll" : "leftRightScroll"] = "true";
+    } else if (visibility !== "none") {
+      el.dataset[`${visibility}Scroll`] = "true";
+    }
+  }, [visibility, orientation]);
+  const slots = useMemo(() => scrollShadowVariants({
+    hideScrollBar,
+    orientation,
+    variant
+  }), [orientation, hideScrollBar, variant]);
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(internalRef, ref),
+    className: slots.base({
+      className
+    }),
+    "data-orientation": orientation,
+    "data-scroll-shadow-size": size,
+    style: {
+      // @ts-expect-error - CSS variables are not typed
+      "--scroll-shadow-size": `${size}px`,
+      ...props.style
+    },
+    ...props,
+    children: children
+  });
+};
+ScrollShadowRoot.displayName = "Cognitiv.ScrollShadow";
+
+export { ScrollShadowRoot };

package/dist/components/scroll-shadow/styles.d.ts

@@ -0,0 +1,69 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const scrollShadowVariants: import("tailwind-variants").TVReturnType<{
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ScrollShadowVariants = VariantProps<typeof scrollShadowVariants>;

package/dist/components/scroll-shadow/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const scrollShadowVariants = tv({
+  defaultVariants: {
+    hideScrollBar: false,
+    orientation: "vertical",
+    variant: "fade"
+  },
+  slots: {
+    base: "scroll-shadow"
+  },
+  variants: {
+    hideScrollBar: {
+      false: {},
+      true: {
+        base: "scroll-shadow--hide-scrollbar"
+      }
+    },
+    orientation: {
+      horizontal: {
+        base: "scroll-shadow--horizontal"
+      },
+      vertical: {
+        base: "scroll-shadow--vertical"
+      }
+    },
+    variant: {
+      fade: {
+        base: "scroll-shadow--fade"
+      }
+    }
+  }
+});
+
+export { scrollShadowVariants };

package/dist/components/scroll-shadow/use-scroll-shadow.d.ts

@@ -0,0 +1,11 @@
+import type { ScrollShadowVisibility } from "./scroll-shadow";
+import type { RefObject } from "react";
+export interface UseScrollShadowProps {
+    containerRef: RefObject<HTMLElement>;
+    orientation: "vertical" | "horizontal";
+    offset: number;
+    visibility: ScrollShadowVisibility;
+    isEnabled: boolean;
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const useScrollShadow: (props: UseScrollShadowProps) => void;