@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

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

@@ -1 +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}\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}: 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=\"Pages\"\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={`Page ${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":["PaginationDots","pages","activePage","orientation","dotStyle","onPageChange","className","isVertical","isInverted","isOnPrimary","orientationClass","styles","styleClass","jsx","_","i","page","isActive","dotClass"],"mappings":";;AAyBA,SAAwBA,EAAe;AAAA,EACrC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAwB;AACtB,QAAMC,IAAaJ,MAAgB,YAC7BK,IAAaJ,MAAa,YAC1BK,IAAcL,MAAa,cAE3BM,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,QACAN;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MAEV,UAAA,MAAM,KAAK,EAAE,QAAQL,KAAS,CAACa,GAAGC,MAAM;AACvC,cAAMC,IAAOD,IAAI,GACXE,IAAWD,MAASd,GACpBgB,IAAW;AAAA,UACfP,EAAO,sBAAsB;AAAA,UAC7BM,IAAWN,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,iBAAeI;AAAA,YACf,cAAY,QAAQD,CAAI;AAAA,YACxB,WAAWL,EAAO,uBAAuB;AAAA,YACzC,SAAS,MAAMN,KAAA,gBAAAA,EAAeW;AAAA,YAE9B,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWK,EAAA,CAAU;AAAA,UAAA;AAAA,UARtBF;AAAA,QAAA;AAAA,MAWX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.module.css');const t={"pagination-dots":"_pagination-dots_1nh7u_2","pagination-dots--horizontal":"_pagination-dots--horizontal_1nh7u_6","pagination-dots--vertical":"_pagination-dots--vertical_1nh7u_10","pagination-dots--inverted":"_pagination-dots--inverted_1nh7u_14","pagination-dots__dot":"_pagination-dots__dot_1nh7u_14","pagination-dots__dot--active":"_pagination-dots__dot--active_1nh7u_17","pagination-dots--on-primary":"_pagination-dots--on-primary_1nh7u_21","pagination-dots__item":"_pagination-dots__item_1nh7u_28"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PaginationDots.css');const t={"pagination-dots":"_pagination-dots_z2230_13","pagination-dots--horizontal":"_pagination-dots--horizontal_z2230_17","pagination-dots--vertical":"_pagination-dots--vertical_z2230_21","pagination-dots--inverted":"_pagination-dots--inverted_z2230_25","pagination-dots__dot":"_pagination-dots__dot_z2230_25","pagination-dots__dot--active":"_pagination-dots__dot--active_z2230_28","pagination-dots--on-primary":"_pagination-dots--on-primary_z2230_32","pagination-dots__item":"_pagination-dots__item_z2230_42"};exports.default=t;
 //# sourceMappingURL=PaginationDots.module.scss.cjs.map

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

@@ -1,12 +1,12 @@
-import './PaginationDots.module.css';const t = {
-  "pagination-dots": "_pagination-dots_1nh7u_2",
-  "pagination-dots--horizontal": "_pagination-dots--horizontal_1nh7u_6",
-  "pagination-dots--vertical": "_pagination-dots--vertical_1nh7u_10",
-  "pagination-dots--inverted": "_pagination-dots--inverted_1nh7u_14",
-  "pagination-dots__dot": "_pagination-dots__dot_1nh7u_14",
-  "pagination-dots__dot--active": "_pagination-dots__dot--active_1nh7u_17",
-  "pagination-dots--on-primary": "_pagination-dots--on-primary_1nh7u_21",
-  "pagination-dots__item": "_pagination-dots__item_1nh7u_28"
+import './PaginationDots.css';const t = {
+  "pagination-dots": "_pagination-dots_z2230_13",
+  "pagination-dots--horizontal": "_pagination-dots--horizontal_z2230_17",
+  "pagination-dots--vertical": "_pagination-dots--vertical_z2230_21",
+  "pagination-dots--inverted": "_pagination-dots--inverted_z2230_25",
+  "pagination-dots__dot": "_pagination-dots__dot_z2230_25",
+  "pagination-dots__dot--active": "_pagination-dots__dot--active_z2230_28",
+  "pagination-dots--on-primary": "_pagination-dots--on-primary_z2230_32",
+  "pagination-dots__item": "_pagination-dots__item_z2230_42"
 };
 export {
   t as default

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"),__rs=require("@mattermost/compass-icons/components/eye-off-outline.js"),rs=__rs?.default??__rs,__us=require("@mattermost/compass-icons/components/eye-outline.js"),us=__us?.default??__us,cs=require("../icon/Icon.cjs"),j=require("../field/fieldDescribedBy.cjs"),ps=require("../field-message/FieldMessage.cjs"),fs=require("../../utils/props.cjs"),vs=require("../../utils/string.cjs"),l=require("./PasswordInput.module.scss.cjs"),ws={small:"12",medium:"16",large:"16"},ms=t.forwardRef(function({className:F="",size:x="medium",label:u,invalid:R=!1,message:c,messageTone:y,showPasswordLabel:D="Show password",hidePasswordLabel:V="Hide password",revealButtonProps:z,revealable:N=!0,revealed:q,defaultRevealed:E=!1,onRevealedChange:n,id:O,value:p,defaultValue:h,placeholder:P,onFocus:o,onBlur:d,onChange:r,disabled:f,"aria-describedby":U,...$},a){const A=t.useId(),v=O??A,H=t.useRef(null),i=p!==void 0,[K,T]=t.useState(h??""),S=i?p:K,Z=S!=null&&S!=="",w=q!==void 0,[B,G]=t.useState(E),m=w?q:B,b=N&&m&&!f,[J,g]=t.useState(!1),L=J||Z,Q=t.useCallback(s=>{g(!0),o==null||o(s)},[o]),W=t.useCallback(s=>{g(!1),d==null||d(s)},[d]),X=t.useCallback(s=>{i||T(s.target.value),r==null||r(s)},[i,r]),Y=t.useCallback(s=>{H.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),ss=t.useCallback(()=>{const s=!m;w||G(s),n==null||n(s)},[w,n,m]),{className:es,onClick:_,onMouseDown:I,...ts}=z??{},C=j.isFieldInvalid(R,c,y),M=j.hasFieldMessage(c),ls=l.default[`password-input--size-${vs.toKebab(x)}`],as=C?l.default["password-input--invalid"]:"",is=u!=null&&L?l.default["password-input--label-floated"]:"",ns=ws[x],os=[l.default["password-input"],ls,as,is,l.default["password-input--has-trailing-icon"],F].filter(Boolean).join(" "),k=M?`${v}-message`:void 0,ds=y??"error";return e.jsxs("div",{className:os,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:Y,id:v,type:b?"text":"password",className:l.default["password-input__input"],value:i?p:void 0,defaultValue:i?void 0:h,placeholder:P,disabled:f,onFocus:Q,onBlur:W,onChange:X,"aria-invalid":C?!0:void 0,"aria-describedby":j.mergeFieldDescribedBy(U,k,void 0),...$}),N&&e.jsx("span",{className:l.default["password-input__trailing-icon"],children:e.jsx("button",{...ts,type:"button",className:fs.mergeClassNames(l.default["password-input__reveal"],es),"aria-label":b?V:D,disabled:f,onClick:s=>{_==null||_(s),!s.defaultPrevented&&ss()},onMouseDown:s=>{s.preventDefault(),I==null||I(s)},children:e.jsx(cs.default,{size:ns,glyph:b?e.jsx(rs,{}):e.jsx(us,{})})})})]})]}),M&&e.jsx(ps.default,{id:k,message:c,tone:ds})]})});exports.default=ms;
+//# 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  /**\n   * Whether to render the show/hide toggle. Default: `true`. Set `false` for\n   * secrets that should stay masked with no reveal affordance (for example\n   * System Console API keys). The input stays `type=\"password\"`, and\n   * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,\n   * `showPasswordLabel` and `hidePasswordLabel` are ignored.\n   */\n  revealable?: boolean;\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 passwords.\n * They look like a text input with a built-in show/hide toggle so the affordance is obvious\n * before the user reads a single word.\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      revealable = true,\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 = revealable && 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            {revealable && (\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            )}\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","revealable","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_wqhfx_13{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._password-input__wrapper_wqhfx_19{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_wqhfx_13:has(._password-input__input_wqhfx_29:not(:disabled)):hover:not(:focus-within) ._password-input__wrapper_wqhfx_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._password-input_wqhfx_13:has(._password-input__input_wqhfx_29:focus-visible) ._password-input__wrapper_wqhfx_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._password-input_wqhfx_13:has(._password-input__input_wqhfx_29:disabled) ._password-input__wrapper_wqhfx_19{background-color:var(--center-channel-bg);opacity:.56}._password-input__label_wqhfx_39{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);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_wqhfx_59 ._password-input__label_wqhfx_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4;color:rgba(var(--center-channel-color-rgb),.72)}._password-input__inner_wqhfx_66{display:flex;align-items:center;flex:1;min-width:0}._password-input__input_wqhfx_29{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);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_wqhfx_29:focus{outline:none}._password-input__input_wqhfx_29::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._password-input__input_wqhfx_29:disabled{cursor:not-allowed}._password-input__trailing-icon_wqhfx_94{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_wqhfx_102{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:none}._password-input__reveal_wqhfx_102:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_wqhfx_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._password-input__reveal_wqhfx_102:focus-visible{animation:none}}@keyframes _focus-ring-in_wqhfx_1{0%{outline-color:transparent;outline-offset:0}}._password-input__reveal_wqhfx_102:hover:not(:disabled){transition:color var(--duration-quick) var(--ease-transition);color:var(--center-channel-color)}._password-input__reveal_wqhfx_102:disabled{cursor:not-allowed}._password-input--size-small_wqhfx_138 ._password-input__wrapper_wqhfx_19{min-height:32px}._password-input--size-small_wqhfx_138 ._password-input__inner_wqhfx_66{padding:var(--spacing-xs) var(--spacing-m)}._password-input--size-small_wqhfx_138 ._password-input__input_wqhfx_29{font-size:var(--font-size-75);line-height:var(--line-height-25)}._password-input--size-small_wqhfx_138._password-input--label-floated_wqhfx_59 ._password-input__label_wqhfx_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._password-input--size-medium_wqhfx_154 ._password-input__wrapper_wqhfx_19{min-height:40px}._password-input--size-medium_wqhfx_154 ._password-input__inner_wqhfx_66{padding:var(--spacing-s) var(--spacing-l)}._password-input--size-medium_wqhfx_154 ._password-input__input_wqhfx_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._password-input--size-medium_wqhfx_154 ._password-input__label_wqhfx_39{font-size:var(--font-size-100);left:var(--spacing-m);line-height:var(--line-height-100)}._password-input--size-medium_wqhfx_154._password-input--label-floated_wqhfx_59 ._password-input__label_wqhfx_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._password-input--size-large_wqhfx_175 ._password-input__wrapper_wqhfx_19{min-height:48px}._password-input--size-large_wqhfx_175 ._password-input__inner_wqhfx_66{padding:var(--spacing-m) var(--spacing-l)}._password-input--size-large_wqhfx_175 ._password-input__input_wqhfx_29{font-size:var(--font-size-200);line-height:var(--line-height-200)}._password-input--size-large_wqhfx_175 ._password-input__label_wqhfx_39{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._password-input--size-large_wqhfx_175._password-input--label-floated_wqhfx_59 ._password-input__label_wqhfx_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._password-input_wqhfx_13:has(._password-input__input_wqhfx_29:focus-visible) ._password-input__label_wqhfx_39{color:var(--button-bg)}._password-input_wqhfx_13:not(._password-input--label-floated_wqhfx_59) ._password-input__label_wqhfx_39~* ._password-input__input_wqhfx_29::placeholder{color:transparent}._password-input--invalid_wqhfx_202 ._password-input__wrapper_wqhfx_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_wqhfx_202:has(._password-input__input_wqhfx_29:focus-visible) ._password-input__wrapper_wqhfx_19{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_wqhfx_202 ._password-input__label_wqhfx_39{color:var(--error-text, var(--color-danger))}._password-input--invalid_wqhfx_202:has(._password-input__input_wqhfx_29:focus-visible) ._password-input__label_wqhfx_39{color:var(--error-text, var(--color-danger))}

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

@@ -0,0 +1,57 @@
+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;
+    /**
+     * Whether to render the show/hide toggle. Default: `true`. Set `false` for
+     * secrets that should stay masked with no reveal affordance (for example
+     * System Console API keys). The input stays `type="password"`, and
+     * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,
+     * `showPasswordLabel` and `hidePasswordLabel` are ignored.
+     */
+    revealable?: boolean;
+    /** 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
+ * before the user reads a single word.
+ */
+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;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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,iHA0LlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,141 @@
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import { forwardRef as cs, useId as us, useRef as ps, useState as y, useCallback as l } from "react";
+import __ms from "@mattermost/compass-icons/components/eye-off-outline.js";const ms=__ms&&__ms.default?__ms.default:__ms;
+import __fs from "@mattermost/compass-icons/components/eye-outline.js";const fs=__fs&&__fs.default?__fs.default:__fs;
+import ws from "../icon/Icon.js";
+import { mergeFieldDescribedBy as vs, hasFieldMessage as Is, isFieldInvalid as _s } from "../field/fieldDescribedBy.js";
+import bs from "../field-message/FieldMessage.js";
+import { mergeClassNames as Ns } from "../../utils/props.js";
+import { toKebab as ys } from "../../utils/string.js";
+import t from "./PasswordInput.module.scss.js";
+const hs = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, Es = cs(
+  function({
+    className: C = "",
+    size: h = "medium",
+    label: c,
+    invalid: D = !1,
+    message: u,
+    messageTone: F,
+    showPasswordLabel: E = "Show password",
+    hidePasswordLabel: k = "Hide password",
+    revealButtonProps: O,
+    revealable: x = !0,
+    revealed: M,
+    defaultRevealed: U = !1,
+    onRevealedChange: a,
+    id: $,
+    value: p,
+    defaultValue: g,
+    placeholder: A,
+    onFocus: n,
+    onBlur: r,
+    onChange: d,
+    disabled: m,
+    "aria-describedby": H,
+    ...K
+  }, o) {
+    const P = us(), f = $ ?? P, Z = ps(null), i = p !== void 0, [q, G] = y(
+      g ?? ""
+    ), R = i ? p : q, J = R != null && R !== "", w = M !== void 0, [L, Q] = y(U), v = w ? M : L, I = x && v && !m, [T, S] = y(!1), W = T || J, X = l(
+      (s) => {
+        S(!0), n == null || n(s);
+      },
+      [n]
+    ), Y = l(
+      (s) => {
+        S(!1), r == null || r(s);
+      },
+      [r]
+    ), B = l(
+      (s) => {
+        i || G(s.target.value), d == null || d(s);
+      },
+      [i, d]
+    ), ss = l(
+      (s) => {
+        Z.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
+      },
+      [o]
+    ), ts = l(() => {
+      const s = !v;
+      w || Q(s), a == null || a(s);
+    }, [w, a, v]), {
+      className: es,
+      onClick: _,
+      onMouseDown: b,
+      ...os
+    } = O ?? {}, V = _s(D, u, F), j = Is(u), is = t[`password-input--size-${ys(h)}`], ls = V ? t["password-input--invalid"] : "", as = c != null && W ? t["password-input--label-floated"] : "", ns = hs[h], rs = [
+      t["password-input"],
+      is,
+      ls,
+      as,
+      t["password-input--has-trailing-icon"],
+      C
+    ].filter(Boolean).join(" "), z = j ? `${f}-message` : void 0, ds = F ?? "error";
+    return /* @__PURE__ */ N("div", { className: rs, 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: ss,
+              id: f,
+              type: I ? "text" : "password",
+              className: t["password-input__input"],
+              value: i ? p : void 0,
+              defaultValue: i ? void 0 : g,
+              placeholder: A,
+              disabled: m,
+              onFocus: X,
+              onBlur: Y,
+              onChange: B,
+              "aria-invalid": V ? !0 : void 0,
+              "aria-describedby": vs(
+                H,
+                z,
+                void 0
+              ),
+              ...K
+            }
+          ),
+          x && /* @__PURE__ */ e("span", { className: t["password-input__trailing-icon"], children: /* @__PURE__ */ e(
+            "button",
+            {
+              ...os,
+              type: "button",
+              className: Ns(
+                t["password-input__reveal"],
+                es
+              ),
+              "aria-label": I ? k : E,
+              disabled: m,
+              onClick: (s) => {
+                _ == null || _(s), !s.defaultPrevented && ts();
+              },
+              onMouseDown: (s) => {
+                s.preventDefault(), b == null || b(s);
+              },
+              children: /* @__PURE__ */ e(
+                ws,
+                {
+                  size: ns,
+                  glyph: I ? /* @__PURE__ */ e(ms, {}) : /* @__PURE__ */ e(fs, {})
+                }
+              )
+            }
+          ) })
+        ] })
+      ] }),
+      j && /* @__PURE__ */ e(bs, { id: z, message: u, tone: ds })
+    ] });
+  }
+);
+export {
+  Es 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  /**\n   * Whether to render the show/hide toggle. Default: `true`. Set `false` for\n   * secrets that should stay masked with no reveal affordance (for example\n   * System Console API keys). The input stays `type=\"password\"`, and\n   * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,\n   * `showPasswordLabel` and `hidePasswordLabel` are ignored.\n   */\n  revealable?: boolean;\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 passwords.\n * They look like a text input with a built-in show/hide toggle so the affordance is obvious\n * before the user reads a single word.\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      revealable = true,\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 = revealable && 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            {revealable && (\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            )}\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","revealable","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_wqhfx_13","password-input__wrapper":"_password-input__wrapper_wqhfx_19","password-input__input":"_password-input__input_wqhfx_29","password-input__label":"_password-input__label_wqhfx_39","password-input--label-floated":"_password-input--label-floated_wqhfx_59","password-input__inner":"_password-input__inner_wqhfx_66","password-input__trailing-icon":"_password-input__trailing-icon_wqhfx_94","password-input__reveal":"_password-input__reveal_wqhfx_102","focus-ring-in":"_focus-ring-in_wqhfx_1","password-input--size-small":"_password-input--size-small_wqhfx_138","password-input--size-medium":"_password-input--size-medium_wqhfx_154","password-input--size-large":"_password-input--size-large_wqhfx_175","password-input--invalid":"_password-input--invalid_wqhfx_202"};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,19 @@
+import './PasswordInput.css';const _ = {
+  "password-input": "_password-input_wqhfx_13",
+  "password-input__wrapper": "_password-input__wrapper_wqhfx_19",
+  "password-input__input": "_password-input__input_wqhfx_29",
+  "password-input__label": "_password-input__label_wqhfx_39",
+  "password-input--label-floated": "_password-input--label-floated_wqhfx_59",
+  "password-input__inner": "_password-input__inner_wqhfx_66",
+  "password-input__trailing-icon": "_password-input__trailing-icon_wqhfx_94",
+  "password-input__reveal": "_password-input__reveal_wqhfx_102",
+  "focus-ring-in": "_focus-ring-in_wqhfx_1",
+  "password-input--size-small": "_password-input--size-small_wqhfx_138",
+  "password-input--size-medium": "_password-input--size-medium_wqhfx_154",
+  "password-input--size-large": "_password-input--size-large_wqhfx_175",
+  "password-input--invalid": "_password-input--invalid_wqhfx_202"
+};
+export {
+  _ 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.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/permalink-preview/PermalinkPreview.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../user-avatar/UserAvatar.cjs"),m=require("../message-header/MessageHeader.cjs"),o=require("../icon/Icon.cjs"),p=require("../icon-button/IconButton.cjs"),__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,s=require("./PermalinkPreview.module.scss.cjs");function f({authorName:i="Leonard Riley",avatarSrc:r,timestamp:l="10:43 AM",messageText:n="At eu sed tristique gravida et fames vel pellentesque. Urna phasellus integer eu tempor mauris amet sagittis. Mollis risus mi felis magna.",originalChannel:t="~Desktop App",onDismiss:a,className:d=""}){const u=[s.default["permalink-preview"],d].filter(Boolean).join(" ");return e.jsxs("div",{className:u,children:[a!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["permalink-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(p.default,{className:s.default["permalink-preview__dismiss"],size:"x-small",padding:"compact","aria-label":"Remove permalink preview",icon:e.jsx(o.default,{size:"12",glyph:e.jsx(v,{})}),onClick:a})]}),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(c.default,{src:r,alt:i,size:"24"}),e.jsx(m.default,{username:i,timestamp:l})]}),e.jsx("div",{className:s.default["permalink-preview__body"],children:e.jsx("p",{className:s.default["permalink-preview__text"],children:n})})]}),e.jsxs("p",{className:s.default["permalink-preview__origin"],children:["Originally posted in ",t]})]})]})}exports.default=f;
+"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

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.cjs","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"sourcesContent":["import 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\nexport interface PermalinkPreviewProps {\n  /** Sender's display name. */\n  authorName?: string;\n  /** Avatar image src. */\n  avatarSrc: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** The quoted message body text. */\n  messageText?: string;\n  /** \"Originally posted in ~Channel\" footer text. */\n  originalChannel?: string;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\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  originalChannel = '~Desktop App',\n  onDismiss,\n  className = '',\n}: PermalinkPreviewProps) {\n  const rootClass = [styles['permalink-preview'], className]\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=\"Remove permalink preview\"\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            <p className={styles['permalink-preview__text']}>{messageText}</p>\n          </div>\n        </div>\n        <p className={styles['permalink-preview__origin']}>\n          Originally posted in {originalChannel}\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"names":["PermalinkPreview","authorName","avatarSrc","timestamp","messageText","originalChannel","onDismiss","className","rootClass","styles","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","UserAvatar","MessageHeader"],"mappings":"2ZA6BA,SAAwBA,EAAiB,CACvC,WAAAC,EAAa,gBACb,UAAAC,EACA,UAAAC,EAAY,WACZ,YAAAC,EAAc,6IACd,gBAAAC,EAAkB,eAClB,UAAAC,EACA,UAAAC,EAAY,EACd,EAA0B,CACxB,MAAMC,EAAY,CAACC,UAAO,mBAAmB,EAAGF,CAAS,EACtD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACb,SAAA,CAAAF,GAAa,MACZI,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,mCAAmC,EACrD,cAAW,EAAA,CAAA,EAEbG,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWJ,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,UACL,QAAQ,UACR,aAAW,2BACX,WAAOK,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAAST,CAAA,CAAA,CACX,EACF,EAGFI,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,yBAAyB,EAC9C,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,2BAA2B,EAChD,SAAA,CAAAG,MAACI,EAAAA,SAAW,IAAKd,EAAW,IAAKD,EAAY,KAAK,KAAK,EACvDW,EAAAA,IAACK,EAAAA,QAAA,CAAc,SAAUhB,EAAY,UAAAE,CAAA,CAAsB,CAAA,EAC7D,EACAS,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,yBAAyB,EAC9C,SAAAG,EAAAA,IAAC,IAAA,CAAE,UAAWH,UAAO,yBAAyB,EAAI,WAAY,CAAA,CAChE,CAAA,EACF,EACAC,EAAAA,KAAC,IAAA,CAAE,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,SAAA,CAAA,wBAC3BJ,CAAA,CAAA,CACxB,CAAA,CAAA,CACF,CAAA,EACF,CAEJ"}
+{"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_11wzt_13{--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_11wzt_24{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_11wzt_24{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_11wzt_13:hover ._permalink-preview__dismiss-bridge_11wzt_24,._permalink-preview_11wzt_13:focus-within ._permalink-preview__dismiss-bridge_11wzt_24{pointer-events:auto}._permalink-preview_11wzt_13:hover ._permalink-preview__dismiss_11wzt_24,._permalink-preview_11wzt_13:focus-within ._permalink-preview__dismiss_11wzt_24{opacity:1;pointer-events:auto}._permalink-preview__card_11wzt_49{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_11wzt_49:hover{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._permalink-preview__message_11wzt_68{display:flex;flex-direction:column;gap:var(--spacing-xxs);align-items:flex-start;overflow:hidden;width:100%}._permalink-preview__header_11wzt_76{display:flex;gap:var(--spacing-s);align-items:center;flex-shrink:0}._permalink-preview__body_11wzt_82{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xxs);width:100%}._permalink-preview__body-clip_11wzt_89{overflow:hidden;max-height:100px;width:100%;position:relative;transition:max-height var(--duration-moderate) var(--ease-transition)}._permalink-preview__body-clip_11wzt_89: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_11wzt_108:after{opacity:1}._permalink-preview__body-clip--expanded_11wzt_111{max-height:var(--permalink-preview-body-height)}._permalink-preview__body-clip--expanded_11wzt_111:after{opacity:0}._permalink-preview__show-more_11wzt_117{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_11wzt_117:hover{text-decoration:underline}._permalink-preview__show-more_11wzt_117:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px;border-radius:var(--radius-xs)}._permalink-preview__text_11wzt_135{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_11wzt_142{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

@@ -1,16 +1,34 @@
+import { default as React } from 'react';
 export interface PermalinkPreviewProps {
-    /** Sender's display name. */
+    /** 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?: string;
-    /** The quoted message body text. */
-    messageText?: string;
+    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?: string;
+    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;
 }
@@ -19,5 +37,5 @@ export interface PermalinkPreviewProps {
  * 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, originalChannel, onDismiss, className, }: PermalinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +1 @@
-{"version":3,"file":"PermalinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/permalink-preview/PermalinkPreview.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+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,eAAgC,EAChC,SAAS,EACT,SAAc,GACf,EAAE,qBAAqB,2CAwCvB"}
+{"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"}