@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './SegmentedProgressBar.module.css';
+
+const sizeTokenMap = {
+  "2xs": "var(--component-size-2xs)",
+  xxs: "var(--component-size-xxs)",
+  xs: "var(--component-size-xs)",
+  sm: "var(--component-size-sm)",
+  md: "var(--component-size-md)",
+  lg: "var(--component-size-lg)"
+};
+function SegmentWithTooltip({
+  seg,
+  index,
+  tooltipPlacement
+}) {
+  var _a, _b;
+  const tooltipContent = typeof seg.label !== "undefined" ? seg.label : String((_a = seg.value) != null ? _a : 0);
+  const tooltipEnabled = tooltipContent !== null && tooltipContent !== void 0 && tooltipContent !== "";
+  const { triggerProps } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltipContent : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.segmentWrapper,
+      style: {
+        flex: `${Math.max(seg.value || 0, 0)} 0 0`
+      },
+      ...tooltipEnabled ? triggerProps : {},
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: styles.progressSegment,
+          "data-index": index,
+          "data-severity": (_b = seg.severity) != null ? _b : "neutral",
+          style: seg.color ? {
+            ["--segment-color"]: seg.color
+          } : void 0
+        }
+      )
+    }
+  );
+}
+const SegmentedProgressBar = ({
+  segments,
+  total,
+  showRemainder = true,
+  remainderSeverity = "missing",
+  centerLabel,
+  size = "sm",
+  rounded = true,
+  trackColor,
+  tooltipPlacement = "top",
+  className,
+  ...aria
+}) => {
+  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
+  const effectiveTotal = total != null ? total : sum;
+  const safeTotal = Math.max(effectiveTotal, 1e-4);
+  const remainder = Math.max(effectiveTotal - sum, 0);
+  const pctFilled = Math.min(100, Math.max(0, Math.min(sum, effectiveTotal) / safeTotal * 100));
+  const computedSegments = [
+    ...segments,
+    ...showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []
+  ];
+  const autoNumbers = (() => {
+    const base = segments.map((s) => s.value || 0);
+    if (showRemainder) base.push(remainder);
+    return base.join("/");
+  })();
+  const filteredSegments = computedSegments.filter((x) => x.value > 0);
+  const rootClass = [styles.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: rootClass,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": effectiveTotal,
+      "aria-valuenow": Math.min(sum, effectiveTotal),
+      ...aria,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.progressBar,
+          "data-rounded": rounded ? "true" : "false",
+          style: {
+            ["--progress-height"]: sizeTokenMap[size],
+            height: sizeTokenMap[size],
+            background: trackColor != null ? trackColor : "var(--color-bg-surface-subtle)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => /* @__PURE__ */ jsx(
+              SegmentWithTooltip,
+              {
+                seg,
+                index: i,
+                tooltipPlacement
+              },
+              `${i}`
+            )) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ""}`,
+                children: /* @__PURE__ */ jsx("span", { className: styles.progressCenterLabel, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { SegmentedProgressBar };

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

@@ -0,0 +1,174 @@
+.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) 18%, transparent);
+  --progress-fill-progress: color-mix(in srgb, var(--color-fg-default) 6%, transparent);
+  --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) 32%, transparent);
+  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 32%, transparent);
+  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 32%, transparent);
+  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 32%, 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);
+}
+
+/* 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,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SidebarContainer = require('./components/sidebar-container/SidebarContainer');
+var SidebarProvider = require('./providers/SidebarProvider');
+
+function Sidebar({
+  items,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder,
+  showSettings,
+  footer,
+  resizable,
+  defaultWidth,
+  minWidth,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarContainer.SidebarContainer,
+    {
+      productLogo,
+      activeLink,
+      version,
+      hideSearch,
+      searchPlaceholder,
+      showSettings,
+      footer,
+      resizable,
+      defaultWidth,
+      minWidth,
+      storageKey
+    }
+  ) });
+}
+
+exports.Sidebar = Sidebar;

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
+import { SidebarProvider } from './providers/SidebarProvider';
+
+function Sidebar({
+  items,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder,
+  showSettings,
+  footer,
+  resizable,
+  defaultWidth,
+  minWidth,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
+    SidebarContainer,
+    {
+      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.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,133 @@
+'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 ready = true;
+  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 handleAnimationEnd = react.useCallback(() => {
+    if (closing) {
+      collapseItem(href);
+      setClosing(false);
+    }
+  }, [closing, ready, collapseItem, href]);
+  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.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItemContent.SidebarItemContent,
+      {
+        headerStyle: expanded,
+        icon,
+        iconWidth,
+        label,
+        href,
+        disableActiveStyles: expanded,
+        truncateLabel,
+        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDown,
+          {
+            className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+          }
+        ) })
+      }
+    ) }),
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+      }
+    )
+  ] });
+}
+
+exports.ExpandableSidebarItem = ExpandableSidebarItem;

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

@@ -0,0 +1,127 @@
+'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 ready = true;
+  const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+  useEffect(() => {
+    if (defaultExpanded === null) return;
+    if (defaultExpanded) expandItem(href);
+    else collapseItem(href);
+  }, [defaultExpanded, expandItem, collapseItem, href]);
+  const handleAnimationEnd = useCallback(() => {
+    if (closing) {
+      collapseItem(href);
+      setClosing(false);
+    }
+  }, [closing, ready, collapseItem, href]);
+  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__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
+      SidebarItemContent,
+      {
+        headerStyle: expanded,
+        icon,
+        iconWidth,
+        label,
+        href,
+        disableActiveStyles: expanded,
+        truncateLabel,
+        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+          }
+        ) })
+      }
+    ) }),
+    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+      }
+    )
+  ] });
+}
+
+export { ExpandableSidebarItem };