@cognitiv/components-web 1.0.4 → 1.1.0

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

@@ -0,0 +1,121 @@
+"use strict";
+import { useRef, useCallback, useEffect } from 'react';
+
+const useScrollShadow = props => {
+  const {
+    containerRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  } = props;
+
+  // Cache previous state to avoid unnecessary DOM updates
+  const prevStateRef = useRef(null);
+
+  // Track pending RAF to avoid multiple scheduled updates
+  const rafIdRef = useRef(null);
+  const checkOverflow = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const isVertical = orientation === "vertical";
+    const scrollStart = isVertical ? el.scrollTop : el.scrollLeft;
+    const scrollSize = isVertical ? el.scrollHeight : el.scrollWidth;
+    const clientSize = isVertical ? el.clientHeight : el.clientWidth;
+    const hasScrollBefore = scrollStart > offset;
+    const hasScrollAfter = scrollStart + clientSize + offset < scrollSize;
+
+    // Skip DOM updates if state hasn't changed
+    const prevState = prevStateRef.current;
+    if (prevState && prevState.hasScrollBefore === hasScrollBefore && prevState.hasScrollAfter === hasScrollAfter) {
+      return;
+    }
+
+    // Update state cache
+    prevStateRef.current = {
+      hasScrollAfter,
+      hasScrollBefore
+    };
+
+    // Cancel previous pending update
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    // Batch DOM updates with RAF for better performance
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      if (isVertical) {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["topBottomScroll"] = "true";
+          delete el.dataset["topScroll"];
+          delete el.dataset["bottomScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["topScroll"] = String(hasScrollBefore);
+          el.dataset["bottomScroll"] = String(hasScrollAfter);
+          delete el.dataset["topBottomScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("top");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("bottom");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      } else {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["leftRightScroll"] = "true";
+          delete el.dataset["leftScroll"];
+          delete el.dataset["rightScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["leftScroll"] = String(hasScrollBefore);
+          el.dataset["rightScroll"] = String(hasScrollAfter);
+          delete el.dataset["leftRightScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("left");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("right");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      }
+    });
+  }, [containerRef, orientation, offset, onVisibilityChange]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !isEnabled || visibility !== "auto") return;
+
+    // Initial check
+    checkOverflow();
+
+    // Use passive listener for better scroll performance
+    el.addEventListener("scroll", checkOverflow, {
+      passive: true
+    });
+
+    // Monitor size changes
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkOverflow);
+      resizeObserver.disconnect();
+
+      // Cancel pending RAF and cleanup cache
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      prevStateRef.current = null;
+    };
+  }, [containerRef, visibility, isEnabled, checkOverflow]);
+};
+
+export { useScrollShadow };

package/dist/components/search-field/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon } from "./search-field";
+export declare const SearchField: (({ children, className, fullWidth, variant, ...props }: import("./search-field").SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    ClearButton: ({ className, ...props }: import("./search-field").SearchFieldClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ children, className, ...props }: import("./search-field").SearchFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./search-field").SearchFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./search-field").SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+    SearchIcon: ({ children, className, ...props }: import("./search-field").SearchFieldSearchIconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type SearchField = {
+    Props: ComponentProps<typeof SearchFieldRoot>;
+    RootProps: ComponentProps<typeof SearchFieldRoot>;
+    GroupProps: ComponentProps<typeof SearchFieldGroup>;
+    InputProps: ComponentProps<typeof SearchFieldInput>;
+    SearchIconProps: ComponentProps<typeof SearchFieldSearchIcon>;
+    ClearButtonProps: ComponentProps<typeof SearchFieldClearButton>;
+};
+export { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon, };
+export type { SearchFieldRootProps, SearchFieldRootProps as SearchFieldProps, SearchFieldGroupProps, SearchFieldInputProps, SearchFieldSearchIconProps, SearchFieldClearButtonProps, } from "./search-field";
+export { searchFieldVariants } from "./styles";
+export type { SearchFieldVariants } from "./styles";

package/dist/components/search-field/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { SearchFieldRoot, SearchFieldSearchIcon, SearchFieldInput, SearchFieldGroup, SearchFieldClearButton } from './search-field.js';
+export { searchFieldVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const SearchField = Object.assign(SearchFieldRoot, {
+  ClearButton: SearchFieldClearButton,
+  Group: SearchFieldGroup,
+  Input: SearchFieldInput,
+  Root: SearchFieldRoot,
+  SearchIcon: SearchFieldSearchIcon
+});
+
+export { SearchField, SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon };

package/dist/components/search-field/search-field.d.ts

@@ -0,0 +1,23 @@
+import type { SearchFieldVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Group as GroupPrimitive, Input as InputPrimitive, SearchField as SearchFieldPrimitive } from "react-aria-components";
+import { CloseButton } from "../close-button";
+interface SearchFieldRootProps extends ComponentPropsWithRef<typeof SearchFieldPrimitive>, SearchFieldVariants {
+}
+declare const SearchFieldRoot: ({ children, className, fullWidth, variant, ...props }: SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldGroupProps extends ComponentPropsWithRef<typeof GroupPrimitive> {
+}
+declare const SearchFieldGroup: ({ children, className, ...props }: SearchFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldInputProps extends ComponentPropsWithRef<typeof InputPrimitive> {
+}
+declare const SearchFieldInput: ({ className, ...props }: SearchFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldSearchIconProps extends ComponentPropsWithRef<"svg"> {
+    children?: React.ReactNode;
+}
+declare const SearchFieldSearchIcon: ({ children, className, ...props }: SearchFieldSearchIconProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldClearButtonProps extends ComponentPropsWithRef<typeof CloseButton> {
+}
+declare const SearchFieldClearButton: ({ className, ...props }: SearchFieldClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { SearchFieldRoot, SearchFieldGroup, SearchFieldInput, SearchFieldSearchIcon, SearchFieldClearButton, };
+export type { SearchFieldRootProps, SearchFieldGroupProps, SearchFieldInputProps, SearchFieldSearchIconProps, SearchFieldClearButtonProps, };

package/dist/components/search-field/search-field.js

@@ -0,0 +1,127 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { SearchField, Input, Group } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { IconSearch } from '../icons.js';
+import { searchFieldVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const SearchFieldContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => searchFieldVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(SearchFieldContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(SearchField, {
+      "data-slot": "search-field",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldGroup = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(Group, {
+    className: composeTwRenderProps(className, slots?.group()),
+    "data-slot": "search-field-group",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "search-field-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Search Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldSearchIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      className: composeSlotClassName(slots?.searchIcon, className),
+      "data-slot": "search-field-search-icon"
+    });
+  }
+  return /*#__PURE__*/jsx(IconSearch, {
+    className: composeSlotClassName(slots?.searchIcon, className),
+    "data-slot": "search-field-search-icon",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Clear Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldClearButton = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.clearButton()),
+    "data-slot": "search-field-clear-button",
+    slot: "clear",
+    ...props
+  });
+};
+
+export { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon };

package/dist/components/search-field/styles.d.ts

@@ -0,0 +1,69 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const searchFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SearchFieldVariants = VariantProps<typeof searchFieldVariants>;

package/dist/components/search-field/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const searchFieldVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  slots: {
+    base: "search-field",
+    clearButton: "search-field__clear-button",
+    group: "search-field__group",
+    input: "search-field__input",
+    searchIcon: "search-field__search-icon"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "search-field--full-width",
+        group: "search-field__group--full-width"
+      }
+    },
+    variant: {
+      primary: {
+        base: "search-field--primary"
+      },
+      secondary: {
+        base: "search-field--secondary"
+      }
+    }
+  }
+});
+
+export { searchFieldVariants };

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue } from "./select";
+export declare const Select: (<T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: import("./select").SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element) & {
+    Indicator: ({ children, className, ...props }: import("./select").SelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, placement, ...props }: import("./select").SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
+    Root: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: import("./select").SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./select").SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ children, className, ...props }: import("./select").SelectValueProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Select<T extends object = object> = {
+    Props: ComponentProps<typeof SelectRoot<T>>;
+    RootProps: ComponentProps<typeof SelectRoot<T>>;
+    TriggerProps: ComponentProps<typeof SelectTrigger>;
+    ValueProps: ComponentProps<typeof SelectValue>;
+    IndicatorProps: ComponentProps<typeof SelectIndicator>;
+    PopoverProps: ComponentProps<typeof SelectPopover>;
+};
+export { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };
+export type { SelectRootProps, SelectRootProps as SelectProps, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, } from "./select";
+export { selectVariants } from "./styles";
+export type { SelectVariants } from "./styles";

package/dist/components/select/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { SelectRoot, SelectValue, SelectTrigger, SelectPopover, SelectIndicator } from './select.js';
+export { selectVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Select = Object.assign(SelectRoot, {
+  Indicator: SelectIndicator,
+  Popover: SelectPopover,
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue
+});
+
+export { Select, SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };

package/dist/components/select/select.d.ts

@@ -0,0 +1,24 @@
+import type { SelectVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Button as ButtonPrimitive, Popover as PopoverPrimitive, Select as SelectPrimitive, SelectValue as SelectValuePrimitive } from "react-aria-components";
+interface SelectRootProps<T extends object, M extends "single" | "multiple" = "single"> extends ComponentPropsWithRef<typeof SelectPrimitive<T, M>>, SelectVariants {
+    items?: Iterable<T, M>;
+}
+declare const SelectRoot: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+interface SelectTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const SelectTrigger: ({ children, className, ...props }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectValueProps extends ComponentPropsWithRef<typeof SelectValuePrimitive> {
+}
+declare const SelectValue: ({ children, className, ...props }: SelectValueProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectIndicatorProps extends ComponentPropsWithRef<"svg"> {
+    className?: string;
+}
+declare const SelectIndicator: ({ children, className, ...props }: SelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const SelectPopover: ({ children, className, placement, ...props }: SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { SelectRoot, SelectTrigger, SelectValue, SelectIndicator, SelectPopover };
+export type { SelectRootProps, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, };

package/dist/components/select/select.js

@@ -0,0 +1,140 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Select, SelectValue as SelectValue$1, Button, Popover, SelectStateContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown } from '../icons.js';
+import { selectVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const SelectContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => selectVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(SelectContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Select, {
+      "data-slot": "select",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "select-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Value
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectValue = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(SelectValue$1, {
+    className: composeTwRenderProps(className, slots?.value()),
+    "data-slot": "select-value",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  const state = useContext(SelectStateContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-open": dataAttr(state?.isOpen),
+      "data-slot": "select-indicator"
+    });
+  }
+  return /*#__PURE__*/jsx(IconChevronDown, {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-open": dataAttr(state?.isOpen),
+    "data-slot": "select-default-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectPopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+
+export { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };