@kanso-labs/kanso-ui 0.6.2 → 0.7.0

package/dist/assets/stylex.css

@@ -637,6 +637,10 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .xqketvx {
+    grid-template-columns: var(--x-gridTemplateColumns);
+  }
+
   .xtijo5x {
     inset-inline-end: 0;
   }
@@ -1292,6 +1296,11 @@
   }
 }
 
+@property --x-gridTemplateColumns {
+  syntax: "*";
+  inherits: false
+}
+
 @keyframes x18re5ia-B {
   from {
     opacity: 0;

package/dist/components/feed/index.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/feed/index.d.ts
+type FeedProps = useRender.ComponentProps<'div'> & {
+  /**
+   * How narrow a cell may get before the grid drops a column. Every column is
+   * at least this wide and the grid fits as many as the space allows, which is
+   * how M3 describes an adaptive grid — by its cell rather than by a column
+   * count per breakpoint.
+   *
+   * Worth setting. The default is the figure M3's own example uses, and it is
+   * a floor rather than advice: only the contents know how narrow they can go.
+   * @default '180px'
+   */
+  minItemWidth?: string;
+};
+/**
+ * Material 3's feed layout: a grid of comparable items that fits as many
+ * columns as the space allows, down to a single column when it allows only
+ * one.
+ *
+ * Layout only — it paints no surface, and it gives its children no container
+ * of their own, so each child is a grid cell exactly as it was written. That
+ * is the difference from ListDetail and SupportingPane, which do wrap: those
+ * two divide a page into named regions, where this one lays out however many
+ * things it is handed.
+ *
+ * It reads the space it is in rather than the width of the window, so a feed
+ * inside a pane reflows with the pane rather than with the browser.
+ */
+declare function Feed({ minItemWidth, render, ...props }: FeedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type FeedProps, Feed as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feed/index.js

@@ -0,0 +1,39 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/feed/index.tsx
+const DEFAULT_MIN_ITEM_WIDTH = "180px";
+const _temp = {
+	k1xSpc: "xrvj5dj",
+	kOIVth: "xj2l1yv",
+	kumcoG: "xqketvx",
+	"$$css": true
+};
+const styles = { root: (minItemWidth) => [_temp, { "--x-gridTemplateColumns": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : void 0 }] };
+/**
+* Material 3's feed layout: a grid of comparable items that fits as many
+* columns as the space allows, down to a single column when it allows only
+* one.
+*
+* Layout only — it paints no surface, and it gives its children no container
+* of their own, so each child is a grid cell exactly as it was written. That
+* is the difference from ListDetail and SupportingPane, which do wrap: those
+* two divide a page into named regions, where this one lays out however many
+* things it is handed.
+*
+* It reads the space it is in rather than the width of the window, so a feed
+* inside a pane reflows with the pane rather than with the browser.
+*/
+function Feed({ minItemWidth = DEFAULT_MIN_ITEM_WIDTH, render, ...props$1 }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props$1,
+			...props(styles.root(minItemWidth))
+		},
+		render
+	});
+}
+//#endregion
+export { Feed as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/feed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's example minimum for an adaptive grid cell, and the only number\n// the spec puts on one. It is a floor rather than a recommendation: how narrow\n// a card can get before its contents stop making sense is a property of the\n// contents, which is why M3 leaves it a parameter rather than fixing it. Most\n// feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material 3's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// M3 describes the grid by its cell rather than by its columns: Compose spells\n// it `GridCells.Adaptive(minSize)`, meaning every column is at least that wide\n// and the grid fits as many as it can. `repeat(auto-fill, minmax(…, 1fr))` is\n// the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how M3 describes an adaptive grid — by its cell rather than by a column\n   * count per breakpoint.\n   *\n   * Worth setting. The default is the figure M3's own example uses, and it is\n   * a floor rather than advice: only the contents know how narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n};\n\n/**\n * Material 3's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // Spread last so the grid wins over a consumer-supplied className,\n      // matching Text, Badge and Card. The dynamic style carries the cell\n      // minimum as a custom property, so this also has to come after `props`\n      // for that value to survive.\n      ...stylex.props(styles.root(minItemWidth))\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;AAUA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA6BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAKH,GAAG,MAAa,OAAO,KAAK,YAAY,CAAC;EAC3C;EACA;CACF,CAAC;AACH"}

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ import Chip, { ChipProps } from "./chip/index.js";
 import Code, { CodeProps } from "./code/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } from "./currency/index.js";
+import Feed, { FeedProps } from "./feed/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
@@ -18,4 +19,4 @@ 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, ProductIcon, type ProductIconProps, 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, Feed, type FeedProps, 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.d.ts

@@ -6,6 +6,7 @@ import Chip, { ChipProps } from "./components/chip/index.js";
 import Code, { CodeProps } from "./components/code/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
 import Currency, { CurrencyProps } from "./components/currency/index.js";
+import Feed, { FeedProps } from "./components/feed/index.js";
 import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
 import Keycap, { KeycapProps } from "./components/keycap/index.js";
 import Link, { LinkProps } from "./components/link/index.js";
@@ -19,4 +20,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, ProductIcon, type ProductIconProps, 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, Feed, type FeedProps, 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

@@ -6,6 +6,7 @@ import Chip from "./components/chip/index.js";
 import Code from "./components/code/index.js";
 import CopyField from "./components/copy-field/index.js";
 import Currency from "./components/currency/index.js";
+import Feed from "./components/feed/index.js";
 import IconButton from "./components/icon-button/index.js";
 import Keycap from "./components/keycap/index.js";
 import Link from "./components/link/index.js";
@@ -18,4 +19,4 @@ 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, ProductIcon, Separator, Sheet, SupportingPane, Tabs, Text, TextField };
+export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, Feed, 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.6.2",
+  "version": "0.7.0",
   "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",