@koobiq/react-components 0.22.0 → 0.24.0

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,25 @@
+import type { ReactNode } from 'react';
+import { type LinkBaseProps } from '@koobiq/react-primitives';
+export type NavbarItemProps = {
+    /**
+     * 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,55 @@
+"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, 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
+            ),
+            ...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/RadioGroup/RadioGroup.js

@@ -114,8 +114,8 @@ const RadioGroup = forwardRef(
         /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
         /* @__PURE__ */ jsxs("div", { className: s.body, children: [
           /* @__PURE__ */ jsx("div", { ...radioGroupProps, children }),
-          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+          /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+          /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
         ] })
       ] });
     } }) });

package/dist/components/SearchInput/SearchInput.js

@@ -126,8 +126,8 @@ const SearchInput = forwardRef(
       /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
       /* @__PURE__ */ jsxs("div", { className: s.body, children: [
         /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
       ] })
     ] });
   }

package/dist/components/Select/Select.js

@@ -194,8 +194,8 @@ function SelectRender(props, ref) {
           isDisabled: props.isDisabled,
           isRequired: props.isRequired
         }) }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
       ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })

package/dist/components/Select/intl.js

@@ -3,13 +3,13 @@ const intlMessages = {
     "empty items": "Нет вариантов выбора",
     loading: "Загрузка…",
     "selected items": "Выбранные элементы",
-    more: ({ count }) => `еще ${count}`
+    more: ({ count }) => `+${count}`
   },
   "en-US": {
     "empty items": "No options available",
     "selected items": "Selected items",
     loading: "Loading…",
-    more: ({ count }) => `${count} more`
+    more: ({ count }) => `+${count}`
   }
 };
 export {

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -37,7 +37,7 @@ function TableColumnHeader({
   const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
   const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
   const columnSortIcon = allowsSorting && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx(s.sortIcon, isActive && s.active), children: iconToRender });
-  const isResizable = allowsResizing && layoutState;
+  const isResizable = !!(allowsResizing && layoutState);
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -69,8 +69,8 @@ function TableColumnHeader({
           Resizer,
           {
             column,
-            layoutState,
             onResize,
+            layoutState,
             onResizeEnd,
             onResizeStart
           }

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -60,8 +60,8 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
     /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { as: "textarea", ...textareaProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 });

package/dist/components/TimePicker/TimePicker.js

@@ -120,8 +120,8 @@ function TimePickerRender(props, ref) {
           ] })
         }
       ),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 }

package/dist/components/index.d.ts

@@ -43,6 +43,8 @@ export * from './Autocomplete';
 export * from './ToastProvider';
 export * from './Breadcrumbs';
 export * from './Accordion';
+export * from './ContenPanel';
+export * from './Navbar';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -108,6 +108,11 @@ import { Accordion, AccordionComponent } from "./components/Accordion/Accordion.
 import { AccordionGroup } from "./components/Accordion/components/AccordionGroup/AccordionGroup.js";
 import { AccordionGroupStateContext } from "./components/Accordion/components/AccordionGroup/AccordionGroupContext.js";
 import { AccordionStateContext } from "./components/Accordion/AccordionStateContext.js";
+import { ContentPanel } from "./components/ContenPanel/ContentPanel.js";
+import { ContentPanelContainer } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js";
+import { ContentPanelContainerContext } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.js";
+import { Navbar, NavbarComponent } from "./components/Navbar/Navbar.js";
+import { navbarPropVariant } from "./components/Navbar/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -132,6 +137,9 @@ export {
   Checkbox,
   CheckboxGroup,
   Container,
+  ContentPanel,
+  ContentPanelContainer,
+  ContentPanelContainerContext,
   DateInput,
   DateInputRender,
   DatePicker,
@@ -167,6 +175,8 @@ export {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Navbar,
+  NavbarComponent,
   Popover,
   PopoverContent,
   PopoverFooter,
@@ -247,6 +257,7 @@ export {
   inputPropLabelPlacement,
   inputPropVariant,
   modalPropSize,
+  navbarPropVariant,
   popoverPropPlacement,
   popoverPropSize,
   popoverPropType,