@koobiq/react-components 0.23.0 → 0.25.0

package/dist/components/ContenPanel/ContentPanel.d.ts

@@ -1,5 +1,6 @@
-import { type ComponentPropsWithRef, type CSSProperties } from 'react';
-import { DialogBody, DialogFooter, DialogHeader, type DialogProps } from '../Dialog';
+import type { CSSProperties, ComponentPropsWithRef } from 'react';
+import { DialogBody, DialogFooter, DialogHeader } from '../Dialog';
+import type { DialogProps } from '../Dialog';
 declare const ContentPanelComponent: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     width?: import("./types").ContentPanelSize | null;

package/dist/components/ContenPanel/ContentPanel.js

@@ -26,23 +26,23 @@ const ContentPanelComponent = forwardRef(
     );
     const {
       defaultWidth: defaultWidthProp,
+      disableExitOnEscapeKeyDown,
       minWidth: minWidthProp,
       maxWidth: maxWidthProp,
-      disableExitOnEscapeKeyDown,
-      onResetResize,
       isResizable = false,
-      width,
-      onResize,
-      onResizeEnd,
+      hideCloseButton,
       onResizeStart,
-      isOpen,
+      onResetResize,
       onOpenChange,
       defaultOpen,
+      onResizeEnd,
+      slotProps,
       className,
-      style,
       children,
-      slotProps,
-      hideCloseButton,
+      onResize,
+      isOpen,
+      width,
+      style,
       ...other
     } = panelProps;
     const {

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,14 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { DividerBaseProps } from './index';
-export declare const Divider: import("@koobiq/react-core").PolyForwardComponent<"div", DividerBaseProps, ElementType>;
-export type DividerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Divider<As>>;
+import type { ElementType } from 'react';
+import type { BaseCollection } from '@koobiq/react-primitives';
+import { CollectionNode } from '@koobiq/react-primitives';
+export declare class DividerNode extends CollectionNode<any> {
+    static readonly type = "separator";
+    filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null;
+}
+export declare const Divider: (props: {
+    className?: string;
+    display?: import("./types").DividerPropDisplay;
+    flexItem?: boolean;
+    disablePaddings?: boolean;
+    as?: ElementType;
+} & Omit<import("@react-aria/separator").SeparatorProps, "elementType"> & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/Divider/Divider.js

@@ -1,13 +1,27 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import { useSeparator } from "@koobiq/react-primitives";
+import { clsx } from "@koobiq/react-core";
+import { createLeafComponent, CollectionNode, useSeparator } from "@koobiq/react-primitives";
 import s from "./Divider.module.css.js";
-const Divider = polymorphicForwardRef(
-  (props, ref) => {
+const _DividerNode = class _DividerNode extends CollectionNode {
+  filter(collection, newCollection) {
+    const prevItem = newCollection.getItem(this.prevKey);
+    if (prevItem && prevItem.type !== "separator") {
+      const clone = this.clone();
+      newCollection.addDescendants(clone, collection);
+      return clone;
+    }
+    return null;
+  }
+};
+_DividerNode.type = "separator";
+let DividerNode = _DividerNode;
+const Divider = createLeafComponent(
+  DividerNode,
+  function Separator(props, ref) {
     const {
-      as: Tag = "div",
       orientation = "horizontal",
+      as = "div",
       disablePaddings,
       flexItem,
       display,
@@ -17,9 +31,10 @@ const Divider = polymorphicForwardRef(
     const { separatorProps } = useSeparator({
       ...other,
       orientation,
-      elementType: Tag
+      elementType: `${as}`
     });
     const hasPaddings = !disablePaddings;
+    const Tag = as;
     return /* @__PURE__ */ jsx(
       Tag,
       {
@@ -42,7 +57,7 @@ const Divider = polymorphicForwardRef(
     );
   }
 );
-Divider.displayName = "Divider";
 export {
-  Divider
+  Divider,
+  DividerNode
 };

package/dist/components/Divider/types.d.ts

@@ -1,8 +1,8 @@
-import type { ExtendableProps } from '@koobiq/react-core';
+import type { ElementType, HTMLAttributes } from 'react';
 import type { SeparatorProps } from '@koobiq/react-primitives';
 export declare const dividerPropDisplay: readonly ["block", "inline", "inlineBlock"];
 export type DividerPropDisplay = (typeof dividerPropDisplay)[number];
-export type DividerBaseProps = ExtendableProps<{
+export type DividerProps = {
     /** Additional CSS-classes. */
     className?: string;
     /** Set the display for the component. */
@@ -17,4 +17,5 @@ export type DividerBaseProps = ExtendableProps<{
      * If `true`, it disables the default paddings.
      */
     disablePaddings?: boolean;
-}, Omit<SeparatorProps, 'elementType'>>;
+    as?: ElementType;
+} & Omit<SeparatorProps, 'elementType'> & HTMLAttributes<HTMLElement>;

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,15 @@
+import { NavbarAppItem, NavbarBody, NavbarFooter, NavbarHeader, NavbarItem } from './components';
+import type { NavbarProps } from './types';
+export declare const NavbarComponent: {
+    ({ variant, isCollapsed, isToggleButtonHidden, defaultCollapsed, className, children, onCollapse, ref, ...other }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type CompoundedComponent = typeof NavbarComponent & {
+    Header: typeof NavbarHeader;
+    Body: typeof NavbarBody;
+    Footer: typeof NavbarFooter;
+    Item: typeof NavbarItem;
+    AppItem: typeof NavbarAppItem;
+};
+export declare const Navbar: CompoundedComponent;
+export {};

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef, useControlledState, useLocalizedStringFormatter, clsx, mergeProps } from "@koobiq/react-core";
+import { IconChevronDoubleLeftS16 } from "@koobiq/react-icons";
+import { useToolbar, Button } from "@koobiq/react-primitives";
+import intlMessages from "./intl.json.js";
+import s from "./Navbar.module.css.js";
+import { NavbarContext } from "./NavbarContext.js";
+import { NavbarHeader } from "./components/NavbarHeader.js";
+import { NavbarBody } from "./components/NavbarBody.js";
+import { NavbarFooter } from "./components/NavbarFooter.js";
+import { NavbarItem } from "./components/NavbarItem.js";
+import { NavbarAppItem } from "./components/NavbarAppItem.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+const NavbarComponent = ({
+  variant = "vertical",
+  isCollapsed,
+  isToggleButtonHidden,
+  defaultCollapsed,
+  className,
+  children,
+  onCollapse,
+  ref,
+  ...other
+}) => {
+  const navbarRef = useObjectRef(ref);
+  const { toolbarProps } = useToolbar({ orientation: variant }, navbarRef);
+  const [isCollapsedActual, setIsCollapsedActual] = useControlledState(
+    isCollapsed,
+    defaultCollapsed ?? false,
+    onCollapse
+  );
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  return /* @__PURE__ */ jsx(NavbarContext, { value: { isCollapsed: isCollapsedActual }, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ...mergeProps(other, toolbarProps),
+      className: clsx(s.navbar, className),
+      role: "navigation",
+      ref: navbarRef,
+      "data-collapsed": isCollapsedActual,
+      children: [
+        children,
+        !isToggleButtonHidden && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            offset: 8,
+            hideArrow: true,
+            placement: "end",
+            control: (tooltipProps) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...tooltipProps,
+                "aria-hidden": true,
+                tabIndex: -1,
+                className: s.toggleWrapper,
+                onPress: () => setIsCollapsedActual((is) => !is),
+                children: /* @__PURE__ */ jsx("span", { className: s.toggleButton, children: /* @__PURE__ */ jsx(IconChevronDoubleLeftS16, {}) })
+              }
+            ),
+            children: stringFormatter.format(
+              isCollapsedActual ? "show navbar" : "hide navbar"
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+NavbarComponent.displayName = "Navbar";
+const Navbar = NavbarComponent;
+Navbar.Header = NavbarHeader;
+Navbar.Body = NavbarBody;
+Navbar.Footer = NavbarFooter;
+Navbar.Item = NavbarItem;
+Navbar.AppItem = NavbarAppItem;
+export {
+  Navbar,
+  NavbarComponent
+};

package/dist/components/Navbar/Navbar.module.css.js

@@ -0,0 +1,41 @@
+const navbar = "kbq-navbar-navbar-9d3c75";
+const list = "kbq-navbar-list-42b3cd";
+const appItem = "kbq-navbar-appItem-08f75b";
+const header = "kbq-navbar-header-ba57bd";
+const item = "kbq-navbar-item-1b3022";
+const itemIcon = "kbq-navbar-itemIcon-50a6ed";
+const itemContent = "kbq-navbar-itemContent-ca07c9";
+const itemBadge = "kbq-navbar-itemBadge-3ef4ba";
+const itemMenuIcon = "kbq-navbar-itemMenuIcon-dc5e9e";
+const footer = "kbq-navbar-footer-851065";
+const toggleWrapper = "kbq-navbar-toggleWrapper-e7247f";
+const toggleButton = "kbq-navbar-toggleButton-2ebeeb";
+const s = {
+  navbar,
+  list,
+  appItem,
+  header,
+  item,
+  itemIcon,
+  itemContent,
+  itemBadge,
+  itemMenuIcon,
+  footer,
+  toggleWrapper,
+  toggleButton
+};
+export {
+  appItem,
+  s as default,
+  footer,
+  header,
+  item,
+  itemBadge,
+  itemContent,
+  itemIcon,
+  itemMenuIcon,
+  list,
+  navbar,
+  toggleButton,
+  toggleWrapper
+};

package/dist/components/Navbar/NavbarContext.d.ts

@@ -0,0 +1,5 @@
+export type NavbarContextProps = {
+    isCollapsed?: boolean;
+};
+export declare const NavbarContext: import("react").Context<NavbarContextProps>;
+export declare const useNavbarState: () => NavbarContextProps;

package/dist/components/Navbar/NavbarContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext, useContext } from "react";
+const NavbarContext = createContext({});
+const useNavbarState = () => useContext(NavbarContext);
+export {
+  NavbarContext,
+  useNavbarState
+};

package/dist/components/Navbar/components/NavbarAppItem.d.ts

@@ -0,0 +1,7 @@
+import { type DistributiveOmit } from '@koobiq/react-core';
+import { type NavbarItemProps } from './NavbarItem';
+export type NavbarAppItemProps = DistributiveOmit<NavbarItemProps, 'isMenu' | 'badge'>;
+export declare const NavbarAppItem: {
+    ({ className, ...props }: NavbarAppItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Navbar/components/NavbarAppItem.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import s from "../Navbar.module.css.js";
+import { NavbarItem } from "./NavbarItem.js";
+const NavbarAppItem = ({ className, ...props }) => /* @__PURE__ */ jsx(NavbarItem, { ...props, className: clsx(s.appItem, className) });
+NavbarAppItem.displayName = "NavbarAppItem";
+export {
+  NavbarAppItem
+};

package/dist/components/Navbar/components/NavbarBody.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+export type NavbarBodyProps = ComponentPropsWithRef<'ul'>;
+export declare const NavbarBody: {
+    ({ children, className, ...props }: NavbarBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Navbar/components/NavbarBody.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { utilClasses } from "../../../styles/utility.js";
+import s from "../Navbar.module.css.js";
+const { list } = utilClasses;
+const NavbarBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("ul", { "data-padded": "true", className: clsx(list, s.list, className), ...props, children });
+NavbarBody.displayName = "NavbarBody";
+export {
+  NavbarBody
+};

package/dist/components/Navbar/components/NavbarFooter.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+export type NavbarFooterProps = ComponentPropsWithRef<'footer'>;
+export declare const NavbarFooter: {
+    ({ children, className, ...props }: NavbarFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Navbar/components/NavbarFooter.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { utilClasses } from "../../../styles/utility.js";
+import s from "../Navbar.module.css.js";
+const { list } = utilClasses;
+const NavbarFooter = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("footer", { className: clsx(s.footer, className), ...props, children: /* @__PURE__ */ jsx("ul", { "data-padded": "true", className: clsx(list, s.list, className), children }) });
+NavbarFooter.displayName = "NavbarFooter";
+export {
+  NavbarFooter
+};

package/dist/components/Navbar/components/NavbarHeader.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+export type NavbarHeaderProps = ComponentPropsWithRef<'header'>;
+export declare const NavbarHeader: {
+    ({ className, children, ...props }: NavbarHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Navbar/components/NavbarHeader.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { utilClasses } from "../../../styles/utility.js";
+import s from "../Navbar.module.css.js";
+const { list } = utilClasses;
+const NavbarHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("header", { className: clsx(s.header, className), ...props, children: /* @__PURE__ */ jsx("ul", { "data-padded": "true", className: clsx(list, s.list, className), children }) });
+NavbarHeader.displayName = "NavbarHeader";
+export {
+  NavbarHeader
+};

package/dist/components/Navbar/components/NavbarItem.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type LinkBaseProps } from '@koobiq/react-primitives';
+export type NavbarItemProps = {
+    /**
+     * Whether the item is active.
+     */
+    isActive?: boolean;
+    /**
+     * Whether the item is a menu trigger.
+     */
+    isMenu?: boolean;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Icon to display before the item content.
+     */
+    icon?: ReactNode;
+    /**
+     * Badge content to display.
+     */
+    badge?: ReactNode;
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+} & LinkBaseProps;
+export declare const NavbarItem: import("@koobiq/react-core").PolyForwardComponent<"a", NavbarItemProps, import("react").ElementType>;

package/dist/components/Navbar/components/NavbarItem.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { polymorphicForwardRef, mergeRefs, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronRight16 } from "@koobiq/react-icons";
+import { Link } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../styles/utility.js";
+import s from "../Navbar.module.css.js";
+import { useNavbarState } from "../NavbarContext.js";
+import { Tooltip } from "../../Tooltip/Tooltip.js";
+const { listItem, typography } = utilClasses;
+const NavbarItem = polymorphicForwardRef(
+  ({
+    as,
+    className,
+    isActive,
+    isMenu = false,
+    icon,
+    badge,
+    children,
+    ...other
+  }, inRef) => {
+    const { isCollapsed } = useNavbarState();
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        offset: 8,
+        hideArrow: true,
+        placement: "end",
+        isDisabled: !isCollapsed,
+        control: (props) => /* @__PURE__ */ jsxs(
+          Link,
+          {
+            as: as || (isMenu || !other.href ? "button" : "a"),
+            className: clsx(
+              listItem,
+              typography["text-normal-medium"],
+              s.item,
+              className
+            ),
+            "data-selected": isActive || void 0,
+            ...mergeProps(props, other),
+            ref: mergeRefs(props.ref, inRef),
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: s.itemIcon, children: icon }),
+              !isCollapsed && /* @__PURE__ */ jsx("span", { className: s.itemContent, children }),
+              badge && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(typography["text-compact-medium"], s.itemBadge),
+                  children: badge
+                }
+              ),
+              !isCollapsed && isMenu && /* @__PURE__ */ jsx(IconChevronRight16, { className: s.itemMenuIcon })
+            ]
+          }
+        ),
+        children
+      }
+    );
+  }
+);
+NavbarItem.displayName = "NavbarItem";
+export {
+  NavbarItem
+};

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

@@ -0,0 +1,5 @@
+export * from './NavbarBody';
+export * from './NavbarFooter';
+export * from './NavbarHeader';
+export * from './NavbarItem';
+export * from './NavbarAppItem';

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

@@ -0,0 +1,2 @@
+export * from './Navbar';
+export * from './types';

package/dist/components/Navbar/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "show navbar": "Показать", "hide navbar": "Скрыть" },
+  "en-US": { "show navbar": "Show", "hide navbar": "Hide" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/Navbar/types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare const navbarPropVariant: readonly ["vertical", "horizontal"];
+export type NavbarPropVariant = (typeof navbarPropVariant)[number];
+export type NavbarProps = {
+    /**
+     * Whether the navbar is collapsed.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Whether the toggle button is hidden.
+     */
+    isToggleButtonHidden?: boolean;
+    /**
+     * Default collapsed state when uncontrolled.
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Navbar orientation variant.
+     * @default 'vertical'
+     */
+    variant?: NavbarPropVariant;
+    /**
+     * Callback fired when collapse state changes.
+     */
+    onCollapse?: (isCollapsed: boolean) => void;
+} & ComponentPropsWithRef<'nav'>;

package/dist/components/Navbar/types.js

@@ -0,0 +1,4 @@
+const navbarPropVariant = ["vertical", "horizontal"];
+export {
+  navbarPropVariant
+};

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/Select/Select.d.ts

@@ -8,5 +8,9 @@ type CompoundedComponent = typeof SelectComponent & {
     Divider: typeof Divider;
     ItemText: typeof ListItemText;
 };
+/**
+ * @deprecated
+ * This component has been deprecated, please use SelectNext instead.
+ */
 export declare const Select: CompoundedComponent;
 export {};

package/dist/components/SelectNext/Select.d.ts

@@ -0,0 +1,13 @@
+import { Divider } from '../Divider';
+import type { ListItemText } from '../List';
+import { SelectOption, SelectSection } from './components';
+import { type SelectNextComponent } from './index';
+declare const SelectComponent: SelectNextComponent;
+type CompoundedComponent = typeof SelectComponent & {
+    Item: typeof SelectOption;
+    Section: typeof SelectSection;
+    Divider: typeof Divider;
+    ItemText: typeof ListItemText;
+};
+export declare const SelectNext: CompoundedComponent;
+export {};