@dbcdk/react-components 0.0.4 → 0.0.6

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

@@ -1,97 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var severity = require('../../constants/severity');
-var Tooltip = require('../tooltip/Tooltip');
-var styles = require('./SegmentedProgressBar.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SegmentedProgressBar = ({
-  segments,
-  total,
-  showRemainder = true,
-  remainderSeverity = "neutral",
-  centerLabel,
-  height,
-  rounded = true,
-  trackColor = "var(--color-secondary)",
-  tooltipPlacement = "top",
-  className,
-  ...aria
-}) => {
-  var _a;
-  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 rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: rootClass,
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": effectiveTotal,
-      "aria-valuenow": Math.min(sum, effectiveTotal),
-      ...aria,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles__default.default.progressBar,
-          style: {
-            height: height ? `${height}px` : `var(--component-size-xs)`,
-            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-            background: trackColor
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
-              var _a2, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : severity.SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
-              const fg = severity.SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
-              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Tooltip.Tooltip,
-                {
-                  content: tooltipText,
-                  placement: tooltipPlacement,
-                  className: styles__default.default.segmentWrapper,
-                  style: {
-                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-                    height: "100%",
-                    minWidth: "2px"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: styles__default.default.progressSegment,
-                      "data-index": i,
-                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
-                      style: { background: bg, color: fg }
-                    }
-                  )
-                },
-                `${i}`
-              );
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
-          ]
-        }
-      )
-    }
-  );
-};
-
-exports.SegmentedProgressBar = SegmentedProgressBar;

package/dist/components/select/Select.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var Button = require('../button/Button');
-var ClearButton = require('../clear-button/ClearButton');
-var react = require('react');
-
-function Select({
-  options,
-  selectedValue,
-  onChange,
-  placeholder = "V\xE6lg",
-  size,
-  variant = "outlined",
-  onClear
-}) {
-  const ref = react.useRef(null);
-  const selected = options.find((o) => o.value === selectedValue);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      ref,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : placeholder }),
-        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((opt) => {
-        const isActive = opt.value === selectedValue;
-        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: () => {
-              var _a;
-              onChange(opt.value);
-              (_a = ref.current) == null ? void 0 : _a.close();
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
-              opt.label
-            ]
-          }
-        ) }, opt.value);
-      }) })
-    }
-  );
-}
-
-exports.Select = Select;

package/dist/components/select/Select.d.ts

@@ -1,11 +0,0 @@
-import { ButtonVariant } from '../button/Button';
-import { MultiselectOption } from '../filter-field/FilterField';
-export declare function Select({ options, selectedValue, onChange, placeholder, size, variant, onClear, }: {
-    options: MultiselectOption[];
-    selectedValue: string | null;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: ButtonVariant;
-    onClear?: () => void;
-}): React.ReactNode;

package/dist/components/select/Select.js

@@ -1,50 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Check } from 'lucide-react';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-import { Button } from '../button/Button';
-import { ClearButton } from '../clear-button/ClearButton';
-import { useRef } from 'react';
-
-function Select({
-  options,
-  selectedValue,
-  onChange,
-  placeholder = "V\xE6lg",
-  size,
-  variant = "outlined",
-  onClear
-}) {
-  const ref = useRef(null);
-  const selected = options.find((o) => o.value === selectedValue);
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      ref,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder }),
-        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsx(Menu, { children: options.map((opt) => {
-        const isActive = opt.value === selectedValue;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => {
-              var _a;
-              onChange(opt.value);
-              (_a = ref.current) == null ? void 0 : _a.close();
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsx(Check, {}) : null }),
-              opt.label
-            ]
-          }
-        ) }, opt.value);
-      }) })
-    }
-  );
-}
-
-export { Select };

package/dist/components/sidebar/Sidebar.cjs

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Sidebar.module.css');
-var Headline = require('../headline/Headline');
-var SidenavFiltering = require('./components/sidenav-filteirng/SidenavFiltering');
-var SidebarProvider = require('./providers/SidebarProvider');
-var SidebarItems = require('./components/sidebar-items/SidebarItems');
-var logo = require('../../assets/logo');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
-
-function Sidebar({
-  collapsed,
-  items,
-  logo: logo$1,
-  productName,
-  productLogo,
-  activeLink
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
-      productName && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: productName }),
-      productLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer })
-  ] });
-}
-
-exports.Sidebar = Sidebar;

package/dist/components/sidebar/Sidebar.module.css

@@ -1,66 +0,0 @@
-.container {
-  flex-shrink: 1;
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  width: 240px;
-  inline-size: 240px;
-  box-sizing: border-box;
-
-  border-inline-end: var(--border-width-thin) solid var(--color-border);
-  padding: var(--spacing-lg) var(--spacing-md);
-}
-
-.container a {
-  text-decoration: none;
-  color: inherit;
-}
-.container button {
-  background: none;
-  border: 0;
-  font-size: inherit;
-  display: flex;
-  padding: 0;
-}
-
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.links {
-  display: flex;
-  flex-grow: 1;
-  overflow: auto;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-}
-
-.header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-.logo img,
-.logo svg {
-  max-inline-size: 50px;
-  block-size: auto;
-}
-
-.content {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  gap: var(--spacing-lg);
-}
-
-.footer {
-  flex: 0 0 auto;
-}

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

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

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

@@ -1,74 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
-var lucideReact = require('lucide-react');
-var styles = require('./ExpandableSidebarItem.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var SidebarItem = require('../SidebarItem');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function ExpandableSidebarItem({
-  items,
-  label,
-  icon,
-  href
-}) {
-  const { defaultExpanded, resetExpandAll, activeLink } = SidebarProvider.useSidebar();
-  const [expanded, setExpanded] = react.useState(false);
-  const [closing, setClosing] = react.useState(false);
-  const [ready, setReady] = react.useState(false);
-  react.useEffect(() => {
-    setReady(true);
-  }, []);
-  react.useEffect(() => {
-    if (defaultExpanded === null) {
-      return;
-    }
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (ready) {
-      setExpanded(!closing);
-      setClosing(false);
-    }
-  }, [closing, ready]);
-  const toggleAccordion = react.useCallback(() => {
-    resetExpandAll();
-    if (!expanded) {
-      setExpanded(true);
-      return;
-    }
-    setClosing(true);
-  }, [expanded]);
-  if (!items) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${expanded ? styles__default.default.expanded : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleAccordion, className: styles__default.default.button, children: /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItemContent.SidebarItemContent,
-      {
-        icon,
-        label,
-        suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.ChevronDown,
-          {
-            className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-          }
-        )
-      }
-    ) }),
-    expanded && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
-      }
-    )
-  ] });
-}
-
-exports.ExpandableSidebarItem = ExpandableSidebarItem;

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

@@ -1,27 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./SidebarItemContent.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SidebarItemContent({
-  icon,
-  label,
-  suffixIcon,
-  href
-}) {
-  const { activeLink } = SidebarProvider.useSidebar();
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${styles__default.default.container} ${activeLink === href ? styles__default.default.active : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-    ] }),
-    suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
-  ] });
-}
-
-exports.SidebarItemContent = SidebarItemContent;

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

@@ -1,28 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var SidebarItem = require('../SidebarItem');
-var ExpandableSidebarItem = require('../expandable-sidebar-item/ExpandableSidebarItem');
-
-function SidebarItems({ activeLink }) {
-  const { filteredItems, setActiveLink } = SidebarProvider.useSidebar();
-  react.useEffect(() => {
-    setActiveLink(activeLink != null ? activeLink : "");
-  }, [activeLink, setActiveLink]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredItems == null ? void 0 : filteredItems.map(
-    ({ component: Component, label, icon, children, href }, id) => (children == null ? void 0 : children.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-      ExpandableSidebarItem.ExpandableSidebarItem,
-      {
-        items: children,
-        label,
-        icon,
-        href
-      },
-      label
-    ) : /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label, icon, href }, id)
-  ) });
-}
-
-exports.SidebarItems = SidebarItems;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SearchBox = require('../../../search-box/SearchBox');
-var SidebarProvider = require('../../providers/SidebarProvider');
-
-const SidenavFiltering = () => {
-  const { activeQuery, setActiveQuery } = SidebarProvider.useSidebar();
-  const handleSearch = (value) => {
-    setActiveQuery == null ? void 0 : setActiveQuery(value);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SearchBox.SearchBox,
-    {
-      width: "100%",
-      inputSize: "sm",
-      value: activeQuery != null ? activeQuery : "",
-      onSearch: handleSearch,
-      placeholder: "Filtrer menu"
-    }
-  );
-};
-var SidenavFiltering_default = SidenavFiltering;
-
-module.exports = SidenavFiltering_default;

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -1,81 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var nestedFiltering = require('../../../utils/arrays/nested-filtering');
-
-const SidebarContext = react.createContext({
-  defaultExpanded: null,
-  activeQuery: "",
-  isSidebarCollapsed: false,
-  setActiveQuery: () => {
-  },
-  triggerExpandAll: () => {
-  },
-  setIsSidebarCollapsed: () => {
-  },
-  resetExpandAll: () => {
-  },
-  activeLink: "",
-  setActiveLink: () => {
-  }
-});
-function SidebarProvider({
-  children,
-  items,
-  initialCollapsed = false
-}) {
-  const [defaultExpanded, setDefaultExpanded] = react.useState(null);
-  const [activeQuery, setActiveQuery] = react.useState("");
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = react.useState(initialCollapsed);
-  const [activeHref, setActiveHref] = react.useState("");
-  const triggerExpandAll = react.useCallback(() => setDefaultExpanded(true), []);
-  const resetExpandAll = react.useCallback(() => setDefaultExpanded(null), []);
-  const setActiveLink = react.useCallback((href) => setActiveHref(href), []);
-  const filteredItems = react.useMemo(() => {
-    return activeQuery ? nestedFiltering.nestedFiltering(items, {
-      keys: ["label", "tags"],
-      includeParents: true,
-      mode: "OR",
-      query: activeQuery
-    }) : items;
-  }, [items, activeQuery]);
-  react.useEffect(() => {
-    if (activeQuery) {
-      triggerExpandAll();
-    }
-  }, [activeQuery, triggerExpandAll]);
-  const value = react.useMemo(
-    () => ({
-      defaultExpanded,
-      filteredItems,
-      activeQuery,
-      isSidebarCollapsed,
-      setActiveQuery,
-      triggerExpandAll,
-      resetExpandAll,
-      setIsSidebarCollapsed,
-      activeLink: activeHref,
-      setActiveLink
-    }),
-    [
-      defaultExpanded,
-      filteredItems,
-      activeQuery,
-      isSidebarCollapsed,
-      setActiveQuery,
-      triggerExpandAll,
-      resetExpandAll,
-      setIsSidebarCollapsed,
-      activeHref,
-      setActiveLink
-    ]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
-}
-function useSidebar() {
-  return react.useContext(SidebarContext);
-}
-
-exports.SidebarProvider = SidebarProvider;
-exports.useSidebar = useSidebar;