@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -1,293 +0,0 @@
-.container {
-  position: relative;
-  flex-shrink: 1;
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  width: var(--sidebar-width);
-  inline-size: var(--sidebar-width);
-  box-sizing: border-box;
-  border-inline-end: var(--border-width-thin) solid var(--color-border-default);
-  transition:
-    width var(--transition-fast) var(--ease-standard),
-    inline-size var(--transition-fast) var(--ease-standard);
-}
-
-.sidebarIcon {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: var(--color-fg-subtle);
-}
-.container.resizing {
-  transition: none;
-}
-
-/* Collapsed state */
-.container.collapsed {
-  width: var(--component-size-lg);
-  inline-size: var(--component-size-lg);
-  box-sizing: content-box;
-  gap: var(--spacing-sm);
-}
-
-/* Global links / focus */
-.container a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* HEADER (product + collapse) */
-.header {
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  box-shadow: 0 1px 0 var(--color-border-default);
-  padding-inline: var(--spacing-xs);
-  min-block-size: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.productHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  flex-grow: 1;
-}
-
-/* Product logo + name group */
-.productGroup {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 0;
-  overflow: hidden;
-}
-
-/* Product logo container */
-.productLogo {
-  display: flex;
-  align-items: center;
-  max-inline-size: 100%;
-  block-size: 25px;
-  min-width: 0;
-}
-
-.productNameLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  color: var(--color-fg-default);
-  min-width: 0;
-}
-
-.productNameSquare {
-  inline-size: 7px;
-  block-size: 7px;
-  flex: 0 0 auto;
-  background-color: var(--color-logo);
-}
-
-.productNameLabel h1 {
-  font-size: var(--font-size-md);
-}
-
-/* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
-.productLogo > * {
-  display: flex;
-  align-items: center;
-  max-inline-size: 100%;
-  block-size: 100%;
-  min-inline-size: 0;
-}
-
-/* Keep product logo visible in expanded state even when wrapped */
-.productLogo :is(img, svg) {
-  display: block;
-  block-size: 100%;
-  inline-size: auto;
-  max-inline-size: 100%;
-}
-
-/* Collapse button */
-.productHeader button {
-  flex: 0 0 auto;
-}
-
-/* Rotate icon when collapsed */
-.collapsedIcon {
-  transform: rotate(180deg);
-  transition: transform 0.3s ease;
-}
-
-/* CONTENT */
-.content {
-  overflow: auto;
-  flex: 1 1 auto;
-  overflow-y: visible;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  gap: 5px;
-}
-
-.container:not(.collapsed) .content {
-  gap: var(--spacing-md);
-}
-
-/* FILTER */
-.filter > button {
-  border-radius: 0;
-  min-height: var(--component-size-md);
-  width: 100%;
-  padding: var(--spacing-xs);
-  color: var(--color-fg-muted);
-}
-
-.container:not(.collapsed) .filter {
-  padding-inline: var(--spacing-xs);
-}
-
-/* LINKS */
-.links {
-  overflow: auto;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  gap: 2px;
-  font-size: var(--font-size-sm);
-}
-
-.container:not(.collapsed) .links {
-  padding-inline: var(--spacing-xs);
-}
-
-.container .links button {
-  background: none;
-  border: 0;
-  font-size: inherit;
-  color: inherit;
-  display: inline-flex;
-  padding: 0;
-}
-
-/* RESIZE HANDLE */
-.resizeHandle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 8px;
-  cursor: col-resize;
-  z-index: 1;
-  user-select: none;
-  touch-action: none;
-  outline: none;
-}
-
-.resizeHandle::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: var(--border-width-thin);
-  background-color: var(--color-border-subtle);
-  opacity: 0;
-  transition:
-    opacity var(--transition-fast) var(--ease-standard),
-    background-color var(--transition-fast) var(--ease-standard);
-}
-
-.resizeHandle:hover::after,
-.resizeHandle:active::after {
-  opacity: 1;
-  background-color: var(--color-border-strong);
-}
-
-.resizeHandle:active::after {
-  background-color: var(--color-brand);
-}
-
-.resizeHandle:focus-visible {
-  box-shadow: var(--focus-ring);
-}
-
-.container.collapsed .resizeHandle {
-  display: none;
-}
-
-/* CUSTOM FOOTER SLOT */
-.footerSlot {
-  flex: 0 0 auto;
-}
-
-.container:not(.collapsed) .footerSlot {
-  padding-inline: var(--spacing-xs);
-}
-
-/* FOOTER (company logo) */
-.footer {
-  flex: 0 0 auto;
-  border-top: 1px solid var(--color-border-default);
-  padding: var(--spacing-sm);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.companyLogo {
-  opacity: 0.6;
-}
-
-.companyLogo svg {
-  width: 80px;
-  height: auto;
-  display: block;
-}
-
-/* Hide company logo in collapsed state */
-.container.collapsed .companyLogo {
-  display: none;
-}
-
-.version {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-.logo {
-  display: none;
-}
-
-/* === Collapsed header behavior ===
-   Hide product logo + name entirely so the collapse button can truly center. */
-.container.collapsed .productGroup {
-  display: none;
-}
-
-/* Center the collapse button in collapsed state */
-.container.collapsed .productHeader {
-  justify-content: center;
-  gap: 0;
-}
-
-.container.collapsed .header {
-  padding: 0;
-}
-
-.container.collapsed .productHeader button {
-  margin-inline: auto;
-}

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -1,54 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var getHighlightedSegments = require('../../../../utils/text/get-highlighted-segments');
-var styles = require('./SidebarItemContent.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SidebarItemContent({
-  icon,
-  label,
-  suffixIcon,
-  href,
-  iconWidth,
-  disableActiveStyles = false,
-  headerStyle,
-  truncateLabel = false
-}) {
-  const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = SidebarProvider.useSidebar();
-  const iconStyle = iconWidth !== void 0 ? { ["--sidebar-item-icon-width"]: iconWidth } : void 0;
-  const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
-  const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
-  const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments.getHighlightedSegments(label, highlightTerms).map(
-    (segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: segment.text }, `${segment.text}-${index}`)
-  ) : label;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${headerStyle ? styles__default.default.headerStyle : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.iconLabel, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, style: iconStyle, children: icon }),
-          !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: `${styles__default.default.label} ${shouldTruncate ? styles__default.default.truncate : ""}`,
-              title: shouldTruncate && typeof label === "string" ? label : void 0,
-              children: renderedLabel
-            }
-          )
-        ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
-      ]
-    }
-  );
-}
-
-exports.SidebarItemContent = SidebarItemContent;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { JSX } from 'react';
-export interface SidebarItemContentProps {
-    icon?: React.ReactNode;
-    label: React.ReactNode;
-    suffixIcon?: React.ReactNode;
-    href?: string;
-    iconWidth?: string | number;
-    disableActiveStyles?: boolean;
-    headerStyle?: boolean;
-    truncateLabel?: boolean;
-}
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -1,47 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
-import { getHighlightedSegments } from '../../../../utils/text/get-highlighted-segments';
-import styles from './SidebarItemContent.module.css';
-import { useSidebar } from '../../providers/SidebarProvider';
-
-function SidebarItemContent({
-  icon,
-  label,
-  suffixIcon,
-  href,
-  iconWidth,
-  disableActiveStyles = false,
-  headerStyle,
-  truncateLabel = false
-}) {
-  const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
-  const iconStyle = iconWidth !== void 0 ? { ["--sidebar-item-icon-width"]: iconWidth } : void 0;
-  const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
-  const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
-  const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments(label, highlightTerms).map(
-    (segment, index) => segment.matched ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`)
-  ) : label;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""} ${headerStyle ? styles.headerStyle : ""}`,
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: styles.iconLabel, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.icon, style: iconStyle, children: icon }),
-          !isSidebarCollapsed && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `${styles.label} ${shouldTruncate ? styles.truncate : ""}`,
-              title: shouldTruncate && typeof label === "string" ? label : void 0,
-              children: renderedLabel
-            }
-          )
-        ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
-      ]
-    }
-  );
-}
-
-export { SidebarItemContent };

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -1,117 +0,0 @@
-.container {
-  inline-size: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-xs);
-  text-decoration: none;
-  color: var(--color-fg-muted);
-  cursor: pointer;
-  position: relative;
-  border-radius: var(--border-radius-md);
-  user-select: none;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-.container.collapsed {
-  justify-content: center;
-  padding: var(--spacing-xs);
-  border-radius: 0;
-}
-
-.active {
-  background: var(--color-bg-selected);
-}
-
-.active::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block: 0;
-  inline-size: 3px;
-  background-color: var(--color-brand);
-  border-start-start-radius: inherit;
-  border-end-start-radius: inherit;
-}
-
-.iconLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  min-inline-size: 0;
-  flex: 1 1 0;
-  overflow: hidden;
-}
-
-.container:not(.active):hover {
-  background-color: var(--color-bg-toolbar-hover);
-
-  color: var(--color-fg-default);
-}
-
-.container:not(.active):hover .icon,
-.container:not(.active):hover .suffixIcon,
-.container:focus-visible .icon,
-.container:focus-visible .suffixIcon {
-  color: var(--color-fg-default);
-}
-
-.active .icon,
-.active .suffixIcon {
-  color: var(--color-fg-default);
-}
-
-.icon,
-.suffixIcon {
-  inline-size: var(--sidebar-item-icon-width, auto);
-  min-inline-size: var(--icon-size-sm);
-  flex: 0 0 var(--sidebar-item-icon-width, auto);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--color-fg-subtle);
-}
-
-.icon {
-  min-inline-size: var(--sidebar-item-icon-width, var(--icon-size-sm));
-}
-
-.icon svg,
-.suffixIcon svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: inherit;
-}
-
-.collapsed svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-.container:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.headerStyle .label {
-  font-weight: 500;
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.label {
-  min-inline-size: 0;
-  flex: 1 1 auto;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -1,61 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./SidebarItems.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var ExpandableSidebarItem = require('../expandable-sidebar-item/ExpandableSidebarItem');
-var SidebarItem = require('../SidebarItem');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SidebarItems({ activeLink }) {
-  const { filteredItems, setActiveLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
-  react.useEffect(() => {
-    setActiveLink(activeLink != null ? activeLink : "");
-  }, [activeLink, setActiveLink]);
-  const renderItem = (item, key) => {
-    var _a, _b;
-    if (item.type === "group") {
-      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
-        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
-      ] }, key);
-    }
-    if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ExpandableSidebarItem.ExpandableSidebarItem,
-        {
-          items: children,
-          label: label2,
-          icon: icon2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
-        },
-        key
-      );
-    }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItem.SidebarItem,
-      {
-        component: Component,
-        label,
-        icon,
-        href,
-        iconWidth,
-        truncateLabel
-      },
-      key
-    );
-  };
-  return filteredItems == null ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
-}
-
-exports.SidebarItems = SidebarItems;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare function SidebarItems({ activeLink }: {
-    activeLink?: string;
-}): React.ReactNode;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -1,55 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
-import styles from './SidebarItems.module.css';
-import { useSidebar } from '../../providers/SidebarProvider';
-import { ExpandableSidebarItem } from '../expandable-sidebar-item/ExpandableSidebarItem';
-import { SidebarItem } from '../SidebarItem';
-
-function SidebarItems({ activeLink }) {
-  const { filteredItems, setActiveLink, isSidebarCollapsed } = useSidebar();
-  useEffect(() => {
-    setActiveLink(activeLink != null ? activeLink : "");
-  }, [activeLink, setActiveLink]);
-  const renderItem = (item, key) => {
-    var _a, _b;
-    if (item.type === "group") {
-      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
-        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
-      ] }, key);
-    }
-    if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
-      return /* @__PURE__ */ jsx(
-        ExpandableSidebarItem,
-        {
-          items: children,
-          label: label2,
-          icon: icon2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
-        },
-        key
-      );
-    }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
-    return /* @__PURE__ */ jsx(
-      SidebarItem,
-      {
-        component: Component,
-        label,
-        icon,
-        href,
-        iconWidth,
-        truncateLabel
-      },
-      key
-    );
-  };
-  return filteredItems == null ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
-}
-
-export { SidebarItems };

package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css

@@ -1,20 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xxs);
-  margin-top: var(--spacing-xs);
-}
-
-.group:first-child {
-  margin-top: 0;
-}
-
-.groupLabel {
-  padding: 0 var(--spacing-xs);
-  margin: var(--spacing-xs) 0;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-fg-subtle);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}