vector-prototype-components 0.1.2 → 0.1.3

package/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckCircle, WarningCircle, XCircle, X } from '@phosphor-icons/react';\nimport type { Icon as PhosphorIcon } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './Toast.module.css';\n\nexport type ToastType = 'success' | 'warning' | 'danger';\n\nexport interface ToastProps {\n  /** Visual type of the toast — controls color, icon, and accent bar. */\n  type?: ToastType;\n  /** Bold heading shown above the description. */\n  title: string;\n  /** Supporting body text. */\n  description?: string;\n  /** Called when the close (×) button is clicked. */\n  onClose?: () => void;\n  /**\n   * Quando true, toca o fade-out antes de ser removido do DOM.\n   * O consumidor é responsável por remover o elemento após ~200ms.\n   */\n  leaving?: boolean;\n  /** Additional class names applied to the root element. */\n  className?: string;\n}\n\nconst VARIANT_CLASS: Record<ToastType, string> = {\n  success: styles.variantSuccess,\n  warning: styles.variantWarning,\n  danger:  styles.variantDanger,\n};\n\nconst TYPE_ICON: Record<ToastType, PhosphorIcon> = {\n  success: CheckCircle,\n  warning: WarningCircle,\n  danger:  XCircle,\n};\n\nconst TYPE_ICON_COLOR: Record<ToastType, string> = {\n  success: 'var(--color-icon-feedback-success-default)',\n  warning: 'var(--color-icon-feedback-warning-default)',\n  danger:  'var(--color-icon-feedback-danger-default)',\n};\n\nconst TYPE_CLOSE_COLOR: Record<ToastType, string> = {\n  success: 'var(--color-icon-feedback-success-default)',\n  warning: 'var(--color-icon-feedback-warning-default)',\n  danger:  'var(--color-icon-feedback-danger-default)',\n};\n\nexport function Toast({\n  type = 'success',\n  title,\n  description,\n  onClose,\n  leaving = false,\n  className,\n}: ToastProps) {\n  const TypeIcon = TYPE_ICON[type];\n\n  const rootCls = [styles.toast, VARIANT_CLASS[type], leaving ? styles.toastLeaving : '', className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootCls}\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n    >\n      {/* Left accent bar */}\n      <div className={styles.accent} aria-hidden=\"true\" />\n\n      {/* Main content area */}\n      <div className={styles.container}>\n        <Icon\n          as={TypeIcon}\n          size={24}\n          weight=\"regular\"\n          color={TYPE_ICON_COLOR[type]}\n          aria-hidden=\"true\"\n        />\n        <div className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {description && (\n            <span className={styles.description}>{description}</span>\n          )}\n        </div>\n      </div>\n\n      {/* Close button */}\n      {onClose && (\n        <button\n          type=\"button\"\n          className={styles.closeBtn}\n          onClick={onClose}\n          aria-label=\"Close notification\"\n        >\n          <Icon\n            as={X}\n            size={16}\n            weight=\"bold\"\n            color={TYPE_CLOSE_COLOR[type]}\n            aria-hidden=\"true\"\n          />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["VARIANT_CLASS","styles","TYPE_ICON","CheckCircle","WarningCircle","XCircle","TYPE_ICON_COLOR","TYPE_CLOSE_COLOR","Toast","type","title","description","onClose","leaving","className","TypeIcon","rootCls","jsxs","jsx","Icon","X"],"mappings":";;;;AA0BA,MAAMA,IAA2C;AAAA,EAC/C,SAASC,EAAO;AAAA,EAChB,SAASA,EAAO;AAAA,EAChB,QAASA,EAAO;AAClB,GAEMC,IAA6C;AAAA,EACjD,SAASC;AAAA,EACT,SAASC;AAAA,EACT,QAASC;AACX,GAEMC,IAA6C;AAAA,EACjD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAS;AACX,GAEMC,IAA8C;AAAA,EAClD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAS;AACX;AAEO,SAASC,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AACF,GAAe;AACb,QAAMC,IAAWb,EAAUO,CAAI,GAEzBO,IAAU,CAACf,EAAO,OAAOD,EAAcS,CAAI,GAAGI,IAAUZ,EAAO,eAAe,IAAIa,CAAS,EAC9F,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,MACX,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MAGZ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWjB,EAAO,QAAQ,eAAY,QAAO;AAAA,QAGlD,gBAAAgB,EAAC,OAAA,EAAI,WAAWhB,EAAO,WACrB,UAAA;AAAA,UAAA,gBAAAiB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,IAAIJ;AAAA,cACJ,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAOT,EAAgBG,CAAI;AAAA,cAC3B,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAQ,EAAC,OAAA,EAAI,WAAWhB,EAAO,SACrB,UAAA;AAAA,YAAA,gBAAAiB,EAAC,QAAA,EAAK,WAAWjB,EAAO,OAAQ,UAAAS,GAAM;AAAA,YACrCC,KACC,gBAAAO,EAAC,QAAA,EAAK,WAAWjB,EAAO,aAAc,UAAAU,EAAA,CAAY;AAAA,UAAA,EAAA,CAEtD;AAAA,QAAA,GACF;AAAA,QAGCC,KACC,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWjB,EAAO;AAAA,YAClB,SAASW;AAAA,YACT,cAAW;AAAA,YAEX,UAAA,gBAAAM;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,IAAIC;AAAA,gBACJ,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,OAAOb,EAAiBE,CAAI;AAAA,gBAC5B,eAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACd;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/Toast/Toast.module.css

@@ -0,0 +1 @@
+@keyframes _toastFadeIn_k7uen_1{0%{opacity:0}to{opacity:1}}@keyframes _toastFadeOut_k7uen_1{0%{opacity:1}to{opacity:0}}._toast_k7uen_12{position:relative;display:flex;flex-direction:row;align-items:stretch;width:360px;min-height:80px;border-radius:8px;border:1px solid transparent;overflow:hidden;font-family:var(--font-family-base, system-ui, sans-serif);animation:_toastFadeIn_k7uen_1 .22s ease both}._toastLeaving_k7uen_27{animation:_toastFadeOut_k7uen_1 .18s ease forwards;pointer-events:none}._accent_k7uen_33{flex-shrink:0;width:4px;align-self:stretch}._container_k7uen_40{display:flex;flex-direction:row;align-items:flex-start;gap:8px;padding:16px 36px 16px 16px;flex:1 0 0;min-width:0}._content_k7uen_51{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}._title_k7uen_59{font-size:var(--font-size-16);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-16, 24px);overflow:hidden;text-overflow:ellipsis;word-break:break-word}._description_k7uen_68{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14, 20px);color:var(--color-text-neutral-mudle);overflow:hidden;text-overflow:ellipsis;word-break:break-word}._closeBtn_k7uen_79{position:absolute;top:-1px;right:-1px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9999px;background:transparent;border:none;cursor:pointer;padding:0;transition:opacity .12s ease}._closeBtn_k7uen_79:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._closeBtn_k7uen_79:hover{opacity:.7}._variantSuccess_k7uen_106{background-color:var(--color-fill-feedback-success-subtle);border-color:var(--color-stroke-feedback-success-subtle)}._variantSuccess_k7uen_106 ._accent_k7uen_33{background-color:var(--color-fill-feedback-success-default)}._variantSuccess_k7uen_106 ._title_k7uen_59{color:var(--color-text-feedback-success-default)}._variantWarning_k7uen_120{background-color:var(--color-fill-feedback-warning-subtle);border-color:var(--color-stroke-feedback-warning-subtle)}._variantWarning_k7uen_120 ._accent_k7uen_33{background-color:var(--color-fill-feedback-warning-default)}._variantWarning_k7uen_120 ._title_k7uen_59{color:var(--color-text-feedback-warning-default)}._variantDanger_k7uen_134{background-color:var(--color-fill-feedback-danger-subtle);border-color:var(--color-stroke-feedback-danger-subtle)}._variantDanger_k7uen_134 ._accent_k7uen_33{background-color:var(--color-fill-feedback-danger-default)}._variantDanger_k7uen_134 ._title_k7uen_59{color:var(--color-text-feedback-danger-default)}

package/Toast/Toast.module.css.js

@@ -0,0 +1,28 @@
+import './Toast.module.css';const n = "_toast_k7uen_12", t = "_toastLeaving_k7uen_27", a = "_accent_k7uen_33", e = "_container_k7uen_40", c = "_content_k7uen_51", s = "_title_k7uen_59", _ = "_description_k7uen_68", o = "_closeBtn_k7uen_79", i = "_variantSuccess_k7uen_106", r = "_variantWarning_k7uen_120", u = "_variantDanger_k7uen_134", v = {
+  toast: n,
+  toastLeaving: t,
+  accent: a,
+  container: e,
+  content: c,
+  title: s,
+  description: _,
+  closeBtn: o,
+  variantSuccess: i,
+  variantWarning: r,
+  variantDanger: u
+};
+export {
+  a as accent,
+  o as closeBtn,
+  e as container,
+  c as content,
+  v as default,
+  _ as description,
+  s as title,
+  n as toast,
+  t as toastLeaving,
+  u as variantDanger,
+  i as variantSuccess,
+  r as variantWarning
+};
+//# sourceMappingURL=Toast.module.css.js.map

package/Toast/Toast.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/Tooltip/Tooltip.js

@@ -0,0 +1,61 @@
+import { jsxs as b, jsx as x } from "react/jsx-runtime";
+import C, { useState as E, useId as L, useRef as S } from "react";
+import e from "./Tooltip.module.css.js";
+const T = {
+  top: e.placementTop,
+  bottom: e.placementBottom,
+  left: e.placementLeft,
+  right: e.placementRight
+}, g = {
+  default: e.typeDefault,
+  "full-text": e.typeFullText
+};
+function y({
+  label: i,
+  type: r = "default",
+  placement: a = "top",
+  disabled: p = !1,
+  children: c,
+  className: f
+}) {
+  const [t, o] = E(!1), l = L(), u = S(null), s = () => {
+    p || o(!0);
+  }, n = () => {
+    o(!1);
+  }, d = [
+    e.tooltip,
+    g[r],
+    T[a],
+    t ? e.visible : e.hidden
+  ].filter(Boolean).join(" "), m = [e.wrapper, f].filter(Boolean).join(" "), h = C.cloneElement(c, {
+    "aria-describedby": t ? l : void 0
+  });
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      ref: u,
+      className: m,
+      onMouseEnter: s,
+      onMouseLeave: n,
+      onFocus: s,
+      onBlur: n,
+      children: [
+        h,
+        /* @__PURE__ */ x(
+          "span",
+          {
+            role: "tooltip",
+            id: l,
+            className: d,
+            "aria-hidden": !t,
+            children: i
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  y as Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, useId, useRef } from 'react';\nimport styles from './Tooltip.module.css';\n\nexport type TooltipType = 'default' | 'full-text';\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n  /** The content of the tooltip bubble */\n  label: string;\n  /** Controls whether text is truncated (default) or wraps to multiple lines (full-text) */\n  type?: TooltipType;\n  /** Where the tooltip appears relative to the trigger */\n  placement?: TooltipPlacement;\n  /** Whether the tooltip (and its trigger) are disabled */\n  disabled?: boolean;\n  /** The element that triggers the tooltip on hover/focus */\n  children: React.ReactElement;\n  /** Additional class name for the wrapper element */\n  className?: string;\n}\n\nconst PLACEMENT_CLASS: Record<TooltipPlacement, string> = {\n  top:    styles.placementTop,\n  bottom: styles.placementBottom,\n  left:   styles.placementLeft,\n  right:  styles.placementRight,\n};\n\nconst TYPE_CLASS: Record<TooltipType, string> = {\n  'default':   styles.typeDefault,\n  'full-text': styles.typeFullText,\n};\n\nexport function Tooltip({\n  label,\n  type = 'default',\n  placement = 'top',\n  disabled = false,\n  children,\n  className,\n}: TooltipProps) {\n  const [visible, setVisible] = useState(false);\n  const tooltipId = useId();\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n\n  const show = () => {\n    if (!disabled) setVisible(true);\n  };\n\n  const hide = () => {\n    setVisible(false);\n  };\n\n  const tooltipCls = [\n    styles.tooltip,\n    TYPE_CLASS[type],\n    PLACEMENT_CLASS[placement],\n    visible ? styles.visible : styles.hidden,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const wrapperCls = [styles.wrapper, className].filter(Boolean).join(' ');\n\n  const trigger = React.cloneElement(children, {\n    'aria-describedby': visible ? tooltipId : undefined,\n  });\n\n  return (\n    <span\n      ref={wrapperRef}\n      className={wrapperCls}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onFocus={show}\n      onBlur={hide}\n    >\n      {trigger}\n      <span\n        role=\"tooltip\"\n        id={tooltipId}\n        className={tooltipCls}\n        aria-hidden={!visible}\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n"],"names":["PLACEMENT_CLASS","styles","TYPE_CLASS","Tooltip","label","type","placement","disabled","children","className","visible","setVisible","useState","tooltipId","useId","wrapperRef","useRef","show","hide","tooltipCls","wrapperCls","trigger","React","jsxs","jsx"],"mappings":";;;AAqBA,MAAMA,IAAoD;AAAA,EACxD,KAAQC,EAAO;AAAA,EACf,QAAQA,EAAO;AAAA,EACf,MAAQA,EAAO;AAAA,EACf,OAAQA,EAAO;AACjB,GAEMC,IAA0C;AAAA,EAC9C,SAAaD,EAAO;AAAA,EACpB,aAAaA,EAAO;AACtB;AAEO,SAASE,EAAQ;AAAA,EACtB,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AACF,GAAiB;AACf,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAYC,EAAA,GACZC,IAAaC,EAAwB,IAAI,GAEzCC,IAAO,MAAM;AACjB,IAAKV,KAAUI,EAAW,EAAI;AAAA,EAChC,GAEMO,IAAO,MAAM;AACjB,IAAAP,EAAW,EAAK;AAAA,EAClB,GAEMQ,IAAa;AAAA,IACjBlB,EAAO;AAAA,IACPC,EAAWG,CAAI;AAAA,IACfL,EAAgBM,CAAS;AAAA,IACzBI,IAAUT,EAAO,UAAUA,EAAO;AAAA,EAAA,EAEjC,OAAO,OAAO,EACd,KAAK,GAAG,GAELmB,IAAa,CAACnB,EAAO,SAASQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAEjEY,IAAUC,EAAM,aAAad,GAAU;AAAA,IAC3C,oBAAoBE,IAAUG,IAAY;AAAA,EAAA,CAC3C;AAED,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACL,WAAWK;AAAA,MACX,cAAcH;AAAA,MACd,cAAcC;AAAA,MACd,SAASD;AAAA,MACT,QAAQC;AAAA,MAEP,UAAA;AAAA,QAAAG;AAAA,QACD,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAIX;AAAA,YACJ,WAAWM;AAAA,YACX,eAAa,CAACT;AAAA,YAEb,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/Tooltip/Tooltip.module.css

@@ -0,0 +1 @@
+._tooltip_nphew_2{position:absolute;z-index:9999;background-color:var(--color-fill-neutral-strong);color:var(--color-text-neutral-inverse);border-radius:8px;padding:12px;min-width:80px;max-width:320px;font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-12);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-12);pointer-events:none;box-shadow:var(--shadow-layer-sm)}._typeDefault_nphew_20{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._typeFullText_nphew_27{white-space:normal;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}._placementTop_nphew_37{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}._placementBottom_nphew_43{top:calc(100% + 8px);left:50%;transform:translate(-50%)}._placementLeft_nphew_49{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}._placementRight_nphew_55{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}._wrapper_nphew_62{position:relative;display:inline-flex;align-items:center;justify-content:center}._hidden_nphew_70{display:none}._visible_nphew_74{display:block}

package/Tooltip/Tooltip.module.css.js

@@ -0,0 +1,26 @@
+import './Tooltip.module.css';const e = "_tooltip_nphew_2", t = "_typeDefault_nphew_20", p = "_typeFullText_nphew_27", n = "_placementTop_nphew_37", _ = "_placementBottom_nphew_43", l = "_placementLeft_nphew_49", o = "_placementRight_nphew_55", c = "_wrapper_nphew_62", a = "_hidden_nphew_70", s = "_visible_nphew_74", h = {
+  tooltip: e,
+  typeDefault: t,
+  typeFullText: p,
+  placementTop: n,
+  placementBottom: _,
+  placementLeft: l,
+  placementRight: o,
+  wrapper: c,
+  hidden: a,
+  visible: s
+};
+export {
+  h as default,
+  a as hidden,
+  _ as placementBottom,
+  l as placementLeft,
+  o as placementRight,
+  n as placementTop,
+  e as tooltip,
+  t as typeDefault,
+  p as typeFullText,
+  s as visible,
+  c as wrapper
+};
+//# sourceMappingURL=Tooltip.module.css.js.map

package/Tooltip/Tooltip.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/TopBar/TopBar.js

@@ -0,0 +1,87 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import I from "react";
+import { List as x, BellSimple as y, User as E, CaretDown as j } from "@phosphor-icons/react";
+import { Icon as o } from "../Icon/Icon.js";
+import e from "./TopBar.module.css.js";
+function D({
+  size: r = "menuClosed",
+  userName: s = "Admin Embarcador",
+  userInitials: l,
+  userAvatarSrc: c,
+  userAvatarAlt: d = "",
+  onMenuToggle: p,
+  onNotificationClick: h,
+  onProfileClick: u,
+  notificationIcon: f,
+  disabled: t = !1,
+  leftContent: N,
+  className: b,
+  ...g
+}) {
+  const [v, w] = I.useState(!1), B = f ?? y, n = !!c && !v, m = !n && !!l, C = [e.topBar, b].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("header", { className: C, "data-size": r, ...g, children: [
+    /* @__PURE__ */ i("div", { className: e.leftSection, children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: e.menuButton,
+          onClick: p,
+          disabled: t,
+          "aria-disabled": t || void 0,
+          "aria-label": r === "menuOpened" ? "Close menu" : "Open menu",
+          "aria-expanded": r === "menuOpened",
+          children: /* @__PURE__ */ a(o, { as: x, size: 20, weight: "bold" })
+        }
+      ),
+      N
+    ] }),
+    /* @__PURE__ */ i("div", { className: e.rightSection, children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: e.notificationButton,
+          onClick: h,
+          disabled: t,
+          "aria-disabled": t || void 0,
+          "aria-label": "Notifications",
+          children: /* @__PURE__ */ a(o, { as: B, size: 20, weight: "bold" })
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: e.divider, role: "separator", "aria-hidden": "true" }),
+      /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: e.profileButton,
+          onClick: u,
+          disabled: t,
+          "aria-disabled": t || void 0,
+          "aria-label": `User profile: ${s}`,
+          children: [
+            /* @__PURE__ */ i("span", { className: e.avatar, "aria-hidden": "true", children: [
+              n && /* @__PURE__ */ a(
+                "img",
+                {
+                  className: e.avatarImage,
+                  src: c,
+                  alt: d,
+                  onError: () => w(!0)
+                }
+              ),
+              m && /* @__PURE__ */ a("span", { className: e.avatarInitials, children: l.slice(0, 2).toUpperCase() }),
+              !n && !m && /* @__PURE__ */ a(o, { as: E, size: 20, weight: "bold" })
+            ] }),
+            /* @__PURE__ */ a("span", { className: e.userName, children: s }),
+            /* @__PURE__ */ a("span", { className: e.caretIcon, "aria-hidden": "true", children: /* @__PURE__ */ a(o, { as: j, size: 16, weight: "bold" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  D as TopBar
+};
+//# sourceMappingURL=TopBar.js.map

package/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sources":["../../src/TopBar/TopBar.tsx"],"sourcesContent":["import React from 'react';\nimport type { Icon as PhosphorIcon } from '@phosphor-icons/react';\nimport { List, BellSimple, CaretDown, User } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './TopBar.module.css';\n\nexport type TopBarSize = 'menuClosed' | 'menuOpened';\n\nexport interface TopBarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Controls the menu toggle state appearance.\n   * \"menuClosed\" = hamburger visible (menu is closed), full width layout.\n   * \"menuOpened\" = hamburger visible (menu is opened), narrower content area.\n   */\n  size?: TopBarSize;\n  /** Display name shown next to the avatar. */\n  userName?: string;\n  /**\n   * Up to 2-character initials rendered inside the avatar circle.\n   * If omitted, a User icon is shown instead.\n   */\n  userInitials?: string;\n  /** Image URL for the user avatar. Falls back to initials if not provided. */\n  userAvatarSrc?: string;\n  /** Alt text for the user avatar image. */\n  userAvatarAlt?: string;\n  /** Called when the menu toggle button is clicked. */\n  onMenuToggle?: () => void;\n  /** Called when the notification button is clicked. */\n  onNotificationClick?: () => void;\n  /** Called when the user profile area is clicked. */\n  onProfileClick?: () => void;\n  /** Phosphor icon override for the notification button. Defaults to BellSimple. */\n  notificationIcon?: PhosphorIcon;\n  /** Whether the TopBar is disabled (disables all interactive elements). */\n  disabled?: boolean;\n  /** Optional content to render in the left section after the menu button. */\n  leftContent?: React.ReactNode;\n}\n\nexport function TopBar({\n  size = 'menuClosed',\n  userName = 'Admin Embarcador',\n  userInitials,\n  userAvatarSrc,\n  userAvatarAlt = '',\n  onMenuToggle,\n  onNotificationClick,\n  onProfileClick,\n  notificationIcon,\n  disabled = false,\n  leftContent,\n  className,\n  ...props\n}: TopBarProps) {\n  const [imgError, setImgError] = React.useState(false);\n\n  const NotifIcon = notificationIcon ?? BellSimple;\n\n  const showImage = !!userAvatarSrc && !imgError;\n  const showInitials = !showImage && !!userInitials;\n\n  const cls = [styles.topBar, className].filter(Boolean).join(' ');\n\n  return (\n    <header className={cls} data-size={size} {...props}>\n      {/* Left section: menu toggle + optional content */}\n      <div className={styles.leftSection}>\n        <button\n          type=\"button\"\n          className={styles.menuButton}\n          onClick={onMenuToggle}\n          disabled={disabled}\n          aria-disabled={disabled || undefined}\n          aria-label={size === 'menuOpened' ? 'Close menu' : 'Open menu'}\n          aria-expanded={size === 'menuOpened'}\n        >\n          <Icon as={List} size={20} weight=\"bold\" />\n        </button>\n        {leftContent}\n      </div>\n\n      {/* Right section: notification + divider + profile */}\n      <div className={styles.rightSection}>\n        <button\n          type=\"button\"\n          className={styles.notificationButton}\n          onClick={onNotificationClick}\n          disabled={disabled}\n          aria-disabled={disabled || undefined}\n          aria-label=\"Notifications\"\n        >\n          <Icon as={NotifIcon} size={20} weight=\"bold\" />\n        </button>\n\n        <div className={styles.divider} role=\"separator\" aria-hidden=\"true\" />\n\n        <button\n          type=\"button\"\n          className={styles.profileButton}\n          onClick={onProfileClick}\n          disabled={disabled}\n          aria-disabled={disabled || undefined}\n          aria-label={`User profile: ${userName}`}\n        >\n          {/* Avatar */}\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {showImage && (\n              <img\n                className={styles.avatarImage}\n                src={userAvatarSrc}\n                alt={userAvatarAlt}\n                onError={() => setImgError(true)}\n              />\n            )}\n            {showInitials && (\n              <span className={styles.avatarInitials}>\n                {userInitials.slice(0, 2).toUpperCase()}\n              </span>\n            )}\n            {!showImage && !showInitials && (\n              <Icon as={User} size={20} weight=\"bold\" />\n            )}\n          </span>\n\n          {/* User name */}\n          <span className={styles.userName}>{userName}</span>\n\n          {/* Caret */}\n          <span className={styles.caretIcon} aria-hidden=\"true\">\n            <Icon as={CaretDown} size={16} weight=\"bold\" />\n          </span>\n        </button>\n      </div>\n    </header>\n  );\n}\n"],"names":["TopBar","size","userName","userInitials","userAvatarSrc","userAvatarAlt","onMenuToggle","onNotificationClick","onProfileClick","notificationIcon","disabled","leftContent","className","props","imgError","setImgError","React","NotifIcon","BellSimple","showImage","showInitials","cls","styles","jsxs","jsx","Icon","List","User","CaretDown"],"mappings":"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"}

package/TopBar/TopBar.module.css

@@ -0,0 +1 @@
+._topBar_10s04_2{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:72px;padding:16px 32px 16px 24px;background-color:var(--color-fill-brand-default);width:100%;box-sizing:border-box;flex-shrink:0}._leftSection_10s04_16{display:flex;align-items:center;flex-shrink:0}._menuButton_10s04_23{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:10px;background:transparent;border:none;border-radius:9999px;cursor:pointer;color:var(--color-icon-neutral-inverse);transition:background-color .12s ease,box-shadow .12s ease;flex-shrink:0}._menuButton_10s04_23:hover{background-color:#ffffff1a}._menuButton_10s04_23:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._menuButton_10s04_23:disabled,._menuButton_10s04_23[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._rightSection_10s04_58{display:flex;flex-direction:row;align-items:center;gap:24px;flex-shrink:0}._notificationButton_10s04_67{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:10px;background:transparent;border:none;border-radius:9999px;cursor:pointer;color:var(--color-icon-neutral-inverse);flex-shrink:0;transition:background-color .12s ease,box-shadow .12s ease}._notificationButton_10s04_67:hover{background-color:#ffffff1a}._notificationButton_10s04_67:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._notificationButton_10s04_67:disabled,._notificationButton_10s04_67[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._divider_10s04_102{width:1px;height:40px;background-color:var(--color-icon-neutral-inverse);opacity:.16;flex-shrink:0}._profileButton_10s04_111{display:flex;align-items:center;gap:8px;padding:8px;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--color-text-neutral-inverse);flex-shrink:0;transition:background-color .12s ease,box-shadow .12s ease}._profileButton_10s04_111:hover{background-color:#ffffff1a}._profileButton_10s04_111:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._profileButton_10s04_111:disabled,._profileButton_10s04_111[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._avatar_10s04_144{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--color-fill-brand-muted);flex-shrink:0;overflow:hidden;position:relative}._avatarInitials_10s04_157{font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14);color:var(--color-text-brand-strong);-webkit-user-select:none;user-select:none}._avatarImage_10s04_166{width:100%;height:100%;object-fit:cover;display:block}._userName_10s04_174{font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14);color:var(--color-text-neutral-inverse);white-space:nowrap}._caretIcon_10s04_184{color:var(--color-icon-neutral-inverse);flex-shrink:0}

package/TopBar/TopBar.module.css.js

@@ -0,0 +1,30 @@
+import './TopBar.module.css';const t = "_topBar_10s04_2", a = "_leftSection_10s04_16", o = "_menuButton_10s04_23", n = "_rightSection_10s04_58", _ = "_notificationButton_10s04_67", s = "_divider_10s04_102", e = "_profileButton_10s04_111", i = "_avatar_10s04_144", c = "_avatarInitials_10s04_157", r = "_avatarImage_10s04_166", u = "_userName_10s04_174", v = "_caretIcon_10s04_184", B = {
+  topBar: t,
+  leftSection: a,
+  menuButton: o,
+  rightSection: n,
+  notificationButton: _,
+  divider: s,
+  profileButton: e,
+  avatar: i,
+  avatarInitials: c,
+  avatarImage: r,
+  userName: u,
+  caretIcon: v
+};
+export {
+  i as avatar,
+  r as avatarImage,
+  c as avatarInitials,
+  v as caretIcon,
+  B as default,
+  s as divider,
+  a as leftSection,
+  o as menuButton,
+  _ as notificationButton,
+  e as profileButton,
+  n as rightSection,
+  t as topBar,
+  u as userName
+};
+//# sourceMappingURL=TopBar.module.css.js.map

package/TopBar/TopBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}