@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,165 @@
+.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);
+}
+
+.brand {
+  border-left-color: var(--color-brand);
+}
+
+.accent {
+  border-left-color: var(--color-accent);
+}
+
+.success {
+  border-left-color: var(--color-status-success);
+}
+
+.warning {
+  border-left-color: var(--color-status-warning);
+}
+
+.error {
+  border-left-color: var(--color-status-error);
+}
+
+.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.cjs

@@ -0,0 +1,105 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Toast = require('../Toast');
+var styles = require('../Toast.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const ToastContext = react.createContext(void 0);
+function ToastProvider({
+  children,
+  defaultDuration = 4e3
+}) {
+  const [toasts, setToasts] = react.useState([]);
+  const timeouts = react.useRef(/* @__PURE__ */ new Map());
+  const clearTimeoutForId = (id) => {
+    const timeoutId = timeouts.current.get(id);
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeouts.current.delete(id);
+    }
+  };
+  const hideToast = react.useCallback((id) => {
+    clearTimeoutForId(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const scheduleAutoDismiss = react.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 = react.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 = react.useCallback(() => {
+    timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+    timeouts.current.clear();
+    setToasts([]);
+  }, []);
+  react.useEffect(
+    () => () => {
+      timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+      timeouts.current.clear();
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Toast.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
+      );
+    }) })
+  ] });
+}
+function useToast() {
+  const ctx = react.useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return ctx;
+}
+function useOptionalToast() {
+  return react.useContext(ToastContext);
+}
+
+exports.ToastProvider = ToastProvider;
+exports.useOptionalToast = useOptionalToast;
+exports.useToast = useToast;

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

@@ -0,0 +1,24 @@
+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 declare function useOptionalToast(): ToastContextValue | undefined;
+export {};

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

@@ -0,0 +1,97 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { Toast } from '../Toast';
+import styles from '../Toast.module.css';
+
+const ToastContext = createContext(void 0);
+function ToastProvider({
+  children,
+  defaultDuration = 4e3
+}) {
+  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(() => {
+    timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+    timeouts.current.clear();
+    setToasts([]);
+  }, []);
+  useEffect(
+    () => () => {
+      timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
+      timeouts.current.clear();
+    },
+    []
+  );
+  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
+      );
+    }) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return ctx;
+}
+function useOptionalToast() {
+  return useContext(ToastContext);
+}
+
+export { ToastProvider, useOptionalToast, useToast };

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./UserDisplay.module.css');
+var Avatar = require('../avatar/Avatar');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function UserDisplay({ name, email, role, avatarUrl }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.userInfo, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: email }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: role })
+    ] })
+  ] });
+}
+
+exports.UserDisplay = UserDisplay;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+interface UserDisplayProps {
+    id?: string;
+    name?: string;
+    email?: string;
+    role?: string;
+    avatarUrl?: string;
+}
+export declare function UserDisplay({ name, email, role, avatarUrl }: UserDisplayProps): ReactNode;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './UserDisplay.module.css';
+import { Avatar } from '../avatar/Avatar';
+
+function UserDisplay({ 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 })
+    ] })
+  ] });
+}
+
+export { UserDisplay };

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

@@ -0,0 +1,25 @@
+.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/chart-colors.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const ChartSemanticColorVar = {
+  primary: "var(--color-chart-primary)",
+  success: "var(--color-chart-success)",
+  warning: "var(--color-chart-warning)",
+  error: "var(--color-chart-error)"
+};
+
+exports.ChartSemanticColorVar = ChartSemanticColorVar;

package/dist/constants/chart-colors.d.ts

@@ -0,0 +1,2 @@
+import type { ChartSemanticColor } from '../constants/chart-colors.types';
+export declare const ChartSemanticColorVar: Record<ChartSemanticColor, string>;

package/dist/constants/chart-colors.js

@@ -0,0 +1,8 @@
+const ChartSemanticColorVar = {
+  primary: "var(--color-chart-primary)",
+  success: "var(--color-chart-success)",
+  warning: "var(--color-chart-warning)",
+  error: "var(--color-chart-error)"
+};
+
+export { ChartSemanticColorVar };

package/dist/constants/chart-colors.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/constants/chart-colors.types.d.ts

@@ -0,0 +1,3 @@
+import type { Severity } from '../constants/severity.types';
+export type ChartSemanticSeverity = Extract<Severity, 'success' | 'warning' | 'error'>;
+export type ChartSemanticColor = 'primary' | ChartSemanticSeverity;

package/dist/constants/chart-colors.types.js

@@ -0,0 +1 @@
+

package/dist/constants/severity.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+const SeverityBgColor = {
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  info: "var(--color-status-info)",
+  warning: "var(--color-status-warning)"
+};
+const SeverityBorderColor = {
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
+  success: "var(--color-status-success-border)",
+  error: "var(--color-status-error-border)",
+  info: "var(--color-status-info-border)",
+  warning: "var(--color-status-warning-border)"
+};
+const SeverityTextColor = {
+  neutral: "var(--color-neutral-strong-fg)",
+  brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
+  success: "var(--color-status-success-fg)",
+  error: "var(--color-status-error-fg)",
+  info: "var(--color-status-info-fg)",
+  warning: "var(--color-status-warning-fg)"
+};
+
+exports.SeverityBgColor = SeverityBgColor;
+exports.SeverityBorderColor = SeverityBorderColor;
+exports.SeverityTextColor = SeverityTextColor;

package/dist/constants/severity.d.ts

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

package/dist/constants/severity.js

@@ -0,0 +1,29 @@
+const SeverityBgColor = {
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  info: "var(--color-status-info)",
+  warning: "var(--color-status-warning)"
+};
+const SeverityBorderColor = {
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
+  success: "var(--color-status-success-border)",
+  error: "var(--color-status-error-border)",
+  info: "var(--color-status-info-border)",
+  warning: "var(--color-status-warning-border)"
+};
+const SeverityTextColor = {
+  neutral: "var(--color-neutral-strong-fg)",
+  brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
+  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, SeverityBorderColor, SeverityTextColor };

package/dist/constants/severity.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

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

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

package/dist/constants/severity.types.js

@@ -0,0 +1 @@
+

package/dist/constants/sizes.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+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)"
+};
+
+exports.sizes = sizes;

package/dist/constants/sizes.d.ts

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

package/dist/constants/sizes.js

@@ -0,0 +1,9 @@
+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/useDeviceSize.cjs

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const BREAKPOINTS = {
+  tablet: 640,
+  desktop: 1024
+};
+function getDeviceSize(width) {
+  if (width < BREAKPOINTS.tablet) return "mobile";
+  if (width < BREAKPOINTS.desktop) return "tablet";
+  return "desktop";
+}
+function useDeviceSize() {
+  const [deviceSize, setDeviceSize] = react.useState("desktop");
+  react.useEffect(() => {
+    setDeviceSize(getDeviceSize(window.innerWidth));
+    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;
+}
+
+exports.useDeviceSize = useDeviceSize;

package/dist/hooks/useDeviceSize.d.ts

@@ -0,0 +1,2 @@
+export type DeviceSize = 'mobile' | 'tablet' | 'desktop';
+export declare function useDeviceSize(): DeviceSize;