@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-5ETQ3NX5.js

@@ -0,0 +1,236 @@
+// src/components/feedback/Toast/Toast.tsx
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorIcon from "@mui/icons-material/Error";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningIcon from "@mui/icons-material/Warning";
+import {
+  Alert,
+  alpha,
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  Portal,
+  Slide,
+  Typography,
+  useTheme
+} from "@mui/material";
+import { createContext, useCallback, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var resolveToastMessage = (message, value) => typeof message === "function" ? message(value) : message;
+var trackPromiseWithToasts = async (promiseToResolve, options, addToast, removeToast) => {
+  const toastId = addToast({
+    message: options.loading,
+    variant: "promise",
+    persistent: true
+  });
+  try {
+    const data = await promiseToResolve;
+    removeToast(toastId);
+    addToast({ message: resolveToastMessage(options.success, data), variant: "success" });
+    return data;
+  } catch (error) {
+    removeToast(toastId);
+    addToast({ message: resolveToastMessage(options.error, error), variant: "error" });
+    throw error;
+  }
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const addToast = useCallback(
+    (toast) => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const newToast = {
+        ...toast,
+        id,
+        timestamp: Date.now()
+      };
+      setToasts((prev) => [...prev, newToast]);
+      if (!toast.persistent && toast.duration !== 0) {
+        const duration = toast.duration ?? 5e3;
+        window.setTimeout(() => {
+          removeToast(id);
+        }, duration);
+      }
+      return id;
+    },
+    [removeToast]
+  );
+  const clearAllToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+  const promise = useCallback(
+    (promiseToResolve, options) => trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),
+    [addToast, removeToast]
+  );
+  const contextValue = {
+    toasts,
+    addToast,
+    removeToast,
+    clearAllToasts,
+    promise
+  };
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children });
+};
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var renderVariantIcon = (variant) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessIcon, {});
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, {});
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, {});
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, {});
+    case "promise":
+      return /* @__PURE__ */ jsx(CircularProgress, { size: 20 });
+    default:
+      return null;
+  }
+};
+var toAlertSeverity = (variant) => variant === "default" || variant === "promise" ? "info" : variant;
+var buildToastStyles = (theme, glass) => {
+  const baseStyles = {
+    borderRadius: theme.spacing(1.5),
+    transition: theme.transitions.create(["background-color", "backdrop-filter"], {
+      duration: theme.transitions.duration.standard
+    })
+  };
+  if (glass) {
+    return {
+      ...baseStyles,
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+    };
+  }
+  return baseStyles;
+};
+var Toast = ({
+  id = "",
+  message,
+  variant = "default",
+  closable = true,
+  action,
+  glass = false,
+  onClose,
+  dataTestId = "toast"
+}) => {
+  const theme = useTheme();
+  const handleClose = () => {
+    if (onClose && id) {
+      onClose(id);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      "data-testid": dataTestId,
+      icon: renderVariantIcon(variant),
+      severity: toAlertSeverity(variant),
+      onClose: closable ? handleClose : void 0,
+      action: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        action && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-testid": `${dataTestId}-action`,
+            color: "inherit",
+            size: "small",
+            onClick: action.onClick,
+            children: action.label
+          }
+        ),
+        closable && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-testid": `${dataTestId}-close`,
+            "aria-label": "close",
+            color: "inherit",
+            size: "small",
+            onClick: handleClose,
+            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      sx: buildToastStyles(theme, glass),
+      children: /* @__PURE__ */ jsx(Typography, { "data-testid": `${dataTestId}-message`, variant: "body2", children: message })
+    }
+  );
+};
+var ToastContainer = ({
+  position = "top-right",
+  maxToasts = 5,
+  gap = 8,
+  className,
+  dataTestId = "toast-container"
+}) => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("ToastContainer must be used within a ToastProvider");
+  }
+  const { toasts, removeToast } = context;
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "fixed",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      gap: `${gap}px`,
+      padding: "16px",
+      pointerEvents: "none"
+    };
+    switch (position) {
+      case "top-left":
+        return { ...baseStyles, top: 0, left: 0 };
+      case "top-center":
+        return { ...baseStyles, top: 0, left: "50%", transform: "translateX(-50%)" };
+      case "top-right":
+        return { ...baseStyles, top: 0, right: 0 };
+      case "bottom-left":
+        return { ...baseStyles, bottom: 0, left: 0, flexDirection: "column-reverse" };
+      case "bottom-center":
+        return {
+          ...baseStyles,
+          bottom: 0,
+          left: "50%",
+          transform: "translateX(-50%)",
+          flexDirection: "column-reverse"
+        };
+      case "bottom-right":
+        return { ...baseStyles, bottom: 0, right: 0, flexDirection: "column-reverse" };
+      default:
+        return { ...baseStyles, top: 0, right: 0 };
+    }
+  };
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Box, { "data-testid": dataTestId, className, sx: getPositionStyles(), children: toasts.slice(0, maxToasts).map((toast, index) => /* @__PURE__ */ jsx(
+    Slide,
+    {
+      direction: position.includes("left") ? "right" : "left",
+      in: true,
+      timeout: 300,
+      style: { pointerEvents: "auto" },
+      children: /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-item-${index}`, children: /* @__PURE__ */ jsx(Toast, { ...toast, onClose: removeToast, dataTestId: toast.dataTestId || `toast-${index}` }) })
+    },
+    toast.id
+  )) }) });
+};
+
+export {
+  ToastProvider,
+  useToast,
+  Toast,
+  ToastContainer
+};
+//# sourceMappingURL=chunk-5ETQ3NX5.js.map

package/dist/chunk-5ETQ3NX5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport type { Theme } from '@mui/material';\nimport {\n  Alert,\n  alpha,\n  Box,\n  Button,\n  CircularProgress,\n  IconButton,\n  Portal,\n  Slide,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport React, { createContext, useCallback,useContext, useState } from 'react';\n\nimport type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';\n\nconst ToastContext = createContext<ToastContextType | null>(null);\n\ntype PromiseToastOptions<T> = {\n  loading: string;\n  success: string | ((data: T) => string);\n  error: string | ((error: unknown) => string);\n};\n\n// success/error may be a literal or a formatter over the settled value.\nconst resolveToastMessage = <T,>(message: string | ((value: T) => string), value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n// Shows a persistent \"loading\" toast for the life of a promise, then swaps it\n// for a success or error one. Lives outside the provider so the provider body\n// stays readable; it takes add/remove rather than reaching for context.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: PromiseToastOptions<T>,\n  addToast: (toast: Omit<ToastProps, 'id'>) => string,\n  removeToast: (id: string) => void,\n): Promise<T> => {\n  const toastId = addToast({\n    message: options.loading,\n    variant: 'promise',\n    persistent: true,\n  });\n\n  try {\n    const data = await promiseToResolve;\n\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.success, data), variant: 'success' });\n\n    return data;\n  } catch (error) {\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.error, error), variant: 'error' });\n\n    throw error;\n  }\n};\n\nexport const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<ToastProps, 'id'>): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newToast: ToastItem = {\n        ...toast,\n        id,\n        timestamp: Date.now(),\n      };\n\n      setToasts((prev) => [...prev, newToast]);\n\n      if (!toast.persistent && toast.duration !== 0) {\n        const duration = toast.duration ?? 5000;\n        window.setTimeout(() => {\n          removeToast(id);\n        }, duration);\n      }\n\n      return id;\n    },\n    [removeToast],\n  );\n\n  const clearAllToasts = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: PromiseToastOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),\n    [addToast, removeToast],\n  );\n\n  const contextValue: ToastContextType = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAllToasts,\n    promise,\n  };\n\n  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;\n};\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return context;\n};\n\nconst renderVariantIcon = (variant: ToastProps['variant']) => {\n  switch (variant) {\n    case 'success':\n      return <SuccessIcon />;\n    case 'error':\n      return <ErrorIcon />;\n    case 'warning':\n      return <WarningIcon />;\n    case 'info':\n      return <InfoIcon />;\n    case 'promise':\n      return <CircularProgress size={20} />;\n    default:\n      return null;\n  }\n};\n\n// 'default' and 'promise' have no MUI severity of their own; both read as info.\nconst toAlertSeverity = (variant: ToastProps['variant']) =>\n  variant === 'default' || variant === 'promise' ? 'info' : variant;\n\nconst buildToastStyles = (theme: Theme, glass: boolean) => {\n  const baseStyles = {\n    borderRadius: theme.spacing(1.5),\n    transition: theme.transitions.create(['background-color', 'backdrop-filter'], {\n      duration: theme.transitions.duration.standard,\n    }),\n  };\n\n  if (glass) {\n    return {\n      ...baseStyles,\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n    };\n  }\n\n  return baseStyles;\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n  id = '',\n  message,\n  variant = 'default',\n  closable = true,\n  action,\n  glass = false,\n  onClose,\n  dataTestId = 'toast',\n}) => {\n  const theme = useTheme();\n\n  const handleClose = () => {\n    if (onClose && id) {\n      onClose(id);\n    }\n  };\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      icon={renderVariantIcon(variant)}\n      severity={toAlertSeverity(variant)}\n      onClose={closable ? handleClose : undefined}\n      action={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          {action && (\n            <Button\n              data-testid={`${dataTestId}-action`}\n              color=\"inherit\"\n              size=\"small\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Button>\n          )}\n          {closable && (\n            <IconButton\n              data-testid={`${dataTestId}-close`}\n              aria-label=\"close\"\n              color=\"inherit\"\n              size=\"small\"\n              onClick={handleClose}\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n      }\n      sx={buildToastStyles(theme, glass)}\n    >\n      <Typography data-testid={`${dataTestId}-message`} variant=\"body2\">{message}</Typography>\n    </Alert>\n  );\n};\n\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  position = 'top-right',\n  maxToasts = 5,\n  gap = 8,\n  className,\n  dataTestId = 'toast-container',\n}) => {\n  const context = useContext(ToastContext);\n  \n  if (!context) {\n    throw new Error('ToastContainer must be used within a ToastProvider');\n  }\n\n  const { toasts, removeToast } = context;\n\n  const getPositionStyles = (): React.CSSProperties => {\n    const baseStyles: React.CSSProperties = {\n      position: 'fixed',\n      zIndex: 9999,\n      display: 'flex',\n      flexDirection: 'column',\n      gap: `${gap}px`,\n      padding: '16px',\n      pointerEvents: 'none',\n    };\n\n    switch (position) {\n      case 'top-left':\n        return { ...baseStyles, top: 0, left: 0 };\n      case 'top-center':\n        return { ...baseStyles, top: 0, left: '50%', transform: 'translateX(-50%)' };\n      case 'top-right':\n        return { ...baseStyles, top: 0, right: 0 };\n      case 'bottom-left':\n        return { ...baseStyles, bottom: 0, left: 0, flexDirection: 'column-reverse' };\n      case 'bottom-center':\n        return {\n          ...baseStyles,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          flexDirection: 'column-reverse',\n        };\n      case 'bottom-right':\n        return { ...baseStyles, bottom: 0, right: 0, flexDirection: 'column-reverse' };\n      default:\n        return { ...baseStyles, top: 0, right: 0 };\n    }\n  };\n\n  return (\n    <Portal>\n      <Box data-testid={dataTestId} className={className} sx={getPositionStyles()}>\n        {toasts.slice(0, maxToasts).map((toast, index) => (\n          <Slide\n            key={toast.id}\n            direction={position.includes('left') ? 'right' : 'left'}\n            in={true}\n            timeout={300}\n            style={{ pointerEvents: 'auto' }}\n          >\n            <Box data-testid={`${dataTestId}-item-${index}`}>\n              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />\n            </Box>\n          </Slide>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-5FC7M2Y5.js

@@ -0,0 +1,149 @@
+// src/components/layout/Separator/Separator.tsx
+import { Box, Typography, useTheme } from "@mui/material";
+
+// src/components/layout/Separator/Separator.styles.ts
+var THICKNESS_PX = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6
+};
+var MARGIN_PX = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var separatorThickness = (size) => THICKNESS_PX[size] ?? THICKNESS_PX.md;
+var separatorMargin = (size, margin) => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;
+var borderStyleFor = (variant) => {
+  switch (variant) {
+    case "dashed":
+      return "dashed";
+    case "dotted":
+      return "dotted";
+    default:
+      return "solid";
+  }
+};
+var gradientBackground = (variant, orientation, color) => {
+  if (variant !== "gradient") return void 0;
+  const angle = orientation === "horizontal" ? "90deg" : "180deg";
+  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;
+};
+var borderEdges = (isHorizontal, thickness, style, color) => {
+  const leading = isHorizontal ? "Top" : "Left";
+  const blank = {
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopStyle: "none",
+    borderBottomStyle: "none",
+    borderLeftStyle: "none",
+    borderRightStyle: "none",
+    borderTopColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  };
+  return {
+    ...blank,
+    [`border${leading}Width`]: thickness,
+    [`border${leading}Style`]: style,
+    [`border${leading}Color`]: color
+  };
+};
+var separatorStyles = (theme, { variant, orientation, size, color, margin, length }) => {
+  const isHorizontal = orientation === "horizontal";
+  const thickness = separatorThickness(size);
+  const resolvedColor = color || theme.palette.divider;
+  const marginValue = separatorMargin(size, margin);
+  const marginStr = typeof marginValue === "string" ? marginValue : `${marginValue}px`;
+  const baseStyles = {
+    display: "flex",
+    alignItems: "center",
+    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,
+    width: isHorizontal ? length || "100%" : `${thickness}px`,
+    height: isHorizontal ? `${thickness}px` : length || "100%",
+    boxSizing: "border-box"
+  };
+  if (variant === "gradient") {
+    return {
+      ...baseStyles,
+      background: gradientBackground(variant, orientation, resolvedColor)
+    };
+  }
+  return {
+    ...baseStyles,
+    backgroundColor: "transparent",
+    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor)
+  };
+};
+
+// src/components/layout/Separator/Separator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Separator = ({
+  variant = "solid",
+  orientation = "horizontal",
+  size = "md",
+  color,
+  margin,
+  length,
+  children,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });
+  if (children) {
+    const isHorizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          margin: separatorMargin(size, margin),
+          flexDirection: isHorizontal ? "row" : "column",
+          gap: theme.spacing(2)
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: styles }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                flexShrink: 0,
+                padding: theme.spacing(0, 1),
+                backgroundColor: theme.palette.background.default
+              },
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: styles })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: styles,
+      role: "separator",
+      "aria-orientation": orientation,
+      "data-testid": dataTestId
+    }
+  );
+};
+
+export {
+  Separator
+};
+//# sourceMappingURL=chunk-5FC7M2Y5.js.map

package/dist/chunk-5FC7M2Y5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx","../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import { Box, Typography,useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { separatorMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });\n\n  if (children) {\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n      <Box\n        className={className}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: separatorMargin(size, margin),\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n        }}\n      >\n        <Box sx={styles} />\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{\n            flexShrink: 0,\n            padding: theme.spacing(0, 1),\n            backgroundColor: theme.palette.background.default,\n          }}\n        >\n          {children}\n        </Typography>\n        <Box sx={styles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n","import type { CSSObject, Theme } from '@mui/material';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: number,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'margin' | 'length'>;\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  const thickness = separatorThickness(size);\n  const resolvedColor = color || theme.palette.divider;\n\n  // A margin given as a string carries its own units; a number is pixels.\n  const marginValue = separatorMargin(size, margin);\n  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,\n    width: isHorizontal ? length || '100%' : `${thickness}px`,\n    height: isHorizontal ? `${thickness}px` : length || '100%',\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-5YQGQUZL.js

@@ -0,0 +1,44 @@
+// src/components/utility/Overflow/overflow.ts
+import { useEffect, useRef, useState } from "react";
+function useMeasuredWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(entry.contentRect.width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return { ref, width };
+}
+function splitToFit(items, request) {
+  const { widthOf, keyOf, gap, available, overflowCost, priority } = request;
+  const cost = (list) => list.reduce((sum, item) => sum + widthOf(item) + gap, 0);
+  if (cost(items) <= available) {
+    return { inline: [...items], overflow: [], used: cost(items) };
+  }
+  let room = available - overflowCost;
+  const keep = /* @__PURE__ */ new Set();
+  for (const item of priority ?? items) {
+    const next = widthOf(item) + gap;
+    if (next > room) continue;
+    room -= next;
+    keep.add(keyOf(item));
+  }
+  const inline = items.filter((item) => keep.has(keyOf(item)));
+  return {
+    inline,
+    overflow: items.filter((item) => !keep.has(keyOf(item))),
+    used: cost(inline) + overflowCost
+  };
+}
+
+export {
+  useMeasuredWidth,
+  splitToFit
+};
+//# sourceMappingURL=chunk-5YQGQUZL.js.map

package/dist/chunk-5YQGQUZL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/Overflow/overflow.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\n\n/**\n * MEASURE A ROW, THEN DECIDE WHAT FITS — the two pieces every \"…and the rest\n * goes in the menu\" cluster needs, and the only two that are not specific to\n * what is being collapsed.\n *\n * It was extracted from `DataViews`' filter toolbar (`data-views-overflow`),\n * which still owns everything filter-shaped about that bar: what a pill costs,\n * that an APPLIED filter ranks ahead of an idle one, and the ladder that\n * strips the search and the counter. None of that generalises. What does is\n * the pair below — observe a container's width, and greedily keep what fits —\n * and a second copy of a resize-measurement loop is exactly the kind of thing\n * that drifts silently from the first.\n *\n * Both are presentation only: nothing here removes an action, changes a\n * handler, or decides that something should not be reachable. What does not\n * fit is meant to be rendered SOMEWHERE ELSE by the caller — a menu, a panel —\n * never dropped.\n */\n\n/**\n * Observe an element's content width. `0` until the first measurement lands.\n *\n * Zero is a meaningful answer, not a missing one: an SSR pass and a jsdom test\n * both have no `ResizeObserver`, and the callers here read `0` as \"degrade\n * nothing\" — keep every control inline. That is the honest fallback, because\n * the alternative hides controls behind a trigger that the same environment\n * cannot show either.\n */\nexport function useMeasuredWidth<T extends HTMLElement = HTMLDivElement>(): {\n  ref: RefObject<T | null>;\n  width: number;\n} {\n  const ref = useRef<T | null>(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    const element = ref.current;\n    if (!element || typeof ResizeObserver === \"undefined\") return undefined;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) setWidth(entry.contentRect.width);\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n  return { ref, width };\n}\n\n/** What one split costs the row, so a caller can price whatever comes next. */\nexport interface FitResult<Item> {\n  /** Rendered on the row, in the order they were DECLARED. */\n  inline: Item[];\n  /** Everything that had no room, also in declared order. */\n  overflow: Item[];\n  /** Width the surviving items occupy, including the overflow trigger. */\n  used: number;\n}\n\nexport interface FitRequest<Item> {\n  /** Rendered width of one item, however the caller prices it. */\n  widthOf: (item: Item) => number;\n  /** Stable identity — the split is decided as a set, then re-ordered. */\n  keyOf: (item: Item) => string;\n  /** The gap between two items, charged once per item kept. */\n  gap: number;\n  /** Room the items have to share, with fixed furniture already subtracted. */\n  available: number;\n  /**\n   * What the overflow trigger costs — charged ONLY when something overflows,\n   * because a row where everything fits renders no trigger at all.\n   */\n  overflowCost: number;\n  /**\n   * The order in which items claim the visible slots. Defaults to the declared\n   * order; pass a re-ordering to rank some items ahead of others.\n   *\n   * Ranking is not exempting. A high-ranked item still overflows once even the\n   * first slots run out, which is what stops a row of \"important\" items from\n   * claiming more width than it has and painting past its own edge.\n   */\n  priority?: readonly Item[];\n}\n\n/**\n * Keep what fits, shed the rest — ONE AT A TIME, never all at once.\n *\n * The all-or-nothing version throws away room that was there: with four items\n * and space for three, hiding all four leaves the row emptier than it needed\n * to be.\n *\n * Items claim slots in `priority` order but are RENDERED in declared order:\n * which ones are visible may change with the width, and that is the point —\n * but the ones that stay must not reshuffle under the pointer.\n */\nexport function splitToFit<Item>(\n  items: readonly Item[],\n  request: FitRequest<Item>,\n): FitResult<Item> {\n  const { widthOf, keyOf, gap, available, overflowCost, priority } = request;\n  const cost = (list: readonly Item[]): number =>\n    list.reduce((sum, item) => sum + widthOf(item) + gap, 0);\n\n  if (cost(items) <= available) {\n    return { inline: [...items], overflow: [], used: cost(items) };\n  }\n\n  // There IS an overflow, so its trigger now costs room too.\n  let room = available - overflowCost;\n  const keep = new Set<string>();\n  for (const item of priority ?? items) {\n    const next = widthOf(item) + gap;\n    if (next > room) continue;\n    room -= next;\n    keep.add(keyOf(item));\n  }\n  const inline = items.filter((item) => keep.has(keyOf(item)));\n  return {\n    inline,\n    overflow: items.filter((item) => !keep.has(keyOf(item))),\n    used: cost(inline) + overflowCost,\n  };\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgC;AA8BrD,SAAS,mBAGd;AACA,QAAM,MAAM,OAAiB,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,WAAW,OAAO,mBAAmB,YAAa,QAAO;AAC9D,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,MAAO,UAAS,MAAM,YAAY,KAAK;AAAA,IAC7C,CAAC;AACD,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,KAAK,MAAM;AACtB;AAgDO,SAAS,WACd,OACA,SACiB;AACjB,QAAM,EAAE,SAAS,OAAO,KAAK,WAAW,cAAc,SAAS,IAAI;AACnE,QAAM,OAAO,CAAC,SACZ,KAAK,OAAO,CAAC,KAAK,SAAS,MAAM,QAAQ,IAAI,IAAI,KAAK,CAAC;AAEzD,MAAI,KAAK,KAAK,KAAK,WAAW;AAC5B,WAAO,EAAE,QAAQ,CAAC,GAAG,KAAK,GAAG,UAAU,CAAC,GAAG,MAAM,KAAK,KAAK,EAAE;AAAA,EAC/D;AAGA,MAAI,OAAO,YAAY;AACvB,QAAM,OAAO,oBAAI,IAAY;AAC7B,aAAW,QAAQ,YAAY,OAAO;AACpC,UAAM,OAAO,QAAQ,IAAI,IAAI;AAC7B,QAAI,OAAO,KAAM;AACjB,YAAQ;AACR,SAAK,IAAI,MAAM,IAAI,CAAC;AAAA,EACtB;AACA,QAAM,SAAS,MAAM,OAAO,CAAC,SAAS,KAAK,IAAI,MAAM,IAAI,CAAC,CAAC;AAC3D,SAAO;AAAA,IACL;AAAA,IACA,UAAU,MAAM,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,MAAM,IAAI,CAAC,CAAC;AAAA,IACvD,MAAM,KAAK,MAAM,IAAI;AAAA,EACvB;AACF;","names":[]}