@koobiq/react-components 0.23.0 → 0.24.0

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,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/index.d.ts

@@ -44,6 +44,7 @@ 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

@@ -111,6 +111,8 @@ import { AccordionStateContext } from "./components/Accordion/AccordionStateCont
 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 {
@@ -173,6 +175,8 @@ export {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Navbar,
+  NavbarComponent,
   Popover,
   PopoverContent,
   PopoverFooter,
@@ -253,6 +257,7 @@ export {
   inputPropLabelPlacement,
   inputPropVariant,
   modalPropSize,
+  navbarPropVariant,
   popoverPropPlacement,
   popoverPropSize,
   popoverPropType,

package/dist/style.css

@@ -5271,6 +5271,162 @@ body[data-resizing="true"] .kbq-contentpanel-3541ee {
   inset-block-start: 0;
   inset-inline-end: 0;
 }
+.kbq-navbar-navbar-9d3c75 {
+  background-color: var(--kbq-background-bg-tertiary);
+  border-inline-end: 1px solid var(--kbq-line-contrast-less);
+  flex-direction: column;
+  block-size: 100%;
+  min-inline-size: 240px;
+  display: flex;
+  position: relative;
+}
+
+.kbq-navbar-navbar-9d3c75[data-collapsed="true"] {
+  min-inline-size: var(--kbq-size-6xl);
+  inline-size: var(--kbq-size-6xl);
+}
+
+.kbq-navbar-list-42b3cd {
+  flex-direction: column;
+  flex: auto;
+  gap: 1px;
+  display: flex;
+}
+
+.kbq-navbar-list-42b3cd[data-padded] {
+  padding: 0;
+}
+
+.kbq-navbar-header-ba57bd .kbq-navbar-appItem-08f75b {
+  border-block: 0 solid #0000;
+  border-block-width: var(--kbq-size-s) 7px;
+  block-size: auto;
+}
+
+.kbq-navbar-item-1b3022.kbq-navbar-appItem-08f75b {
+  font-size: var(--kbq-typography-subheading-font-size);
+  font-weight: var(--kbq-typography-subheading-font-weight);
+  line-height: var(--kbq-typography-subheading-line-height);
+  font-family: var(--kbq-typography-subheading-font-family);
+  font-style: var(--kbq-typography-subheading-font-style);
+  text-transform: var(--kbq-typography-subheading-text-transform);
+  font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
+  letter-spacing: var(--kbq-typography-subheading-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-subheading-line-height)  - var(--kbq-typography-subheading-font-size)) / 2);
+  padding: var(--kbq-size-xxs);
+}
+
+.kbq-navbar-item-1b3022 {
+  block-size: 40px;
+  inline-size: 100%;
+  padding: 0 var(--kbq-size-m);
+  border-inline-width: var(--kbq-size-s);
+  gap: var(--kbq-size-m);
+  background-color: #0000;
+  border-color: #0000;
+  position: relative;
+}
+
+.kbq-navbar-navbar-9d3c75[data-collapsed="true"] .kbq-navbar-item-1b3022 {
+  box-sizing: border-box;
+  padding: var(--kbq-size-xxs);
+  justify-content: center;
+}
+
+.kbq-navbar-navbar-9d3c75 .kbq-navbar-list-42b3cd .kbq-navbar-item-1b3022 {
+  border-inline-width: var(--kbq-size-s);
+}
+
+.kbq-navbar-itemIcon-50a6ed {
+  flex-shrink: 0;
+  display: flex;
+}
+
+.kbq-navbar-itemContent-ca07c9 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.kbq-navbar-itemBadge-3ef4ba {
+  background-color: var(--kbq-background-error);
+  color: var(--kbq-foreground-white);
+  block-size: var(--kbq-size-l);
+  inline-size: var(--kbq-size-l);
+  border-radius: var(--kbq-size-xxs);
+  place-content: center;
+  margin-inline-start: auto;
+  display: grid;
+}
+
+.kbq-navbar-navbar-9d3c75[data-collapsed="true"] .kbq-navbar-itemBadge-3ef4ba {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--kbq-size-3xs));
+  inset-inline-end: calc(-1 * var(--kbq-size-3xs));
+}
+
+.kbq-navbar-itemMenuIcon-dc5e9e {
+  color: var(--kbq-icon-contrast-fade);
+  margin-inline-start: auto;
+}
+
+.kbq-navbar-itemBadge-3ef4ba + .kbq-navbar-itemMenuIcon-dc5e9e {
+  margin-inline-start: unset;
+}
+
+.kbq-navbar-footer-851065 {
+  padding: var(--kbq-size-xxl) 0 var(--kbq-size-s);
+  flex-direction: column;
+  gap: 1px;
+  margin-block-start: auto;
+  display: flex;
+}
+
+.kbq-navbar-toggleWrapper-e7247f {
+  block-size: var(--kbq-size-3xl);
+  inline-size: var(--kbq-size-3xl);
+  padding: var(--kbq-size-3xs);
+  background-color: #0000;
+  border: none;
+  outline: none;
+  place-content: stretch;
+  display: none;
+  position: absolute;
+  inset-block-start: var(--kbq-size-3xl);
+  inset-inline-end: calc(-1 * var(--kbq-size-l));
+}
+
+.kbq-navbar-navbar-9d3c75:is(:hover, :focus-within) .kbq-navbar-toggleWrapper-e7247f {
+  display: grid;
+}
+
+.kbq-navbar-toggleButton-2ebeeb {
+  z-index: 1;
+  box-shadow: var(--kbq-shadow-popup);
+  background-color: var(--kbq-background-card);
+  color: var(--kbq-icon-contrast-fade);
+  border-radius: 50%;
+  place-content: center;
+  display: grid;
+}
+
+.kbq-navbar-navbar-9d3c75[data-collapsed="true"] .kbq-navbar-toggleButton-2ebeeb {
+  transform: rotate(180deg);
+}
+
+.kbq-navbar-toggleButton-2ebeeb:hover {
+  cursor: pointer;
+  color: var(--kbq-states-icon-contrast-hover);
+}
+
+.kbq-navbar-toggleButton-2ebeeb:active {
+  color: var(--kbq-states-icon-contrast-active);
+}
+
+.kbq-navbar-toggleWrapper-e7247f:focus-visible .kbq-navbar-toggleButton-2ebeeb {
+  outline: var(--kbq-size-3xs) solid var(--kbq-states-line-focus-theme);
+  outline-offset: -1px;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.15.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.23.0",
-    "@koobiq/react-icons": "0.23.0",
-    "@koobiq/react-primitives": "0.23.0",
-    "@koobiq/react-core": "0.23.0"
+    "@koobiq/logger": "0.24.0",
+    "@koobiq/react-icons": "0.24.0",
+    "@koobiq/react-primitives": "0.24.0",
+    "@koobiq/react-core": "0.24.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.15.0",