@umodeapporg/ui 0.1.0

package/dist/components/UI/Chips/OutlinedChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinedChip.js","sources":["../../../../src/components/UI/Chips/OutlinedChip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport {\n  ControlledMenuHandler,\n  ControlledMenuItem,\n  ControlledMenuList,\n  ControlledMenuRoot,\n} from '@/components/UI/ControlledMenu';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { IFilterOption } from '../../../interfaces/IFilterOption';\nimport { MaterialSymbol, SymbolCodepoints } from '../../UI/MaterialSymbol';\n\nimport { resolveChipDotClass, resolveChipToneClass, TChipSize, TChipTone, TChipVariant } from './chipTones';\n\nconst CHIP_PADDING_CLASS: Record<TChipSize, string> = {\n  xs: 'px-2.5 py-0.5',\n  sm: 'px-2.5 py-0.5',\n  md: 'px-3 py-1',\n};\n\nconst CHIP_LABEL_SIZE_CLASS: Record<TChipSize, string> = {\n  xs: 'text-xxs',\n  sm: 'text-xs',\n  md: 'text-sm',\n};\n\nexport interface IOutlinedChipDropdownOption extends IFilterOption {\n  /** Cabeçalho de grupo não selecionável, renderizado acima dos filhos recuados. */\n  isGroupHeading?: boolean;\n  /** Recuo de filho sob o cabeçalho do grupo. */\n  isGroupChild?: boolean;\n}\n\ninterface IOutlinedChipProps {\n  label?: string;\n  count?: number;\n  tone?: TChipTone;\n  variant?: TChipVariant;\n  size?: TChipSize;\n  dot?: boolean;\n  dotColor?: string;\n  className?: string;\n  wrapperClassName?: string;\n  labelClassName?: string;\n  // Por padrão a label passa por capitalizeAllLetters. Use true quando o texto for um\n  // identificador literal (nome de tabela, coluna, chave) cujo caixa não pode ser alterado.\n  preserveLabelCase?: boolean;\n  truncate?: boolean;\n  backgroundColor?: string;\n  chipIcon?: SymbolCodepoints;\n  chipIconSize?: number;\n  trailingIcon?: SymbolCodepoints;\n  loading?: boolean;\n  tooltip?: string;\n  dotClassName?: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n  useAsDropdown?: boolean;\n  dropdownOptions?: Array<IOutlinedChipDropdownOption>;\n  dropdownCallback?: (option: IFilterOption) => void;\n  dropdownSelectedValue?: string;\n  dropdownMenuClassName?: string;\n  canClose?: boolean;\n  onClose?: (event: React.MouseEvent) => void;\n}\n\nconst OutlinedChip: React.FC<IOutlinedChipProps> = ({\n  label,\n  count,\n  tone,\n  variant = 'soft',\n  size = 'xs',\n  dot = false,\n  dotColor,\n  className,\n  wrapperClassName,\n  labelClassName,\n  preserveLabelCase = false,\n  truncate = false,\n  backgroundColor,\n  chipIcon,\n  chipIconSize = 16,\n  trailingIcon,\n  loading = false,\n  tooltip,\n  dotClassName,\n  onClick,\n  disabled = false,\n  useAsDropdown = false,\n  dropdownOptions = [],\n  dropdownCallback,\n  dropdownSelectedValue,\n  dropdownMenuClassName,\n  canClose = false,\n  onClose,\n}) => {\n  const { t } = useTranslation('ui');\n  const [open, setOpen] = useState(false);\n\n  const hasCount = count !== undefined && count !== null;\n  if (!label && !hasCount) return null;\n\n  const isCountOnly = hasCount && !label;\n  const displayLabel = isCountOnly ? String(count) : preserveLabelCase ? label : capitalizeAllLetters(label ?? '');\n\n  const toneClass = tone ? resolveChipToneClass(tone, variant) : undefined;\n  const resolvedDotClass = dotClassName ?? (dot && tone ? resolveChipDotClass(tone) : undefined);\n  const inlineStyle = backgroundColor ? { backgroundColor } : undefined;\n\n  const leadingDot =\n    resolvedDotClass || dotColor ? (\n      <span\n        className={classNames('size-1.5 shrink-0 rounded-full', resolvedDotClass)}\n        style={dotColor ? { backgroundColor: dotColor } : undefined}\n      />\n    ) : null;\n\n  const leadingIcon = loading ? (\n    <LoadingSpinner size={4} className=\"shrink-0\" />\n  ) : chipIcon ? (\n    <MaterialSymbol icon={chipIcon} size={chipIconSize} />\n  ) : null;\n\n  if (useAsDropdown && !disabled) {\n    const handler = (\n      <ControlledMenuHandler>\n        <div\n          onClick={(event: React.MouseEvent) => event.stopPropagation()}\n          className={twMerge(\n            classNames(\n              'flex cursor-pointer items-center justify-center gap-x-1 truncate rounded-full font-semibold transition-opacity hover:opacity-80',\n              CHIP_PADDING_CLASS[size],\n              CHIP_LABEL_SIZE_CLASS[size],\n              toneClass,\n            ),\n            className,\n          )}\n          style={inlineStyle}\n        >\n          {leadingDot}\n          {leadingIcon}\n          {displayLabel}\n          <MaterialSymbol icon=\"arrow_drop_down\" size={16} />\n        </div>\n      </ControlledMenuHandler>\n    );\n\n    return (\n      <ControlledMenuRoot open={open} handler={setOpen} placement=\"bottom-start\">\n        {tooltip ? <ControlledTooltip content={tooltip}>{handler}</ControlledTooltip> : handler}\n\n        <ControlledMenuList\n          className={twMerge('zIndexMax max-h-72 min-w-[12rem] overflow-y-auto', dropdownMenuClassName)}\n          onClick={(event: React.MouseEvent<HTMLDivElement>) => {\n            event.stopPropagation();\n          }}\n        >\n          {(dropdownOptions ?? []).map((option) => {\n            if (option.isGroupHeading) {\n              return (\n                <div\n                  key={option.value}\n                  className=\"select-none px-3 pb-1 pt-2 text-xs font-semibold text-foreground-muted\"\n                >\n                  {preserveLabelCase ? option.label : capitalizeAllLetters(option.label)}\n                </div>\n              );\n            }\n\n            const menuItem = (\n              <ControlledMenuItem\n                disabled={option.disabled}\n                onClick={() => {\n                  dropdownCallback?.(option);\n                  setOpen(false);\n                }}\n                className={classNames('text-sm text-foreground', {\n                  'bg-muted-active font-semibold hover:bg-muted-active focus:bg-muted-active':\n                    dropdownSelectedValue === option.value,\n                  'pl-7': option.isGroupChild,\n                })}\n              >\n                {preserveLabelCase ? option.label : capitalizeAllLetters(option.label)}\n              </ControlledMenuItem>\n            );\n\n            // A tooltip explains WHY an option is disabled; the wrapper div exists because the\n            // menu item does not forward its ref (the tooltip clones its child).\n            return option.tooltip ? (\n              <ControlledTooltip key={option.value} content={option.tooltip} className=\"z-[9999] max-w-64\">\n                <div>{menuItem}</div>\n              </ControlledTooltip>\n            ) : (\n              <React.Fragment key={option.value}>{menuItem}</React.Fragment>\n            );\n          })}\n        </ControlledMenuList>\n      </ControlledMenuRoot>\n    );\n  }\n\n  const containerClass = twMerge(\n    classNames(\n      'flex items-center gap-x-1 rounded-full text-center',\n      CHIP_PADDING_CLASS[size],\n      isCountOnly ? 'min-w-5 justify-center' : 'min-w-14',\n      toneClass,\n      {\n        'justify-between': canClose && onClose,\n        'justify-center': !canClose && !onClose && !isCountOnly,\n        'cursor-default opacity-70': disabled,\n        'transition-opacity hover:opacity-80': onClick && !disabled,\n      },\n    ),\n    className,\n  );\n\n  const chipInner = (\n    <>\n      {leadingDot}\n      {leadingIcon}\n      <span className={twMerge(classNames('font-semibold', CHIP_LABEL_SIZE_CLASS[size], { truncate }), labelClassName)}>\n        {displayLabel}\n      </span>\n      {trailingIcon && <MaterialSymbol icon={trailingIcon} size={chipIconSize} />}\n      {canClose && onClose && (\n        <ControlledTooltip content={t('actions.remove')}>\n          <MaterialSymbol\n            icon=\"close\"\n            size={16}\n            onClick={(event: React.MouseEvent) => {\n              event.stopPropagation();\n              onClose(event);\n            }}\n          />\n        </ControlledTooltip>\n      )}\n    </>\n  );\n\n  const chip = onClick ? (\n    <ControlledButton\n      defaultHtmlButton\n      className={containerClass}\n      style={inlineStyle}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      {chipInner}\n    </ControlledButton>\n  ) : (\n    <div className={containerClass} style={inlineStyle}>\n      {chipInner}\n    </div>\n  );\n\n  if (!tooltip) return chip;\n\n  return (\n    <ControlledTooltip content={tooltip}>\n      <div className={twMerge('inline-flex', wrapperClassName)}>{chip}</div>\n    </ControlledTooltip>\n  );\n};\n\nexport default OutlinedChip;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Chips/StatusChip.d.ts

@@ -0,0 +1,8 @@
+interface IStatusChipProps {
+    className?: string;
+    useIcon?: boolean;
+    statusId: number;
+    statusName?: string;
+}
+declare const StatusChip: React.FC<IStatusChipProps>;
+export default StatusChip;

package/dist/components/UI/Chips/StatusChip.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import OutlinedChip from "./OutlinedChip.js";
+const STATUS_CONFIG = {
+  1: { tone: "neutral", icon: "schedule", labelKey: "states.notStarted" },
+  2: { tone: "success", icon: "check", labelKey: "states.onTime" },
+  3: { tone: "danger", icon: "alarm", labelKey: "states.overdue" },
+  4: { tone: "success", icon: "check", labelKey: "states.completed" },
+  5: { tone: "warning", icon: "running_with_errors", labelKey: "states.atRisk" }
+};
+const StatusChip = ({ statusId, className, useIcon = true, statusName = "" }) => {
+  const { t } = useTranslation("ui");
+  const config = STATUS_CONFIG[statusId];
+  const label = config ? t(config.labelKey) : "";
+  if (statusName) {
+    return /* @__PURE__ */ jsx(OutlinedChip, { label, tone: "success", size: "sm", className });
+  }
+  if (!config) return null;
+  return /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label,
+      tone: config.tone,
+      size: "sm",
+      chipIcon: useIcon ? config.icon : void 0,
+      className
+    }
+  );
+};
+export {
+  StatusChip as default
+};
+//# sourceMappingURL=StatusChip.js.map

package/dist/components/UI/Chips/StatusChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip.js","sources":["../../../../src/components/UI/Chips/StatusChip.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { TChipTone } from './chipTones';\nimport OutlinedChip from './OutlinedChip';\n\ninterface IStatusChipProps {\n  className?: string;\n  useIcon?: boolean;\n  statusId: number;\n  statusName?: string;\n}\n\ninterface IStatusConfig {\n  tone: TChipTone;\n  icon: SymbolCodepoints;\n  labelKey: string;\n}\n\nconst STATUS_CONFIG: Record<number, IStatusConfig> = {\n  1: { tone: 'neutral', icon: 'schedule', labelKey: 'states.notStarted' },\n  2: { tone: 'success', icon: 'check', labelKey: 'states.onTime' },\n  3: { tone: 'danger', icon: 'alarm', labelKey: 'states.overdue' },\n  4: { tone: 'success', icon: 'check', labelKey: 'states.completed' },\n  5: { tone: 'warning', icon: 'running_with_errors', labelKey: 'states.atRisk' },\n};\n\nconst StatusChip: React.FC<IStatusChipProps> = ({ statusId, className, useIcon = true, statusName = '' }) => {\n  const { t } = useTranslation('ui');\n  const config = STATUS_CONFIG[statusId];\n  const label = config ? t(config.labelKey) : '';\n\n  if (statusName) {\n    return <OutlinedChip label={label} tone=\"success\" size=\"sm\" className={className} />;\n  }\n\n  if (!config) return null;\n\n  return (\n    <OutlinedChip\n      label={label}\n      tone={config.tone}\n      size=\"sm\"\n      chipIcon={useIcon ? config.icon : undefined}\n      className={className}\n    />\n  );\n};\n\nexport default StatusChip;\n"],"names":[],"mappings":";;;AAoBA,MAAM,gBAA+C;AAAA,EACnD,GAAG,EAAE,MAAM,WAAW,MAAM,YAAY,UAAU,oBAAA;AAAA,EAClD,GAAG,EAAE,MAAM,WAAW,MAAM,SAAS,UAAU,gBAAA;AAAA,EAC/C,GAAG,EAAE,MAAM,UAAU,MAAM,SAAS,UAAU,iBAAA;AAAA,EAC9C,GAAG,EAAE,MAAM,WAAW,MAAM,SAAS,UAAU,mBAAA;AAAA,EAC/C,GAAG,EAAE,MAAM,WAAW,MAAM,uBAAuB,UAAU,gBAAA;AAC/D;AAEA,MAAM,aAAyC,CAAC,EAAE,UAAU,WAAW,UAAU,MAAM,aAAa,SAAS;AAC3G,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,QAAQ,SAAS,EAAE,OAAO,QAAQ,IAAI;AAE5C,MAAI,YAAY;AACd,+BAAQ,cAAA,EAAa,OAAc,MAAK,WAAU,MAAK,MAAK,WAAsB;AAAA,EACpF;AAEA,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,UAAU,UAAU,OAAO,OAAO;AAAA,MAClC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/UI/Chips/chipTones.d.ts

@@ -0,0 +1,6 @@
+export type TChipTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo';
+export type TChipVariant = 'soft' | 'outlined' | 'solid';
+export type TChipSize = 'xs' | 'sm' | 'md';
+export declare const CHIP_TONE_VALUES: Array<TChipTone>;
+export declare const resolveChipToneClass: (tone: TChipTone, variant?: TChipVariant) => string;
+export declare const resolveChipDotClass: (tone: TChipTone) => string;

package/dist/components/UI/Chips/chipTones.js

@@ -0,0 +1,53 @@
+const CHIP_TONES = {
+  neutral: {
+    soft: "bg-muted-hover text-foreground-muted",
+    outlined: "border border-border-emphasis bg-muted text-foreground-muted",
+    solid: "bg-foreground-subtle text-surface",
+    dot: "bg-foreground-faint"
+  },
+  success: {
+    soft: "bg-success-soft text-success-emphasis",
+    outlined: "border border-success-border bg-success-soft text-success-emphasis",
+    solid: "bg-success text-success-fg",
+    dot: "bg-success"
+  },
+  warning: {
+    soft: "bg-warning-soft text-warning-emphasis",
+    outlined: "border border-warning-border bg-warning-soft text-warning-emphasis",
+    solid: "bg-warning text-warning-fg",
+    dot: "bg-warning"
+  },
+  danger: {
+    soft: "bg-danger-soft text-danger-emphasis",
+    outlined: "border border-danger-border bg-danger-soft text-danger-emphasis",
+    solid: "bg-danger text-danger-fg",
+    dot: "bg-danger"
+  },
+  info: {
+    soft: "bg-info-soft text-info-emphasis",
+    outlined: "border border-info-border bg-info-soft text-info-emphasis",
+    solid: "bg-info text-info-fg",
+    dot: "bg-info"
+  },
+  purple: {
+    soft: "bg-brand-soft text-brand-emphasis",
+    outlined: "border border-brand-border bg-brand-soft text-brand-emphasis",
+    solid: "bg-brand text-brand-fg",
+    dot: "bg-brand"
+  },
+  indigo: {
+    soft: "bg-brand-soft text-brand-emphasis",
+    outlined: "border border-brand-border bg-brand-soft text-brand-emphasis",
+    solid: "bg-brand text-brand-fg",
+    dot: "bg-brand"
+  }
+};
+const CHIP_TONE_VALUES = Object.keys(CHIP_TONES);
+const resolveChipToneClass = (tone, variant = "soft") => CHIP_TONES[tone][variant];
+const resolveChipDotClass = (tone) => CHIP_TONES[tone].dot;
+export {
+  CHIP_TONE_VALUES,
+  resolveChipDotClass,
+  resolveChipToneClass
+};
+//# sourceMappingURL=chipTones.js.map

package/dist/components/UI/Chips/chipTones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipTones.js","sources":["../../../../src/components/UI/Chips/chipTones.ts"],"sourcesContent":["export type TChipTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo';\nexport type TChipVariant = 'soft' | 'outlined' | 'solid';\nexport type TChipSize = 'xs' | 'sm' | 'md';\n\ninterface IChipToneClasses {\n  soft: string;\n  outlined: string;\n  solid: string;\n  dot: string;\n}\n\nconst CHIP_TONES: Record<TChipTone, IChipToneClasses> = {\n  neutral: {\n    soft: 'bg-muted-hover text-foreground-muted',\n    outlined: 'border border-border-emphasis bg-muted text-foreground-muted',\n    solid: 'bg-foreground-subtle text-surface',\n    dot: 'bg-foreground-faint',\n  },\n  success: {\n    soft: 'bg-success-soft text-success-emphasis',\n    outlined: 'border border-success-border bg-success-soft text-success-emphasis',\n    solid: 'bg-success text-success-fg',\n    dot: 'bg-success',\n  },\n  warning: {\n    soft: 'bg-warning-soft text-warning-emphasis',\n    outlined: 'border border-warning-border bg-warning-soft text-warning-emphasis',\n    solid: 'bg-warning text-warning-fg',\n    dot: 'bg-warning',\n  },\n  danger: {\n    soft: 'bg-danger-soft text-danger-emphasis',\n    outlined: 'border border-danger-border bg-danger-soft text-danger-emphasis',\n    solid: 'bg-danger text-danger-fg',\n    dot: 'bg-danger',\n  },\n  info: {\n    soft: 'bg-info-soft text-info-emphasis',\n    outlined: 'border border-info-border bg-info-soft text-info-emphasis',\n    solid: 'bg-info text-info-fg',\n    dot: 'bg-info',\n  },\n  purple: {\n    soft: 'bg-brand-soft text-brand-emphasis',\n    outlined: 'border border-brand-border bg-brand-soft text-brand-emphasis',\n    solid: 'bg-brand text-brand-fg',\n    dot: 'bg-brand',\n  },\n  indigo: {\n    soft: 'bg-brand-soft text-brand-emphasis',\n    outlined: 'border border-brand-border bg-brand-soft text-brand-emphasis',\n    solid: 'bg-brand text-brand-fg',\n    dot: 'bg-brand',\n  },\n};\n\nexport const CHIP_TONE_VALUES = Object.keys(CHIP_TONES) as Array<TChipTone>;\n\nexport const resolveChipToneClass = (tone: TChipTone, variant: TChipVariant = 'soft'): string =>\n  CHIP_TONES[tone][variant];\n\nexport const resolveChipDotClass = (tone: TChipTone): string => CHIP_TONES[tone].dot;\n"],"names":[],"mappings":"AAWA,MAAM,aAAkD;AAAA,EACtD,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAEO,MAAM,mBAAmB,OAAO,KAAK,UAAU;AAE/C,MAAM,uBAAuB,CAAC,MAAiB,UAAwB,WAC5E,WAAW,IAAI,EAAE,OAAO;AAEnB,MAAM,sBAAsB,CAAC,SAA4B,WAAW,IAAI,EAAE;"}

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

@@ -0,0 +1,30 @@
+export type TColorSwatchSize = 'xs' | 'sm' | 'md' | 'lg';
+interface IColorSwatchProps {
+    /** Cor CSS já resolvida. Ausente é estado válido: a biblioteca aceita cor sem hex e sem RGB. */
+    cssColor?: string | null;
+    name?: string | null;
+    size?: TColorSwatchSize;
+    /** Substitui o tamanho do preset quando a medida é calculada (zoom do canvas, por exemplo). */
+    sizePx?: number;
+    /** Mostra o nome ao lado da bolinha, além do tooltip. */
+    showName?: boolean;
+    /** Área de hover invisível sobre uma bolinha já desenhada em outra camada. */
+    hitAreaOnly?: boolean;
+    /**
+     * Cada tooltip monta um floating-ui próprio. Numa lista longa (satélites do board, fileiras de
+     * cores), desligue e deixe UM tooltip no container: o custo cai de N instâncias para uma.
+     * Já vem desligado com `showName`, onde o nome está visível e o tooltip só repetiria.
+     */
+    tooltip?: boolean;
+    className?: string;
+    nameClassName?: string;
+}
+/**
+ * A ÚNICA bolinha de cor da plataforma.
+ *
+ * Cor sem código cadastrado não some nem vira um buraco na interface: vira cinza opaco e o nome
+ * carrega a identidade. Foi a divergência entre "esconde" e "pinta de cinza" que fez uma cor sem hex
+ * parecer bug de renderização.
+ */
+declare const ColorSwatch: React.FC<IColorSwatchProps>;
+export default ColorSwatch;

package/dist/components/UI/ColorSwatch.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import ControlledTooltip from "./ControlledTooltip.js";
+const SIZE_CLASS = {
+  xs: "size-2",
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const ColorSwatch = ({
+  cssColor,
+  name,
+  size = "sm",
+  sizePx,
+  showName = false,
+  hitAreaOnly = false,
+  tooltip,
+  className,
+  nameClassName
+}) => {
+  const { t } = useTranslation("ui");
+  const resolvedName = name?.trim();
+  const tooltipContent = [resolvedName, cssColor ? void 0 : t("colorSwatch.noCode")].filter(Boolean).join(" · ");
+  const dot = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: twMerge(
+        classNames(
+          "inline-block shrink-0 rounded-full border border-border",
+          sizePx === void 0 && SIZE_CLASS[size],
+          hitAreaOnly && "cursor-help border-transparent bg-transparent"
+        ),
+        className
+      ),
+      style: {
+        ...sizePx === void 0 ? void 0 : { width: sizePx, height: sizePx },
+        ...hitAreaOnly ? void 0 : { backgroundColor: cssColor ?? "rgb(var(--color-muted-active))" }
+      }
+    }
+  );
+  const content = showName ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+    dot,
+    /* @__PURE__ */ jsx("span", { className: classNames("truncate", nameClassName), children: resolvedName })
+  ] }) : dot;
+  if (!tooltipContent || !(tooltip ?? !showName)) return content;
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipContent, children: content });
+};
+export {
+  ColorSwatch as default
+};
+//# sourceMappingURL=ColorSwatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","sources":["../../../src/components/UI/ColorSwatch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nexport type TColorSwatchSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst SIZE_CLASS: Record<TColorSwatchSize, string> = {\n  xs: 'size-2',\n  sm: 'size-3',\n  md: 'size-4',\n  lg: 'size-5',\n};\n\ninterface IColorSwatchProps {\n  /** Cor CSS já resolvida. Ausente é estado válido: a biblioteca aceita cor sem hex e sem RGB. */\n  cssColor?: string | null;\n  name?: string | null;\n  size?: TColorSwatchSize;\n  /** Substitui o tamanho do preset quando a medida é calculada (zoom do canvas, por exemplo). */\n  sizePx?: number;\n  /** Mostra o nome ao lado da bolinha, além do tooltip. */\n  showName?: boolean;\n  /** Área de hover invisível sobre uma bolinha já desenhada em outra camada. */\n  hitAreaOnly?: boolean;\n  /**\n   * Cada tooltip monta um floating-ui próprio. Numa lista longa (satélites do board, fileiras de\n   * cores), desligue e deixe UM tooltip no container: o custo cai de N instâncias para uma.\n   * Já vem desligado com `showName`, onde o nome está visível e o tooltip só repetiria.\n   */\n  tooltip?: boolean;\n  className?: string;\n  nameClassName?: string;\n}\n\n/**\n * A ÚNICA bolinha de cor da plataforma.\n *\n * Cor sem código cadastrado não some nem vira um buraco na interface: vira cinza opaco e o nome\n * carrega a identidade. Foi a divergência entre \"esconde\" e \"pinta de cinza\" que fez uma cor sem hex\n * parecer bug de renderização.\n */\nconst ColorSwatch: React.FC<IColorSwatchProps> = ({\n  cssColor,\n  name,\n  size = 'sm',\n  sizePx,\n  showName = false,\n  hitAreaOnly = false,\n  tooltip,\n  className,\n  nameClassName,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const resolvedName = name?.trim();\n  const tooltipContent = [resolvedName, cssColor ? undefined : t('colorSwatch.noCode')].filter(Boolean).join(' · ');\n\n  const dot = (\n    <span\n      className={twMerge(\n        classNames(\n          'inline-block shrink-0 rounded-full border border-border',\n          sizePx === undefined && SIZE_CLASS[size],\n          hitAreaOnly && 'cursor-help border-transparent bg-transparent',\n        ),\n        className,\n      )}\n      style={{\n        ...(sizePx === undefined ? undefined : { width: sizePx, height: sizePx }),\n        ...(hitAreaOnly ? undefined : { backgroundColor: cssColor ?? 'rgb(var(--color-muted-active))' }),\n      }}\n    />\n  );\n\n  const content = showName ? (\n    <span className=\"flex min-w-0 items-center gap-1\">\n      {dot}\n      <span className={classNames('truncate', nameClassName)}>{resolvedName}</span>\n    </span>\n  ) : (\n    dot\n  );\n\n  if (!tooltipContent || !(tooltip ?? !showName)) return content;\n\n  return <ControlledTooltip content={tooltipContent}>{content}</ControlledTooltip>;\n};\n\nexport default ColorSwatch;\n"],"names":[],"mappings":";;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BA,MAAM,cAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,MAAM,KAAA;AAC3B,QAAM,iBAAiB,CAAC,cAAc,WAAW,SAAY,EAAE,oBAAoB,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK;AAEhH,QAAM,MACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,UACE;AAAA,UACA,WAAW,UAAa,WAAW,IAAI;AAAA,UACvC,eAAe;AAAA,QAAA;AAAA,QAEjB;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAI,WAAW,SAAY,SAAY,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,QAChE,GAAI,cAAc,SAAY,EAAE,iBAAiB,YAAY,iCAAA;AAAA,MAAiC;AAAA,IAChG;AAAA,EAAA;AAIJ,QAAM,UAAU,WACd,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,IAAA;AAAA,wBACA,QAAA,EAAK,WAAW,WAAW,YAAY,aAAa,GAAI,UAAA,aAAA,CAAa;AAAA,EAAA,EAAA,CACxE,IAEA;AAGF,MAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,UAAW,QAAO;AAEvD,SAAO,oBAAC,mBAAA,EAAkB,SAAS,gBAAiB,UAAA,SAAQ;AAC9D;"}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IColorsProps {
+    colors: Array<string> | undefined;
+    isSquare?: boolean;
+    className?: string;
+    label?: string;
+}
+/** Amostra de uma cor da biblioteca, com bandas quando a cor tem mais de um valor. */
+declare const Colors: React.FC<IColorsProps>;
+export default Colors;

package/dist/components/UI/Colors.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ColorSwatch from "./ColorSwatch.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+const Colors = ({ colors = [], isSquare = true, className = "", label }) => {
+  if (!colors || colors.length === 0) {
+    return /* @__PURE__ */ jsx(ColorSwatch, { name: label, className: classNames(isSquare && "rounded-md", className) });
+  }
+  const getColorLayout = () => {
+    const count = colors.length;
+    const widthPercentage = 100 / count;
+    return colors.map((colorItem, index) => /* @__PURE__ */ jsx(ControlledTooltip, { content: label ?? colorItem, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: colorItem,
+          width: `${widthPercentage}%`,
+          height: "100%"
+        }
+      }
+    ) }, colorItem + index));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        "flex overflow-hidden border border-border",
+        {
+          "rounded-md": isSquare,
+          "rounded-full": !isSquare
+        },
+        className
+      ),
+      children: getColorLayout()
+    }
+  );
+};
+export {
+  Colors as default
+};
+//# sourceMappingURL=Colors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.js","sources":["../../../src/components/UI/Colors.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport ColorSwatch from '@/components/UI/ColorSwatch';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\ninterface IColorsProps {\n  colors: Array<string> | undefined;\n  isSquare?: boolean;\n  className?: string;\n  label?: string;\n}\n\n/** Amostra de uma cor da biblioteca, com bandas quando a cor tem mais de um valor. */\nconst Colors: React.FC<IColorsProps> = ({ colors = [], isSquare = true, className = '', label }) => {\n  // Cor sem valor não some da tela: cai no cinza padrão da plataforma, com o nome no tooltip.\n  if (!colors || colors.length === 0) {\n    return <ColorSwatch name={label} className={classNames(isSquare && 'rounded-md', className)} />;\n  }\n\n  const getColorLayout = () => {\n    const count = colors.length;\n    const widthPercentage = 100 / count;\n\n    return colors.map((colorItem, index) => (\n      <ControlledTooltip key={colorItem + index} content={label ?? colorItem}>\n        <div\n          style={{\n            backgroundColor: colorItem,\n            width: `${widthPercentage}%`,\n            height: '100%',\n          }}\n        />\n      </ControlledTooltip>\n    ));\n  };\n\n  return (\n    <div\n      className={classNames(\n        'flex overflow-hidden border border-border',\n        {\n          'rounded-md': isSquare,\n          'rounded-full': !isSquare,\n        },\n        className,\n      )}\n    >\n      {getColorLayout()}\n    </div>\n  );\n};\n\nexport default Colors;\n"],"names":[],"mappings":";;;;AAcA,MAAM,SAAiC,CAAC,EAAE,SAAS,IAAI,WAAW,MAAM,YAAY,IAAI,YAAY;AAElG,MAAI,CAAC,UAAU,OAAO,WAAW,GAAG;AAClC,WAAO,oBAAC,eAAY,MAAM,OAAO,WAAW,WAAW,YAAY,cAAc,SAAS,EAAA,CAAG;AAAA,EAC/F;AAEA,QAAM,iBAAiB,MAAM;AAC3B,UAAM,QAAQ,OAAO;AACrB,UAAM,kBAAkB,MAAM;AAE9B,WAAO,OAAO,IAAI,CAAC,WAAW,UAC5B,oBAAC,mBAAA,EAA0C,SAAS,SAAS,WAC3D,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,OAAO,GAAG,eAAe;AAAA,UACzB,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAAA,KANoB,YAAY,KAQpC,CACD;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,cAAc;AAAA,UACd,gBAAgB,CAAC;AAAA,QAAA;AAAA,QAEnB;AAAA,MAAA;AAAA,MAGD,UAAA,eAAA;AAAA,IAAe;AAAA,EAAA;AAGtB;"}

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+interface IControlledAccordionRootProps {
+    open: boolean;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const ControlledAccordionRoot: React.FC<IControlledAccordionRootProps>;
+interface IControlledAccordionHeaderProps {
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    tabIndex?: number;
+}
+/**
+ * Rendered as a div with role="button", not a native button: several headers in this repo
+ * carry their own buttons (rename, visibility, drag handle), and a button inside a button
+ * is invalid HTML that silently breaks the inner controls.
+ */
+export declare const ControlledAccordionHeader: React.FC<IControlledAccordionHeaderProps>;
+interface IControlledAccordionBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledAccordionBody: React.FC<IControlledAccordionBodyProps>;
+interface IControlledAccordionProps {
+    open: boolean;
+    onToggle: () => void;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+}
+declare const ControlledAccordion: React.FC<IControlledAccordionProps>;
+export default ControlledAccordion;

package/dist/components/UI/ControlledAccordion.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import classNames from "classnames";
+import { twMerge } from "tailwind-merge";
+import ControlledCollapse from "./ControlledCollapse.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const AccordionContext = createContext({ open: false });
+const ControlledAccordionRoot = ({
+  open,
+  children,
+  icon,
+  disabled = false,
+  className
+}) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, icon, disabled }, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: twMerge(
+      classNames("relative block w-full", { "pointer-events-none opacity-50": disabled }),
+      className
+    ),
+    children
+  }
+) });
+const ControlledAccordionHeader = ({
+  onClick,
+  children,
+  className,
+  tabIndex
+}) => {
+  const { open, icon } = useContext(AccordionContext);
+  const isInteractive = Boolean(onClick);
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    onClick?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: isInteractive ? "button" : void 0,
+      tabIndex: tabIndex ?? (isInteractive ? 0 : void 0),
+      "aria-expanded": isInteractive ? open : void 0,
+      onClick,
+      onKeyDown: handleKeyDown,
+      className: twMerge(
+        "flex w-full select-none items-center justify-between border-b border-border-subtle py-4 text-left",
+        "text-xl font-semibold leading-snug text-foreground-muted transition-colors hover:text-foreground",
+        classNames({ "text-foreground": open }),
+        className
+      ),
+      children: [
+        children,
+        icon ?? /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "expand_more",
+            size: 20,
+            className: classNames("ml-4 shrink-0 transition-transform duration-base", { "rotate-180": open })
+          }
+        )
+      ]
+    }
+  );
+};
+const ControlledAccordionBody = ({ children, className }) => {
+  const { open } = useContext(AccordionContext);
+  return /* @__PURE__ */ jsx(ControlledCollapse, { open, children: /* @__PURE__ */ jsx("div", { className: twMerge("block w-full py-4 text-sm font-light leading-normal text-foreground-muted", className), children }) });
+};
+const ControlledAccordion = ({
+  open,
+  onToggle,
+  header,
+  children,
+  icon,
+  className,
+  headerClassName,
+  bodyClassName
+}) => /* @__PURE__ */ jsxs(ControlledAccordionRoot, { open, icon, className, children: [
+  /* @__PURE__ */ jsx(ControlledAccordionHeader, { onClick: onToggle, className: headerClassName, children: header }),
+  /* @__PURE__ */ jsx(ControlledAccordionBody, { className: bodyClassName, children })
+] });
+export {
+  ControlledAccordionBody,
+  ControlledAccordionHeader,
+  ControlledAccordionRoot,
+  ControlledAccordion as default
+};
+//# sourceMappingURL=ControlledAccordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledAccordion.js","sources":["../../../src/components/UI/ControlledAccordion.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport classNames from 'classnames';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledCollapse from './ControlledCollapse';\nimport { MaterialSymbol } from './MaterialSymbol';\n\ninterface IAccordionContext {\n  open: boolean;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst AccordionContext = createContext<IAccordionContext>({ open: false });\n\ninterface IControlledAccordionRootProps {\n  open: boolean;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport const ControlledAccordionRoot: React.FC<IControlledAccordionRootProps> = ({\n  open,\n  children,\n  icon,\n  disabled = false,\n  className,\n}) => (\n  <AccordionContext.Provider value={{ open, icon, disabled }}>\n    <div\n      className={twMerge(\n        classNames('relative block w-full', { 'pointer-events-none opacity-50': disabled }),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </AccordionContext.Provider>\n);\n\ninterface IControlledAccordionHeaderProps {\n  onClick?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  tabIndex?: number;\n}\n\n/**\n * Rendered as a div with role=\"button\", not a native button: several headers in this repo\n * carry their own buttons (rename, visibility, drag handle), and a button inside a button\n * is invalid HTML that silently breaks the inner controls.\n */\nexport const ControlledAccordionHeader: React.FC<IControlledAccordionHeaderProps> = ({\n  onClick,\n  children,\n  className,\n  tabIndex,\n}) => {\n  const { open, icon } = useContext(AccordionContext);\n  const isInteractive = Boolean(onClick);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    if (event.target !== event.currentTarget) return;\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}\n      aria-expanded={isInteractive ? open : undefined}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      className={twMerge(\n        'flex w-full select-none items-center justify-between border-b border-border-subtle py-4 text-left',\n        'text-xl font-semibold leading-snug text-foreground-muted transition-colors hover:text-foreground',\n        classNames({ 'text-foreground': open }),\n        className,\n      )}\n    >\n      {children}\n\n      {icon ?? (\n        <MaterialSymbol\n          icon=\"expand_more\"\n          size={20}\n          className={classNames('ml-4 shrink-0 transition-transform duration-base', { 'rotate-180': open })}\n        />\n      )}\n    </div>\n  );\n};\n\ninterface IControlledAccordionBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const ControlledAccordionBody: React.FC<IControlledAccordionBodyProps> = ({ children, className }) => {\n  const { open } = useContext(AccordionContext);\n\n  return (\n    <ControlledCollapse open={open}>\n      <div className={twMerge('block w-full py-4 text-sm font-light leading-normal text-foreground-muted', className)}>\n        {children}\n      </div>\n    </ControlledCollapse>\n  );\n};\n\ninterface IControlledAccordionProps {\n  open: boolean;\n  onToggle: () => void;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n}\n\nconst ControlledAccordion: React.FC<IControlledAccordionProps> = ({\n  open,\n  onToggle,\n  header,\n  children,\n  icon,\n  className,\n  headerClassName,\n  bodyClassName,\n}) => (\n  <ControlledAccordionRoot open={open} icon={icon} className={className}>\n    <ControlledAccordionHeader onClick={onToggle} className={headerClassName}>\n      {header}\n    </ControlledAccordionHeader>\n    <ControlledAccordionBody className={bodyClassName}>{children}</ControlledAccordionBody>\n  </ControlledAccordionRoot>\n);\n\nexport default ControlledAccordion;\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,mBAAmB,cAAiC,EAAE,MAAM,OAAO;AAUlE,MAAM,0BAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,YAC9C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,WAAW,yBAAyB,EAAE,kCAAkC,UAAU;AAAA,MAClF;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH,EAAA,CACF;AAeK,MAAM,4BAAuE,CAAC;AAAA,EACnF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAClD,QAAM,gBAAgB,QAAQ,OAAO;AAErC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,QAAI,MAAM,WAAW,MAAM,cAAe;AAC1C,UAAM,eAAA;AACN,cAAA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,gBAAgB,WAAW;AAAA,MACjC,UAAU,aAAa,gBAAgB,IAAI;AAAA,MAC3C,iBAAe,gBAAgB,OAAO;AAAA,MACtC;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,EAAE,mBAAmB,MAAM;AAAA,QACtC;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QAEA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,WAAW,oDAAoD,EAAE,cAAc,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClG;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,MAAM,0BAAmE,CAAC,EAAE,UAAU,gBAAgB;AAC3G,QAAM,EAAE,KAAA,IAAS,WAAW,gBAAgB;AAE5C,SACE,oBAAC,oBAAA,EAAmB,MAClB,UAAA,oBAAC,OAAA,EAAI,WAAW,QAAQ,6EAA6E,SAAS,GAC3G,SAAA,CACH,EAAA,CACF;AAEJ;AAaA,MAAM,sBAA2D,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,yBAAA,EAAwB,MAAY,MAAY,WAC/C,UAAA;AAAA,EAAA,oBAAC,2BAAA,EAA0B,SAAS,UAAU,WAAW,iBACtD,UAAA,QACH;AAAA,EACA,oBAAC,yBAAA,EAAwB,WAAW,eAAgB,SAAA,CAAS;AAAA,EAAA,CAC/D;"}

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface IControlledCollapseProps {
+    open: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Height is measured from the content node and written to the wrapper, so the transition
+ * always has a numeric start and end. The observer watches the CONTENT, whose height is
+ * unconstrained, so updating the wrapper cannot feed back into it.
+ */
+declare const ControlledCollapse: React.FC<IControlledCollapseProps>;
+export default ControlledCollapse;

package/dist/components/UI/ControlledCollapse.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+const ControlledCollapse = ({ open, children, className }) => {
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return void 0;
+    if (!open) {
+      setHeight(0);
+      return void 0;
+    }
+    setHeight(content.scrollHeight);
+    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height },
+      "aria-hidden": !open,
+      className: twMerge("overflow-hidden transition-[height] duration-slow ease-enter", className),
+      children: /* @__PURE__ */ jsx("div", { ref: contentRef, children })
+    }
+  );
+};
+export {
+  ControlledCollapse as default
+};
+//# sourceMappingURL=ControlledCollapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledCollapse.js","sources":["../../../src/components/UI/ControlledCollapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\ninterface IControlledCollapseProps {\n  open: boolean;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Height is measured from the content node and written to the wrapper, so the transition\n * always has a numeric start and end. The observer watches the CONTENT, whose height is\n * unconstrained, so updating the wrapper cannot feed back into it.\n */\nconst ControlledCollapse: React.FC<IControlledCollapseProps> = ({ open, children, className }) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    if (!open) {\n      setHeight(0);\n      return undefined;\n    }\n\n    setHeight(content.scrollHeight);\n\n    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [open]);\n\n  return (\n    <div\n      style={{ height }}\n      aria-hidden={!open}\n      className={twMerge('overflow-hidden transition-[height] duration-slow ease-enter', className)}\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n};\n\nexport default ControlledCollapse;\n"],"names":[],"mappings":";;;AAcA,MAAM,qBAAyD,CAAC,EAAE,MAAM,UAAU,gBAAgB;AAChG,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS,QAAO;AAErB,QAAI,CAAC,MAAM;AACT,gBAAU,CAAC;AACX,aAAO;AAAA,IACT;AAEA,cAAU,QAAQ,YAAY;AAE9B,UAAM,WAAW,IAAI,eAAe,MAAM,UAAU,QAAQ,YAAY,CAAC;AACzE,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAA;AAAA,MACT,eAAa,CAAC;AAAA,MACd,WAAW,QAAQ,gEAAgE,SAAS;AAAA,MAE5F,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAa,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGtC;"}

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

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { SymbolCodepoints } from './MaterialSymbol';
+import { TFloatingPlacement } from '../../hooks/useAnchoredFloating';
+export type TMenuPlacement = TFloatingPlacement;
+export type TMenuItemTone = 'default' | 'danger';
+export interface IMenuDismissConfig {
+    /** Closes the menu when an item is pressed. Multi-select surfaces pass false. */
+    itemPress?: boolean;
+    escapeKey?: boolean;
+    outsidePress?: boolean;
+}
+export interface IControlledMenuItem {
+    key: string;
+    label: string;
+    icon?: SymbolCodepoints;
+    hint?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    tone?: TMenuItemTone;
+}
+interface IControlledMenuRootProps {
+    children: React.ReactNode;
+    open?: boolean;
+    handler?: (open: boolean) => void;
+    placement?: TMenuPlacement;
+    offsetPx?: number;
+    dismiss?: IMenuDismissConfig;
+    matchTriggerWidth?: boolean;
+}
+export declare const ControlledMenuRoot: React.FC<IControlledMenuRootProps>;
+/**
+ * Repassa ao filho o que ele recebe de fora, além do que injeta.
+ *
+ * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e
+ * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o
+ * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar
+ * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.
+ */
+export declare const ControlledMenuHandler: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface IControlledMenuListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'> {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledMenuList: React.ForwardRefExoticComponent<IControlledMenuListProps & React.RefAttributes<HTMLDivElement>>;
+interface IControlledMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const ControlledMenuItem: React.FC<IControlledMenuItemProps>;
+interface IControlledMenuProps {
+    trigger: React.ReactNode;
+    items?: Array<IControlledMenuItem>;
+    children?: React.ReactNode;
+    triggerTooltip?: string;
+    placement?: TMenuPlacement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    dismissOnItemClick?: boolean;
+    listClassName?: string;
+    tooltipClassName?: string;
+    listRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to
+ * inject the click handler and the reference ref, and a tooltip in that position swallows
+ * both, so the menu stops opening.
+ */
+declare const ControlledMenu: React.FC<IControlledMenuProps>;
+export default ControlledMenu;