@dbcdk/react-components 0.0.96 → 0.0.97

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

@@ -1,18 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _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';
-export function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
-    const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
-    const iconStyle = iconWidth !== undefined
-        ? { ['--sidebar-item-icon-width']: iconWidth }
-        : undefined;
-    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 ? (_jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`)))
-        : label;
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { className: styles.iconLabel, children: [_jsx("span", { className: styles.icon, style: iconStyle, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${shouldTruncate ? styles.truncate : ''}`, title: shouldTruncate && typeof label === 'string' ? label : undefined, children: renderedLabel }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
-}

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

@@ -1,106 +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);
-}
-
-.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;
-  transition: 0.15s ease-in-out;
-}
-
-.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.js

@@ -1,26 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } 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';
-export function SidebarItems({ activeLink }) {
-    const { filteredItems, setActiveLink, isSidebarCollapsed } = useSidebar();
-    useEffect(() => {
-        setActiveLink(activeLink !== null && activeLink !== void 0 ? activeLink : '');
-    }, [activeLink, setActiveLink]);
-    const renderItem = (item, key) => {
-        var _a, _b;
-        if (item.type === 'group') {
-            return isSidebarCollapsed ? ((_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`))) : (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))] }, key));
-        }
-        if (item.type === 'expandable') {
-            const { component: Component, label, icon, children, href, iconWidth, truncateLabel } = item;
-            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, iconWidth: iconWidth, truncateLabel: truncateLabel, component: Component }, key));
-        }
-        const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
-        return (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href, iconWidth: iconWidth, truncateLabel: truncateLabel }, key));
-    };
-    return filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
-}

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;
-}

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

@@ -1,30 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search, Settings2 } from 'lucide-react';
-import React from 'react';
-import { Button } from '../../../button/Button';
-import { Menu } from '../../../menu/Menu';
-import { Popover } from '../../../popover/Popover';
-import { SearchBox } from '../../../search-box/SearchBox';
-import { useSidebar } from '../../providers/SidebarProvider';
-const SidenavFiltering = ({ placeholder = 'Filtrer menu', showSettings = false, }) => {
-    const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange, wrapItemText, setWrapItemText, } = useSidebar();
-    const searchBoxRef = React.useRef(null);
-    const handleSearch = (value) => {
-        setActiveQuery === null || setActiveQuery === void 0 ? void 0 : setActiveQuery(value);
-    };
-    if (isSidebarCollapsed) {
-        return (_jsx(Button, { fullWidth: true, icon: _jsx(Search, {}), size: "sm", variant: "inline", onClick: () => {
-                handleSidebarCollapseChange(false);
-                setTimeout(() => {
-                    var _a;
-                    (_a = searchBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, 50);
-            } }));
-    }
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'stretch', gap: 'var(--spacing-xs)' }, children: [_jsx(SearchBox, { ref: searchBoxRef, inputWidth: "100%", inputSize: "sm", value: activeQuery !== null && activeQuery !== void 0 ? activeQuery : '', onSearch: handleSearch, placeholder: placeholder, fullWidth: true }), showSettings ? (_jsx(Popover, { minWidth: "220px", trigger: toggle => (_jsx(Button, { type: "button", size: "sm", variant: "outlined", shape: "round", "aria-label": "\u00C5bn indstillinger for sidemenu", onClick: toggle, icon: _jsx(Settings2, {}) })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: wrapItemText, children: _jsx("button", { type: "button", onClick: () => {
-                                setWrapItemText(!wrapItemText);
-                                close();
-                            }, children: "Ombryd tekst" }) }) })) })) : null] }));
-};
-export default SidenavFiltering;

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

@@ -1,229 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
-const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
-const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
-const normalizeHref = (href) => {
-    if (!href)
-        return href;
-    // strip trailing slashes except root
-    return href.length > 1 ? href.replace(/\/+$/, '') : href;
-};
-/**
- * Returns the chain of "expandable parents" (hrefs) that contain `targetHref`.
- *
- * Behavior:
- * - If targetHref matches an expandable parent item itself, the chain includes it.
- * - If targetHref matches a leaf under expandables, the chain includes expandable ancestors.
- *
- * Expandable parent definition:
- * - any node with children AND an href
- * (If you want to restrict this to a specific type, update isExpandableParent.)
- */
-const findExpandableParentChain = (targetHref, items) => {
-    var _a;
-    const target = normalizeHref(targetHref);
-    const dfs = (nodes, parentExpandables) => {
-        for (const node of nodes) {
-            const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-            const isExpandableParent = hasChildren(node) && hasHref(node);
-            const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-            // Match this node
-            if (nodeHref === target) {
-                return isExpandableParent ? nextParents : parentExpandables;
-            }
-            // Recurse into children
-            if (hasChildren(node)) {
-                const found = dfs(node.children, nextParents);
-                if (found)
-                    return found;
-            }
-        }
-        return null;
-    };
-    return (_a = dfs(items, [])) !== null && _a !== void 0 ? _a : [];
-};
-const SidebarContext = createContext({
-    defaultExpanded: null,
-    expandedItems: new Set(),
-    activeQuery: '',
-    wrapItemText: false,
-    areItemsCollapsed: false,
-    setActiveQuery: () => { },
-    setWrapItemText: () => { },
-    triggerExpandAll: () => { },
-    setItemsCollapsed: () => { },
-    resetExpandAll: () => { },
-    activeLink: '',
-    setActiveLink: () => { },
-    expandItem: () => { },
-    collapseItem: () => { },
-    isExpanded: () => false,
-    isSidebarCollapsed: false,
-    handleSidebarCollapseChange: () => { },
-});
-const SIDEBAR_COLLAPSED_STORAGE_KEY = 'sidebar-is-collapsed';
-const SIDEBAR_BREAKPOINT = 1024;
-const getBreakpoint = (width) => width < SIDEBAR_BREAKPOINT ? 'small' : 'large';
-export function SidebarProvider({ children, items, initialQuery, initialCollapsed = false, initialSidebarCollapsed, }) {
-    const [defaultExpanded, setDefaultExpanded] = useState(null);
-    const [activeQuery, setActiveQuery] = useState(initialQuery !== null && initialQuery !== void 0 ? initialQuery : '');
-    const [wrapItemText, setWrapItemText] = useState(false);
-    const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
-    const [activeHref, setActiveHref] = useState('');
-    // expandedItems is the source of truth for "open groups"
-    const [expandedItems, setExpandedItems] = useState(new Set());
-    // Keep latest items without creating effect loops if parent recreates the array
-    const itemsRef = useRef(items);
-    useEffect(() => {
-        itemsRef.current = items;
-    }, [items]);
-    const [isSidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false);
-    // Runs once after hydration — safe to read localStorage and window.innerWidth here.
-    useEffect(() => {
-        if (initialSidebarCollapsed !== undefined)
-            return;
-        try {
-            const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
-            if (stored !== null) {
-                setSidebarCollapsed(Boolean(JSON.parse(stored))); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR-safe initial read
-                return;
-            }
-        }
-        catch {
-            // ignore parse failures
-        }
-        setSidebarCollapsed(getBreakpoint(window.innerWidth) === 'small');
-    }, []); // intentionally empty — only runs once after first mount
-    const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
-    const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
-    const setActiveLink = useCallback((href) => setActiveHref(href), []);
-    const expandItem = useCallback((href) => {
-        const h = normalizeHref(href);
-        setExpandedItems(prev => {
-            if (prev.has(h))
-                return prev;
-            const next = new Set(prev);
-            next.add(h);
-            return next;
-        });
-    }, []);
-    const collapseItem = useCallback((href) => {
-        const h = normalizeHref(href);
-        setExpandedItems(prev => {
-            if (!prev.has(h))
-                return prev;
-            const next = new Set(prev);
-            next.delete(h);
-            return next;
-        });
-    }, []);
-    const isExpanded = useCallback((href) => expandedItems.has(normalizeHref(href)), [expandedItems]);
-    // Auto-expand: when active link changes, ensure its expandable parent chain is expanded.
-    useEffect(() => {
-        if (!activeHref)
-            return;
-        const currentItems = itemsRef.current;
-        const parents = findExpandableParentChain(activeHref, currentItems);
-        if (parents.length === 0)
-            return;
-        setExpandedItems(prev => {
-            let changed = false;
-            const next = new Set(prev);
-            for (const p of parents) {
-                const norm = normalizeHref(p);
-                if (!next.has(norm)) {
-                    next.add(norm);
-                    changed = true;
-                }
-            }
-            return changed ? next : prev;
-        });
-    }, [activeHref]);
-    const filteredItems = useMemo(() => {
-        return activeQuery
-            ? nestedFiltering(items, {
-                keys: ['label', 'tags'],
-                includeParents: true,
-                mode: 'OR',
-                query: activeQuery,
-            })
-            : items;
-    }, [items, activeQuery]);
-    const persistCollapsed = useCallback((collapsed) => {
-        if (typeof window === 'undefined')
-            return;
-        try {
-            window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
-        }
-        catch {
-            // ignore persist failures
-        }
-    }, []);
-    // Only persist user-triggered changes
-    const handleSidebarCollapseChange = useCallback((collapsed) => {
-        setSidebarCollapsed(collapsed);
-        persistCollapsed(collapsed);
-    }, [persistCollapsed]);
-    // Resize behavior:
-    // - only apply auto-collapse when breakpoint changes
-    // - do NOT persist automatic changes (only user actions persist)
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        let lastBreakpoint = getBreakpoint(window.innerWidth);
-        const onResize = () => {
-            const nextBreakpoint = getBreakpoint(window.innerWidth);
-            if (nextBreakpoint === lastBreakpoint)
-                return;
-            lastBreakpoint = nextBreakpoint;
-            setSidebarCollapsed(nextBreakpoint === 'small');
-        };
-        window.addEventListener('resize', onResize);
-        return () => window.removeEventListener('resize', onResize);
-    }, []);
-    const value = useMemo(() => ({
-        defaultExpanded: activeQuery ? true : defaultExpanded,
-        expandedItems,
-        filteredItems,
-        activeQuery,
-        wrapItemText,
-        areItemsCollapsed,
-        setActiveQuery,
-        setWrapItemText,
-        triggerExpandAll,
-        resetExpandAll,
-        setItemsCollapsed,
-        activeLink: activeHref,
-        setActiveLink,
-        expandItem,
-        collapseItem,
-        isExpanded,
-        isSidebarCollapsed,
-        handleSidebarCollapseChange,
-    }), [
-        defaultExpanded,
-        expandedItems,
-        filteredItems,
-        activeQuery,
-        wrapItemText,
-        areItemsCollapsed,
-        setActiveQuery,
-        setWrapItemText,
-        triggerExpandAll,
-        resetExpandAll,
-        setItemsCollapsed,
-        activeHref,
-        setActiveLink,
-        expandItem,
-        collapseItem,
-        isExpanded,
-        isSidebarCollapsed,
-        handleSidebarCollapseChange,
-    ]);
-    return _jsx(SidebarContext.Provider, { value: value, children: children });
-}
-export function useSidebar() {
-    return useContext(SidebarContext);
-}

package/dist/components/skeleton-loader/SkeletonLoader.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonLoaderItem } from './skeleton-loader-item/SkeletonLoaderItem';
-export function SkeletonLoader({ type, rows = 3, columns = 3, variant = 'default', speedSec = 3, }) {
-    const line = (width, height = 14, radius = 6) => (_jsx(SkeletonLoaderItem, { width: width, height: height, radius: radius, variant: variant, speedSec: speedSec }, `${String(width)}-${height}-${String(radius)}-${Math.random()}`));
-    const pills = (count) => Array.from({ length: count }).map((_, i) => (_jsx(SkeletonLoaderItem, { width: 80 + (i % 3) * 30, height: 30, radius: 6, variant: variant, speedSec: speedSec, ariaLabel: "Loading filter" }, `pill-${i}`)));
-    const textBlock = (count) => Array.from({ length: count }).map((_, i) => (_jsx(SkeletonLoaderItem, { width: i === count - 1 ? '60%' : `${90 - (i % 3) * 10}%`, height: 12, radius: 4, variant: variant, speedSec: speedSec, ariaLabel: "Loading text line" }, `text-${i}`)));
-    const tableHeaderRow = () => (_jsx("div", { style: {
-            display: 'grid',
-            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-            gap: 12,
-            alignItems: 'center',
-            width: '100%',
-        }, children: Array.from({ length: columns }).map((_, i) => (_jsx(SkeletonLoaderItem, { height: 20, width: "90%", radius: 6, variant: variant, speedSec: speedSec, ariaLabel: "Loading table header" }, `thead-${i}`))) }));
-    const tableBodyRow = (rowIndex) => (_jsx("div", { style: {
-            display: 'grid',
-            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-            gap: 12,
-            alignItems: 'center',
-            width: '100%',
-        }, children: Array.from({ length: columns }).map((_, colIndex) => (_jsx(SkeletonLoaderItem, { height: 20, width: colIndex % 3 === 0 ? '93%' : colIndex % 3 === 1 ? '98%' : '90%', radius: 4, variant: variant, speedSec: speedSec, ariaLabel: "Loading table cell" }, `tcell-${rowIndex}-${colIndex}`))) }, `trow-${rowIndex}`));
-    const inputFieldRow = (i) => {
-        const labelW = i % 3 === 0 ? '34%' : i % 3 === 1 ? '42%' : '28%';
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }, children: [_jsx("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 12,
-                    }, children: _jsx(SkeletonLoaderItem, { width: labelW, height: 10, radius: 4, variant: variant, speedSec: speedSec, ariaLabel: "Loading label" }) }), _jsx(SkeletonLoaderItem, { width: "100%", height: 25, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading input" })] }, `if-${i}`));
-    };
-    const inputFieldList = (count) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 16, width: '100%' }, children: [Array.from({ length: count }).map((_, i) => inputFieldRow(i)), _jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', marginTop: 8 }, children: [_jsx(SkeletonLoaderItem, { width: 110, height: 30, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" }), _jsx(SkeletonLoaderItem, { width: 90, height: 30, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" })] })] }));
-    const getSkeletonItems = () => {
-        switch (type) {
-            case 'button': {
-                return (_jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 12,
-                        alignItems: 'center',
-                        justifyContent: 'flex-start',
-                        width: '100%',
-                        flexWrap: 'wrap',
-                    }, children: [_jsx(SkeletonLoaderItem, { width: 120, height: 40, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading button" }), _jsx(SkeletonLoaderItem, { width: 96, height: 40, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading button" })] }));
-            }
-            case 'card': {
-                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [_jsx(SkeletonLoaderItem, { width: "100%", height: 160, radius: 12, variant: variant, speedSec: speedSec, ariaLabel: "Loading card media" }), line('60%', 16, 6), textBlock(3), _jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-start' }, children: [_jsx(SkeletonLoaderItem, { width: 100, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" }), _jsx(SkeletonLoaderItem, { width: 72, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" })] })] }));
-            }
-            case 'avatar': {
-                return (_jsxs("div", { style: { display: 'flex', gap: 12, alignItems: 'center', width: '100%' }, children: [_jsx(SkeletonLoaderItem, { width: 48, height: 48, radius: "50%", variant: variant, speedSec: speedSec, ariaLabel: "Loading avatar" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }, children: [line('40%', 14), line('25%', 12)] })] }));
-            }
-            case 'text': {
-                return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }, children: textBlock(rows) }));
-            }
-            case 'table': {
-                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [tableHeaderRow(), Array.from({ length: rows }).map((_, r) => tableBodyRow(r))] }));
-            }
-            case 'filterbar': {
-                return (_jsxs("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 12,
-                        flexWrap: 'wrap',
-                        width: '100%',
-                    }, children: [_jsx("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap' }, children: pills(columns) }), _jsx(SkeletonLoaderItem, { width: 240, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading" })] }));
-            }
-            case 'inputFieldList': {
-                return inputFieldList(rows);
-            }
-            default:
-                return null;
-        }
-    };
-    return (_jsx("div", { role: "status", "aria-label": "Loading content", style: { display: 'flex', flexDirection: 'column', gap: 16, width: '100%' }, children: getSkeletonItems() }));
-}

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './SkeletonLoaderItem.module.css';
-export function SkeletonLoaderItem({ height = 14, width = '100%', radius = 6, speedSec = 3, ariaLabel = 'Loading', variant = 'default', }) {
-    const h = typeof height === 'number' ? `${height}px` : height;
-    const w = typeof width === 'number' ? `${width}px` : width;
-    const r = typeof radius === 'number' ? `${radius}px` : radius;
-    return (_jsxs("div", { className: `${styles.skeletonLoader} ${styles[variant]}`, role: "status", "aria-label": ariaLabel, "aria-live": "polite", style: {
-            ['--h']: h,
-            ['--r']: r,
-            ['--speed']: `${speedSec}s`,
-            ['--width']: w,
-        }, children: [_jsx("span", { className: styles.bar, "aria-hidden": "true" }), _jsx("span", { className: "srOnly", children: "Loading\u2026" })] }));
-}

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -1,51 +0,0 @@
-.skeletonLoader {
-  --h: var(--skeleton-height, 14px);
-  --r: var(--border-radius-md, 6px);
-  --speed: var(--skeleton-speed, 1.2s);
-  --skeleton-base: var(--opac-bg-dark);
-  --skeleton-sheen: var(--opac-bg-default);
-  position: relative;
-  display: block;
-  inline-size: var(--width, 100%);
-  block-size: var(--h);
-  width: var(--width, 100%);
-  height: var(--h);
-  overflow: hidden;
-  border-radius: var(--r);
-  background: linear-gradient(
-    90deg,
-    var(--skeleton-sheen) 0%,
-    var(--skeleton-base) 45%,
-    var(--skeleton-sheen) 60%,
-    var(--skeleton-base) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer var(--speed) linear infinite;
-}
-
-.invert {
-  --skeleton-base: var(--opac-bg-dark-invert);
-  --skeleton-sheen: var(--opac-bg-light-invert);
-}
-
-.bar {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  border-radius: inherit;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .skeletonLoader {
-    animation: none;
-  }
-}

package/dist/components/split-button/SplitButton.js

@@ -1,10 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import styles from './SplitButton.module.css';
-import { Button } from '../button/Button';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-export function SplitButton({ children, options, onClick, icon, ...rest }) {
-    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: close => (_jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: () => {
-                                option.onClick(close);
-                            }, children: [option.icon, option.label] }) }, option.label))) })) })] }));
-}

package/dist/components/split-button/SplitButton.module.css

@@ -1,32 +0,0 @@
-.container {
-  display: inline-flex;
-}
-
-.container > button:first-child {
-  border-start-start-radius: var(--border-radius-default);
-  border-end-start-radius: var(--border-radius-default);
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.triggerContainer button {
-  border-start-end-radius: var(--border-radius-default);
-  border-end-end-radius: var(--border-radius-default);
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  padding-block: 0;
-  padding-inline: var(--spacing-xs);
-}
-
-.triggerContainer button {
-  margin-inline-start: -1px;
-}
-.triggerContainer button:not(:hover) {
-  border-inline-start-color: transparent;
-}
-
-.container > button:first-child:focus-visible,
-.triggerContainer button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}