@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/tabs/Tabs.module.css

@@ -9,7 +9,7 @@
 /* ========== Filled variant ========== */
 .tabs.filled .tab.active {
   background: var(--opac-bg-brand);
-  color: var(--color-primary);
+  color: var(--color-brand);
   border: var(--border-width-thin) solid var(--opac-bg-dark);
   border-block-end: 0;
 }
@@ -23,7 +23,7 @@
 }
 .tabs.filled .tab {
   border: var(--border-width-thin) solid transparent;
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
   font-size: var(--font-size-sm);
   z-index: 3;
   transition:
@@ -33,11 +33,11 @@
   border-start-end-radius: var(--border-radius-default);
 }
 .tabs.filled .tab:not(.active):hover {
-  color: var(--color-primary);
+  color: var(--color-brand);
 }
 .tabs.filled .tabContent {
   border: var(--border-width-thin) solid var(--opac-bg-dark);
-  background: var(--color-background);
+  background: var(--color-bg-surface);
   padding: var(--spacing-lg);
   flex-grow: 1;
   overflow: auto;
@@ -45,7 +45,7 @@
 
 /* ========== Panel style variant ========== */
 .panelStyle .tabList {
-  border: var(--border-width-thin) solid var(--color-border);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-block-end: 0;
 }
 .panelStyle .tab.active {
@@ -90,10 +90,10 @@
   display: flex;
   flex-direction: column;
   border-radius: 0;
-  border-block-end: 2px solid var(--color-border);
+  border-block-end: 2px solid var(--color-border-default);
 }
 .tab.active {
-  border-block-end-color: var(--color-primary);
+  border-block-end-color: var(--color-brand);
 }
 
 .tab .icon {
@@ -101,8 +101,8 @@
   color: inherit;
 }
 .tab .icon svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
 .headerContainer {

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
+export type ToastActionConfig = {
+    label: string;
+    onClick?: () => void;
+};
+export type ToastProps = {
+    title?: ReactNode;
+    message?: ReactNode;
+    severity: Severity;
+    action?: ToastActionConfig;
+    onClose?: () => void;
+};
+export declare function Toast({ title, message, severity, action, onClose, }: ToastProps): React.ReactNode;

package/dist/components/toast/Toast.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import styles from './Toast.module.css';
+import { Button } from '../button/Button';
+import { Headline } from '../headline/Headline';
+export function Toast({ title, message, severity = 'info', action, onClose, }) {
+    return (_jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [_jsxs("div", { className: styles.content, children: [_jsx(Headline, { size: 4, severity: title ? severity : undefined, disableMargin: true, addition: onClose && (_jsx("div", { style: { marginLeft: 'auto' }, children: _jsx(Button, { type: "button", variant: "inline", "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) }) })), children: title }), message && _jsx("div", { className: styles.message, children: message })] }), _jsx("div", { className: styles.actions, children: action && (_jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label })) })] }));
+}

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

@@ -0,0 +1,102 @@
+.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: var(--bp-sm)) {
+  .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);
+}
+
+.info {
+  border-left-color: var(--color-status-info-border);
+}
+
+.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);
+}
+
+.iconContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+.message {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+}
+
+.closeIcon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* Simple enter animation */
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/components/toast/provider/ToastProvider.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
+import { ToastActionConfig } from '../Toast';
+export type ToastConfig = {
+    id?: string;
+    title?: ReactNode;
+    message?: ReactNode;
+    severity?: Severity;
+    action?: ToastActionConfig;
+    duration?: number;
+};
+type ToastContextValue = {
+    showToast: (config: ToastConfig) => string;
+    hideToast: (id: string) => void;
+    clearToasts: () => void;
+};
+type ToastProviderProps = {
+    children: ReactNode;
+    defaultDuration?: number;
+};
+export declare function ToastProvider({ children, defaultDuration, }: ToastProviderProps): React.ReactNode;
+export declare function useToast(): ToastContextValue;
+export {};

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

@@ -0,0 +1,64 @@
+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(() => {
+        toasts.forEach(t => clearTimeoutForId(t.id));
+        setToasts([]);
+    }, [toasts]);
+    useEffect(() => () => {
+        toasts.forEach(t => clearTimeoutForId(t.id));
+    }, [toasts]);
+    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;
+}

package/dist/components/user-display/UserDisplay.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 interface UserDisplayProps {
     id?: string;
     name?: string;
@@ -5,5 +6,5 @@ interface UserDisplayProps {
     role?: string;
     avatarUrl?: string;
 }
-export declare function UserDisplay({ id, name, email, role, avatarUrl, }: UserDisplayProps): React.ReactNode;
+export declare function UserDisplay({ name, email, role, avatarUrl }: UserDisplayProps): ReactNode;
 export {};

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

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

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

@@ -12,11 +12,11 @@
   justify-content: center;
   padding: var(--spacing-sm);
   flex-grow: 0;
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
 }
 
 .userInfo h4 {
-  color: var(--color-text);
+  color: var(--color-fg-default);
   margin: 0;
 }
 

package/dist/constants/severity.d.ts

@@ -1,3 +1,3 @@
-import type { Severity } from '@/constants/severity.types';
+import type { Severity } from '../constants/severity.types';
 export declare const SeverityBgColor: Record<Severity, string>;
 export declare const SeverityTextColor: Record<Severity, string>;

package/dist/constants/severity.js

@@ -1,18 +1,16 @@
-const SeverityBgColor = {
-  neutral: "var(--color-secondary)",
-  brand: "var(--color-primary)",
-  success: "var(--color-success)",
-  error: "var(--color-error)",
-  info: "var(--color-info)",
-  warning: "var(--color-warning)"
+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)',
 };
-const SeverityTextColor = {
-  neutral: "var(--color-text-inverse)",
-  brand: "var(--color-text-on-primary)",
-  success: "var(--color-text-inverse)",
-  error: "var(--color-text-inverse)",
-  info: "var(--color-text-inverse)",
-  warning: "var(--color-text-inverse)"
+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)',
 };
-
-export { SeverityBgColor, SeverityTextColor };

package/dist/constants/severity.types.d.ts

@@ -1 +1 @@
-export type Severity = "neutral" | "brand" | "success" | "error" | "info" | "warning";
+export type Severity = 'neutral' | 'brand' | 'success' | 'error' | 'info' | 'warning';

package/dist/constants/severity.types.js

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

package/dist/constants/sizes.d.ts

@@ -1,2 +1,2 @@
-import type { Size, SizeVariable } from "../types/sizes.types";
+import type { Size, SizeVariable } from '../types/sizes.types';
 export declare const sizes: Record<Size, SizeVariable>;

package/dist/constants/sizes.js

@@ -1,8 +1,7 @@
-const sizes = {
-  sm: "var(--component-size-sm)",
-  md: "var(--component-size-md)",
-  lg: "var(--component-size-lg)",
-  xl: "var(--component-size-xl)"
+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)',
 };
-
-export { sizes };

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,33 @@
+import type { PageChangeEvent } from '../components/pagination/Pagination';
+export type PaginationState = {
+    skip: number;
+    take: number;
+};
+export interface UsePaginationProps<T> {
+    data?: readonly T[];
+    /**
+     * Default/initial state. If you pass `state`, these are ignored.
+     */
+    skip?: number;
+    take?: number;
+    /**
+     * Controlled mode: if provided, the hook will not keep its own state.
+     */
+    state?: PaginationState;
+    onStateChange?: (next: PaginationState) => void;
+    /**
+     * When true, page index resets to 0 whenever `data` reference changes.
+     * Useful after filtering/sorting changes upstream.
+     */
+    resetOnDataChange?: boolean;
+}
+export interface UsePaginationResult<T> {
+    paginatedData: T[];
+    paginationState: PaginationState;
+    onPageChange: (pageEvent: PageChangeEvent) => void;
+    setPagination: (next: PaginationState) => void;
+    resetPage: () => void;
+    page: number;
+    totalCount: number;
+}
+export declare function usePagination<T>({ data, skip, take, state, onStateChange, resetOnDataChange, }: UsePaginationProps<T>): UsePaginationResult<T>;

package/dist/hooks/usePagination.js

@@ -0,0 +1,79 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+export function usePagination({ data = [], skip = 0, take = 10, state, onStateChange, resetOnDataChange = false, }) {
+    const isControlled = state != null;
+    const [uncontrolled, setUncontrolled] = useState(() => ({
+        skip: Math.max(0, skip),
+        take: Math.max(1, take),
+    }));
+    // Keep initial props in sync ONLY for uncontrolled if props change.
+    // (For controlled, parent owns state.)
+    const didInitRef = useRef(false);
+    useEffect(() => {
+        if (isControlled)
+            return;
+        if (!didInitRef.current) {
+            didInitRef.current = true;
+            return;
+        }
+        setUncontrolled(prev => ({
+            skip: prev.skip,
+            take: Math.max(1, take),
+        }));
+    }, [isControlled, take]);
+    const paginationState = (isControlled ? state : uncontrolled);
+    const totalCount = data.length;
+    const safeTake = Math.max(1, paginationState.take);
+    const maxSkip = Math.max(0, totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake);
+    const safeSkip = clamp(Math.max(0, paginationState.skip), 0, maxSkip);
+    const setPagination = useCallback((next) => {
+        const normalized = {
+            take: Math.max(1, next.take),
+            skip: Math.max(0, next.skip),
+        };
+        if (isControlled)
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
+        else
+            setUncontrolled(normalized);
+    }, [isControlled, onStateChange]);
+    const onPageChange = useCallback((pageEvent) => {
+        const nextTake = Math.max(1, pageEvent.take);
+        const nextSkip = Math.max(0, (pageEvent.page - 1) * nextTake);
+        setPagination({ skip: nextSkip, take: nextTake });
+    }, [setPagination]);
+    const resetPage = useCallback(() => {
+        setPagination({ skip: 0, take: safeTake });
+    }, [setPagination, safeTake]);
+    // Optional: reset page when data reference changes (after sort/filter).
+    useEffect(() => {
+        if (!resetOnDataChange)
+            return;
+        resetPage();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetOnDataChange, data]);
+    const paginatedData = useMemo(() => {
+        // Use safeSkip to avoid slicing past end if data shrinks.
+        return data.slice(safeSkip, safeSkip + safeTake);
+    }, [data, safeSkip, safeTake]);
+    const page = useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
+    // If uncontrolled and data shrinks such that skip becomes invalid, clamp it once.
+    useEffect(() => {
+        if (isControlled)
+            return;
+        if (safeSkip !== paginationState.skip) {
+            setUncontrolled(prev => ({ ...prev, skip: safeSkip }));
+        }
+    }, [isControlled, safeSkip, paginationState.skip]);
+    return {
+        paginatedData,
+        paginationState: { skip: safeSkip, take: safeTake },
+        onPageChange,
+        setPagination,
+        resetPage,
+        page,
+        totalCount,
+    };
+}

package/dist/hooks/useSorting.d.ts

@@ -0,0 +1,49 @@
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState<T> = {
+    sortBy: keyof T | null;
+    sortDirection: SortDirection;
+};
+export type SortEvent<T> = Partial<SortState<T>>;
+export type ColumnComparators<T> = Partial<Record<keyof T, (a: T, b: T, direction: Exclude<SortDirection, null>) => number>>;
+export interface UseSortingProps<T> {
+    data?: readonly T[];
+    /**
+     * Default/initial state. If you pass `state`, these are ignored.
+     */
+    sortBy?: keyof T | null;
+    sortDirection?: SortDirection;
+    /**
+     * Controlled mode: if provided, hook will not keep its own state.
+     */
+    state?: SortState<T>;
+    onStateChange?: (next: SortState<T>) => void;
+    /**
+     * Optional per-column comparator.
+     * If absent, falls back to default compare on the field value.
+     */
+    columnComparators?: ColumnComparators<T>;
+    /**
+     * How to handle null/undefined values when using the default comparator:
+     * - "first": nulls come first
+     * - "last": nulls come last
+     */
+    nulls?: 'first' | 'last';
+    /**
+     * If true, toggling a column cycles: asc -> desc -> null
+     * If false, cycles: asc -> desc -> asc ...
+     */
+    allowUnsort?: boolean;
+    /**
+     * When true, resets sorting when data reference changes.
+     * (Most people want to keep sort; default false.)
+     */
+    resetOnDataChange?: boolean;
+}
+export interface UseSortingResult<T> {
+    sortedData: T[];
+    sortState: SortState<T>;
+    onSortChange: (e: SortEvent<T>) => void;
+    setSort: (next: SortState<T>) => void;
+    clearSort: () => void;
+}
+export declare function useSorting<T extends Record<string, any>>({ data, sortBy, sortDirection, state, onStateChange, columnComparators, nulls, allowUnsort, resetOnDataChange, }: UseSortingProps<T>): UseSortingResult<T>;