@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/pagination-dots/PaginationDots.d.ts

@@ -0,0 +1,27 @@
+export type PaginationDotsOrientation = 'horizontal' | 'vertical';
+export type PaginationDotsStyle = 'default' | 'inverted' | 'on-primary';
+export interface PaginationDotsProps {
+    /** Total number of pages/steps. */
+    pages: number;
+    /** Currently active page (1-indexed). */
+    activePage: number;
+    /** Layout orientation. Default: Horizontal. */
+    orientation?: PaginationDotsOrientation;
+    /** Color style. Default: Default. */
+    dotStyle?: PaginationDotsStyle;
+    /** Called when a dot is clicked. Receives the 1-indexed page number. */
+    onPageChange?: (page: number) => void;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Accessible name for the dot list. Default: "Pages". */
+    label?: string;
+    /** Accessible name for each dot. Default: `Page {page}`. */
+    formatPageLabel?: (page: number) => string;
+}
+/**
+ * Pagination Dots indicate progress through a fixed sequence of steps — most often a
+ * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one
+ * filled, the rest quiet.
+ */
+export default function PaginationDots({ pages, activePage, orientation, dotStyle, onPageChange, className, label, formatPageLabel, }: PaginationDotsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaginationDots.d.ts.map

package/dist/components/pagination-dots/PaginationDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.d.ts","sourceRoot":"","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,YAAY,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AAID;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,QAAoB,EACpB,YAAY,EACZ,SAAc,EACd,KAAe,EACf,eAAwC,GACzC,EAAE,mBAAmB,2CAqDrB"}

package/dist/components/pagination-dots/PaginationDots.js

@@ -0,0 +1,51 @@
+import { jsx as n } from "react/jsx-runtime";
+import t from "./PaginationDots.module.scss.js";
+const y = (i) => `Page ${i}`;
+function z({
+  pages: i,
+  activePage: e,
+  orientation: l = "horizontal",
+  dotStyle: s = "default",
+  onPageChange: o,
+  className: c = "",
+  label: d = "Pages",
+  formatPageLabel: p = y
+}) {
+  const m = l === "vertical", f = s === "inverted", u = s === "on-primary", v = m ? t["pagination-dots--vertical"] : t["pagination-dots--horizontal"], b = f ? t["pagination-dots--inverted"] : u ? t["pagination-dots--on-primary"] : "";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: [
+        t["pagination-dots"],
+        v,
+        b,
+        c
+      ].filter(Boolean).join(" "),
+      role: "tablist",
+      "aria-label": d,
+      children: Array.from({ length: i }, (j, _) => {
+        const a = _ + 1, r = a === e, g = [
+          t["pagination-dots__dot"],
+          r ? t["pagination-dots__dot--active"] : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": r,
+            "aria-label": p(a),
+            className: t["pagination-dots__item"],
+            onClick: () => o == null ? void 0 : o(a),
+            children: /* @__PURE__ */ n("span", { className: g })
+          },
+          a
+        );
+      })
+    }
+  );
+}
+export {
+  z as default
+};
+//# sourceMappingURL=PaginationDots.js.map

package/dist/components/pagination-dots/PaginationDots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.js","sources":["../../../src/components/pagination-dots/PaginationDots.tsx"],"sourcesContent":["import styles from './PaginationDots.module.scss';\n\nexport type PaginationDotsOrientation = 'horizontal' | 'vertical';\nexport type PaginationDotsStyle = 'default' | 'inverted' | 'on-primary';\n\nexport interface PaginationDotsProps {\n  /** Total number of pages/steps. */\n  pages: number;\n  /** Currently active page (1-indexed). */\n  activePage: number;\n  /** Layout orientation. Default: Horizontal. */\n  orientation?: PaginationDotsOrientation;\n  /** Color style. Default: Default. */\n  dotStyle?: PaginationDotsStyle;\n  /** Called when a dot is clicked. Receives the 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the dot list. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nconst defaultFormatPageLabel = (page: number) => `Page ${page}`;\n\n/**\n * Pagination Dots indicate progress through a fixed sequence of steps — most often a\n * multi-step onboarding flow or a swipeable carousel. One dot per step, the active one\n * filled, the rest quiet.\n */\nexport default function PaginationDots({\n  pages,\n  activePage,\n  orientation = 'horizontal',\n  dotStyle = 'default',\n  onPageChange,\n  className = '',\n  label = 'Pages',\n  formatPageLabel = defaultFormatPageLabel,\n}: PaginationDotsProps) {\n  const isVertical = orientation === 'vertical';\n  const isInverted = dotStyle === 'inverted';\n  const isOnPrimary = dotStyle === 'on-primary';\n\n  const orientationClass = isVertical\n    ? styles['pagination-dots--vertical']\n    : styles['pagination-dots--horizontal'];\n  const styleClass = isInverted\n    ? styles['pagination-dots--inverted']\n    : isOnPrimary\n      ? styles['pagination-dots--on-primary']\n      : '';\n\n  return (\n    <div\n      className={[\n        styles['pagination-dots'],\n        orientationClass,\n        styleClass,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"tablist\"\n      aria-label={label}\n    >\n      {Array.from({ length: pages }, (_, i) => {\n        const page = i + 1;\n        const isActive = page === activePage;\n        const dotClass = [\n          styles['pagination-dots__dot'],\n          isActive ? styles['pagination-dots__dot--active'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-label={formatPageLabel(page)}\n            className={styles['pagination-dots__item']}\n            onClick={() => onPageChange?.(page)}\n          >\n            <span className={dotClass} />\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["defaultFormatPageLabel","page","PaginationDots","pages","activePage","orientation","dotStyle","onPageChange","className","label","formatPageLabel","isVertical","isInverted","isOnPrimary","orientationClass","styles","styleClass","jsx","_","i","isActive","dotClass"],"mappings":";;AAwBA,MAAMA,IAAyB,CAACC,MAAiB,QAAQA,CAAI;AAO7D,SAAwBC,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkBV;AACpB,GAAwB;AACtB,QAAMW,IAAaN,MAAgB,YAC7BO,IAAaN,MAAa,YAC1BO,IAAcP,MAAa,cAE3BQ,IAAmBH,IACrBI,EAAO,2BAA2B,IAClCA,EAAO,6BAA6B,GAClCC,IAAaJ,IACfG,EAAO,2BAA2B,IAClCF,IACEE,EAAO,6BAA6B,IACpC;AAEN,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACTF,EAAO,iBAAiB;AAAA,QACxBD;AAAA,QACAE;AAAA,QACAR;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,cAAYC;AAAA,MAEX,UAAA,MAAM,KAAK,EAAE,QAAQN,KAAS,CAACe,GAAGC,MAAM;AACvC,cAAMlB,IAAOkB,IAAI,GACXC,IAAWnB,MAASG,GACpBiB,IAAW;AAAA,UACfN,EAAO,sBAAsB;AAAA,UAC7BK,IAAWL,EAAO,8BAA8B,IAAI;AAAA,QAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,eACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeG;AAAA,YACf,cAAYV,EAAgBT,CAAI;AAAA,YAChC,WAAWc,EAAO,uBAAuB;AAAA,YACzC,SAAS,MAAMR,KAAA,gBAAAA,EAAeN;AAAA,YAE9B,UAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAWI,EAAA,CAAU;AAAA,UAAA;AAAA,UARtBpB;AAAA,QAAA;AAAA,MAWX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/pagination-dots/PaginationDots.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.css');const i={"pagination-dots":"_pagination-dots_1j47i_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1j47i_6","pagination-dots--vertical":"_pagination-dots--vertical_1j47i_10","pagination-dots--inverted":"_pagination-dots--inverted_1j47i_14","pagination-dots__dot":"_pagination-dots__dot_1j47i_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1j47i_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1j47i_21","pagination-dots__item":"_pagination-dots__item_1j47i_31"};exports.default=i;
+//# sourceMappingURL=PaginationDots.module.scss.cjs.map

package/dist/components/pagination-dots/PaginationDots.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDots.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/pagination-dots/PaginationDots.module.scss.js

@@ -0,0 +1,14 @@
+import './PaginationDots.css';const i = {
+  "pagination-dots": "_pagination-dots_1j47i_2",
+  "pagination-dots--horizontal": "_pagination-dots--horizontal_1j47i_6",
+  "pagination-dots--vertical": "_pagination-dots--vertical_1j47i_10",
+  "pagination-dots--inverted": "_pagination-dots--inverted_1j47i_14",
+  "pagination-dots__dot": "_pagination-dots__dot_1j47i_14",
+  "pagination-dots__dot--active": "_pagination-dots__dot--active_1j47i_17",
+  "pagination-dots--on-primary": "_pagination-dots--on-primary_1j47i_21",
+  "pagination-dots__item": "_pagination-dots__item_1j47i_31"
+};
+export {
+  i as default
+};
+//# sourceMappingURL=PaginationDots.module.scss.js.map

package/dist/components/pagination-dots/PaginationDots.module.scss.js.map

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

package/dist/components/pagination-dots/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./PaginationDots.cjs");exports.PaginationDots=t.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/pagination-dots/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/pagination-dots/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination-dots/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/components/pagination-dots/index.js

@@ -0,0 +1,5 @@
+import { default as t } from "./PaginationDots.js";
+export {
+  t as PaginationDots
+};
+//# sourceMappingURL=index.js.map

package/dist/components/pagination-dots/index.js.map

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

package/dist/components/password-input/PasswordInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),__ds=require("@mattermost/compass-icons/components/eye-off-outline.js"),ds=__ds?.default??__ds,__rs=require("@mattermost/compass-icons/components/eye-outline.js"),rs=__rs?.default??__rs,us=require("../icon/Icon.cjs"),j=require("../field/fieldDescribedBy.cjs"),cs=require("../field-message/FieldMessage.cjs"),ps=require("../../utils/props.cjs"),fs=require("../../utils/string.cjs"),l=require("./PasswordInput.module.scss.cjs"),vs={small:"12",medium:"16",large:"16"},ws=t.forwardRef(function({className:k="",size:x="medium",label:u,invalid:F=!1,message:c,messageTone:y,showPasswordLabel:R="Show password",hidePasswordLabel:D="Hide password",revealButtonProps:V,revealed:N,defaultRevealed:z=!1,onRevealedChange:n,id:E,value:p,defaultValue:q,placeholder:O,onFocus:o,onBlur:d,onChange:r,disabled:f,"aria-describedby":P,...U},a){const $=t.useId(),v=E??$,A=t.useRef(null),i=p!==void 0,[H,K]=t.useState(q??""),h=i?p:H,T=h!=null&&h!=="",w=N!==void 0,[Z,B]=t.useState(z),b=w?N:Z,m=b&&!f,[G,S]=t.useState(!1),J=G||T,L=t.useCallback(s=>{S(!0),o==null||o(s)},[o]),Q=t.useCallback(s=>{S(!1),d==null||d(s)},[d]),W=t.useCallback(s=>{i||K(s.target.value),r==null||r(s)},[i,r]),X=t.useCallback(s=>{A.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),Y=t.useCallback(()=>{const s=!b;w||B(s),n==null||n(s)},[w,n,b]),{className:ss,onClick:_,onMouseDown:I,...es}=V??{},g=j.isFieldInvalid(F,c,y),C=j.hasFieldMessage(c),ts=l.default[`password-input--size-${fs.toKebab(x)}`],ls=g?l.default["password-input--invalid"]:"",as=u!=null&&J?l.default["password-input--label-floated"]:"",is=vs[x],ns=[l.default["password-input"],ts,ls,as,l.default["password-input--has-trailing-icon"],k].filter(Boolean).join(" "),M=C?`${v}-message`:void 0,os=y??"error";return e.jsxs("div",{className:ns,children:[e.jsxs("div",{className:l.default["password-input__wrapper"],children:[u!=null&&e.jsx("label",{className:l.default["password-input__label"],htmlFor:v,children:u}),e.jsxs("div",{className:l.default["password-input__inner"],children:[e.jsx("input",{ref:X,id:v,type:m?"text":"password",className:l.default["password-input__input"],value:i?p:void 0,defaultValue:i?void 0:q,placeholder:O,disabled:f,onFocus:L,onBlur:Q,onChange:W,"aria-invalid":g?!0:void 0,"aria-describedby":j.mergeFieldDescribedBy(P,M,void 0),...U}),e.jsx("span",{className:l.default["password-input__trailing-icon"],children:e.jsx("button",{...es,type:"button",className:ps.mergeClassNames(l.default["password-input__reveal"],ss),"aria-label":m?D:R,disabled:f,onClick:s=>{_==null||_(s),!s.defaultPrevented&&Y()},onMouseDown:s=>{s.preventDefault(),I==null||I(s)},children:e.jsx(us.default,{size:is,glyph:m?e.jsx(ds,{}):e.jsx(rs,{})})})})]})]}),C&&e.jsx(cs.default,{id:M,message:c,tone:os})]})});exports.default=ws;
+//# sourceMappingURL=PasswordInput.cjs.map

package/dist/components/password-input/PasswordInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.cjs","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite\n * passwords. They look like a text input with a built-in show/hide toggle so the\n * affordance is obvious, the same way Search Input always ships a magnifier.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            <span className={styles['password-input__trailing-icon']}>\n              <button\n                {...revealRest}\n                type=\"button\"\n                className={mergeClassNames(\n                  styles['password-input__reveal'],\n                  revealClassName,\n                )}\n                aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                disabled={disabled}\n                onClick={(e) => {\n                  revealOnClick?.(e);\n                  if (e.defaultPrevented) return;\n                  toggleRevealed();\n                }}\n                onMouseDown={(e) => {\n                  // Keep focus in the field when pressing the toggle.\n                  e.preventDefault();\n                  revealOnMouseDown?.(e);\n                }}\n              >\n                <Icon\n                  size={iconSize}\n                  glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                />\n              </button>\n            </span>\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":"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"}

package/dist/components/password-input/PasswordInput.css

@@ -0,0 +1 @@
+._password-input_d44ti_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._password-input__wrapper_d44ti_8{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:not(:disabled)):hover:not(:focus-within) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:disabled) ._password-input__wrapper_d44ti_8{background-color:var(--center-channel-bg);opacity:.56}._password-input__label_d44ti_28{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.72);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.72)}._password-input__inner_d44ti_55{display:flex;align-items:center;flex:1;min-width:0}._password-input__input_d44ti_18{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._password-input__input_d44ti_18:focus{outline:none}._password-input__input_d44ti_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._password-input__input_d44ti_18:disabled{cursor:not-allowed}._password-input__trailing-icon_d44ti_83{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--spacing-xs);color:rgba(var(--center-channel-color-rgb),.64)}._password-input__reveal_d44ti_91{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;cursor:pointer;color:inherit;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._password-input__reveal_d44ti_91:hover:not(:disabled){color:var(--center-channel-color)}._password-input__reveal_d44ti_91:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._password-input__reveal_d44ti_91:disabled{cursor:not-allowed}._password-input--size-small_d44ti_116 ._password-input__wrapper_d44ti_8{min-height:32px}._password-input--size-small_d44ti_116 ._password-input__inner_d44ti_55{padding:var(--spacing-xs) var(--spacing-m)}._password-input--size-small_d44ti_116 ._password-input__input_d44ti_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._password-input--size-small_d44ti_116._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-medium_d44ti_132 ._password-input__wrapper_d44ti_8{min-height:40px}._password-input--size-medium_d44ti_132 ._password-input__inner_d44ti_55{padding:var(--spacing-s) var(--spacing-l)}._password-input--size-medium_d44ti_132 ._password-input__input_d44ti_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._password-input--size-medium_d44ti_132 ._password-input__label_d44ti_28{font-size:var(--font-size-100);left:var(--spacing-m)}._password-input--size-medium_d44ti_132._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-large_d44ti_152 ._password-input__wrapper_d44ti_8{min-height:48px}._password-input--size-large_d44ti_152 ._password-input__inner_d44ti_55{padding:var(--spacing-m) var(--spacing-l)}._password-input--size-large_d44ti_152 ._password-input__input_d44ti_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._password-input--size-large_d44ti_152 ._password-input__label_d44ti_28{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._password-input--size-large_d44ti_152._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--button-bg)}._password-input_d44ti_2:has(._password-input__label_d44ti_28):not(._password-input--label-floated_d44ti_48) ._password-input__input_d44ti_18::placeholder{color:transparent}._password-input--invalid_d44ti_179 ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179 ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}

package/dist/components/password-input/PasswordInput.d.ts

@@ -0,0 +1,49 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
+import { BuiltInButtonProps } from '../../utils/props';
+export type PasswordInputSize = 'small' | 'medium' | 'large';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
+    /** Floating label. Floats above the border when focused or filled. */
+    label?: ReactNode;
+    /** Size variant. Default: Medium. */
+    size?: PasswordInputSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
+    /**
+     * Accessible name for the reveal toggle when the password is hidden.
+     * Default: `"Show password"`.
+     */
+    showPasswordLabel?: string;
+    /**
+     * Accessible name for the reveal toggle when the password is visible.
+     * Default: `"Hide password"`.
+     */
+    hidePasswordLabel?: string;
+    /** Extra attributes for the reveal toggle (e.g. `data-testid`). */
+    revealButtonProps?: BuiltInButtonProps;
+    /**
+     * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).
+     */
+    revealed?: boolean;
+    /** Uncontrolled initial reveal state. Default: `false`. */
+    defaultRevealed?: boolean;
+    /** Called when the reveal toggle changes visibility. */
+    onRevealedChange?: (revealed: boolean) => void;
+}
+/**
+ * Password Inputs are the dedicated field for secrets — login, signup, invite
+ * passwords. They look like a text input with a built-in show/hide toggle so the
+ * affordance is obvious, the same way Search Input always ships a magnifier.
+ */
+declare const PasswordInput: import('react').ForwardRefExoticComponent<PasswordInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/components/password-input/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS7D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,QAAA,MAAM,aAAa,iHAuLlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/password-input/PasswordInput.js

@@ -0,0 +1,140 @@
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import { forwardRef as ds, useId as cs, useRef as ps, useState as y, useCallback as l } from "react";
+import __us from "@mattermost/compass-icons/components/eye-off-outline.js";const us=__us&&__us.default?__us.default:__us;
+import __ms from "@mattermost/compass-icons/components/eye-outline.js";const ms=__ms&&__ms.default?__ms.default:__ms;
+import fs from "../icon/Icon.js";
+import { mergeFieldDescribedBy as vs, hasFieldMessage as ws, isFieldInvalid as Is } from "../field/fieldDescribedBy.js";
+import _s from "../field-message/FieldMessage.js";
+import { mergeClassNames as bs } from "../../utils/props.js";
+import { toKebab as Ns } from "../../utils/string.js";
+import t from "./PasswordInput.module.scss.js";
+const ys = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, Ds = ds(
+  function({
+    className: z = "",
+    size: h = "medium",
+    label: c,
+    invalid: C = !1,
+    message: p,
+    messageTone: F,
+    showPasswordLabel: D = "Show password",
+    hidePasswordLabel: E = "Hide password",
+    revealButtonProps: k,
+    revealed: x,
+    defaultRevealed: O = !1,
+    onRevealedChange: a,
+    id: U,
+    value: u,
+    defaultValue: M,
+    placeholder: $,
+    onFocus: n,
+    onBlur: r,
+    onChange: d,
+    disabled: m,
+    "aria-describedby": A,
+    ...H
+  }, o) {
+    const K = cs(), f = U ?? K, P = ps(null), i = u !== void 0, [Z, q] = y(
+      M ?? ""
+    ), g = i ? u : Z, G = g != null && g !== "", v = x !== void 0, [J, L] = y(O), w = v ? x : J, I = w && !m, [Q, R] = y(!1), T = Q || G, W = l(
+      (s) => {
+        R(!0), n == null || n(s);
+      },
+      [n]
+    ), X = l(
+      (s) => {
+        R(!1), r == null || r(s);
+      },
+      [r]
+    ), Y = l(
+      (s) => {
+        i || q(s.target.value), d == null || d(s);
+      },
+      [i, d]
+    ), B = l(
+      (s) => {
+        P.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
+      },
+      [o]
+    ), ss = l(() => {
+      const s = !w;
+      v || L(s), a == null || a(s);
+    }, [v, a, w]), {
+      className: ts,
+      onClick: _,
+      onMouseDown: b,
+      ...es
+    } = k ?? {}, S = Is(C, p, F), V = ws(p), os = t[`password-input--size-${Ns(h)}`], is = S ? t["password-input--invalid"] : "", ls = c != null && T ? t["password-input--label-floated"] : "", as = ys[h], ns = [
+      t["password-input"],
+      os,
+      is,
+      ls,
+      t["password-input--has-trailing-icon"],
+      z
+    ].filter(Boolean).join(" "), j = V ? `${f}-message` : void 0, rs = F ?? "error";
+    return /* @__PURE__ */ N("div", { className: ns, children: [
+      /* @__PURE__ */ N("div", { className: t["password-input__wrapper"], children: [
+        c != null && /* @__PURE__ */ e("label", { className: t["password-input__label"], htmlFor: f, children: c }),
+        /* @__PURE__ */ N("div", { className: t["password-input__inner"], children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: B,
+              id: f,
+              type: I ? "text" : "password",
+              className: t["password-input__input"],
+              value: i ? u : void 0,
+              defaultValue: i ? void 0 : M,
+              placeholder: $,
+              disabled: m,
+              onFocus: W,
+              onBlur: X,
+              onChange: Y,
+              "aria-invalid": S ? !0 : void 0,
+              "aria-describedby": vs(
+                A,
+                j,
+                void 0
+              ),
+              ...H
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: t["password-input__trailing-icon"], children: /* @__PURE__ */ e(
+            "button",
+            {
+              ...es,
+              type: "button",
+              className: bs(
+                t["password-input__reveal"],
+                ts
+              ),
+              "aria-label": I ? E : D,
+              disabled: m,
+              onClick: (s) => {
+                _ == null || _(s), !s.defaultPrevented && ss();
+              },
+              onMouseDown: (s) => {
+                s.preventDefault(), b == null || b(s);
+              },
+              children: /* @__PURE__ */ e(
+                fs,
+                {
+                  size: as,
+                  glyph: I ? /* @__PURE__ */ e(us, {}) : /* @__PURE__ */ e(ms, {})
+                }
+              )
+            }
+          ) })
+        ] })
+      ] }),
+      V && /* @__PURE__ */ e(_s, { id: j, message: p, tone: rs })
+    ] });
+  }
+);
+export {
+  Ds as default
+};
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite\n * passwords. They look like a text input with a built-in show/hide toggle so the\n * affordance is obvious, the same way Search Input always ships a magnifier.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            <span className={styles['password-input__trailing-icon']}>\n              <button\n                {...revealRest}\n                type=\"button\"\n                className={mergeClassNames(\n                  styles['password-input__reveal'],\n                  revealClassName,\n                )}\n                aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                disabled={disabled}\n                onClick={(e) => {\n                  revealOnClick?.(e);\n                  if (e.defaultPrevented) return;\n                  toggleRevealed();\n                }}\n                onMouseDown={(e) => {\n                  // Keep focus in the field when pressing the toggle.\n                  e.preventDefault();\n                  revealOnMouseDown?.(e);\n                }}\n              >\n                <Icon\n                  size={iconSize}\n                  glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                />\n              </button>\n            </span>\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":"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"}

package/dist/components/password-input/PasswordInput.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PasswordInput.css');const s={"password-input":"_password-input_d44ti_2","password-input__wrapper":"_password-input__wrapper_d44ti_8","password-input__input":"_password-input__input_d44ti_18","password-input__label":"_password-input__label_d44ti_28","password-input--label-floated":"_password-input--label-floated_d44ti_48","password-input__inner":"_password-input__inner_d44ti_55","password-input__trailing-icon":"_password-input__trailing-icon_d44ti_83","password-input__reveal":"_password-input__reveal_d44ti_91","password-input--size-small":"_password-input--size-small_d44ti_116","password-input--size-medium":"_password-input--size-medium_d44ti_132","password-input--size-large":"_password-input--size-large_d44ti_152","password-input--invalid":"_password-input--invalid_d44ti_179"};exports.default=s;
+//# sourceMappingURL=PasswordInput.module.scss.cjs.map

package/dist/components/password-input/PasswordInput.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/password-input/PasswordInput.module.scss.js

@@ -0,0 +1,18 @@
+import './PasswordInput.css';const s = {
+  "password-input": "_password-input_d44ti_2",
+  "password-input__wrapper": "_password-input__wrapper_d44ti_8",
+  "password-input__input": "_password-input__input_d44ti_18",
+  "password-input__label": "_password-input__label_d44ti_28",
+  "password-input--label-floated": "_password-input--label-floated_d44ti_48",
+  "password-input__inner": "_password-input__inner_d44ti_55",
+  "password-input__trailing-icon": "_password-input__trailing-icon_d44ti_83",
+  "password-input__reveal": "_password-input__reveal_d44ti_91",
+  "password-input--size-small": "_password-input--size-small_d44ti_116",
+  "password-input--size-medium": "_password-input--size-medium_d44ti_132",
+  "password-input--size-large": "_password-input--size-large_d44ti_152",
+  "password-input--invalid": "_password-input--invalid_d44ti_179"
+};
+export {
+  s as default
+};
+//# sourceMappingURL=PasswordInput.module.scss.js.map

package/dist/components/password-input/PasswordInput.module.scss.js.map

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

package/dist/components/password-input/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInput.cjs");exports.PasswordInput=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/password-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/password-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PasswordInput } from './PasswordInput';
+export type { PasswordInputProps, PasswordInputSize } from './PasswordInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/password-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/password-input/index.js

@@ -0,0 +1,5 @@
+import { default as r } from "./PasswordInput.js";
+export {
+  r as PasswordInput
+};
+//# sourceMappingURL=index.js.map

package/dist/components/password-input/index.js.map

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

package/dist/components/permalink-preview/PermalinkPreview.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),P=require("../user-avatar/UserAvatar.cjs"),S=require("../message-header/MessageHeader.cjs"),C=require("../icon/Icon.cjs"),H=require("../icon-button/IconButton.cjs"),__I=require("@mattermost/compass-icons/components/close.js"),I=__I?.default??__I,s=require("./PermalinkPreview.module.scss.cjs"),T=100;function A({authorName:l="Leonard Riley",avatarSrc:p,timestamp:m="10:43 AM",messageText:f="At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",children:v,originalChannel:_="~Desktop App",originalChannelLabel:x,onDismiss:t,dismissLabel:h="Remove permalink preview",showMoreLabel:j="Show more",showLessLabel:w="Show less",className:g=""}){const[n,k]=r.useState(!1),[d,b]=r.useState(!1),[N,y]=r.useState(0),o=r.useRef(null);r.useEffect(()=>{const i=o.current;if(!i)return;const a=()=>{const u=i.scrollHeight;y(u),b(u>T)};a();const c=new ResizeObserver(a);return c.observe(i),()=>c.disconnect()},[]);const q=[s.default["permalink-preview"],g].filter(Boolean).join(" "),R=[s.default["permalink-preview__body-clip"],d?s.default["permalink-preview__body-clip--truncated"]:"",n?s.default["permalink-preview__body-clip--expanded"]:""].filter(Boolean).join(" ");return e.jsxs("div",{className:q,children:[t!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["permalink-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(H.default,{className:s.default["permalink-preview__dismiss"],size:"x-small",padding:"compact","aria-label":h,icon:e.jsx(C.default,{size:"12",glyph:e.jsx(I,{})}),onClick:t})]}),e.jsxs("div",{className:s.default["permalink-preview__card"],children:[e.jsxs("div",{className:s.default["permalink-preview__message"],children:[e.jsxs("div",{className:s.default["permalink-preview__header"],children:[e.jsx(P.default,{src:p,alt:l,size:"24"}),e.jsx(S.default,{username:l,timestamp:m})]}),e.jsxs("div",{className:s.default["permalink-preview__body"],children:[e.jsx("div",{ref:o,className:R,style:{"--permalink-preview-body-height":`${N}px`},children:v??e.jsx("p",{className:s.default["permalink-preview__text"],children:f})}),d&&e.jsx("button",{className:s.default["permalink-preview__show-more"],onClick:i=>{i.stopPropagation(),k(a=>!a)},children:n?w:j})]})]}),e.jsx("p",{className:s.default["permalink-preview__origin"],children:x??e.jsxs(e.Fragment,{children:["Originally posted in ",_]})})]})]})}exports.default=A;
+//# sourceMappingURL=PermalinkPreview.cjs.map

package/dist/components/permalink-preview/PermalinkPreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermalinkPreview.cjs","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MessageHeader from '@/components/message-header/MessageHeader';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './PermalinkPreview.module.scss';\n\n// Keep in sync with max-height in PermalinkPreview.module.scss __body-clip\nconst TRUNCATION_HEIGHT_PX = 100;\n\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: React.ReactNode;\n  /** The quoted message body text. Ignored when `children` is provided. */\n  messageText?: React.ReactNode;\n  /**\n   * Rich content to render in the message body instead of the plain `messageText` string.\n   * Use this to embed structured content such as attachment cards or formatted fields.\n   * When present, `messageText` is not rendered.\n   */\n  children?: React.ReactNode;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: React.ReactNode;\n  /**\n   * Full footer line. Default: `Originally posted in {originalChannel}`.\n   * Pass a translated node to localize the surrounding copy.\n   */\n  originalChannelLabel?: React.ReactNode;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Remove permalink preview\". */\n  dismissLabel?: string;\n  /** Expand toggle text. Default: \"Show more\". */\n  showMoreLabel?: React.ReactNode;\n  /** Collapse toggle text. Default: \"Show less\". */\n  showLessLabel?: React.ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * A Permalink Preview renders an inline card for a message that another message links to.\n * Sender, timestamp, body, and origin channel — enough context to recognise the quoted\n * message without leaving where you are.\n */\nexport default function PermalinkPreview({\n  authorName = 'Leonard Riley',\n  avatarSrc,\n  timestamp = '10:43 AM',\n  messageText = 'At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.',\n  children,\n  originalChannel = '~Desktop App',\n  originalChannelLabel,\n  onDismiss,\n  dismissLabel = 'Remove permalink preview',\n  showMoreLabel = 'Show more',\n  showLessLabel = 'Show less',\n  className = '',\n}: PermalinkPreviewProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [needsTruncation, setNeedsTruncation] = useState(false);\n  const [bodyHeight, setBodyHeight] = useState(0);\n  const clipRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = clipRef.current;\n    if (!el) return;\n    const measure = () => {\n      const full = el.scrollHeight;\n      setBodyHeight(full);\n      setNeedsTruncation(full > TRUNCATION_HEIGHT_PX);\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rootClass = [styles['permalink-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const clipClass = [\n    styles['permalink-preview__body-clip'],\n    needsTruncation ? styles['permalink-preview__body-clip--truncated'] : '',\n    isExpanded ? styles['permalink-preview__body-clip--expanded'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['permalink-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['permalink-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label={dismissLabel}\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={styles['permalink-preview__card']}>\n        <div className={styles['permalink-preview__message']}>\n          <div className={styles['permalink-preview__header']}>\n            <UserAvatar src={avatarSrc} alt={authorName} size=\"24\" />\n            <MessageHeader username={authorName} timestamp={timestamp} />\n          </div>\n          <div className={styles['permalink-preview__body']}>\n            <div\n              ref={clipRef}\n              className={clipClass}\n              style={\n                {\n                  '--permalink-preview-body-height': `${bodyHeight}px`,\n                } as React.CSSProperties\n              }\n            >\n              {children ?? (\n                <p className={styles['permalink-preview__text']}>\n                  {messageText}\n                </p>\n              )}\n            </div>\n            {needsTruncation && (\n              <button\n                className={styles['permalink-preview__show-more']}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setIsExpanded((prev) => !prev);\n                }}\n              >\n                {isExpanded ? showLessLabel : showMoreLabel}\n              </button>\n            )}\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          {originalChannelLabel ?? <>Originally posted in {originalChannel}</>}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["TRUNCATION_HEIGHT_PX","PermalinkPreview","authorName","avatarSrc","timestamp","messageText","children","originalChannel","originalChannelLabel","onDismiss","dismissLabel","showMoreLabel","showLessLabel","className","isExpanded","setIsExpanded","useState","needsTruncation","setNeedsTruncation","bodyHeight","setBodyHeight","clipRef","useRef","useEffect","el","measure","full","ro","rootClass","styles","clipClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader","e","prev"],"mappings":"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"}

package/dist/components/permalink-preview/PermalinkPreview.css

@@ -0,0 +1 @@
+._permalink-preview_d73bp_2{--permalink-preview-dismiss-size: 20px;--permalink-preview-dismiss-outset: calc( var(--permalink-preview-dismiss-size) + var(--spacing-xxxs) );display:flex;align-items:flex-start;width:100%;max-width:700px;position:relative}._permalink-preview__dismiss-bridge_d73bp_13{position:absolute;top:calc(-1 * var(--permalink-preview-dismiss-outset));bottom:0;left:calc(-1 * var(--permalink-preview-dismiss-outset));width:var(--permalink-preview-dismiss-outset);z-index:1;pointer-events:none}._permalink-preview__dismiss_d73bp_13{position:absolute;top:0;left:calc(-1 * var(--spacing-xxl));z-index:2;opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._permalink-preview_d73bp_2:hover ._permalink-preview__dismiss-bridge_d73bp_13,._permalink-preview_d73bp_2:focus-within ._permalink-preview__dismiss-bridge_d73bp_13{pointer-events:auto}._permalink-preview_d73bp_2:hover ._permalink-preview__dismiss_d73bp_13,._permalink-preview_d73bp_2:focus-within ._permalink-preview__dismiss_d73bp_13{opacity:1;pointer-events:auto}._permalink-preview__card_d73bp_38{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-1);display:flex;flex-direction:column;flex:1 0 0;gap:var(--spacing-s);align-items:flex-start;min-width:0;padding:var(--spacing-xl);transition:box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._permalink-preview__card_d73bp_38:hover{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._permalink-preview__message_d73bp_57{display:flex;flex-direction:column;gap:var(--spacing-xxs);align-items:flex-start;overflow:hidden;width:100%}._permalink-preview__header_d73bp_65{display:flex;gap:var(--spacing-s);align-items:center;flex-shrink:0}._permalink-preview__body_d73bp_71{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xxs);width:100%}._permalink-preview__body-clip_d73bp_78{overflow:hidden;max-height:100px;width:100%;position:relative;transition:max-height var(--duration-moderate) var(--ease-transition)}._permalink-preview__body-clip_d73bp_78:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,transparent,var(--center-channel-bg));pointer-events:none;opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._permalink-preview__body-clip--truncated_d73bp_97:after{opacity:1}._permalink-preview__body-clip--expanded_d73bp_100{max-height:var(--permalink-preview-body-height)}._permalink-preview__body-clip--expanded_d73bp_100:after{opacity:0}._permalink-preview__show-more_d73bp_106{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--link-color);background:none;border:none;padding:0;cursor:pointer}._permalink-preview__show-more_d73bp_106:hover{text-decoration:underline}._permalink-preview__show-more_d73bp_106:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-radius:var(--radius-xs)}._permalink-preview__text_d73bp_124{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color);width:100%}._permalink-preview__origin_d73bp_131{font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;flex-shrink:0}

package/dist/components/permalink-preview/PermalinkPreview.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export interface PermalinkPreviewProps {
+    /** Sender's display name. Kept as `string`: it's also the avatar's alt text. */
+    authorName?: string;
+    /** Avatar image src. */
+    avatarSrc: string;
+    /** Timestamp label. */
+    timestamp?: React.ReactNode;
+    /** The quoted message body text. Ignored when `children` is provided. */
+    messageText?: React.ReactNode;
+    /**
+     * Rich content to render in the message body instead of the plain `messageText` string.
+     * Use this to embed structured content such as attachment cards or formatted fields.
+     * When present, `messageText` is not rendered.
+     */
+    children?: React.ReactNode;
+    /** "Originally posted in ~Channel" footer text. */
+    originalChannel?: React.ReactNode;
+    /**
+     * Full footer line. Default: `Originally posted in {originalChannel}`.
+     * Pass a translated node to localize the surrounding copy.
+     */
+    originalChannelLabel?: React.ReactNode;
+    /** Called when the dismiss control is clicked. Shown on hover when provided. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Remove permalink preview". */
+    dismissLabel?: string;
+    /** Expand toggle text. Default: "Show more". */
+    showMoreLabel?: React.ReactNode;
+    /** Collapse toggle text. Default: "Show less". */
+    showLessLabel?: React.ReactNode;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * A Permalink Preview renders an inline card for a message that another message links to.
+ * Sender, timestamp, body, and origin channel — enough context to recognise the quoted
+ * message without leaving where you are.
+ */
+export default function PermalinkPreview({ authorName, avatarSrc, timestamp, messageText, children, originalChannel, originalChannelLabel, onDismiss, dismissLabel, showMoreLabel, showLessLabel, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PermalinkPreview.d.ts.map

package/dist/components/permalink-preview/PermalinkPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,MAAM,WAAW,qBAAqB;IACpC,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,UAA4B,EAC5B,SAAS,EACT,SAAsB,EACtB,WAA0J,EAC1J,QAAQ,EACR,eAAgC,EAChC,oBAAoB,EACpB,SAAS,EACT,YAAyC,EACzC,aAA2B,EAC3B,aAA2B,EAC3B,SAAc,GACf,EAAE,qBAAqB,2CA4FvB"}