@mitcsutt/kiln-ui 0.2.2 → 0.3.0

package/dist/components/display/Avatar/Avatar.d.ts

@@ -26,12 +26,12 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'colo
  * @remarks
  * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when
  * the image fails to load). The fallback colour comes from the name, so the same person gets the
- * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper and
- * Fiesta, a rounded square in Monograph.
+ * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper, Fiesta
+ * and Riso, a rounded square in Monograph and Ledger, and nearly square in Flightdeck.
  *
  * @privateRemarks
  * A person or entity. Image with an initials fallback on a deterministic categorical
  * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in
- * Fiesta).
+ * Paper/Fiesta/Riso, nearly square in Flightdeck).
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar","AvatarPrimitive","styles","Avatar_module_default","Avatar$1","forwardRef","rest","groupSize","useContext","AvatarSizeContext","label","alt","name","decorative","text","initials","getInitials","glyphs","Avatar","cx","className","size","color","avatarColor","ring","src"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useContext, type HTMLAttributes } from 'react'\nimport { Avatar as AvatarPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext } from './AvatarContext'\nimport { avatarColor, getInitials } from './avatarUtils'\nimport type { AvatarColor, AvatarSize } from './avatarUtils'\nimport styles from './Avatar.module.css'\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Image URL. While loading, or if it fails, the initials fallback shows. */\n  src?: string\n  /** Accessible name. Defaults to `name`. Pass `\"\"` when a visible label sits beside it. */\n  alt?: string\n  /** Person or thing. Drives the initials and the fallback colour. */\n  name: string\n  /** Default `md`, or the enclosing `AvatarGroup`'s size. */\n  size?: AvatarSize\n  /** Override the name-derived fallback colour (e.g. a member's assigned colour). */\n  color?: AvatarColor\n  /** A highlight ring — marks \"you\" in a leaderboard or roster. */\n  ring?: boolean\n  /**\n   * Replace the derived initials — a company's short code (\"NWS\"), a logo's letters. Up to three\n   * characters; three are set smaller so they fit the frame.\n   */\n  initials?: string\n}\n\n/**\n * A person or organisation, as an image with an initials fallback on a colour that's always the\n * same for that name.\n *\n * @remarks\n * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when\n * the image fails to load). The fallback colour comes from the name, so the same person gets the\n * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper and\n * Fiesta, a rounded square in Monograph.\n *\n * @privateRemarks\n * A person or entity. Image with an initials fallback on a deterministic categorical\n * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in\n * Fiesta).\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { src, alt, name, size, color, ring = false, initials, className, ...rest },\n  ref,\n) {\n  const groupSize = useContext(AvatarSizeContext)\n  const label = alt ?? name\n  const decorative = label === ''\n  const text = initials?.trim() ? initials.trim().toLocaleUpperCase() : getInitials(name)\n  const glyphs = Array.from(text).length\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(styles.avatar, className)}\n      data-size={size ?? groupSize ?? 'md'}\n      data-color={color ?? avatarColor(name)}\n      data-ring={ring || undefined}\n      {...rest}\n    >\n      {src ? <AvatarPrimitive.Image className={styles.image} src={src} alt={label} /> : null}\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        role={decorative ? undefined : 'img'}\n        aria-label={decorative ? undefined : label}\n        aria-hidden={decorative || undefined}\n        delayMs={src ? 300 : undefined}\n        data-glyphs={glyphs > 2 ? 'many' : undefined}\n      >\n        <span aria-hidden=\"true\">{text}</span>\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n"],"mappings":";;;;;;;;AA2CA,IAAaA,IAASK,EAAyC,SAC7D,EAAE,QAAK,QAAK,SAAM,SAAM,UAAO,UAAO,IAAO,aAAU,cAAW,GAAGC,KACrE,GACA;CACA,IAAMC,IAAYC,EAAWC,CAAiB,GACxCC,IAAQC,KAAOC,GACfC,IAAaH,MAAU,IACvBI,IAAOC,GAAU,KAAK,IAAIA,EAAS,KAAK,CAAC,CAAC,kBAAkB,IAAIC,EAAYJ,CAAI,GAChFK,IAAS,MAAM,KAAKH,CAAI,CAAC,CAAC;CAChC,OACE,kBAACb,EAAgB,MAAjB;EACO;EACL,WAAWkB,EAAGjB,EAAO,QAAQkB,CAAS;EACtC,aAAWC,KAAQd,KAAa;EAChC,cAAYe,KAASC,EAAYX,CAAI;EACrC,aAAWY,KAAQ,KAAA;EACnB,GAAIlB;EANN,UAAA,CAQGmB,IAAM,kBAACxB,EAAgB,OAAjB;GAAuB,WAAWC,EAAO;GAAY;GAAK,KAAKQ;EAAQ,CAAA,IAAI,MAClF,kBAACT,EAAgB,UAAjB;GACE,WAAWC,EAAO;GAClB,MAAMW,IAAa,KAAA,IAAY;GAC/B,cAAYA,IAAa,KAAA,IAAYH;GACrC,eAAaG,KAAc,KAAA;GAC3B,SAASY,IAAM,MAAM,KAAA;GACrB,eAAaR,IAAS,IAAI,SAAS,KAAA;GAEnC,UAAA,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAH;GAAW,CAAA;EACb,CAAA,CACN;;AAE1B,CAAC"}
+{"version":3,"file":"Avatar.js","names":["Avatar","AvatarPrimitive","styles","Avatar_module_default","Avatar$1","forwardRef","rest","groupSize","useContext","AvatarSizeContext","label","alt","name","decorative","text","initials","getInitials","glyphs","Avatar","cx","className","size","color","avatarColor","ring","src"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useContext, type HTMLAttributes } from 'react'\nimport { Avatar as AvatarPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext } from './AvatarContext'\nimport { avatarColor, getInitials } from './avatarUtils'\nimport type { AvatarColor, AvatarSize } from './avatarUtils'\nimport styles from './Avatar.module.css'\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Image URL. While loading, or if it fails, the initials fallback shows. */\n  src?: string\n  /** Accessible name. Defaults to `name`. Pass `\"\"` when a visible label sits beside it. */\n  alt?: string\n  /** Person or thing. Drives the initials and the fallback colour. */\n  name: string\n  /** Default `md`, or the enclosing `AvatarGroup`'s size. */\n  size?: AvatarSize\n  /** Override the name-derived fallback colour (e.g. a member's assigned colour). */\n  color?: AvatarColor\n  /** A highlight ring — marks \"you\" in a leaderboard or roster. */\n  ring?: boolean\n  /**\n   * Replace the derived initials — a company's short code (\"NWS\"), a logo's letters. Up to three\n   * characters; three are set smaller so they fit the frame.\n   */\n  initials?: string\n}\n\n/**\n * A person or organisation, as an image with an initials fallback on a colour that's always the\n * same for that name.\n *\n * @remarks\n * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when\n * the image fails to load). The fallback colour comes from the name, so the same person gets the\n * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper, Fiesta\n * and Riso, a rounded square in Monograph and Ledger, and nearly square in Flightdeck.\n *\n * @privateRemarks\n * A person or entity. Image with an initials fallback on a deterministic categorical\n * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in\n * Paper/Fiesta/Riso, nearly square in Flightdeck).\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { src, alt, name, size, color, ring = false, initials, className, ...rest },\n  ref,\n) {\n  const groupSize = useContext(AvatarSizeContext)\n  const label = alt ?? name\n  const decorative = label === ''\n  const text = initials?.trim() ? initials.trim().toLocaleUpperCase() : getInitials(name)\n  const glyphs = Array.from(text).length\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(styles.avatar, className)}\n      data-size={size ?? groupSize ?? 'md'}\n      data-color={color ?? avatarColor(name)}\n      data-ring={ring || undefined}\n      {...rest}\n    >\n      {src ? <AvatarPrimitive.Image className={styles.image} src={src} alt={label} /> : null}\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        role={decorative ? undefined : 'img'}\n        aria-label={decorative ? undefined : label}\n        aria-hidden={decorative || undefined}\n        delayMs={src ? 300 : undefined}\n        data-glyphs={glyphs > 2 ? 'many' : undefined}\n      >\n        <span aria-hidden=\"true\">{text}</span>\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n"],"mappings":";;;;;;;;AA2CA,IAAaA,IAASK,EAAyC,SAC7D,EAAE,QAAK,QAAK,SAAM,SAAM,UAAO,UAAO,IAAO,aAAU,cAAW,GAAGC,KACrE,GACA;CACA,IAAMC,IAAYC,EAAWC,CAAiB,GACxCC,IAAQC,KAAOC,GACfC,IAAaH,MAAU,IACvBI,IAAOC,GAAU,KAAK,IAAIA,EAAS,KAAK,CAAC,CAAC,kBAAkB,IAAIC,EAAYJ,CAAI,GAChFK,IAAS,MAAM,KAAKH,CAAI,CAAC,CAAC;CAChC,OACE,kBAACb,EAAgB,MAAjB;EACO;EACL,WAAWkB,EAAGjB,EAAO,QAAQkB,CAAS;EACtC,aAAWC,KAAQd,KAAa;EAChC,cAAYe,KAASC,EAAYX,CAAI;EACrC,aAAWY,KAAQ,KAAA;EACnB,GAAIlB;EANN,UAAA,CAQGmB,IAAM,kBAACxB,EAAgB,OAAjB;GAAuB,WAAWC,EAAO;GAAY;GAAK,KAAKQ;EAAQ,CAAA,IAAI,MAClF,kBAACT,EAAgB,UAAjB;GACE,WAAWC,EAAO;GAClB,MAAMW,IAAa,KAAA,IAAY;GAC/B,cAAYA,IAAa,KAAA,IAAYH;GACrC,eAAaG,KAAc,KAAA;GAC3B,SAASY,IAAM,MAAM,KAAA;GACrB,eAAaR,IAAS,IAAI,SAAS,KAAA;GAEnC,UAAA,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAH;GAAW,CAAA;EACb,CAAA,CACN;;AAE1B,CAAC"}

package/dist/icons/Icon.d.ts

@@ -8,7 +8,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
 }
 /**
  * Base for the library's own glyphs. 20×20 grid, stroke weight is a theme token
- * (`--icon-stroke`), so Fiesta icons are chunky and Monograph icons are fine-lined.
+ * (`--icon-stroke`), so Fiesta icons are chunky and Flightdeck icons are fine-lined.
  * Consumers may pass any SVG/icon node where a component accepts `icon` props.
  */
 export declare function createIcon(displayName: string, paths: React.ReactNode): import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/icons/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["styles","Icon_module_default","createIcon","Component","forwardRef","rest","cx","className","size","label","paths","displayName"],"sources":["../../src/icons/Icon.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Icon.module.css'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'inherit'\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n  /** `inherit` (default) sizes to the surrounding font-size (1em). */\n  size?: IconSize\n  /** Accessible name. Omit for decorative icons (the default) — they're aria-hidden. */\n  label?: string\n}\n\n/**\n * Base for the library's own glyphs. 20×20 grid, stroke weight is a theme token\n * (`--icon-stroke`), so Fiesta icons are chunky and Monograph icons are fine-lined.\n * Consumers may pass any SVG/icon node where a component accepts `icon` props.\n */\nexport function createIcon(displayName: string, paths: React.ReactNode) {\n  const Component = forwardRef<SVGSVGElement, IconProps>(function Icon(\n    { size = 'inherit', label, className, ...rest },\n    ref,\n  ) {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={cx(styles.icon, className)}\n        data-size={size}\n        aria-hidden={label ? undefined : true}\n        aria-label={label}\n        role={label ? 'img' : undefined}\n        focusable=\"false\"\n        {...rest}\n      >\n        {paths}\n      </svg>\n    )\n  })\n  Component.displayName = displayName\n  return Component\n}\n"],"mappings":";;;;;AAkBA,SAAgBE,EAAW,GAAqB,GAAwB;CACtE,IAAMC,IAAYC,EAAqC,SACrD,EAAE,UAAO,WAAW,UAAO,cAAW,GAAGC,KACzC,GACA;EACA,OACE,kBAAC,OAAD;GACO;GACL,SAAQ;GACR,MAAK;GACL,QAAO;GACP,eAAc;GACd,gBAAe;GACf,WAAWC,EAAGN,EAAO,MAAMO,CAAS;GACpC,aAAWC;GACX,eAAa,MAAQ,KAAA;GACrB,cAAYC;GACZ,MAAMA,IAAQ,QAAQ,KAAA;GACtB,WAAU;GACV,GAAIJ;GAEH,UAAAK;EACE,CAAA;CAET,CAAC;CAED,OADA,EAAU,cAAcC,GACjBR;AACT"}
+{"version":3,"file":"Icon.js","names":["styles","Icon_module_default","createIcon","Component","forwardRef","rest","cx","className","size","label","paths","displayName"],"sources":["../../src/icons/Icon.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Icon.module.css'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'inherit'\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n  /** `inherit` (default) sizes to the surrounding font-size (1em). */\n  size?: IconSize\n  /** Accessible name. Omit for decorative icons (the default) — they're aria-hidden. */\n  label?: string\n}\n\n/**\n * Base for the library's own glyphs. 20×20 grid, stroke weight is a theme token\n * (`--icon-stroke`), so Fiesta icons are chunky and Flightdeck icons are fine-lined.\n * Consumers may pass any SVG/icon node where a component accepts `icon` props.\n */\nexport function createIcon(displayName: string, paths: React.ReactNode) {\n  const Component = forwardRef<SVGSVGElement, IconProps>(function Icon(\n    { size = 'inherit', label, className, ...rest },\n    ref,\n  ) {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={cx(styles.icon, className)}\n        data-size={size}\n        aria-hidden={label ? undefined : true}\n        aria-label={label}\n        role={label ? 'img' : undefined}\n        focusable=\"false\"\n        {...rest}\n      >\n        {paths}\n      </svg>\n    )\n  })\n  Component.displayName = displayName\n  return Component\n}\n"],"mappings":";;;;;AAkBA,SAAgBE,EAAW,GAAqB,GAAwB;CACtE,IAAMC,IAAYC,EAAqC,SACrD,EAAE,UAAO,WAAW,UAAO,cAAW,GAAGC,KACzC,GACA;EACA,OACE,kBAAC,OAAD;GACO;GACL,SAAQ;GACR,MAAK;GACL,QAAO;GACP,eAAc;GACd,gBAAe;GACf,WAAWC,EAAGN,EAAO,MAAMO,CAAS;GACpC,aAAWC;GACX,eAAa,MAAQ,KAAA;GACrB,cAAYC;GACZ,MAAMA,IAAQ,QAAQ,KAAA;GACtB,WAAU;GACV,GAAIJ;GAEH,UAAAK;EACE,CAAA;CAET,CAAC;CAED,OADA,EAAU,cAAcC,GACjBR;AACT"}