vector-prototype-components 0.1.1 → 0.1.3

package/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Warning, XCircle, CheckCircle, X } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport { Button } from '../Button/index.js';\nimport { IconButton } from '../IconButton/index.js';\nimport type { ButtonProps } from '../Button/index.js';\nimport { Divider } from '../Divider/index.js';\nimport { ProgressSpinner } from '../ProgressSpinner/index.js';\nimport { Slot } from '../Slot/index.js';\nimport styles from './Modal.module.css';\n\n/* ────────────────────────────────────────────────────────────────\n * Types\n * ──────────────────────────────────────────────────────────────── */\n\nexport type ModalSize = 'small' | 'medium' | 'large';\nexport type ModalDialogType = 'warn' | 'error' | 'success' | 'loading';\n\n/** Props shared by both Modal and ModalDialog */\ninterface ModalBaseProps {\n  /** Whether the modal is visible. Defaults to false. */\n  open?: boolean;\n  /** Called when the close button is clicked or Escape is pressed. */\n  onClose?: () => void;\n  /** Additional class names on the panel element. */\n  className?: string;\n}\n\n/* ────────────────────────────────────────────────────────────────\n * Modal (panel modal with head / body / footer)\n * ──────────────────────────────────────────────────────────────── */\n\nexport interface ModalFooterAction\n  extends Pick<ButtonProps, 'onClick' | 'disabled'> {\n  label: string;\n  variant?: ButtonProps['variant'];\n}\n\nexport interface ModalProps extends ModalBaseProps {\n  /** Size variant: controls panel width. Defaults to \"small\". */\n  size?: ModalSize;\n  /** Modal heading text. */\n  title?: string;\n  /** Content rendered inside the body slot. */\n  children?: React.ReactNode;\n  /** Array of footer action buttons (left=secondary, right=primary). */\n  footerActions?: ModalFooterAction[];\n  /** Hide the backdrop overlay. */\n  noBackdrop?: boolean;\n  /** Fired when the backdrop is clicked. Defaults to calling onClose. */\n  onBackdropClick?: () => void;\n}\n\nconst SIZE_CLASS: Record<ModalSize, string> = {\n  small:  styles.sizeSmall,\n  medium: styles.sizeMedium,\n  large:  styles.sizeLarge,\n};\n\nexport function Modal({\n  open = false,\n  size = 'small',\n  title = '',\n  children,\n  footerActions,\n  onClose,\n  noBackdrop = false,\n  onBackdropClick,\n  className,\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose?.();\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [open, onClose]);\n\n  // Trap focus inside modal\n  useEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const prev = document.activeElement as HTMLElement | null;\n    const focusable = el.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    focusable[0]?.focus();\n    return () => { prev?.focus(); };\n  }, [open]);\n\n  if (!open) return null;\n\n  const handleBackdropClick = () => {\n    if (onBackdropClick) {\n      onBackdropClick();\n    } else {\n      onClose?.();\n    }\n  };\n\n  const panelCls = [styles.modal, SIZE_CLASS[size], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const panel = (\n    <div\n      ref={panelRef}\n      className={panelCls}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={title ? 'modal-title' : undefined}\n      onClick={(e) => e.stopPropagation()}\n    >\n      {/* Head */}\n      <div className={styles.head}>\n        <div className={styles.titleRow}>\n          <h2 id=\"modal-title\" className={styles.title}>{title}</h2>\n        </div>\n        <Divider />\n      </div>\n\n      {/* Body */}\n      <div className={styles.body}>\n        <Slot>{children}</Slot>\n      </div>\n\n      {/* Footer */}\n      {footerActions && footerActions.length > 0 && (\n        <div className={styles.footer}>\n          <div className={styles.footerButtons}>\n            {footerActions.map((action, i) => (\n              <Button\n                key={i}\n                variant={action.variant ?? (i === footerActions.length - 1 ? 'primary' : 'secondary')}\n                size=\"medium\"\n                disabled={action.disabled}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Close button */}\n      {onClose && (\n        <IconButton\n          icon={X}\n          variant=\"ghost\"\n          size=\"xsmall\"\n          aria-label=\"Fechar modal\"\n          onClick={onClose}\n          className={styles.closeButton}\n        />\n      )}\n    </div>\n  );\n\n  if (noBackdrop) return panel;\n\n  return (\n    <div className={styles.backdrop} onClick={handleBackdropClick}>\n      {panel}\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────\n * ModalDialog (confirmation dialog with status icon)\n * ──────────────────────────────────────────────────────────────── */\n\nexport interface ModalDialogProps extends ModalBaseProps {\n  /** Dialog type — controls the status icon shown. */\n  type?: ModalDialogType;\n  /** Dialog heading. */\n  title?: string;\n  /** Supporting text below the heading. */\n  text?: string;\n  /** Primary action button label. */\n  primaryLabel?: string;\n  /** Primary action callback. */\n  onPrimary?: () => void;\n  /** Secondary action button label. */\n  secondaryLabel?: string;\n  /** Secondary action callback. */\n  onSecondary?: () => void;\n  /** Hide the backdrop overlay. */\n  noBackdrop?: boolean;\n  /** Fired when the backdrop is clicked. Defaults to calling onClose. */\n  onBackdropClick?: () => void;\n}\n\nconst DIALOG_ICON_COLOR: Record<ModalDialogType, string> = {\n  warn:    'var(--color-icon-feedback-warning-default)',\n  error:   'var(--color-icon-feedback-danger-default)',\n  success: 'var(--color-icon-feedback-success-default)',\n  loading: 'var(--color-fill-brand-default)',\n};\n\nexport function ModalDialog({\n  open = false,\n  type = 'warn',\n  title = '',\n  text,\n  primaryLabel,\n  onPrimary,\n  secondaryLabel,\n  onSecondary,\n  onClose,\n  noBackdrop = false,\n  onBackdropClick,\n  className,\n}: ModalDialogProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && type !== 'loading') onClose?.();\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [open, onClose, type]);\n\n  useEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const prev = document.activeElement as HTMLElement | null;\n    const focusable = el.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    focusable[0]?.focus();\n    return () => { prev?.focus(); };\n  }, [open]);\n\n  if (!open) return null;\n\n  const handleBackdropClick = () => {\n    if (onBackdropClick) {\n      onBackdropClick();\n    } else if (type !== 'loading') {\n      onClose?.();\n    }\n  };\n\n  const isLoading = type === 'loading';\n  const showActions = !isLoading && (primaryLabel || secondaryLabel);\n  const showClose   = !isLoading && Boolean(onClose);\n\n  const iconColor = DIALOG_ICON_COLOR[type];\n\n  const renderIcon = () => {\n    switch (type) {\n      case 'warn':    return <Icon as={Warning}     size={64} weight=\"regular\" color={iconColor} />;\n      case 'error':   return <Icon as={XCircle}     size={64} weight=\"regular\" color={iconColor} />;\n      case 'success': return <Icon as={CheckCircle} size={64} weight=\"regular\" color={iconColor} />;\n      case 'loading': return <ProgressSpinner label=\"Carregando\" />;\n    }\n  };\n\n  const dialogBodyCls = [\n    styles.dialogBody,\n    isLoading ? styles.loading : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const panelCls = [styles.modal, styles.dialog, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const panel = (\n    <div\n      ref={panelRef}\n      className={panelCls}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={title ? 'modal-dialog-title' : undefined}\n      onClick={(e) => e.stopPropagation()}\n    >\n      {/* Body */}\n      <div className={dialogBodyCls}>\n        <div className={styles.dialogIconWrap}>\n          {renderIcon()}\n        </div>\n        <div className={styles.dialogTextGroup}>\n          {title && (\n            <p id=\"modal-dialog-title\" className={styles.dialogTitle}>{title}</p>\n          )}\n          {text && (\n            <p className={styles.dialogText}>{text}</p>\n          )}\n        </div>\n      </div>\n\n      {/* Footer actions */}\n      {showActions && (\n        <div className={styles.footer}>\n          <div className={styles.footerButtons}>\n            {secondaryLabel && (\n              <Button variant=\"secondary\" size=\"medium\" onClick={onSecondary}>\n                {secondaryLabel}\n              </Button>\n            )}\n            {primaryLabel && (\n              <Button variant=\"primary\" size=\"medium\" onClick={onPrimary}>\n                {primaryLabel}\n              </Button>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Close button */}\n      {showClose && (\n        <IconButton\n          icon={X}\n          variant=\"ghost\"\n          size=\"xsmall\"\n          aria-label=\"Fechar modal\"\n          onClick={onClose}\n          className={styles.closeButton}\n        />\n      )}\n    </div>\n  );\n\n  if (noBackdrop) return panel;\n\n  return (\n    <div className={styles.backdrop} onClick={handleBackdropClick}>\n      {panel}\n    </div>\n  );\n}\n"],"names":["SIZE_CLASS","styles","Modal","open","size","title","children","footerActions","onClose","noBackdrop","onBackdropClick","className","panelRef","useRef","useEffect","handler","e","el","prev","_a","handleBackdropClick","panelCls","panel","jsxs","jsx","Divider","Slot","action","Button","IconButton","X","DIALOG_ICON_COLOR","ModalDialog","type","text","primaryLabel","onPrimary","secondaryLabel","onSecondary","isLoading","showActions","showClose","iconColor","renderIcon","Icon","Warning","XCircle","CheckCircle","ProgressSpinner","dialogBodyCls"],"mappings":"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"}

package/Modal/Modal.module.css

@@ -0,0 +1 @@
+._backdrop_1jp0m_2{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0e0f237a;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}._modal_1jp0m_14{position:relative;display:flex;flex-direction:column;align-items:flex-start;background-color:var(--color-canvas-neutral-white);border-radius:12px;box-shadow:var(--shadow-layer-md);padding-top:24px;padding-bottom:24px;font-family:var(--font-family-base, system-ui, sans-serif);max-width:100%}._sizeSmall_1jp0m_29{width:500px}._sizeMedium_1jp0m_30{width:768px}._sizeLarge_1jp0m_31{width:960px}._dialog_1jp0m_34{width:400px;min-height:290px}._head_1jp0m_40{display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-content:center;padding-left:24px;padding-right:24px;width:100%;flex-shrink:0}._titleRow_1jp0m_52{display:flex;align-items:center;justify-content:center;padding-right:32px;width:100%;flex-shrink:0}._title_1jp0m_52{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-20);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-20, 28px);color:var(--color-text-neutral-default);margin:0}._divider_1jp0m_74{width:100%;height:1px;flex-shrink:0;background-color:var(--color-stroke-neutral-default);border:none;margin:0}._body_1jp0m_84{display:flex;flex-direction:column;align-items:flex-start;padding:24px;width:100%;flex-shrink:0}._footer_1jp0m_94{display:flex;flex-direction:column;align-items:center;padding-left:24px;padding-right:24px;width:100%;flex-shrink:0}._footerButtons_1jp0m_104{display:flex;flex-direction:row;gap:8px;align-items:center;flex-shrink:0}._closeButton_1jp0m_113{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;border:none;background-color:transparent;cursor:pointer;color:var(--color-icon-neutral-default);padding:0;transition:background-color .12s ease,color .12s ease;flex-shrink:0}._closeButton_1jp0m_113:hover{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._closeButton_1jp0m_113:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._dialogBody_1jp0m_144{display:flex;flex-direction:column;gap:16px;align-items:center;padding:24px 24px 40px;width:100%;flex-shrink:0;text-align:center}._dialogBody_1jp0m_144._loading_1jp0m_155{flex:1 0 0;min-height:1px;justify-content:center}._dialogIconWrap_1jp0m_161{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0}._dialogTextGroup_1jp0m_170{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%;flex-shrink:0}._dialogTitle_1jp0m_179{font-size:var(--font-size-18);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-18, 28px);color:var(--color-text-neutral-default);width:100%;margin:0;text-align:center}._dialogText_1jp0m_170{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);width:100%;margin:0;text-align:center}._dialogIconWrap_1jp0m_161 svg{display:block}

package/Modal/Modal.module.css.js

@@ -0,0 +1,44 @@
+import './Modal.module.css';const o = "_backdrop_1jp0m_2", t = "_modal_1jp0m_14", _ = "_sizeSmall_1jp0m_29", e = "_sizeMedium_1jp0m_30", l = "_sizeLarge_1jp0m_31", i = "_dialog_1jp0m_34", a = "_head_1jp0m_40", d = "_titleRow_1jp0m_52", s = "_title_1jp0m_52", n = "_body_1jp0m_84", c = "_footer_1jp0m_94", p = "_footerButtons_1jp0m_104", m = "_closeButton_1jp0m_113", g = "_dialogBody_1jp0m_144", j = "_loading_1jp0m_155", r = "_dialogIconWrap_1jp0m_161", u = "_dialogTextGroup_1jp0m_170", z = "_dialogTitle_1jp0m_179", B = "_dialogText_1jp0m_170", T = {
+  backdrop: o,
+  modal: t,
+  sizeSmall: _,
+  sizeMedium: e,
+  sizeLarge: l,
+  dialog: i,
+  head: a,
+  titleRow: d,
+  title: s,
+  body: n,
+  footer: c,
+  footerButtons: p,
+  closeButton: m,
+  dialogBody: g,
+  loading: j,
+  dialogIconWrap: r,
+  dialogTextGroup: u,
+  dialogTitle: z,
+  dialogText: B
+};
+export {
+  o as backdrop,
+  n as body,
+  m as closeButton,
+  T as default,
+  i as dialog,
+  g as dialogBody,
+  r as dialogIconWrap,
+  B as dialogText,
+  u as dialogTextGroup,
+  z as dialogTitle,
+  c as footer,
+  p as footerButtons,
+  a as head,
+  j as loading,
+  t as modal,
+  l as sizeLarge,
+  e as sizeMedium,
+  _ as sizeSmall,
+  s as title,
+  d as titleRow
+};
+//# sourceMappingURL=Modal.module.css.js.map

package/Modal/Modal.module.css.js.map

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

package/Multiselect/Multiselect.js

@@ -0,0 +1,249 @@
+import { jsxs as a, jsx as n, Fragment as ae } from "react/jsx-runtime";
+import { useId as re, useState as y, useRef as I, useCallback as oe, useEffect as F } from "react";
+import { CaretDown as ce, MagnifyingGlass as de } from "@phosphor-icons/react";
+import { Icon as G } from "../Icon/Icon.js";
+import { Checkbox as ue } from "../Checkbox/Checkbox.js";
+import { Chip as fe } from "../Chip/Chip.js";
+import l from "./Multiselect.module.css.js";
+const he = {
+  large: l.sizeLarge,
+  medium: l.sizeMedium,
+  small: l.sizeSmall,
+  xsmall: l.sizeXsmall
+};
+function me({ checked: r, indeterminate: c = !1 }) {
+  const p = [
+    l.optionCheckbox,
+    r || c ? l.optionCheckboxChecked : void 0
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("span", { className: p, "aria-hidden": "true", children: c ? /* @__PURE__ */ n(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ n("path", { d: "M3 8H13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    }
+  ) : r ? /* @__PURE__ */ n(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ n(
+        "path",
+        {
+          d: "M2.5 8L6.5 12L13.5 4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  ) : null });
+}
+function Ce({
+  options: r,
+  value: c,
+  defaultValue: p,
+  onChange: d,
+  label: u,
+  placeholder: Q = "Selecionar opção",
+  hint: S,
+  size: W = "medium",
+  state: L = "default",
+  disabled: H = !1,
+  showSearch: v = !0,
+  maxChips: X = 3,
+  className: Z,
+  "aria-label": D,
+  "aria-labelledby": _,
+  id: q
+}) {
+  const J = re(), b = q ?? J, E = `${b}-listbox`, O = `${b}-label`, g = c !== void 0, [U, Y] = y(
+    p ?? []
+  ), i = g ? c : U, [s, j] = y(!1), [z, w] = y(""), x = I(null), B = I(null), R = I(null), o = H || L === "disabled", M = L === "error", K = r.filter(
+    (e) => e.label.toLowerCase().includes(z.toLowerCase())
+  ), k = r.filter((e) => !e.disabled), V = i.length, f = k.length > 0 && k.every((e) => i.includes(e.value)), P = V > 0 && !f, h = oe(
+    (e) => {
+      g || Y(e), d == null || d(e);
+    },
+    [g, d]
+  );
+  function ee(e) {
+    const t = i.includes(e) ? i.filter((N) => N !== e) : [...i, e];
+    h(t);
+  }
+  function le() {
+    if (f)
+      h([]);
+    else {
+      const e = k.map((t) => t.value);
+      h(e);
+    }
+  }
+  function ne(e, t) {
+    t.stopPropagation(), h(i.filter((N) => N !== e));
+  }
+  function $() {
+    o || (j(!0), w(""));
+  }
+  function m() {
+    var e;
+    j(!1), w(""), (e = B.current) == null || e.focus();
+  }
+  function te(e) {
+    (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), s || $()), e.key === "Escape" && (e.preventDefault(), m());
+  }
+  function se(e) {
+    e.key === "Escape" && (e.preventDefault(), m());
+  }
+  F(() => {
+    if (!s) return;
+    function e(t) {
+      x.current && !x.current.contains(t.target) && m();
+    }
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [s]), F(() => {
+    if (s && v) {
+      const e = setTimeout(() => {
+        var t;
+        return (t = R.current) == null ? void 0 : t.focus();
+      }, 50);
+      return () => clearTimeout(e);
+    }
+  }, [s, v]);
+  const C = r.filter((e) => i.includes(e.value)), A = C.slice(0, X), T = C.length - A.length, ie = [
+    l.multiselect,
+    he[W],
+    M ? l.stateError : void 0,
+    s ? l.stateOpen : void 0,
+    o ? l.disabled : void 0,
+    Z
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { ref: x, className: ie, id: b, children: [
+    u && /* @__PURE__ */ n("span", { id: O, className: l.label, children: u }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: B,
+        role: "combobox",
+        tabIndex: o ? -1 : 0,
+        className: l.trigger,
+        "aria-haspopup": "listbox",
+        "aria-expanded": s,
+        "aria-controls": E,
+        "aria-label": D,
+        "aria-labelledby": u ? `${O}` : _,
+        "aria-disabled": o,
+        onClick: o ? void 0 : s ? m : $,
+        onKeyDown: te,
+        children: [
+          /* @__PURE__ */ n("span", { className: l.chipGroup, children: C.length === 0 ? /* @__PURE__ */ n("span", { className: l.placeholder, children: Q }) : /* @__PURE__ */ a(ae, { children: [
+            A.map((e) => /* @__PURE__ */ n(
+              fe,
+              {
+                type: "outline",
+                size: "xsmall",
+                showClose: !0,
+                closeLabel: `Remover ${e.label}`,
+                disabled: o,
+                onClose: (t) => ne(e.value, t),
+                children: e.label
+              },
+              e.value
+            )),
+            T > 0 && /* @__PURE__ */ a("span", { className: l.overflowCount, children: [
+              "+",
+              T
+            ] })
+          ] }) }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: [l.caret, s ? l.caretOpen : void 0].filter(Boolean).join(" "),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(G, { as: ce, size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    S && /* @__PURE__ */ n("span", { className: [l.hint, M ? l.hintError : void 0].filter(Boolean).join(" "), children: S }),
+    s && /* @__PURE__ */ n(
+      "div",
+      {
+        className: l.panel,
+        onKeyDown: se,
+        children: /* @__PURE__ */ a("div", { className: l.panelInner, children: [
+          v && /* @__PURE__ */ a("div", { className: l.searchRow, children: [
+            /* @__PURE__ */ n(
+              ue,
+              {
+                checked: f ? !0 : P ? "indeterminate" : !1,
+                onChange: le,
+                "aria-label": f || P ? "Deselect all" : "Select all"
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: l.searchField, children: [
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  ref: R,
+                  type: "text",
+                  className: l.searchInput,
+                  placeholder: "Placeholder",
+                  value: z,
+                  onChange: (e) => w(e.target.value),
+                  "aria-label": "Search options"
+                }
+              ),
+              /* @__PURE__ */ n("span", { className: l.searchIcon, "aria-hidden": "true", children: /* @__PURE__ */ n(G, { as: de, size: 16 }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              id: E,
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-label": u ?? D ?? "Options",
+              className: l.list,
+              children: K.length === 0 ? /* @__PURE__ */ n("div", { className: l.noResults, children: "No results found" }) : K.map((e) => {
+                const t = i.includes(e.value);
+                return /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": t,
+                    "aria-disabled": e.disabled,
+                    className: l.option,
+                    onClick: () => !e.disabled && ee(e.value),
+                    tabIndex: e.disabled ? -1 : 0,
+                    children: [
+                      /* @__PURE__ */ n(me, { checked: t }),
+                      /* @__PURE__ */ n("span", { className: l.optionLabel, children: e.label })
+                    ]
+                  },
+                  e.value
+                );
+              })
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Ce as Multiselect
+};
+//# sourceMappingURL=Multiselect.js.map

package/Multiselect/Multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiselect.js","sources":["../../src/Multiselect/Multiselect.tsx"],"sourcesContent":["import React, { useId, useRef, useState, useEffect, useCallback } from 'react';\nimport { CaretDown, MagnifyingGlass } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport { Checkbox } from '../Checkbox/index.js';\nimport { Chip } from '../Chip/index.js';\nimport styles from './Multiselect.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type MultiselectSize = 'large' | 'medium' | 'small' | 'xsmall';\nexport type MultiselectState = 'default' | 'error' | 'disabled';\n\nexport interface MultiselectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: string;\n  /** Whether this option is disabled and cannot be selected. */\n  disabled?: boolean;\n}\n\nexport interface MultiselectProps {\n  /** List of selectable options. */\n  options: MultiselectOption[];\n  /** Currently selected values (controlled). */\n  value?: string[];\n  /** Default selected values (uncontrolled). */\n  defaultValue?: string[];\n  /** Called when the selection changes. */\n  onChange?: (values: string[]) => void;\n  /** Field label rendered above the trigger. */\n  label?: string;\n  /** Placeholder text when nothing is selected. */\n  placeholder?: string;\n  /** Hint text rendered below the trigger. */\n  hint?: string;\n  /** Size variant of the trigger field. */\n  size?: MultiselectSize;\n  /** Visual state of the field. */\n  state?: MultiselectState;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Whether to show the search/filter input inside the dropdown. */\n  showSearch?: boolean;\n  /** Maximum number of chip labels to show before showing \"+N\" overflow count. */\n  maxChips?: number;\n  /** Additional class name for the root element. */\n  className?: string;\n  /** ARIA label for the combobox trigger. */\n  'aria-label'?: string;\n  /** ARIA labelledby for the combobox trigger. */\n  'aria-labelledby'?: string;\n  /** ID attribute for the root element. */\n  id?: string;\n}\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst SIZE_CLASS: Record<MultiselectSize, string> = {\n  large:   styles.sizeLarge,\n  medium:  styles.sizeMedium,\n  small:   styles.sizeSmall,\n  xsmall:  styles.sizeXsmall,\n};\n\n// ─── Inner checkbox visual ─────────────────────────────────────────────────────\n\ninterface CheckboxBoxProps {\n  checked: boolean;\n  indeterminate?: boolean;\n}\n\nfunction CheckboxBox({ checked, indeterminate = false }: CheckboxBoxProps) {\n  const cls = [\n    styles.optionCheckbox,\n    checked || indeterminate ? styles.optionCheckboxChecked : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={cls} aria-hidden=\"true\">\n      {/*\n        Marcas idênticas às do Checkbox da biblioteca (SVG inline 16×16) para\n        manter o visual default — a linha da opção é um <button>, então não dá\n        para aninhar o <Checkbox> real (input interativo dentro de button).\n        Se a marca mudar na lib (Checkbox.tsx), sincronizar aqui.\n      */}\n      {indeterminate ? (\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M3 8H13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n      ) : checked ? (\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M2.5 8L6.5 12L13.5 4\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      ) : null}\n    </span>\n  );\n}\n\n// ─── Multiselect ───────────────────────────────────────────────────────────────\n\nexport function Multiselect({\n  options,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  label,\n  placeholder = 'Selecionar opção',\n  hint,\n  size = 'medium',\n  state = 'default',\n  disabled = false,\n  showSearch = true,\n  maxChips = 3,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  id: idProp,\n}: MultiselectProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const listboxId = `${id}-listbox`;\n  const labelId = `${id}-label`;\n\n  // ─── State ───────────────────────────────────────────────────\n  const isControlled = valueProp !== undefined;\n  const [internalSelected, setInternalSelected] = useState<string[]>(\n    defaultValue ?? [],\n  );\n  const selected = isControlled ? valueProp! : internalSelected;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n\n  // ─── Derived ─────────────────────────────────────────────────\n  const effectiveDisabled = disabled || state === 'disabled';\n  const isError = state === 'error';\n\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(searchQuery.toLowerCase()),\n  );\n\n  const selectableOptions = options.filter((opt) => !opt.disabled);\n  const selectedCount = selected.length;\n  const allSelected =\n    selectableOptions.length > 0 &&\n    selectableOptions.every((opt) => selected.includes(opt.value));\n  const someSelected = selectedCount > 0 && !allSelected;\n\n  // ─── Handlers ────────────────────────────────────────────────\n  const updateSelected = useCallback(\n    (next: string[]) => {\n      if (!isControlled) {\n        setInternalSelected(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  function toggleOption(optValue: string) {\n    const next = selected.includes(optValue)\n      ? selected.filter((v) => v !== optValue)\n      : [...selected, optValue];\n    updateSelected(next);\n  }\n\n  function toggleAll() {\n    if (allSelected) {\n      updateSelected([]);\n    } else {\n      const allValues = selectableOptions.map((o) => o.value);\n      updateSelected(allValues);\n    }\n  }\n\n  function removeChip(optValue: string, e: React.MouseEvent) {\n    e.stopPropagation();\n    updateSelected(selected.filter((v) => v !== optValue));\n  }\n\n  function openPanel() {\n    if (effectiveDisabled) return;\n    setIsOpen(true);\n    setSearchQuery('');\n  }\n\n  function closePanel() {\n    setIsOpen(false);\n    setSearchQuery('');\n    triggerRef.current?.focus();\n  }\n\n  function handleTriggerKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (!isOpen) openPanel();\n    }\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n\n  function handlePanelKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleOutside(e: MouseEvent) {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {\n        closePanel();\n      }\n    }\n    document.addEventListener('mousedown', handleOutside);\n    return () => document.removeEventListener('mousedown', handleOutside);\n  }, [isOpen]);\n\n  // Focus search when panel opens\n  useEffect(() => {\n    if (isOpen && showSearch) {\n      // slight delay so the panel is mounted before focus\n      const t = setTimeout(() => searchRef.current?.focus(), 50);\n      return () => clearTimeout(t);\n    }\n  }, [isOpen, showSearch]);\n\n  // ─── Chip rendering ──────────────────────────────────────────\n  const selectedOptions = options.filter((o) => selected.includes(o.value));\n  const visibleChips = selectedOptions.slice(0, maxChips);\n  const overflowCount = selectedOptions.length - visibleChips.length;\n\n  // ─── Class names ─────────────────────────────────────────────\n  const rootCls = [\n    styles.multiselect,\n    SIZE_CLASS[size],\n    isError ? styles.stateError : undefined,\n    isOpen ? styles.stateOpen : undefined,\n    effectiveDisabled ? styles.disabled : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // ─── Render ───────────────────────────────────────────────────\n  return (\n    <div ref={rootRef} className={rootCls} id={id}>\n      {/* Label */}\n      {label && (\n        <span id={labelId} className={styles.label}>\n          {label}\n        </span>\n      )}\n\n      {/* Trigger — div (não button) para permitir Chips com botão de fechar dentro */}\n      <div\n        ref={triggerRef}\n        role=\"combobox\"\n        tabIndex={effectiveDisabled ? -1 : 0}\n        className={styles.trigger}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={listboxId}\n        aria-label={ariaLabel}\n        aria-labelledby={label ? `${labelId}` : ariaLabelledby}\n        aria-disabled={effectiveDisabled}\n        onClick={effectiveDisabled ? undefined : (isOpen ? closePanel : openPanel)}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        {/* Chip group / placeholder */}\n        <span className={styles.chipGroup}>\n          {selectedOptions.length === 0 ? (\n            <span className={styles.placeholder}>{placeholder}</span>\n          ) : (\n            <>\n              {visibleChips.map((opt) => (\n                <Chip\n                  key={opt.value}\n                  type=\"outline\"\n                  size=\"xsmall\"\n                  showClose\n                  closeLabel={`Remover ${opt.label}`}\n                  disabled={effectiveDisabled}\n                  onClose={(e) => removeChip(opt.value, e as unknown as React.MouseEvent)}\n                >\n                  {opt.label}\n                </Chip>\n              ))}\n              {overflowCount > 0 && (\n                <span className={styles.overflowCount}>\n                  +{overflowCount}\n                </span>\n              )}\n            </>\n          )}\n        </span>\n\n        {/* Caret */}\n        <span\n          className={[styles.caret, isOpen ? styles.caretOpen : undefined]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <Icon as={CaretDown} size={16} />\n        </span>\n      </div>\n\n      {/* Hint */}\n      {hint && (\n        <span className={[styles.hint, isError ? styles.hintError : undefined]\n          .filter(Boolean)\n          .join(' ')}>\n          {hint}\n        </span>\n      )}\n\n      {/* Dropdown panel */}\n      {isOpen && (\n        <div\n          className={styles.panel}\n          onKeyDown={handlePanelKeyDown}\n        >\n          <div className={styles.panelInner}>\n            {/* Search row */}\n            {showSearch && (\n              <div className={styles.searchRow}>\n                <Checkbox\n                  checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n                  onChange={toggleAll}\n                  aria-label={allSelected || someSelected ? 'Deselect all' : 'Select all'}\n                />\n                <div className={styles.searchField}>\n                  <input\n                    ref={searchRef}\n                    type=\"text\"\n                    className={styles.searchInput}\n                    placeholder=\"Placeholder\"\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                    aria-label=\"Search options\"\n                  />\n                  <span className={styles.searchIcon} aria-hidden=\"true\">\n                    <Icon as={MagnifyingGlass} size={16} />\n                  </span>\n                </div>\n              </div>\n            )}\n\n            {/* Options list */}\n            <div\n              id={listboxId}\n              role=\"listbox\"\n              aria-multiselectable=\"true\"\n              aria-label={label ?? ariaLabel ?? 'Options'}\n              className={styles.list}\n            >\n              {filteredOptions.length === 0 ? (\n                <div className={styles.noResults}>No results found</div>\n              ) : (\n                filteredOptions.map((opt) => {\n                  const isSelected = selected.includes(opt.value);\n                  return (\n                    <button\n                      key={opt.value}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isSelected}\n                      aria-disabled={opt.disabled}\n                      className={styles.option}\n                      onClick={() => !opt.disabled && toggleOption(opt.value)}\n                      tabIndex={opt.disabled ? -1 : 0}\n                    >\n                      <CheckboxBox checked={isSelected} />\n                      <span className={styles.optionLabel}>{opt.label}</span>\n                    </button>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SIZE_CLASS","styles","CheckboxBox","checked","indeterminate","cls","jsx","Multiselect","options","valueProp","defaultValue","onChange","label","placeholder","hint","size","state","disabled","showSearch","maxChips","className","ariaLabel","ariaLabelledby","idProp","generatedId","useId","id","listboxId","labelId","isControlled","internalSelected","setInternalSelected","useState","selected","isOpen","setIsOpen","searchQuery","setSearchQuery","rootRef","useRef","triggerRef","searchRef","effectiveDisabled","isError","filteredOptions","opt","selectableOptions","selectedCount","allSelected","someSelected","updateSelected","useCallback","next","toggleOption","optValue","v","toggleAll","allValues","o","removeChip","e","openPanel","closePanel","_a","handleTriggerKeyDown","handlePanelKeyDown","useEffect","handleOutside","t","selectedOptions","visibleChips","overflowCount","rootCls","jsxs","Fragment","Chip","Icon","CaretDown","Checkbox","MagnifyingGlass","isSelected"],"mappings":"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"}

package/Multiselect/Multiselect.module.css

@@ -0,0 +1 @@
+._scrollable_1rjtm_9{scrollbar-width:thin;scrollbar-color:var(--color-fill-neutral-muted) transparent}._scrollable_1rjtm_9::-webkit-scrollbar{width:8px;height:8px}._scrollable_1rjtm_9::-webkit-scrollbar-track{background:transparent;border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb{background-color:var(--color-fill-neutral-muted);border-radius:4px}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:hover{background-color:var(--color-fill-neutral-default)}._scrollable_1rjtm_9::-webkit-scrollbar-thumb:active{background-color:var(--color-fill-neutral-strong)}._multiselect_1x1if_2{position:relative;display:inline-flex;flex-direction:column;gap:8px;width:320px;font-family:var(--font-family-base, system-ui, sans-serif);box-sizing:border-box}._label_1x1if_13{display:flex;align-items:center;gap:4px;font-size:var(--font-size-14);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-14, 20px);color:var(--color-text-neutral-mudle)}._trigger_1x1if_24{display:flex;align-items:center;gap:4px;width:100%;padding:0 12px;border-radius:8px;background-color:var(--color-fill-neutral-muted);border:1px solid transparent;cursor:pointer;box-sizing:border-box;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;text-align:left}._trigger_1x1if_24:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._sizeLarge_1x1if_48 ._trigger_1x1if_24{height:48px}._sizeMedium_1x1if_49 ._trigger_1x1if_24{height:42px}._sizeSmall_1x1if_50 ._trigger_1x1if_24{height:36px}._sizeXsmall_1x1if_51 ._trigger_1x1if_24{height:32px}._trigger_1x1if_24:hover:not(:disabled):not(:focus-visible){background-color:var(--color-fill-interaction-neutral-muted-hover)}._stateError_1x1if_58 ._trigger_1x1if_24{background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-feedback-danger-default)}._stateError_1x1if_58 ._trigger_1x1if_24:hover:not(:disabled){background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-feedback-danger-default)}._stateOpen_1x1if_68 ._trigger_1x1if_24{background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-brand-default);box-shadow:var(--shadow-focus)}._stateOpen_1x1if_68 ._trigger_1x1if_24:hover:not(:disabled){background-color:var(--color-canvas-neutral-white);border-color:var(--color-stroke-brand-default);box-shadow:var(--shadow-focus)}._multiselect_1x1if_2._disabled_1x1if_82{opacity:.5;cursor:not-allowed;pointer-events:none}._multiselect_1x1if_2._disabled_1x1if_82 ._trigger_1x1if_24{background-color:var(--color-fill-neutral-muted);border-color:transparent;cursor:not-allowed}._chipGroup_1x1if_95{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;flex:1 0 0;min-width:0;overflow:hidden}._placeholder_1x1if_106{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-subtlest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 0 0;min-width:0}._overflowCount_1x1if_121{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 12px;border-radius:9999px;background-color:var(--color-canvas-neutral-white);border:1px solid var(--color-stroke-neutral-default);font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-12, 16px);color:var(--color-text-neutral-mudle);white-space:nowrap;flex-shrink:0}._caret_1x1if_139{flex-shrink:0;width:16px;height:16px;color:var(--color-icon-neutral-default);transition:transform .2s ease}._caretOpen_1x1if_147{transform:rotate(180deg)}._panel_1x1if_152{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;display:flex;gap:4px;padding:12px;background-color:var(--color-canvas-neutral-white);border:1px solid var(--color-stroke-neutral-default);border-radius:8px;box-shadow:var(--shadow-layer-sm);box-sizing:border-box}._panelInner_1x1if_168{display:flex;flex-direction:column;flex:1 0 0;min-width:0}._searchRow_1x1if_176{display:flex;align-items:center;gap:8px;padding-left:8px;flex-shrink:0}._searchField_1x1if_184{display:flex;flex:1 0 0;align-items:center;height:36px;padding:8px;border:1px solid var(--color-stroke-neutral-default);border-radius:8px;background-color:var(--color-canvas-neutral-white);gap:8px;min-width:0;box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease}._searchField_1x1if_184:focus-within{border-color:var(--color-stroke-brand-default);box-shadow:var(--shadow-focus);outline:none}._searchField_1x1if_184:hover:not(:focus-within){border-color:var(--color-stroke-interaction-neutral-hover)}._searchInput_1x1if_211{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-family-base, system-ui, sans-serif);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)}._searchInput_1x1if_211::placeholder{color:var(--color-text-neutral-subtlest)}._searchIcon_1x1if_228{flex-shrink:0;width:16px;height:16px;color:var(--color-icon-neutral-subtle)}._list_1x1if_238{display:flex;flex-direction:column;overflow-y:auto;max-height:280px}._option_1x1if_247{display:flex;align-items:center;gap:8px;height:42px;padding:0 8px;border-radius:8px;background-color:var(--color-canvas-neutral-white);border:none;cursor:pointer;width:100%;text-align:left;box-sizing:border-box;transition:background-color .12s ease;flex-shrink:0}._option_1x1if_247:hover{background-color:var(--color-fill-interaction-neutral-subtle-hover)}._option_1x1if_247:focus-visible{outline:none;box-shadow:var(--shadow-focus)}._option_1x1if_247[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._optionCheckbox_1x1if_282{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:4px;border:2px solid var(--color-stroke-neutral-default);background-color:var(--color-canvas-neutral-white);box-sizing:border-box;transition:background-color .12s ease,border-color .12s ease;color:var(--color-icon-neutral-inverse);pointer-events:none}._option_1x1if_247:hover ._optionCheckbox_1x1if_282{border-color:var(--color-stroke-interaction-neutral-hover)}._optionCheckboxChecked_1x1if_304{background-color:var(--color-fill-brand-default);border-color:var(--color-fill-brand-default)}._option_1x1if_247:hover ._optionCheckboxChecked_1x1if_304{background-color:var(--color-fill-interaction-brand-hover);border-color:var(--color-stroke-interaction-brand-hover)}._optionLabel_1x1if_315{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;white-space:nowrap;flex:1 0 0;min-width:0}._noResults_1x1if_328{padding:12px 8px;font-size:var(--font-size-14);font-weight:var(--font-weight-regular);color:var(--color-text-neutral-subtlest);text-align:center}._hint_1x1if_337{display:flex;align-items:center;gap:4px;font-size:var(--font-size-12);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-12, 16px);color:var(--color-text-neutral-mudle)}._hintError_1x1if_347{color:var(--color-text-feedback-danger-default)}

package/Multiselect/Multiselect.module.css.js

@@ -0,0 +1,64 @@
+import './Multiselect.module.css';const e = "_multiselect_1x1if_2", o = "_label_1x1if_13", t = "_trigger_1x1if_24", _ = "_sizeLarge_1x1if_48", s = "_sizeMedium_1x1if_49", i = "_sizeSmall_1x1if_50", n = "_sizeXsmall_1x1if_51", c = "_stateError_1x1if_58", r = "_stateOpen_1x1if_68", l = "_disabled_1x1if_82", a = "_chipGroup_1x1if_95", p = "_placeholder_1x1if_106", x = "_overflowCount_1x1if_121", f = "_caret_1x1if_139", h = "_caretOpen_1x1if_147", d = "_panel_1x1if_152", u = "_panelInner_1x1if_168", b = "_searchRow_1x1if_176", m = "_searchField_1x1if_184", z = "_searchInput_1x1if_211", C = "_searchIcon_1x1if_228", g = "_list_1x1if_238 _scrollable_1rjtm_9", k = "_option_1x1if_247", I = "_optionCheckbox_1x1if_282", w = "_optionCheckboxChecked_1x1if_304", E = "_optionLabel_1x1if_315", L = "_noResults_1x1if_328", O = "_hint_1x1if_337", R = "_hintError_1x1if_347", v = {
+  multiselect: e,
+  label: o,
+  trigger: t,
+  sizeLarge: _,
+  sizeMedium: s,
+  sizeSmall: i,
+  sizeXsmall: n,
+  stateError: c,
+  stateOpen: r,
+  disabled: l,
+  chipGroup: a,
+  placeholder: p,
+  overflowCount: x,
+  caret: f,
+  caretOpen: h,
+  panel: d,
+  panelInner: u,
+  searchRow: b,
+  searchField: m,
+  searchInput: z,
+  searchIcon: C,
+  list: g,
+  option: k,
+  optionCheckbox: I,
+  optionCheckboxChecked: w,
+  optionLabel: E,
+  noResults: L,
+  hint: O,
+  hintError: R
+};
+export {
+  f as caret,
+  h as caretOpen,
+  a as chipGroup,
+  v as default,
+  l as disabled,
+  O as hint,
+  R as hintError,
+  o as label,
+  g as list,
+  e as multiselect,
+  L as noResults,
+  k as option,
+  I as optionCheckbox,
+  w as optionCheckboxChecked,
+  E as optionLabel,
+  x as overflowCount,
+  d as panel,
+  u as panelInner,
+  p as placeholder,
+  m as searchField,
+  C as searchIcon,
+  z as searchInput,
+  b as searchRow,
+  _ as sizeLarge,
+  s as sizeMedium,
+  i as sizeSmall,
+  n as sizeXsmall,
+  c as stateError,
+  r as stateOpen,
+  t as trigger
+};
+//# sourceMappingURL=Multiselect.module.css.js.map

package/Multiselect/Multiselect.module.css.js.map

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

package/Overlay/Overlay.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import i from "./Overlay.module.css.js";
+function l({ className: r, ...e }) {
+  const o = [i.overlay, r].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: o,
+      role: "presentation",
+      "aria-hidden": "true",
+      ...e
+    }
+  );
+}
+export {
+  l as Overlay
+};
+//# sourceMappingURL=Overlay.js.map

package/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Overlay.module.css';\n\nexport interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional class names forwarded to the root element. */\n  className?: string;\n}\n\n/**\n * A semi-transparent backdrop that dims the underlying content to\n * focus attention on a modal or dialog. Use as the foundation for\n * any modal, dialog, or focused popover.\n *\n * Renders as a `position:fixed` element that covers the full\n * viewport. The consumer is responsible for mounting/unmounting\n * the Overlay and layering the dialog on top of it via z-index.\n */\nexport function Overlay({ className, ...props }: OverlayProps) {\n  const cls = [styles.overlay, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      {...props}\n    />\n  );\n}\n"],"names":["Overlay","className","props","cls","styles","jsx"],"mappings":";;AAiBO,SAASA,EAAQ,EAAE,WAAAC,GAAW,GAAGC,KAAuB;AAC7D,QAAMC,IAAM,CAACC,EAAO,SAASH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEhE,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,eAAY;AAAA,MACX,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/Overlay/Overlay.module.css

@@ -0,0 +1 @@
+._overlay_18hjd_8{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-fill-neutral-intense);opacity:.4;z-index:100;cursor:default}

package/Overlay/Overlay.module.css.js

@@ -0,0 +1,8 @@
+import './Overlay.module.css';const e = "_overlay_18hjd_8", o = {
+  overlay: e
+};
+export {
+  o as default,
+  e as overlay
+};
+//# sourceMappingURL=Overlay.module.css.js.map

package/Overlay/Overlay.module.css.js.map

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

package/Paginator/Paginator.js

@@ -0,0 +1,118 @@
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import { CaretDoubleLeft as k, CaretLeft as w, CaretRight as x, CaretDoubleRight as L, CaretDown as D } from "@phosphor-icons/react";
+import { Icon as m } from "../Icon/Icon.js";
+import a from "./Paginator.module.css.js";
+function y({
+  currentPage: t,
+  totalPages: s,
+  pageWindowSize: n = 3,
+  pageSize: h = 10,
+  pageSizeOptions: e = [10, 20, 30, 50, 100],
+  onPageChange: r,
+  onPageSizeChange: o,
+  showPageSizeSelect: c = !0,
+  className: p
+}) {
+  const u = t <= 1, f = t >= s, v = M(t, s, n);
+  function d(i) {
+    i < 1 || i > s || i === t || r == null || r(i);
+  }
+  function j(i) {
+    const b = Number(i.target.value);
+    o == null || o(b);
+  }
+  const A = [a.paginator, p].filter(Boolean).join(" ");
+  return /* @__PURE__ */ N("nav", { className: A, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: [a.btn, a.btnArrow].join(" "),
+        onClick: () => d(1),
+        disabled: u,
+        "aria-disabled": u,
+        "aria-label": "First page",
+        children: /* @__PURE__ */ l(m, { as: k, size: 16, weight: "bold" })
+      }
+    ),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: [a.btn, a.btnArrow].join(" "),
+        onClick: () => d(t - 1),
+        disabled: u,
+        "aria-disabled": u,
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ l(m, { as: w, size: 16, weight: "bold" })
+      }
+    ),
+    v.map((i) => {
+      const b = i === t, C = [
+        a.btn,
+        a.btnNumber,
+        b ? a.btnNumberActive : ""
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ l(
+        "button",
+        {
+          className: C,
+          onClick: () => d(i),
+          disabled: b,
+          "aria-disabled": b,
+          "aria-label": `Page ${i}`,
+          "aria-current": b ? "page" : void 0,
+          children: i
+        },
+        i
+      );
+    }),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: [a.btn, a.btnArrow].join(" "),
+        onClick: () => d(t + 1),
+        disabled: f,
+        "aria-disabled": f,
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ l(m, { as: x, size: 16, weight: "bold" })
+      }
+    ),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: [a.btn, a.btnArrow].join(" "),
+        onClick: () => d(s),
+        disabled: f,
+        "aria-disabled": f,
+        "aria-label": "Last page",
+        children: /* @__PURE__ */ l(m, { as: L, size: 16, weight: "bold" })
+      }
+    ),
+    c && /* @__PURE__ */ N("div", { className: a.selectWrap, children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          className: a.select,
+          value: h,
+          onChange: j,
+          "aria-label": "Rows per page",
+          children: e.map((i) => /* @__PURE__ */ l("option", { value: i, children: i }, i))
+        }
+      ),
+      /* @__PURE__ */ l("span", { className: a.selectCaret, "aria-hidden": "true", children: /* @__PURE__ */ l(m, { as: D, size: 16 }) })
+    ] })
+  ] });
+}
+function M(t, s, n) {
+  if (s <= 0) return [];
+  const h = Math.floor(n / 2);
+  let e = t - h, r = e + n - 1;
+  e < 1 && (e = 1, r = Math.min(n, s)), r > s && (r = s, e = Math.max(1, r - n + 1));
+  const o = [];
+  for (let c = e; c <= r; c++)
+    o.push(c);
+  return o;
+}
+export {
+  y as Paginator
+};
+//# sourceMappingURL=Paginator.js.map