@kanso-labs/kanso-ui 0.5.1 → 0.6.1

package/dist/assets/stylex.css

@@ -785,6 +785,10 @@
     line-height: var(--xurq05k);
   }
 
+  .x19kjcj4 {
+    object-fit: contain;
+  }
+
   .xl1xv1r {
     object-fit: cover;
   }

package/dist/components/index.d.ts

@@ -11,10 +11,11 @@ import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
+import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/product-icon/index.d.ts

@@ -0,0 +1,38 @@
+import { AvatarRootProps } from "@base-ui/react/avatar";
+//#region src/components/product-icon/index.d.ts
+type ProductIconProps = Omit<AvatarRootProps, 'children'> & {
+  /**
+   * What this identifies. Supplies both the fallback initial and the
+   * accessible name, so a screen reader announces the thing rather than
+   * reading a letter aloud.
+   */
+  name: string;
+  /**
+   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,
+   * so the two are interchangeable wherever one leads a row or a card.
+   * @default 'md'
+   */
+  size?: 'lg' | 'md' | 'sm';
+  /**
+   * The mark to show in place of the initial. The initial stays until it has
+   * loaded, and comes back if it fails.
+   */
+  src?: string;
+  /**
+   * Which container/on-container colour pair to tint the fallback with. Has
+   * no effect once `src` has loaded, since the mark covers it.
+   * @default 'primary'
+   */
+  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
+};
+/**
+ * A small square mark identifying something that is not a person — an
+ * application, a service, a brand. Reach for Avatar when it is a person.
+ *
+ * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
+ * can be handed over as it was drawn.
+ */
+declare function ProductIcon({ name, size, src, tone, ...props }: ProductIconProps): import("react").JSX.Element;
+//#endregion
+export { type ProductIconProps, ProductIcon as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/product-icon/index.js

@@ -0,0 +1,95 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { Avatar } from "@base-ui/react/avatar";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/product-icon/index.tsx
+const styles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kaIpWk: "x1xdvaa9",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kMv6JI: "xkknnkr",
+		k63SB2: "x1bf3uqz",
+		kjj79g: "xl56j7k",
+		kVQacm: "xb3r6kr",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	image: {
+		kZKoxP: "x5yr21d",
+		kzqmXN: "xh8yej3",
+		kVIFPx: "x19kjcj4",
+		$$css: true
+	},
+	lg: {
+		kZKoxP: "xnnlda6",
+		kGuDYH: "x1848etk",
+		kzqmXN: "x15yg21f",
+		$$css: true
+	},
+	md: {
+		kZKoxP: "x1vqgdyp",
+		kGuDYH: "x14zspaw",
+		kzqmXN: "x100vrsf",
+		$$css: true
+	},
+	negative: {
+		kWkggS: "xkz0cvf",
+		kMwMTN: "xylzu7l",
+		$$css: true
+	},
+	positive: {
+		kWkggS: "xa3zu90",
+		kMwMTN: "x1di7zbg",
+		$$css: true
+	},
+	primary: {
+		kWkggS: "xp89om9",
+		kMwMTN: "xscdzaa",
+		$$css: true
+	},
+	secondary: {
+		kWkggS: "x15dekr4",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	sm: {
+		kZKoxP: "xc9qbxq",
+		kGuDYH: "xkucv67",
+		kzqmXN: "x14qfxbe",
+		$$css: true
+	},
+	tertiary: {
+		kWkggS: "xs6yvni",
+		kMwMTN: "x3cbcwg",
+		$$css: true
+	}
+};
+function initialFrom(name) {
+	const trimmed = name.trim();
+	return (Array.from(trimmed)[0] ?? "").toLocaleUpperCase();
+}
+/**
+* A small square mark identifying something that is not a person — an
+* application, a service, a brand. Reach for Avatar when it is a person.
+*
+* The mark is letterboxed rather than cropped, so a logo of any aspect ratio
+* can be handed over as it was drawn.
+*/
+function ProductIcon({ name, size = "md", src, tone = "primary", ...props$1 }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		"aria-label": name,
+		role: "img",
+		...props$1,
+		...props(styles.base, styles[size], styles[tone]),
+		children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
+			alt: "",
+			src,
+			className: "x5yr21d xh8yej3 x19kjcj4"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, { children: initialFrom(name) })]
+	});
+}
+//#endregion
+export { ProductIcon as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/product-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. Has\n   * no effect once `src` has loaded, since the mark covers it.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return (\n    // role/aria-label rather than letting the fallback letter be read: \"B\" is\n    // not what anyone means to announce. Marking the root as an image also\n    // makes its contents presentational, so neither the mark nor the letter\n    // is announced a second time underneath the name.\n    //\n    // The lint rule below wants a real <img> tag instead of the role, which\n    // cannot work here: an <img> is void, and this element's whole job is to\n    // hold the letter shown when there is no mark, or none has loaded yet.\n    <BaseUIAvatar.Root aria-label={name}\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n    role=\"img\" {...props} {...stylex.props(styles.base, styles[size], styles[tone])}>\n      {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" />}\n      <BaseUIAvatar.Fallback>{initialFrom(name)}</BaseUIAvatar.Fallback>\n    </BaseUIAvatar.Root>\n  );\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;AAmBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAiCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CACnB,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK;EAF9E,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAA0B,CAAA,GACrG,oBAAC,OAAa,UAAd,EAAA,UAAwB,YAAY,IAAI,EAAyB,CAAA,CAChD;;AAEvB"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Keycap, { KeycapProps } from "./components/keycap/index.js";
 import Link, { LinkProps } from "./components/link/index.js";
 import ListDetail, { ListDetailProps } from "./components/list-detail/index.js";
 import ListItem, { ListItemProps } from "./components/list-item/index.js";
+import ProductIcon, { ProductIconProps } from "./components/product-icon/index.js";
 import Separator, { SeparatorProps } from "./components/separator/index.js";
 import Sheet, { SheetProps } from "./components/sheet/index.js";
 import SupportingPane, { SupportingPaneProps } from "./components/supporting-pane/index.js";
@@ -18,4 +19,4 @@ import Tabs, { TabsProps } from "./components/tabs/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import "./components/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -11,10 +11,11 @@ import Keycap from "./components/keycap/index.js";
 import Link from "./components/link/index.js";
 import ListDetail from "./components/list-detail/index.js";
 import ListItem from "./components/list-item/index.js";
+import ProductIcon from "./components/product-icon/index.js";
 import Separator from "./components/separator/index.js";
 import Sheet from "./components/sheet/index.js";
 import SupportingPane from "./components/supporting-pane/index.js";
 import Tabs from "./components/tabs/index.js";
 import Text from "./components/text/index.js";
 import TextField from "./components/text-field/index.js";
-export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, IconButton, Keycap, Link, ListDetail, ListItem, Separator, Sheet, SupportingPane, Tabs, Text, TextField };
+export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, IconButton, Keycap, Link, ListDetail, ListItem, ProductIcon, Separator, Sheet, SupportingPane, Tabs, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -65,7 +65,7 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.4.0",
+    "@kanso-labs/unplugin-style-dictionary": "0.4.1",
     "@rolldown/plugin-babel": "0.2.3",
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-docs": "10.5.10",