@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/toast/Toast.module.css

@@ -1,161 +0,0 @@
-.container {
-  position: fixed;
-  inset-inline-end: var(--spacing-lg);
-  inset-block-start: var(--spacing-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  z-index: var(--z-toast);
-  min-width: 280px;
-  word-break: break-word;
-}
-
-@media (max-width: 640px) {
-  .container {
-    inset-inline: var(--spacing-md);
-    inset-block-end: var(--spacing-md);
-  }
-}
-
-.toast {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: var(--border-radius-md);
-  box-shadow: var(--shadow-md);
-  background-color: var(--color-bg-surface);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  font-family: var(--font-family);
-  max-width: 360px;
-  animation: toast-enter var(--transition-normal) var(--ease-standard);
-  border-left-width: var(--border-width-thick);
-}
-
-/* Severity accents */
-.info {
-  border-left-color: var(--color-status-info-border);
-}
-
-.brand {
-  border-left-color: var(--color-brand);
-}
-
-.success {
-  border-left-color: var(--color-status-success-border);
-}
-
-.warning {
-  border-left-color: var(--color-status-warning-border);
-}
-
-.error {
-  border-left-color: var(--color-status-error-border);
-}
-
-.neutral {
-  background-color: var(--color-bg-inverse);
-  color: var(--color-fg-inverse);
-  border-left-width: 0;
-  min-width: 50px;
-  max-width: 200px;
-  width: fit-content;
-  align-self: flex-end;
-}
-
-.dismissibleNeutral {
-  cursor: pointer;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    transform 60ms ease;
-}
-
-.dismissibleNeutral:hover {
-  background-color: color-mix(in srgb, var(--color-bg-inverse) 92%, white);
-}
-
-.dismissibleNeutral:active {
-  transform: translateY(1px);
-}
-
-.dismissibleNeutral:focus-visible {
-  outline: 2px solid var(--color-fg-inverse);
-  outline-offset: 2px;
-}
-
-/* Layout */
-.content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xxs);
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 0;
-}
-
-/* Long-text handling suitable for toasts */
-.title,
-.message {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-
-/* Optional: clamp to avoid giant toasts */
-.title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-tight);
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.message {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-}
-
-/* Close button stays aligned at the end of the row */
-.closeButton {
-  margin-inline-start: auto;
-  flex: 0 0 auto;
-  align-self: flex-start;
-}
-
-.closeIcon {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-xs);
-}
-
-/* Simple enter animation */
-@keyframes toast-enter {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/dist/components/toast/provider/ToastProvider.js

@@ -1,70 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState, useRef, useEffect, } from 'react';
-import { Toast } from '../Toast';
-import styles from '../Toast.module.css';
-const ToastContext = createContext(undefined);
-export function ToastProvider({ children, defaultDuration = 4000, }) {
-    const [toasts, setToasts] = useState([]);
-    const timeouts = useRef(new Map());
-    const clearTimeoutForId = (id) => {
-        const timeoutId = timeouts.current.get(id);
-        if (timeoutId) {
-            window.clearTimeout(timeoutId);
-            timeouts.current.delete(id);
-        }
-    };
-    const hideToast = useCallback((id) => {
-        clearTimeoutForId(id);
-        setToasts(prev => prev.filter(t => t.id !== id));
-    }, []);
-    const scheduleAutoDismiss = useCallback((toast) => {
-        var _a;
-        const duration = (_a = toast.duration) !== null && _a !== void 0 ? _a : defaultDuration;
-        if (!duration || duration <= 0)
-            return;
-        clearTimeoutForId(toast.id);
-        const timeoutId = window.setTimeout(() => {
-            hideToast(toast.id);
-        }, duration);
-        timeouts.current.set(toast.id, timeoutId);
-    }, [defaultDuration, hideToast]);
-    const showToast = useCallback((config) => {
-        var _a, _b, _c;
-        const id = (_c = (_a = config.id) !== null && _a !== void 0 ? _a : (_b = crypto.randomUUID) === null || _b === void 0 ? void 0 : _b.call(crypto)) !== null && _c !== void 0 ? _c : `${Date.now()}-${Math.random()}`;
-        const toast = { ...config, id };
-        setToasts(prev => [...prev, toast]);
-        scheduleAutoDismiss(toast);
-        return id;
-    }, [scheduleAutoDismiss]);
-    const clearToasts = useCallback(() => {
-        timeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
-        timeouts.current.clear();
-        setToasts([]);
-    }, []);
-    useEffect(() => () => {
-        timeouts.current.forEach(timeoutId => window.clearTimeout(timeoutId));
-        timeouts.current.clear();
-    }, []);
-    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [children, toasts.length > 0 && (_jsx("div", { className: styles.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map(toast => {
-                    var _a;
-                    return (_jsx(Toast, { title: toast.title, message: toast.message, severity: (_a = toast.severity) !== null && _a !== void 0 ? _a : 'info', action: toast.action && {
-                            label: toast.action.label,
-                            onClick: () => {
-                                var _a, _b;
-                                (_b = (_a = toast.action) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                hideToast(toast.id);
-                            },
-                        }, onClose: () => hideToast(toast.id) }, toast.id));
-                }) }))] }));
-}
-export function useToast() {
-    const ctx = useContext(ToastContext);
-    if (!ctx) {
-        throw new Error('useToast must be used within a ToastProvider');
-    }
-    return ctx;
-}
-export function useOptionalToast() {
-    return useContext(ToastContext);
-}

package/dist/components/user-display/UserDisplay.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './UserDisplay.module.css';
-import { Avatar } from '../avatar/Avatar';
-export function UserDisplay({ name, email, role, avatarUrl }) {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { children: _jsx(Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }), _jsxs("div", { className: styles.userInfo, children: [_jsx("h4", { children: name }), _jsx("p", { children: email }), _jsx("p", { children: role })] })] }));
-}

package/dist/components/user-display/UserDisplay.module.css

@@ -1,25 +0,0 @@
-.container {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  padding: var(--spacing-xs);
-  background-color: var(--opac-bg-light);
-}
-
-.userInfo {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--spacing-sm);
-  flex-grow: 0;
-  color: var(--color-fg-muted);
-}
-
-.userInfo h4 {
-  color: var(--color-fg-default);
-  margin: 0;
-}
-
-.userInfo p {
-  margin: 0;
-}

package/dist/constants/severity.js

@@ -1,24 +0,0 @@
-export const SeverityBgColor = {
-    neutral: 'var(--color-neutral-strong)',
-    brand: 'var(--color-brand)',
-    success: 'var(--color-status-success)',
-    error: 'var(--color-status-error)',
-    info: 'var(--color-status-info)',
-    warning: 'var(--color-status-warning)',
-};
-export const SeverityBorderColor = {
-    neutral: 'var(--color-neutral-strong)',
-    brand: 'var(--color-brand)',
-    success: 'var(--color-status-success-border)',
-    error: 'var(--color-status-error-border)',
-    info: 'var(--color-status-info-border)',
-    warning: 'var(--color-status-warning-border)',
-};
-export const SeverityTextColor = {
-    neutral: 'var(--color-neutral-strong-fg)',
-    brand: 'var(--color-fg-on-brand)',
-    success: 'var(--color-status-success-fg)',
-    error: 'var(--color-status-error-fg)',
-    info: 'var(--color-status-info-fg)',
-    warning: 'var(--color-status-warning-fg)',
-};

package/dist/constants/severity.types.js

@@ -1 +0,0 @@
-export {};

package/dist/constants/sizes.js

@@ -1,7 +0,0 @@
-export const sizes = {
-    xs: 'var(--component-size-xs)',
-    sm: 'var(--component-size-sm)',
-    md: 'var(--component-size-md)',
-    lg: 'var(--component-size-lg)',
-    xl: 'var(--component-size-xl)',
-};

package/dist/hooks/useDeviceSize.js

@@ -1,32 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-// Aligned with --bp-sm (640px), --bp-md (768px), --bp-lg (1024px) from base.css
-const BREAKPOINTS = {
-    tablet: 640,
-    desktop: 1024,
-};
-function getDeviceSize(width) {
-    if (width < BREAKPOINTS.tablet)
-        return 'mobile';
-    if (width < BREAKPOINTS.desktop)
-        return 'tablet';
-    return 'desktop';
-}
-export function useDeviceSize() {
-    const [deviceSize, setDeviceSize] = useState(() => {
-        if (typeof window === 'undefined')
-            return 'desktop';
-        return getDeviceSize(window.innerWidth);
-    });
-    useEffect(() => {
-        const mediaQueries = [
-            window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
-            window.matchMedia(`(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${BREAKPOINTS.desktop - 1}px)`),
-            window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px)`),
-        ];
-        const update = () => setDeviceSize(getDeviceSize(window.innerWidth));
-        mediaQueries.forEach(mq => mq.addEventListener('change', update));
-        return () => mediaQueries.forEach(mq => mq.removeEventListener('change', update));
-    }, []);
-    return deviceSize;
-}

package/dist/hooks/useListNavigation.js

@@ -1,234 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-export function useListNavigation({ options, getLabel, isOpen, onOpenChange, searchInputRef, searchable = false, focusActiveOptionOnOpen = true, typeaheadTimeoutMs = 500, getInitialActiveIndex, }) {
-    const optionRefs = useRef([]);
-    const typeaheadRef = useRef('');
-    const typeaheadTimeoutRef = useRef(null);
-    const normalizedLabels = useMemo(() => options.map(option => getLabel(option).trim().toLocaleLowerCase()), [options, getLabel]);
-    const getDefaultInitialIndex = useCallback((items) => {
-        if (items.length === 0)
-            return -1;
-        if (getInitialActiveIndex) {
-            const nextIndex = getInitialActiveIndex(items);
-            if (nextIndex < 0)
-                return -1;
-            return Math.min(nextIndex, items.length - 1);
-        }
-        return searchable ? -1 : 0;
-    }, [getInitialActiveIndex, searchable]);
-    const [activeIndex, setActiveIndex] = useState(() => getDefaultInitialIndex(options));
-    const clearTypeahead = useCallback(() => {
-        typeaheadRef.current = '';
-        if (typeaheadTimeoutRef.current) {
-            clearTimeout(typeaheadTimeoutRef.current);
-            typeaheadTimeoutRef.current = null;
-        }
-    }, []);
-    const focusActiveOption = useCallback(() => {
-        var _a;
-        if (activeIndex < 0 || options.length === 0)
-            return;
-        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, options.length]);
-    const resetActiveIndex = useCallback(() => {
-        setActiveIndex(getDefaultInitialIndex(options));
-    }, [getDefaultInitialIndex, options]);
-    useEffect(() => {
-        return () => {
-            if (typeaheadTimeoutRef.current)
-                clearTimeout(typeaheadTimeoutRef.current);
-        };
-    }, []);
-    useEffect(() => {
-        setActiveIndex(current => {
-            if (options.length === 0)
-                return -1;
-            if (current < 0)
-                return current;
-            return Math.min(current, options.length - 1);
-        });
-    }, [options]);
-    useEffect(() => {
-        optionRefs.current = optionRefs.current.slice(0, options.length);
-    }, [options.length]);
-    useEffect(() => {
-        if (!isOpen || !focusActiveOptionOnOpen)
-            return;
-        if (searchable && document.activeElement === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current))
-            return;
-        focusActiveOption();
-    }, [activeIndex, focusActiveOption, focusActiveOptionOnOpen, isOpen, searchable, searchInputRef]);
-    const moveNext = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(index => {
-            if (index < 0)
-                return 0;
-            return Math.min(index + 1, options.length - 1);
-        });
-    }, [options.length]);
-    const movePrev = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(index => {
-            if (index < 0)
-                return options.length - 1;
-            return Math.max(index - 1, 0);
-        });
-    }, [options.length]);
-    const moveFirst = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(0);
-    }, [options.length]);
-    const moveLast = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(options.length - 1);
-    }, [options.length]);
-    const findTypeaheadMatch = useCallback((query, startIndex) => {
-        if (!query || options.length === 0)
-            return -1;
-        const normalizedQuery = query.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return -1;
-        const safeStartIndex = startIndex < 0 ? -1 : startIndex;
-        for (let step = 1; step <= options.length; step += 1) {
-            const index = (safeStartIndex + step + options.length) % options.length;
-            const label = normalizedLabels[index];
-            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
-                return index;
-        }
-        return -1;
-    }, [normalizedLabels, options.length]);
-    const handleTypeahead = useCallback((key) => {
-        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
-        const repeatedChar = new Set(nextBuffer).size === 1;
-        let nextIndex = findTypeaheadMatch(nextBuffer, activeIndex);
-        let appliedBuffer = nextBuffer;
-        if (nextIndex < 0 && repeatedChar) {
-            appliedBuffer = key.toLocaleLowerCase();
-            nextIndex = findTypeaheadMatch(appliedBuffer, activeIndex);
-        }
-        if (typeaheadTimeoutRef.current)
-            clearTimeout(typeaheadTimeoutRef.current);
-        typeaheadRef.current = appliedBuffer;
-        typeaheadTimeoutRef.current = setTimeout(() => {
-            typeaheadRef.current = '';
-            typeaheadTimeoutRef.current = null;
-        }, typeaheadTimeoutMs);
-        if (nextIndex < 0)
-            return;
-        setActiveIndex(nextIndex);
-        if (!isOpen)
-            onOpenChange(true);
-    }, [activeIndex, findTypeaheadMatch, isOpen, onOpenChange, typeaheadTimeoutMs]);
-    const handleKeyDown = useCallback((e) => {
-        var _a;
-        const isSearchInputTarget = searchable && e.target === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current);
-        if (isSearchInputTarget) {
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!isOpen) {
-                        onOpenChange(true);
-                        return;
-                    }
-                    moveNext();
-                    return;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (!isOpen) {
-                        onOpenChange(true);
-                        return;
-                    }
-                    movePrev();
-                    return;
-                case 'Home':
-                    if (!isOpen)
-                        return;
-                    e.preventDefault();
-                    moveFirst();
-                    return;
-                case 'End':
-                    if (!isOpen)
-                        return;
-                    e.preventDefault();
-                    moveLast();
-                    return;
-                case 'Escape':
-                    e.preventDefault();
-                    onOpenChange(false);
-                    return;
-            }
-            return;
-        }
-        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
-            e.preventDefault();
-            handleTypeahead(e.key);
-            return;
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isOpen) {
-                    onOpenChange(true);
-                    return;
-                }
-                moveNext();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (!isOpen) {
-                    onOpenChange(true);
-                    return;
-                }
-                if (searchable &&
-                    activeIndex === 0 &&
-                    optionRefs.current[activeIndex] === document.activeElement) {
-                    (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setActiveIndex(-1);
-                    return;
-                }
-                movePrev();
-                break;
-            case 'Home':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                moveFirst();
-                break;
-            case 'End':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                moveLast();
-                break;
-            case 'Escape':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                onOpenChange(false);
-                break;
-        }
-    }, [
-        activeIndex,
-        handleTypeahead,
-        isOpen,
-        moveFirst,
-        moveLast,
-        moveNext,
-        movePrev,
-        onOpenChange,
-        searchInputRef,
-        searchable,
-    ]);
-    return {
-        activeIndex,
-        setActiveIndex,
-        optionRefs,
-        resetActiveIndex,
-        clearTypeahead,
-        handleKeyDown,
-        focusActiveOption,
-    };
-}