@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/NoDataFound/index.js

@@ -0,0 +1,215 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, isValidElement } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import ControlledButton from "../../Form/ControlledButton.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { NO_DATA_FOUND_TONES, NO_DATA_FOUND_VARIANTS, NO_DATA_FOUND_SIZES } from "./noDataFoundPresets.js";
+const isActionConfig = (action) => typeof action === "object" && action !== null && !isValidElement(action) && "label" in action;
+const NoDataFoundVisual = ({ icon, toneClasses, sizeClasses }) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-hidden": true,
+    className: classNames(
+      "relative flex shrink-0 animate-state-reveal items-center justify-center motion-reduce:animate-state-fade",
+      sizeClasses.visual
+    ),
+    children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute inset-0 m-auto animate-state-breathe rounded-full blur-2xl motion-reduce:animate-none motion-reduce:opacity-60",
+            toneClasses.aura,
+            sizeClasses.aura
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute inset-0 m-auto animate-state-halo rounded-full border motion-reduce:hidden",
+            toneClasses.halo,
+            sizeClasses.halo
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute inset-0 m-auto animate-state-halo rounded-full border [animation-delay:1.5s] motion-reduce:hidden",
+            toneClasses.halo,
+            sizeClasses.halo
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "relative flex animate-state-float items-center justify-center border bg-gradient-to-br shadow-elevation3 glass-tint motion-reduce:animate-none",
+            toneClasses.tile,
+            sizeClasses.tile
+          ),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon, weight: 300, className: toneClasses.icon })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute right-[6%] top-[18%] size-1.5 animate-state-drift rounded-full motion-reduce:animate-none",
+            toneClasses.accent
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute bottom-[16%] left-[9%] size-1 animate-state-drift rounded-full [animation-delay:2.5s] motion-reduce:animate-none",
+            toneClasses.accent
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute left-[24%] top-[4%] size-1 animate-state-drift rounded-full [animation-delay:5s] motion-reduce:animate-none",
+            toneClasses.accent
+          )
+        }
+      )
+    ]
+  }
+);
+const NoDataFoundActionButton = ({
+  action,
+  isPrimary
+}) => /* @__PURE__ */ jsxs(
+  ControlledButton,
+  {
+    size: "sm",
+    variant: isPrimary ? "filled" : "text",
+    tone: isPrimary ? "brand" : "neutral",
+    disabled: action.disabled,
+    onClick: action.onClick,
+    className: classNames(
+      "flex items-center gap-x-1.5 px-3.5 text-xs transition-interactive duration-base",
+      isPrimary ? "shadow-md shadow-brand/20 hover:-translate-y-px hover:shadow-lg hover:shadow-brand/25" : "text-foreground-muted hover:bg-muted-hover"
+    ),
+    children: [
+      action.icon ? /* @__PURE__ */ jsx(MaterialSymbol, { icon: action.icon, size: 16, "aria-hidden": true }) : null,
+      /* @__PURE__ */ jsx("span", { children: action.label })
+    ]
+  }
+);
+const renderAction = (action, isPrimary) => {
+  if (!action) return null;
+  if (isActionConfig(action)) return /* @__PURE__ */ jsx(NoDataFoundActionButton, { action, isPrimary });
+  return action;
+};
+const NoDataFound = ({
+  variant = "empty",
+  size = "md",
+  tone,
+  title,
+  message,
+  description,
+  icon,
+  illustration,
+  action,
+  secondaryAction,
+  compact = false,
+  children,
+  className,
+  announce = true
+}) => {
+  const { t } = useTranslation("ui");
+  const preset = NO_DATA_FOUND_VARIANTS[variant] ?? NO_DATA_FOUND_VARIANTS.empty;
+  const toneClasses = NO_DATA_FOUND_TONES[tone ?? preset.tone] ?? NO_DATA_FOUND_TONES.neutral;
+  const resolvedIcon = icon ?? preset.icon;
+  const resolvedTitle = title ?? message ?? t(preset.titleKey);
+  const liveRegionProps = announce ? { role: "status", "aria-live": "polite" } : {};
+  const primaryAction = renderAction(action, true);
+  const supportAction = renderAction(secondaryAction, false);
+  if (compact || size === "inline") {
+    return /* @__PURE__ */ jsxs("div", { ...liveRegionProps, className: mergeClasses("flex w-full items-center gap-x-1.5 text-left", className), children: [
+      /* @__PURE__ */ jsx(MaterialSymbol, { icon: resolvedIcon, size: 16, className: classNames("shrink-0", toneClasses.icon) }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 text-xs text-foreground-subtle", children: resolvedTitle }),
+      description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1 shrink-0 rounded-full bg-border-emphasis" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs text-foreground-faint", children: description })
+      ] }) : null,
+      primaryAction ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0", children: primaryAction }) : null
+    ] });
+  }
+  const sizeClasses = NO_DATA_FOUND_SIZES[size] ?? NO_DATA_FOUND_SIZES.md;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...liveRegionProps,
+      className: mergeClasses(
+        classNames(
+          "relative flex w-full flex-col items-center justify-center overflow-hidden text-center @container",
+          sizeClasses.root
+        ),
+        className
+      ),
+      children: [
+        sizeClasses.hasTexture ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 [mask-image:radial-gradient(60%_55%_at_50%_35%,black,transparent)]",
+            children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-[radial-gradient(circle,rgba(148,163,184,0.3)_1px,transparent_1px)] [background-size:1.25rem_1.25rem]" })
+          }
+        ) : null,
+        illustration ?? /* @__PURE__ */ jsx(NoDataFoundVisual, { icon: resolvedIcon, toneClasses, sizeClasses }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: classNames(
+              "relative animate-state-rise font-semibold tracking-[-0.01em] text-foreground [animation-delay:80ms] motion-reduce:animate-state-fade",
+              sizeClasses.titleClass
+            ),
+            children: resolvedTitle
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: classNames(
+              "relative animate-state-rise text-balance leading-relaxed text-foreground-subtle [animation-delay:140ms] motion-reduce:animate-state-fade",
+              sizeClasses.descriptionClass
+            ),
+            children: description
+          }
+        ) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "relative w-full animate-state-rise [animation-delay:180ms] motion-reduce:animate-state-fade", children }) : null,
+        primaryAction || supportAction ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "relative flex animate-state-rise flex-wrap items-center justify-center gap-2 [animation-delay:220ms] motion-reduce:animate-state-fade",
+              sizeClasses.actions
+            ),
+            children: [
+              primaryAction,
+              supportAction
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+const NoDataFound$1 = memo(NoDataFound);
+export {
+  NoDataFound$1 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/NoDataFound/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/UI/NoDataFound/index.tsx"],"sourcesContent":["import { isValidElement, memo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport ControlledButton from '../../Form/ControlledButton';\nimport { MaterialSymbol, SymbolCodepoints } from '../MaterialSymbol';\n\nimport {\n  NO_DATA_FOUND_SIZES,\n  NO_DATA_FOUND_TONES,\n  NO_DATA_FOUND_VARIANTS,\n  TNoDataFoundSize,\n  TNoDataFoundTone,\n  TNoDataFoundVariant,\n} from './noDataFoundPresets';\n\nexport type { TNoDataFoundSize, TNoDataFoundTone, TNoDataFoundVariant } from './noDataFoundPresets';\n\nexport interface INoDataFoundAction {\n  label: string;\n  onClick: () => void;\n  icon?: SymbolCodepoints;\n  disabled?: boolean;\n}\n\ntype TNoDataFoundActionProp = INoDataFoundAction | React.ReactNode;\n\nexport interface INoDataFoundProps {\n  variant?: TNoDataFoundVariant;\n  size?: TNoDataFoundSize;\n  tone?: TNoDataFoundTone;\n  title?: string;\n  /** Alias of `title`, kept because most call sites already speak this name. */\n  message?: string;\n  description?: string;\n  icon?: SymbolCodepoints;\n  illustration?: React.ReactNode;\n  action?: TNoDataFoundActionProp;\n  secondaryAction?: TNoDataFoundActionProp;\n  /** Sugar for `size=\"inline\"`: a single row for dropdowns, list slots and dense panels. */\n  compact?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  /** Turn off the live region when the host already announces the state itself. */\n  announce?: boolean;\n}\n\ntype TToneClasses = (typeof NO_DATA_FOUND_TONES)[TNoDataFoundTone];\ntype TSizeClasses = (typeof NO_DATA_FOUND_SIZES)[Exclude<TNoDataFoundSize, 'inline'>];\n\nconst isActionConfig = (action: TNoDataFoundActionProp): action is INoDataFoundAction =>\n  typeof action === 'object' && action !== null && !isValidElement(action) && 'label' in action;\n\ninterface INoDataFoundVisualProps {\n  icon: SymbolCodepoints;\n  toneClasses: TToneClasses;\n  sizeClasses: TSizeClasses;\n}\n\nconst NoDataFoundVisual: React.FC<INoDataFoundVisualProps> = ({ icon, toneClasses, sizeClasses }) => (\n  <span\n    aria-hidden\n    className={classNames(\n      'relative flex shrink-0 animate-state-reveal items-center justify-center motion-reduce:animate-state-fade',\n      sizeClasses.visual,\n    )}\n  >\n    <span\n      className={classNames(\n        'absolute inset-0 m-auto animate-state-breathe rounded-full blur-2xl motion-reduce:animate-none motion-reduce:opacity-60',\n        toneClasses.aura,\n        sizeClasses.aura,\n      )}\n    />\n    <span\n      className={classNames(\n        'absolute inset-0 m-auto animate-state-halo rounded-full border motion-reduce:hidden',\n        toneClasses.halo,\n        sizeClasses.halo,\n      )}\n    />\n    <span\n      className={classNames(\n        'absolute inset-0 m-auto animate-state-halo rounded-full border [animation-delay:1.5s] motion-reduce:hidden',\n        toneClasses.halo,\n        sizeClasses.halo,\n      )}\n    />\n\n    <span\n      className={classNames(\n        'relative flex animate-state-float items-center justify-center border bg-gradient-to-br shadow-elevation3 glass-tint motion-reduce:animate-none',\n        toneClasses.tile,\n        sizeClasses.tile,\n      )}\n    >\n      <MaterialSymbol icon={icon} weight={300} className={toneClasses.icon} />\n    </span>\n\n    <span\n      className={classNames(\n        'absolute right-[6%] top-[18%] size-1.5 animate-state-drift rounded-full motion-reduce:animate-none',\n        toneClasses.accent,\n      )}\n    />\n    <span\n      className={classNames(\n        'absolute bottom-[16%] left-[9%] size-1 animate-state-drift rounded-full [animation-delay:2.5s] motion-reduce:animate-none',\n        toneClasses.accent,\n      )}\n    />\n    <span\n      className={classNames(\n        'absolute left-[24%] top-[4%] size-1 animate-state-drift rounded-full [animation-delay:5s] motion-reduce:animate-none',\n        toneClasses.accent,\n      )}\n    />\n  </span>\n);\n\nconst NoDataFoundActionButton: React.FC<{ action: INoDataFoundAction; isPrimary: boolean }> = ({\n  action,\n  isPrimary,\n}) => (\n  <ControlledButton\n    size=\"sm\"\n    variant={isPrimary ? 'filled' : 'text'}\n    tone={isPrimary ? 'brand' : 'neutral'}\n    disabled={action.disabled}\n    onClick={action.onClick}\n    className={classNames(\n      'flex items-center gap-x-1.5 px-3.5 text-xs transition-interactive duration-base',\n      isPrimary\n        ? 'shadow-md shadow-brand/20 hover:-translate-y-px hover:shadow-lg hover:shadow-brand/25'\n        : 'text-foreground-muted hover:bg-muted-hover',\n    )}\n  >\n    {action.icon ? <MaterialSymbol icon={action.icon} size={16} aria-hidden /> : null}\n    <span>{action.label}</span>\n  </ControlledButton>\n);\n\nconst renderAction = (action: TNoDataFoundActionProp, isPrimary: boolean): React.ReactNode => {\n  if (!action) return null;\n  if (isActionConfig(action)) return <NoDataFoundActionButton action={action} isPrimary={isPrimary} />;\n\n  return action;\n};\n\nconst NoDataFound: React.FC<INoDataFoundProps> = ({\n  variant = 'empty',\n  size = 'md',\n  tone,\n  title,\n  message,\n  description,\n  icon,\n  illustration,\n  action,\n  secondaryAction,\n  compact = false,\n  children,\n  className,\n  announce = true,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const preset = NO_DATA_FOUND_VARIANTS[variant] ?? NO_DATA_FOUND_VARIANTS.empty;\n  const toneClasses = NO_DATA_FOUND_TONES[tone ?? preset.tone] ?? NO_DATA_FOUND_TONES.neutral;\n  const resolvedIcon = icon ?? preset.icon;\n  const resolvedTitle = title ?? message ?? t(preset.titleKey);\n  const liveRegionProps = announce ? { role: 'status', 'aria-live': 'polite' as const } : {};\n\n  const primaryAction = renderAction(action, true);\n  const supportAction = renderAction(secondaryAction, false);\n\n  if (compact || size === 'inline') {\n    return (\n      <div {...liveRegionProps} className={mergeClasses('flex w-full items-center gap-x-1.5 text-left', className)}>\n        <MaterialSymbol icon={resolvedIcon} size={16} className={classNames('shrink-0', toneClasses.icon)} />\n        <span className=\"min-w-0 text-xs text-foreground-subtle\">{resolvedTitle}</span>\n\n        {description ? (\n          <>\n            <span aria-hidden className=\"size-1 shrink-0 rounded-full bg-border-emphasis\" />\n            <span className=\"min-w-0 truncate text-xs text-foreground-faint\">{description}</span>\n          </>\n        ) : null}\n\n        {primaryAction ? <span className=\"ml-auto shrink-0\">{primaryAction}</span> : null}\n      </div>\n    );\n  }\n\n  const sizeClasses = NO_DATA_FOUND_SIZES[size] ?? NO_DATA_FOUND_SIZES.md;\n\n  return (\n    <div\n      {...liveRegionProps}\n      className={mergeClasses(\n        classNames(\n          'relative flex w-full flex-col items-center justify-center overflow-hidden text-center @container',\n          sizeClasses.root,\n        ),\n        className,\n      )}\n    >\n      {sizeClasses.hasTexture ? (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 [mask-image:radial-gradient(60%_55%_at_50%_35%,black,transparent)]\"\n        >\n          <span className=\"absolute inset-0 bg-[radial-gradient(circle,rgba(148,163,184,0.3)_1px,transparent_1px)] [background-size:1.25rem_1.25rem]\" />\n        </span>\n      ) : null}\n\n      {illustration ?? <NoDataFoundVisual icon={resolvedIcon} toneClasses={toneClasses} sizeClasses={sizeClasses} />}\n\n      <p\n        className={classNames(\n          'relative animate-state-rise font-semibold tracking-[-0.01em] text-foreground [animation-delay:80ms] motion-reduce:animate-state-fade',\n          sizeClasses.titleClass,\n        )}\n      >\n        {resolvedTitle}\n      </p>\n\n      {description ? (\n        <p\n          className={classNames(\n            'relative animate-state-rise text-balance leading-relaxed text-foreground-subtle [animation-delay:140ms] motion-reduce:animate-state-fade',\n            sizeClasses.descriptionClass,\n          )}\n        >\n          {description}\n        </p>\n      ) : null}\n\n      {children ? (\n        <div className=\"relative w-full animate-state-rise [animation-delay:180ms] motion-reduce:animate-state-fade\">\n          {children}\n        </div>\n      ) : null}\n\n      {primaryAction || supportAction ? (\n        <div\n          className={classNames(\n            'relative flex animate-state-rise flex-wrap items-center justify-center gap-2 [animation-delay:220ms] motion-reduce:animate-state-fade',\n            sizeClasses.actions,\n          )}\n        >\n          {primaryAction}\n          {supportAction}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default memo(NoDataFound);\n"],"names":[],"mappings":"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"}

package/dist/components/UI/NoDataFound/noDataFoundPresets.d.ts

@@ -0,0 +1,31 @@
+import { SymbolCodepoints } from '../MaterialSymbol';
+export type TNoDataFoundVariant = 'empty' | 'first-access' | 'search' | 'filtered' | 'error' | 'not-found' | 'permission' | 'waiting' | 'success' | 'offline';
+export type TNoDataFoundTone = 'neutral' | 'purple' | 'success' | 'warning' | 'danger' | 'info';
+export type TNoDataFoundSize = 'inline' | 'sm' | 'md' | 'lg';
+interface INoDataFoundVariantPreset {
+    icon: SymbolCodepoints;
+    tone: TNoDataFoundTone;
+    titleKey: string;
+}
+export declare const NO_DATA_FOUND_VARIANTS: Record<TNoDataFoundVariant, INoDataFoundVariantPreset>;
+interface INoDataFoundToneClasses {
+    aura: string;
+    halo: string;
+    tile: string;
+    icon: string;
+    accent: string;
+}
+export declare const NO_DATA_FOUND_TONES: Record<TNoDataFoundTone, INoDataFoundToneClasses>;
+interface INoDataFoundSizeClasses {
+    root: string;
+    visual: string;
+    tile: string;
+    aura: string;
+    halo: string;
+    titleClass: string;
+    descriptionClass: string;
+    actions: string;
+    hasTexture: boolean;
+}
+export declare const NO_DATA_FOUND_SIZES: Record<Exclude<TNoDataFoundSize, 'inline'>, INoDataFoundSizeClasses>;
+export {};

package/dist/components/UI/NoDataFound/noDataFoundPresets.js

@@ -0,0 +1,99 @@
+const NO_DATA_FOUND_VARIANTS = {
+  empty: { icon: "inbox", tone: "purple", titleKey: "noDataFound.variants.empty" },
+  "first-access": { icon: "auto_awesome", tone: "purple", titleKey: "noDataFound.variants.firstAccess" },
+  search: { icon: "search_off", tone: "neutral", titleKey: "noDataFound.variants.search" },
+  filtered: { icon: "filter_alt_off", tone: "neutral", titleKey: "noDataFound.variants.filtered" },
+  error: { icon: "error", tone: "danger", titleKey: "noDataFound.variants.error" },
+  "not-found": { icon: "frame_inspect", tone: "neutral", titleKey: "noDataFound.variants.notFound" },
+  // `info`, not `warning`: nothing failed and nothing is at risk, the content simply is not part of
+  // this profile's access. An alert colour would read as "something broke" for a normal state.
+  permission: { icon: "lock", tone: "info", titleKey: "noDataFound.variants.permission" },
+  waiting: { icon: "ads_click", tone: "info", titleKey: "noDataFound.variants.waiting" },
+  success: { icon: "task_alt", tone: "success", titleKey: "noDataFound.variants.success" },
+  offline: { icon: "cloud_off", tone: "neutral", titleKey: "noDataFound.variants.offline" }
+};
+const NO_DATA_FOUND_TONES = {
+  neutral: {
+    aura: "bg-foreground-faint/40",
+    halo: "border-border-emphasis",
+    tile: "border-border from-surface to-muted",
+    icon: "text-foreground-subtle",
+    accent: "bg-foreground-faint"
+  },
+  purple: {
+    aura: "bg-brand-hover/30",
+    halo: "border-brand-border",
+    tile: "border-brand-border from-surface to-brand-soft",
+    icon: "text-brand-emphasis",
+    accent: "bg-brand-hover"
+  },
+  success: {
+    aura: "bg-success/30",
+    halo: "border-success-border",
+    tile: "border-success-border from-surface to-success-soft",
+    icon: "text-success-emphasis",
+    accent: "bg-success"
+  },
+  warning: {
+    aura: "bg-warning/30",
+    halo: "border-warning-border",
+    tile: "border-warning-border from-surface to-warning-soft",
+    icon: "text-warning-emphasis",
+    accent: "bg-warning"
+  },
+  danger: {
+    aura: "bg-danger/30",
+    halo: "border-danger-border",
+    tile: "border-danger-border from-surface to-danger-soft",
+    icon: "text-danger-emphasis",
+    accent: "bg-danger-soft"
+  },
+  info: {
+    aura: "bg-info/30",
+    halo: "border-info-border",
+    tile: "border-info-border from-surface to-info-soft",
+    icon: "text-info-emphasis",
+    accent: "bg-info"
+  }
+};
+const NO_DATA_FOUND_SIZES = {
+  sm: {
+    root: "gap-y-2 px-4 py-6",
+    visual: "size-16",
+    tile: "size-10 rounded-xl text-[1.125rem]",
+    aura: "size-14",
+    halo: "size-12",
+    titleClass: "text-sm",
+    descriptionClass: "max-w-xs text-xs",
+    actions: "mt-1",
+    hasTexture: false
+  },
+  md: {
+    root: "gap-y-2.5 px-6 py-9 @[26rem]:gap-y-3 @[26rem]:py-12",
+    visual: "size-24 @[26rem]:size-28",
+    tile: "size-14 rounded-2xl text-[1.5rem] @[26rem]:size-16 @[26rem]:text-[1.75rem]",
+    aura: "size-20 @[26rem]:size-24",
+    halo: "size-16 @[26rem]:size-20",
+    titleClass: "text-[0.9375rem] @[26rem]:text-base",
+    descriptionClass: "max-w-sm text-xs @[26rem]:text-sm",
+    actions: "mt-1.5 @[26rem]:mt-2",
+    hasTexture: true
+  },
+  lg: {
+    root: "gap-y-3 px-6 py-12 @[30rem]:gap-y-4 @[30rem]:py-16",
+    visual: "size-32 @[30rem]:size-36",
+    tile: "size-16 rounded-2xl text-[1.75rem] @[30rem]:size-20 @[30rem]:rounded-[1.5rem] @[30rem]:text-[2.25rem]",
+    aura: "size-24 @[30rem]:size-32",
+    halo: "size-20 @[30rem]:size-24",
+    titleClass: "text-lg @[30rem]:text-xl",
+    descriptionClass: "max-w-md text-sm @[30rem]:text-base",
+    actions: "mt-2 @[30rem]:mt-3",
+    hasTexture: true
+  }
+};
+export {
+  NO_DATA_FOUND_SIZES,
+  NO_DATA_FOUND_TONES,
+  NO_DATA_FOUND_VARIANTS
+};
+//# sourceMappingURL=noDataFoundPresets.js.map

package/dist/components/UI/NoDataFound/noDataFoundPresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noDataFoundPresets.js","sources":["../../../../src/components/UI/NoDataFound/noDataFoundPresets.ts"],"sourcesContent":["import type { SymbolCodepoints } from '../MaterialSymbol';\n\nexport type TNoDataFoundVariant =\n  | 'empty'\n  | 'first-access'\n  | 'search'\n  | 'filtered'\n  | 'error'\n  | 'not-found'\n  | 'permission'\n  | 'waiting'\n  | 'success'\n  | 'offline';\n\nexport type TNoDataFoundTone = 'neutral' | 'purple' | 'success' | 'warning' | 'danger' | 'info';\n\nexport type TNoDataFoundSize = 'inline' | 'sm' | 'md' | 'lg';\n\ninterface INoDataFoundVariantPreset {\n  icon: SymbolCodepoints;\n  tone: TNoDataFoundTone;\n  titleKey: string;\n}\n\nexport const NO_DATA_FOUND_VARIANTS: Record<TNoDataFoundVariant, INoDataFoundVariantPreset> = {\n  empty: { icon: 'inbox', tone: 'purple', titleKey: 'noDataFound.variants.empty' },\n  'first-access': { icon: 'auto_awesome', tone: 'purple', titleKey: 'noDataFound.variants.firstAccess' },\n  search: { icon: 'search_off', tone: 'neutral', titleKey: 'noDataFound.variants.search' },\n  filtered: { icon: 'filter_alt_off', tone: 'neutral', titleKey: 'noDataFound.variants.filtered' },\n  error: { icon: 'error', tone: 'danger', titleKey: 'noDataFound.variants.error' },\n  'not-found': { icon: 'frame_inspect', tone: 'neutral', titleKey: 'noDataFound.variants.notFound' },\n  // `info`, not `warning`: nothing failed and nothing is at risk, the content simply is not part of\n  // this profile's access. An alert colour would read as \"something broke\" for a normal state.\n  permission: { icon: 'lock', tone: 'info', titleKey: 'noDataFound.variants.permission' },\n  waiting: { icon: 'ads_click', tone: 'info', titleKey: 'noDataFound.variants.waiting' },\n  success: { icon: 'task_alt', tone: 'success', titleKey: 'noDataFound.variants.success' },\n  offline: { icon: 'cloud_off', tone: 'neutral', titleKey: 'noDataFound.variants.offline' },\n};\n\ninterface INoDataFoundToneClasses {\n  aura: string;\n  halo: string;\n  tile: string;\n  icon: string;\n  accent: string;\n}\n\nexport const NO_DATA_FOUND_TONES: Record<TNoDataFoundTone, INoDataFoundToneClasses> = {\n  neutral: {\n    aura: 'bg-foreground-faint/40',\n    halo: 'border-border-emphasis',\n    tile: 'border-border from-surface to-muted',\n    icon: 'text-foreground-subtle',\n    accent: 'bg-foreground-faint',\n  },\n  purple: {\n    aura: 'bg-brand-hover/30',\n    halo: 'border-brand-border',\n    tile: 'border-brand-border from-surface to-brand-soft',\n    icon: 'text-brand-emphasis',\n    accent: 'bg-brand-hover',\n  },\n  success: {\n    aura: 'bg-success/30',\n    halo: 'border-success-border',\n    tile: 'border-success-border from-surface to-success-soft',\n    icon: 'text-success-emphasis',\n    accent: 'bg-success',\n  },\n  warning: {\n    aura: 'bg-warning/30',\n    halo: 'border-warning-border',\n    tile: 'border-warning-border from-surface to-warning-soft',\n    icon: 'text-warning-emphasis',\n    accent: 'bg-warning',\n  },\n  danger: {\n    aura: 'bg-danger/30',\n    halo: 'border-danger-border',\n    tile: 'border-danger-border from-surface to-danger-soft',\n    icon: 'text-danger-emphasis',\n    accent: 'bg-danger-soft',\n  },\n  info: {\n    aura: 'bg-info/30',\n    halo: 'border-info-border',\n    tile: 'border-info-border from-surface to-info-soft',\n    icon: 'text-info-emphasis',\n    accent: 'bg-info',\n  },\n};\n\ninterface INoDataFoundSizeClasses {\n  root: string;\n  visual: string;\n  tile: string;\n  aura: string;\n  halo: string;\n  titleClass: string;\n  descriptionClass: string;\n  actions: string;\n  hasTexture: boolean;\n}\n\nexport const NO_DATA_FOUND_SIZES: Record<Exclude<TNoDataFoundSize, 'inline'>, INoDataFoundSizeClasses> = {\n  sm: {\n    root: 'gap-y-2 px-4 py-6',\n    visual: 'size-16',\n    tile: 'size-10 rounded-xl text-[1.125rem]',\n    aura: 'size-14',\n    halo: 'size-12',\n    titleClass: 'text-sm',\n    descriptionClass: 'max-w-xs text-xs',\n    actions: 'mt-1',\n    hasTexture: false,\n  },\n  md: {\n    root: 'gap-y-2.5 px-6 py-9 @[26rem]:gap-y-3 @[26rem]:py-12',\n    visual: 'size-24 @[26rem]:size-28',\n    tile: 'size-14 rounded-2xl text-[1.5rem] @[26rem]:size-16 @[26rem]:text-[1.75rem]',\n    aura: 'size-20 @[26rem]:size-24',\n    halo: 'size-16 @[26rem]:size-20',\n    titleClass: 'text-[0.9375rem] @[26rem]:text-base',\n    descriptionClass: 'max-w-sm text-xs @[26rem]:text-sm',\n    actions: 'mt-1.5 @[26rem]:mt-2',\n    hasTexture: true,\n  },\n  lg: {\n    root: 'gap-y-3 px-6 py-12 @[30rem]:gap-y-4 @[30rem]:py-16',\n    visual: 'size-32 @[30rem]:size-36',\n    tile: 'size-16 rounded-2xl text-[1.75rem] @[30rem]:size-20 @[30rem]:rounded-[1.5rem] @[30rem]:text-[2.25rem]',\n    aura: 'size-24 @[30rem]:size-32',\n    halo: 'size-20 @[30rem]:size-24',\n    titleClass: 'text-lg @[30rem]:text-xl',\n    descriptionClass: 'max-w-md text-sm @[30rem]:text-base',\n    actions: 'mt-2 @[30rem]:mt-3',\n    hasTexture: true,\n  },\n};\n"],"names":[],"mappings":"AAwBO,MAAM,yBAAiF;AAAA,EAC5F,OAAO,EAAE,MAAM,SAAS,MAAM,UAAU,UAAU,6BAAA;AAAA,EAClD,gBAAgB,EAAE,MAAM,gBAAgB,MAAM,UAAU,UAAU,mCAAA;AAAA,EAClE,QAAQ,EAAE,MAAM,cAAc,MAAM,WAAW,UAAU,8BAAA;AAAA,EACzD,UAAU,EAAE,MAAM,kBAAkB,MAAM,WAAW,UAAU,gCAAA;AAAA,EAC/D,OAAO,EAAE,MAAM,SAAS,MAAM,UAAU,UAAU,6BAAA;AAAA,EAClD,aAAa,EAAE,MAAM,iBAAiB,MAAM,WAAW,UAAU,gCAAA;AAAA;AAAA;AAAA,EAGjE,YAAY,EAAE,MAAM,QAAQ,MAAM,QAAQ,UAAU,kCAAA;AAAA,EACpD,SAAS,EAAE,MAAM,aAAa,MAAM,QAAQ,UAAU,+BAAA;AAAA,EACtD,SAAS,EAAE,MAAM,YAAY,MAAM,WAAW,UAAU,+BAAA;AAAA,EACxD,SAAS,EAAE,MAAM,aAAa,MAAM,WAAW,UAAU,+BAAA;AAC3D;AAUO,MAAM,sBAAyE;AAAA,EACpF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAEZ;AAcO,MAAM,sBAA4F;AAAA,EACvG,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAEhB;"}

package/dist/components/UI/ReferenceCard.d.ts

@@ -0,0 +1,16 @@
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+import * as React from 'react';
+interface IReferenceCardProps {
+    imageSrc: string | undefined;
+    itsClickable?: boolean;
+    useDefaultSize?: boolean;
+    className?: string;
+    label?: string;
+    labelBgColor?: string;
+    labelColor?: string;
+    labelIcon?: SymbolCodepoints;
+    onClickHook?: () => void;
+    children?: React.ReactNode;
+}
+declare const ReferenceCard: React.FC<IReferenceCardProps>;
+export default ReferenceCard;

package/dist/components/UI/ReferenceCard.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledImage from "../Form/ControlledImage/index.js";
+import OutlinedChip from "./Chips/OutlinedChip.js";
+import CustomCard from "./CustomCard.js";
+const ReferenceCard = ({
+  imageSrc,
+  useDefaultSize = true,
+  itsClickable = true,
+  className,
+  label,
+  labelBgColor,
+  labelColor = "text-white",
+  labelIcon,
+  onClickHook,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(
+    CustomCard,
+    {
+      itsClickable,
+      className: classNames("relative flex flex-col border-2", {
+        "scale-95 hover:scale-100": itsClickable,
+        "min-h-[calc(13rem*1.67)] w-48": useDefaultSize,
+        "cursor-pointer": !!onClickHook,
+        className
+      }),
+      onClickHook,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          OutlinedChip,
+          {
+            label,
+            preserveLabelCase: true,
+            chipIcon: labelIcon,
+            chipIconSize: 20,
+            size: "sm",
+            className: classNames("absolute right-2 top-2", labelBgColor, labelColor)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ControlledImage,
+          {
+            src: imageSrc,
+            className: classNames("rounded-lg object-cover", {
+              "h-48": useDefaultSize,
+              "h-32": !useDefaultSize
+            })
+          }
+        ),
+        children && /* @__PURE__ */ jsx(Fragment, { children })
+      ]
+    }
+  );
+};
+export {
+  ReferenceCard as default
+};
+//# sourceMappingURL=ReferenceCard.js.map

package/dist/components/UI/ReferenceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceCard.js","sources":["../../../src/components/UI/ReferenceCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport ControlledImage from '../Form/ControlledImage';\nimport { SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport OutlinedChip from './Chips/OutlinedChip';\nimport CustomCard from './CustomCard';\ninterface IReferenceCardProps {\n  imageSrc: string | undefined;\n  itsClickable?: boolean;\n  useDefaultSize?: boolean;\n  className?: string;\n  label?: string;\n  labelBgColor?: string;\n  labelColor?: string;\n  labelIcon?: SymbolCodepoints;\n  onClickHook?: () => void;\n  children?: React.ReactNode;\n}\n\nconst ReferenceCard: React.FC<IReferenceCardProps> = ({\n  imageSrc,\n  useDefaultSize = true,\n  itsClickable = true,\n  className,\n  label,\n  labelBgColor,\n  labelColor = 'text-white',\n  labelIcon,\n  onClickHook,\n  children,\n}) => {\n  return (\n    <CustomCard\n      itsClickable={itsClickable}\n      className={classNames('relative flex flex-col border-2', {\n        'scale-95 hover:scale-100': itsClickable,\n        'min-h-[calc(13rem*1.67)] w-48': useDefaultSize,\n        'cursor-pointer': !!onClickHook,\n        className,\n      })}\n      onClickHook={onClickHook}\n    >\n      {label && (\n        <OutlinedChip\n          label={label}\n          preserveLabelCase\n          chipIcon={labelIcon}\n          chipIconSize={20}\n          size=\"sm\"\n          className={classNames('absolute right-2 top-2', labelBgColor, labelColor)}\n        />\n      )}\n\n      <ControlledImage\n        src={imageSrc}\n        // className=\"h-44 rounded-lg object-cover object-top\"\n        className={classNames('rounded-lg object-cover', {\n          'h-48': useDefaultSize,\n          'h-32': !useDefaultSize,\n        })}\n      />\n\n      {children && <>{children}</>}\n    </CustomCard>\n  );\n};\n\nexport default ReferenceCard;\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,gBAA+C,CAAC;AAAA,EACpD;AAAA,EACA,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,mCAAmC;AAAA,QACvD,4BAA4B;AAAA,QAC5B,iCAAiC;AAAA,QACjC,kBAAkB,CAAC,CAAC;AAAA,QACpB;AAAA,MAAA,CACD;AAAA,MACD;AAAA,MAEC,UAAA;AAAA,QAAA,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,mBAAiB;AAAA,YACjB,UAAU;AAAA,YACV,cAAc;AAAA,YACd,MAAK;AAAA,YACL,WAAW,WAAW,0BAA0B,cAAc,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAI5E;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YAEL,WAAW,WAAW,2BAA2B;AAAA,cAC/C,QAAQ;AAAA,cACR,QAAQ,CAAC;AAAA,YAAA,CACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,4CAAe,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/B;"}

package/dist/components/UI/RichTextContent.d.ts

@@ -0,0 +1,14 @@
+interface IRichTextContentProps {
+    html?: string;
+    className?: string;
+    /**
+     * Reads the value as legacy plain text: real line breaks, no markup. Opt in per surface with
+     * `isPlainTextBody`, never by default: a body whose only markup is a `<user>` mention would
+     * otherwise render its tags as visible text.
+     */
+    plainText?: boolean;
+}
+/** The typography of a rich text body, shared by every surface that renders one. */
+export declare const RICH_TEXT_CONTENT_CLASS: string;
+declare const RichTextContent: React.FC<IRichTextContentProps>;
+export default RichTextContent;

package/dist/components/UI/RichTextContent.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { sanitizeRichText } from "../../helpers/richText.js";
+const RICH_TEXT_CONTENT_CLASS = classNames(
+  "break-words text-sm leading-relaxed",
+  "[&_a]:text-brand-emphasis [&_a]:underline",
+  "[&_a.rt-file]:text-foreground-muted [&_a.rt-file]:no-underline",
+  "[&_a.rt-image-link]:no-underline",
+  "[&_ol]:ml-4 [&_ol]:list-decimal [&_ul]:ml-4 [&_ul]:list-disc",
+  "[&_blockquote]:border-l-2 [&_blockquote]:border-brand-border [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-foreground-subtle",
+  "[&_user]:whitespace-nowrap [&_user]:rounded [&_user]:bg-brand-soft [&_user]:px-1 [&_user]:font-medium [&_user]:text-brand-emphasis"
+);
+const RichTextContent = ({ html, className, plainText = false }) => {
+  if (plainText) {
+    return /* @__PURE__ */ jsx("div", { className: mergeClasses(RICH_TEXT_CONTENT_CLASS, "whitespace-pre-line", className), children: html });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClasses(RICH_TEXT_CONTENT_CLASS, className),
+      dangerouslySetInnerHTML: { __html: sanitizeRichText(html) }
+    }
+  );
+};
+export {
+  RICH_TEXT_CONTENT_CLASS,
+  RichTextContent as default
+};
+//# sourceMappingURL=RichTextContent.js.map

package/dist/components/UI/RichTextContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextContent.js","sources":["../../../src/components/UI/RichTextContent.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { sanitizeRichText } from '@/helpers/richText';\n\ninterface IRichTextContentProps {\n  html?: string;\n  className?: string;\n  /**\n   * Reads the value as legacy plain text: real line breaks, no markup. Opt in per surface with\n   * `isPlainTextBody`, never by default: a body whose only markup is a `<user>` mention would\n   * otherwise render its tags as visible text.\n   */\n  plainText?: boolean;\n}\n\n/** The typography of a rich text body, shared by every surface that renders one. */\nexport const RICH_TEXT_CONTENT_CLASS = classNames(\n  'break-words text-sm leading-relaxed',\n  '[&_a]:text-brand-emphasis [&_a]:underline',\n  '[&_a.rt-file]:text-foreground-muted [&_a.rt-file]:no-underline',\n  '[&_a.rt-image-link]:no-underline',\n  '[&_ol]:ml-4 [&_ol]:list-decimal [&_ul]:ml-4 [&_ul]:list-disc',\n  '[&_blockquote]:border-l-2 [&_blockquote]:border-brand-border [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-foreground-subtle',\n  '[&_user]:whitespace-nowrap [&_user]:rounded [&_user]:bg-brand-soft [&_user]:px-1 [&_user]:font-medium [&_user]:text-brand-emphasis',\n);\n\nconst RichTextContent: React.FC<IRichTextContentProps> = ({ html, className, plainText = false }) => {\n  if (plainText) {\n    return <div className={mergeClasses(RICH_TEXT_CONTENT_CLASS, 'whitespace-pre-line', className)}>{html}</div>;\n  }\n\n  return (\n    <div\n      className={mergeClasses(RICH_TEXT_CONTENT_CLASS, className)}\n      dangerouslySetInnerHTML={{ __html: sanitizeRichText(html) }}\n    />\n  );\n};\n\nexport default RichTextContent;\n"],"names":[],"mappings":";;;;AAiBO,MAAM,0BAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,kBAAmD,CAAC,EAAE,MAAM,WAAW,YAAY,YAAY;AACnG,MAAI,WAAW;AACb,WAAO,oBAAC,SAAI,WAAW,aAAa,yBAAyB,uBAAuB,SAAS,GAAI,UAAA,KAAA,CAAK;AAAA,EACxG;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,aAAa,yBAAyB,SAAS;AAAA,MAC1D,yBAAyB,EAAE,QAAQ,iBAAiB,IAAI,EAAA;AAAA,IAAE;AAAA,EAAA;AAGhE;"}

package/dist/components/UI/SkeletonLoading.d.ts

@@ -0,0 +1,9 @@
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+interface ISkeletonLoadingProps {
+    className?: string;
+    style?: React.CSSProperties;
+    type?: 'line' | 'circle';
+    icon?: SymbolCodepoints;
+}
+declare const SkeletonLoading: React.FC<ISkeletonLoadingProps>;
+export default SkeletonLoading;

package/dist/components/UI/SkeletonLoading.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const SkeletonLoading = ({ className, type = "line", style, icon }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames("h-2 w-full animate-pulse rounded-full bg-border-emphasis", className, {
+        "!size-5": type === "circle",
+        "flex items-center justify-center": icon
+      }),
+      style,
+      children: icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon, color: "rgb(var(--color-foreground-subtle))", size: 70 })
+    }
+  );
+};
+export {
+  SkeletonLoading as default
+};
+//# sourceMappingURL=SkeletonLoading.js.map

package/dist/components/UI/SkeletonLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoading.js","sources":["../../../src/components/UI/SkeletonLoading.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\ninterface ISkeletonLoadingProps {\n  className?: string;\n  style?: React.CSSProperties;\n  type?: 'line' | 'circle';\n  icon?: SymbolCodepoints;\n}\n\nconst SkeletonLoading: React.FC<ISkeletonLoadingProps> = ({ className, type = 'line', style, icon }) => {\n  return (\n    <div\n      className={classNames('h-2 w-full animate-pulse rounded-full bg-border-emphasis', className, {\n        '!size-5': type === 'circle',\n        'flex items-center justify-center': icon,\n      })}\n      style={style}\n    >\n      {icon && <MaterialSymbol icon={icon} color=\"rgb(var(--color-foreground-subtle))\" size={70} />}\n    </div>\n  );\n};\n\nexport default SkeletonLoading;\n"],"names":[],"mappings":";;;AAWA,MAAM,kBAAmD,CAAC,EAAE,WAAW,OAAO,QAAQ,OAAO,WAAW;AACtG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,4DAA4D,WAAW;AAAA,QAC3F,WAAW,SAAS;AAAA,QACpB,oCAAoC;AAAA,MAAA,CACrC;AAAA,MACD;AAAA,MAEC,kBAAQ,oBAAC,gBAAA,EAAe,MAAY,OAAM,uCAAsC,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGjG;"}

package/dist/components/UI/ThreeDots.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { IControlledMenuItem, TMenuPlacement } from './ControlledMenu';
+interface IThreeDotsProps {
+    children?: React.ReactNode;
+    items?: Array<IControlledMenuItem>;
+    tooltip?: string;
+    placement?: TMenuPlacement;
+    className?: string;
+}
+declare const ThreeDots: React.FC<IThreeDotsProps>;
+export default ThreeDots;

package/dist/components/UI/ThreeDots.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledMenu from "./ControlledMenu.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const ThreeDots = ({ children, items, tooltip, placement, className }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(
+    ControlledMenu,
+    {
+      trigger: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "more_vert", size: 16, "aria-label": tooltip ?? t("actions.moreOptions") }),
+      items,
+      triggerTooltip: tooltip,
+      placement,
+      listClassName: className,
+      children
+    }
+  );
+};
+export {
+  ThreeDots as default
+};
+//# sourceMappingURL=ThreeDots.js.map

package/dist/components/UI/ThreeDots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeDots.js","sources":["../../../src/components/UI/ThreeDots.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledMenu, { IControlledMenuItem, TMenuPlacement } from '@/components/UI/ControlledMenu';\n\nimport { MaterialSymbol } from './MaterialSymbol';\n\ninterface IThreeDotsProps {\n  children?: React.ReactNode;\n  items?: Array<IControlledMenuItem>;\n  tooltip?: string;\n  placement?: TMenuPlacement;\n  className?: string;\n}\n\nconst ThreeDots: React.FC<IThreeDotsProps> = ({ children, items, tooltip, placement, className }) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledMenu\n      trigger={<MaterialSymbol icon=\"more_vert\" size={16} aria-label={tooltip ?? t('actions.moreOptions')} />}\n      items={items}\n      triggerTooltip={tooltip}\n      placement={placement}\n      listClassName={className}\n    >\n      {children}\n    </ControlledMenu>\n  );\n};\n\nexport default ThreeDots;\n"],"names":[],"mappings":";;;;AAeA,MAAM,YAAuC,CAAC,EAAE,UAAU,OAAO,SAAS,WAAW,gBAAgB;AACnG,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,oBAAC,gBAAA,EAAe,MAAK,aAAY,MAAM,IAAI,cAAY,WAAW,EAAE,qBAAqB,EAAA,CAAG;AAAA,MACrG;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,MAEd;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/UI/Toast.d.ts

@@ -0,0 +1,16 @@
+import { Theme, ToastPosition, TypeOptions } from 'react-toastify';
+interface IToastProps {
+    message: string;
+    type: TypeOptions;
+    onClose: () => void;
+    onAction?: (value: boolean) => void;
+    useAction?: boolean;
+    /** Rótulo do botão de ação. Sem ele o botão usa "Saiba mais". */
+    actionLabel?: string;
+    timeout?: number;
+    position?: ToastPosition;
+    theme?: Theme;
+    label?: string;
+}
+declare const Toast: React.FC<IToastProps>;
+export default Toast;