@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,187 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,29 +0,0 @@
-'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

@@ -1,11 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,153 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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

@@ -1,147 +0,0 @@
-'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 };