@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1 @@
+

package/dist/constants/severity.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+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 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)"
+};
+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)"
+};
+
+exports.SeverityBgColor = SeverityBgColor;
+exports.SeverityBorderColor = SeverityBorderColor;
+exports.SeverityTextColor = SeverityTextColor;

package/dist/constants/severity.js

@@ -0,0 +1,26 @@
+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 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)"
+};
+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, SeverityBorderColor, SeverityTextColor };

package/dist/constants/severity.types.cjs

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

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.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,35 @@
+'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(() => {
+    if (typeof window === "undefined") return "desktop";
+    return getDeviceSize(window.innerWidth);
+  });
+  react.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;
+}
+
+exports.useDeviceSize = useDeviceSize;

package/dist/hooks/useDeviceSize.js

@@ -0,0 +1,33 @@
+'use client';
+import { useState, useEffect } from '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] = 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;
+}
+
+export { useDeviceSize };