@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -0,0 +1,187 @@
+.container {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.progressBar {
+  --progress-separator: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
+  --progress-track: color-mix(in srgb, var(--color-fg-default) 10%, var(--color-bg-surface-subtle));
+  --progress-fill-done: color-mix(
+    in srgb,
+    var(--color-fg-default) 12%,
+    var(--color-bg-surface-subtle)
+  );
+  --progress-fill-progress: color-mix(
+    in srgb,
+    var(--color-status-success) 42%,
+    var(--color-bg-surface-subtle)
+  );
+  --progress-fill-missing: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
+  --progress-fill-neutral: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
+  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 95%, transparent);
+  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
+  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
+  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
+  --progress-fill-accent: color-mix(in srgb, var(--color-accent) 75%, transparent);
+
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+
+  border-radius: calc(var(--progress-height, 30px) / 2);
+  background: var(--progress-track);
+}
+
+.progressBar[data-rounded='false'] {
+  border-radius: 0;
+}
+
+.segmentsContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+.segmentWrapper {
+  display: flex;
+  height: 100%;
+  min-width: 2px;
+  min-height: 0;
+}
+
+.progressSegment {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--segment-color, var(--color-bg-surface-strong));
+}
+
+/* Subtle separators between segments */
+.segmentWrapper + .segmentWrapper .progressSegment::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 2px;
+  width: 1px;
+  background: var(--progress-separator);
+  pointer-events: none;
+}
+
+/* =====================================
+   Custom progress semantics (quiet)
+   ===================================== */
+
+.progressSegment[data-severity='done'] {
+  background: var(--progress-fill-done);
+}
+
+.progressSegment[data-severity='progress'] {
+  background: var(--progress-fill-progress);
+}
+
+.progressSegment[data-severity='missing'] {
+  background: var(--progress-fill-missing);
+}
+
+.progressSegment[data-severity='neutral'] {
+  background: var(--progress-fill-neutral);
+}
+
+/* =====================================
+   Existing semantic severities
+   Keep these semantic and more colorful
+   for consumers who want that behavior
+   ===================================== */
+
+.progressSegment[data-severity='success'] {
+  background: var(--progress-fill-success);
+}
+
+.progressSegment[data-severity='info'] {
+  background: var(--progress-fill-info);
+}
+
+.progressSegment[data-severity='warning'] {
+  background: var(--progress-fill-warning);
+}
+
+.progressSegment[data-severity='error'] {
+  background: var(--progress-fill-error);
+}
+
+.progressSegment[data-severity='accent'] {
+  background: var(--progress-fill-accent);
+}
+
+/* Label overlay */
+.progressCenter {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 8px;
+  pointer-events: none;
+}
+
+.progressCenterLabel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: calc(100% - 8px);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  text-shadow: none;
+}
+
+.emptySegments .progressCenterLabel {
+  color: var(--color-fg-subtle);
+}
+
+/* Rounded ends only on the outer edges */
+.segmentWrapper:first-child .progressSegment {
+  border-top-left-radius: var(--progress-radius);
+  border-bottom-left-radius: var(--progress-radius);
+}
+
+.segmentWrapper:last-child .progressSegment {
+  border-top-right-radius: var(--progress-radius);
+  border-bottom-right-radius: var(--progress-radius);
+}
+
+.progressBar[data-rounded='false'] .segmentWrapper:first-child .progressSegment,
+.progressBar[data-rounded='false'] .segmentWrapper:last-child .progressSegment {
+  border-radius: 0;
+}
+
+.progressBar,
+.progressSegment,
+.progressCenterLabel {
+  transition:
+    background-color 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progressBar,
+  .progressSegment,
+  .progressCenterLabel {
+    transition: none;
+  }
+}

package/dist/components/sidebar/Sidebar.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SidebarContainer = require('./components/sidebar-container/SidebarContainer');
+var SidebarProvider = require('./providers/SidebarProvider');
+
+function Sidebar({
+  items,
+  productName,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder,
+  showSettings,
+  footer,
+  resizable,
+  defaultWidth,
+  minWidth,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarContainer.SidebarContainer,
+    {
+      productName,
+      productLogo,
+      activeLink,
+      version,
+      hideSearch,
+      searchPlaceholder,
+      showSettings,
+      footer,
+      resizable,
+      defaultWidth,
+      minWidth,
+      storageKey
+    }
+  ) });
+}
+
+exports.Sidebar = Sidebar;

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { NavBarItem } from '../nav-bar/NavBar';
+interface SidebarProps {
+    collapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
+    items: NavBarItem[];
+    logo?: React.ReactNode;
+    productName?: string;
+    productLogo?: React.ReactNode;
+    activeLink?: string;
+    version?: string | number;
+    hideSearch?: boolean;
+    searchPlaceholder?: string;
+    showSettings?: boolean;
+    footer?: React.ReactNode;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    storageKey?: string;
+}
+export declare function Sidebar({ items, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
+export {};

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
+import { SidebarProvider } from './providers/SidebarProvider';
+
+function Sidebar({
+  items,
+  productName,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder,
+  showSettings,
+  footer,
+  resizable,
+  defaultWidth,
+  minWidth,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
+    SidebarContainer,
+    {
+      productName,
+      productLogo,
+      activeLink,
+      version,
+      hideSearch,
+      searchPlaceholder,
+      showSettings,
+      footer,
+      resizable,
+      defaultWidth,
+      minWidth,
+      storageKey
+    }
+  ) });
+}
+
+export { Sidebar };

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SidebarItemContent = require('./sidebar-item-content/SidebarItemContent');
+
+function SidebarItem({
+  component: Component,
+  label,
+  icon,
+  href,
+  iconWidth,
+  truncateLabel
+}) {
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarItemContent.SidebarItemContent,
+    {
+      icon,
+      iconWidth,
+      label,
+      href,
+      truncateLabel
+    }
+  ) });
+}
+
+exports.SidebarItem = SidebarItem;

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SidebarItemProps {
+    component?: React.ElementType;
+    label: string;
+    icon: React.ReactNode;
+    href?: string;
+    iconWidth?: string | number;
+    truncateLabel?: boolean;
+}
+export declare function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
+
+function SidebarItem({
+  component: Component,
+  label,
+  icon,
+  href,
+  iconWidth,
+  truncateLabel
+}) {
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
+    SidebarItemContent,
+    {
+      icon,
+      iconWidth,
+      label,
+      href,
+      truncateLabel
+    }
+  ) });
+}
+
+export { SidebarItem };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -0,0 +1,153 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./ExpandableSidebarItem.module.css');
+var Button = require('../../../button/Button');
+var SidebarProvider = require('../../providers/SidebarProvider');
+var ExpandableSidebarItem$1 = require('../expandable-sidebar-item/ExpandableSidebarItem');
+var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
+var SidebarItem = require('../SidebarItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const isGroup = (item) => item.type === "group";
+const isExpandable = (item) => item.type === "expandable";
+function ExpandableSidebarItem({
+  items,
+  label,
+  icon,
+  component: Component,
+  href,
+  iconWidth,
+  truncateLabel
+}) {
+  const {
+    defaultExpanded,
+    resetExpandAll,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    expandItem,
+    collapseItem,
+    isExpanded
+  } = SidebarProvider.useSidebar();
+  const [closing, setClosing] = react.useState(false);
+  const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
+  react.useEffect(() => {
+    if (defaultExpanded === null) return;
+    if (defaultExpanded) expandItem(href);
+    else collapseItem(href);
+  }, [defaultExpanded, expandItem, collapseItem, href]);
+  const commitCollapse = react.useCallback(() => {
+    collapseItem(href);
+    setClosing(false);
+  }, [collapseItem, href]);
+  const handleAnimationEnd = react.useCallback(() => {
+    if (closing) commitCollapse();
+  }, [closing, commitCollapse]);
+  react.useEffect(() => {
+    if (!closing) return;
+    const timer = setTimeout(commitCollapse, 250);
+    return () => clearTimeout(timer);
+  }, [closing, commitCollapse]);
+  const toggleAccordion = react.useCallback(
+    (e, onlyExpand = false) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      resetExpandAll();
+      handleSidebarCollapseChange(false);
+      if (!expanded) {
+        expandItem(href);
+        return;
+      }
+      if (!isSidebarCollapsed && !onlyExpand) {
+        setClosing(true);
+      }
+    },
+    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
+  );
+  const renderNavItem = (item, key) => {
+    var _a, _b;
+    if (isGroup(item)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
+        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
+      ] }, key);
+    }
+    if (isExpandable(item)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ExpandableSidebarItem$1.ExpandableSidebarItem,
+        {
+          items: (_b = item.children) != null ? _b : [],
+          label: item.label,
+          icon: item.icon,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          component: item.component
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItem.SidebarItem,
+      {
+        component: item.component,
+        label: item.label,
+        icon: item.icon,
+        href: item.href,
+        iconWidth: item.iconWidth,
+        truncateLabel: item.truncateLabel
+      },
+      key
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.itemRow} ${expanded ? styles__default.default.itemRowExpanded : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItemContent.SidebarItemContent,
+        {
+          headerStyle: expanded,
+          icon,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+            }
+          ) : void 0,
+          truncateLabel
+        }
+      ) }),
+      !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.toggleButtonControl,
+          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${href}-children`,
+          onClick: toggleAccordion
+        }
+      ) })
+    ] }),
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: `${href}-children`,
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""}`,
+        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+      }
+    )
+  ] });
+}
+
+exports.ExpandableSidebarItem = ExpandableSidebarItem;

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
+type ExpandableSidebarItemProps = {
+    items: NavBarItem[];
+    label: string;
+    component: React.ElementType;
+    icon: React.ReactNode;
+    href: string;
+    iconWidth?: string | number;
+    truncateLabel?: boolean;
+};
+export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import styles from './ExpandableSidebarItem.module.css';
+import { Button } from '../../../button/Button';
+import { useSidebar } from '../../providers/SidebarProvider';
+import { ExpandableSidebarItem as ExpandableSidebarItem$1 } from '../expandable-sidebar-item/ExpandableSidebarItem';
+import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
+import { SidebarItem } from '../SidebarItem';
+
+const isGroup = (item) => item.type === "group";
+const isExpandable = (item) => item.type === "expandable";
+function ExpandableSidebarItem({
+  items,
+  label,
+  icon,
+  component: Component,
+  href,
+  iconWidth,
+  truncateLabel
+}) {
+  const {
+    defaultExpanded,
+    resetExpandAll,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    expandItem,
+    collapseItem,
+    isExpanded
+  } = useSidebar();
+  const [closing, setClosing] = useState(false);
+  const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+  useEffect(() => {
+    if (defaultExpanded === null) return;
+    if (defaultExpanded) expandItem(href);
+    else collapseItem(href);
+  }, [defaultExpanded, expandItem, collapseItem, href]);
+  const commitCollapse = useCallback(() => {
+    collapseItem(href);
+    setClosing(false);
+  }, [collapseItem, href]);
+  const handleAnimationEnd = useCallback(() => {
+    if (closing) commitCollapse();
+  }, [closing, commitCollapse]);
+  useEffect(() => {
+    if (!closing) return;
+    const timer = setTimeout(commitCollapse, 250);
+    return () => clearTimeout(timer);
+  }, [closing, commitCollapse]);
+  const toggleAccordion = useCallback(
+    (e, onlyExpand = false) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      resetExpandAll();
+      handleSidebarCollapseChange(false);
+      if (!expanded) {
+        expandItem(href);
+        return;
+      }
+      if (!isSidebarCollapsed && !onlyExpand) {
+        setClosing(true);
+      }
+    },
+    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
+  );
+  const renderNavItem = (item, key) => {
+    var _a, _b;
+    if (isGroup(item)) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
+        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
+      ] }, key);
+    }
+    if (isExpandable(item)) {
+      return /* @__PURE__ */ jsx(
+        ExpandableSidebarItem$1,
+        {
+          items: (_b = item.children) != null ? _b : [],
+          label: item.label,
+          icon: item.icon,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          component: item.component
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SidebarItem,
+      {
+        component: item.component,
+        label: item.label,
+        icon: item.icon,
+        href: item.href,
+        iconWidth: item.iconWidth,
+        truncateLabel: item.truncateLabel
+      },
+      key
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${styles.itemRow} ${expanded ? styles.itemRowExpanded : ""}`, children: [
+      /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
+        SidebarItemContent,
+        {
+          headerStyle: expanded,
+          icon,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+            }
+          ) : void 0,
+          truncateLabel
+        }
+      ) }),
+      !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "inline",
+          shape: "round",
+          className: styles.toggleButtonControl,
+          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${href}-children`,
+          onClick: toggleAccordion
+        }
+      ) })
+    ] }),
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${href}-children`,
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""}`,
+        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+      }
+    )
+  ] });
+}
+
+export { ExpandableSidebarItem };