@dbcdk/react-components 0.0.5 → 0.0.6

package/dist/components/toast/Toast.js

@@ -1,41 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Button } from '../button/Button';
+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';
-
-function Toast({
-  title,
-  message,
-  severity = "info",
-  action,
-  onClose
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsx(
-        Headline,
-        {
-          size: 4,
-          severity: title ? severity : void 0,
-          disableMargin: true,
-          addition: onClose && /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "inline",
-              "aria-label": "Dismiss notification",
-              onClick: onClose,
-              children: /* @__PURE__ */ jsx(X, { className: styles.closeIcon, "aria-hidden": "true" })
-            }
-          ) }),
-          children: title
-        }
-      ),
-      message && /* @__PURE__ */ jsx("div", { className: styles.message, children: message })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: styles.actions, children: action && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) })
-  ] });
+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 })) })] }));
 }
-
-export { Toast };

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

@@ -7,6 +7,7 @@
   gap: var(--spacing-xs);
   z-index: var(--z-toast);
   min-width: 280px;
+  word-break: break-word;
 }
 
 @media (max-width: var(--bp-sm)) {

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
 import { ToastActionConfig } from '../Toast';
-import { Severity } from '@/constants/severity.types';
 export type ToastConfig = {
     id?: string;
     title?: ReactNode;

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

@@ -1,91 +1,64 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+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(void 0);
-function ToastProvider({
-  children,
-  defaultDuration = 1e4
-}) {
-  const [toasts, setToasts] = useState([]);
-  const timeouts = useRef(/* @__PURE__ */ 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 : 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 = (_b = config.id) != null ? _b : (_a = crypto.randomUUID) == null ? void 0 : _a.call(crypto)) != null ? _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 /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
-    children,
-    toasts.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => {
-      var _a;
-      return /* @__PURE__ */ jsx(
-        Toast,
-        {
-          title: toast.title,
-          message: toast.message,
-          severity: (_a = toast.severity) != null ? _a : "info",
-          action: toast.action && {
-            label: toast.action.label,
-            onClick: () => {
-              var _a2, _b;
-              (_b = (_a2 = toast.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2);
-              hideToast(toast.id);
-            }
-          },
-          onClose: () => hideToast(toast.id)
-        },
-        toast.id
-      );
-    }) })
-  ] });
+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));
+                }) }))] }));
 }
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return ctx;
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (!ctx) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return ctx;
 }
-
-export { ToastProvider, useToast };

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/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-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 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-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 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.js

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

@@ -1,4 +1,4 @@
-import type { PageChangeEvent } from '@/components/pagination/Pagination';
+import type { PageChangeEvent } from '../components/pagination/Pagination';
 export type PaginationState = {
     skip: number;
     take: number;

package/dist/hooks/usePagination.js

@@ -1,86 +1,79 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
+    return Math.max(min, Math.min(max, n));
 }
-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)
-  }));
-  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)
+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),
     }));
-  }, [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 ? 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]);
-  useEffect(() => {
-    if (!resetOnDataChange) return;
-    resetPage();
-  }, [resetOnDataChange, data]);
-  const paginatedData = useMemo(() => {
-    return data.slice(safeSkip, safeSkip + safeTake);
-  }, [data, safeSkip, safeTake]);
-  const page = useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
-  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
-  };
+    // 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,
+    };
 }
-
-export { usePagination };