@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,165 +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);
-}
-
-.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

@@ -1,105 +0,0 @@
-'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

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

@@ -1,97 +0,0 @@
-'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

@@ -1,22 +0,0 @@
-'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

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

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

@@ -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/chart-colors.cjs

@@ -1,10 +0,0 @@
-'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

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

package/dist/constants/chart-colors.js

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

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

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

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

@@ -1 +0,0 @@
-

package/dist/constants/severity.cjs

@@ -1,33 +0,0 @@
-'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

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

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

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

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

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

package/dist/constants/severity.types.js

@@ -1 +0,0 @@
-

package/dist/constants/sizes.cjs

@@ -1,11 +0,0 @@
-'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

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

package/dist/constants/sizes.js

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

@@ -1,33 +0,0 @@
-'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

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