@telegraph/data-list 0.1.4 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @telegraph/data-list
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`c335807`](https://github.com/knocklabs/telegraph/commit/c33580795d3e75d921449a5684ff7aaff1c2c482)]:
+  - @telegraph/tooltip@0.3.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#746](https://github.com/knocklabs/telegraph/pull/746) [`a1f2d79`](https://github.com/knocklabs/telegraph/commit/a1f2d79d904ab66c1d9494c0a27dbdd7426984f1) Thanks [@ksorathia](https://github.com/ksorathia)! - Standardize row layouts in `DataList`
+
+### Patch Changes
+
+- Updated dependencies [[`f9dcbe7`](https://github.com/knocklabs/telegraph/commit/f9dcbe7bd8c79afd3dd25329b1f6ea6df202f85a)]:
+  - @telegraph/tooltip@0.2.2
+
 ## 0.1.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@telegraph/icon"),l=require("@telegraph/layout"),y=require("@telegraph/tooltip"),k=require("@telegraph/typography"),p=({direction:t="column",gap:r="4",...s})=>e.jsx(l.Stack,{direction:t,gap:r,...s}),u=({direction:t="row",gap:r="1",align:s="baseline",...o})=>e.jsx(l.Stack,{direction:t,gap:r,align:s,...o}),x=({maxW:t="36",maxH:r="6",w:s="full",icon:o,children:c,textProps:a,description:n,tooltipProps:i,...j})=>{const{color:b="gray",weight:g="medium",size:S="1",...h}=a||{};return e.jsxs(l.Stack,{direction:"row",align:"baseline",gap:"2",maxW:t,w:s,maxH:r,...j,children:[o&&e.jsx(l.Stack,{alignSelf:"center",children:e.jsx(m.Icon,{size:"1",color:"gray",...o})}),e.jsx(y.Tooltip,{label:n,enabled:!!n,...i,children:e.jsx(k.Text,{as:"label",...h,color:b,weight:g,size:S,borderBottom:n?"px":void 0,borderStyle:n?"dashed":void 0,children:c})})]})},d=({...t})=>e.jsx(l.Stack,{...t}),q=({label:t,direction:r,icon:s,children:o,description:c,labelProps:a,valueProps:n,...i})=>e.jsxs(u,{direction:r,...i,children:[e.jsx(x,{icon:s,description:c,...a,children:t}),e.jsx(d,{...n,children:o})]}),L={List:p,ListItem:u,Label:x,Value:d,Item:q};exports.DataList=L;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@telegraph/icon`),t=require(`@telegraph/layout`),n=require(`@telegraph/tooltip`),r=require(`@telegraph/typography`);require(`react`);let i=require(`react/jsx-runtime`);var a=({direction:e=`column`,gap:n=`4`,...r})=>(0,i.jsx)(t.Stack,{direction:e,gap:n,...r}),o=({direction:e=`row`,gap:n=`1`,align:r=`baseline`,...a})=>(0,i.jsx)(t.Stack,{direction:e,gap:n,align:r,...a}),s=({maxW:a=`36`,w:o=`full`,icon:s,children:c,textProps:l,description:u,tooltipProps:d,...f})=>{let{color:p=`gray`,weight:m=`medium`,size:h=`1`,...g}=l||{};return(0,i.jsxs)(t.Stack,{direction:`row`,align:`baseline`,gap:`2`,maxW:a,w:o,...f,children:[s&&(0,i.jsx)(t.Stack,{alignSelf:`center`,children:(0,i.jsx)(e.Icon,{size:`0`,color:`gray`,...s})}),(0,i.jsx)(n.Tooltip,{label:u,enabled:!!u,...d,children:(0,i.jsx)(t.Stack,{direction:`row`,align:`center`,minH:`6`,children:(0,i.jsx)(r.Text,{as:`label`,...g,color:p,weight:m,size:h,borderBottom:u?`px`:void 0,borderStyle:u?`dashed`:void 0,children:c})})})]})},c=({w:e=`full`,minW:n=`0`,...r})=>(0,i.jsx)(t.Stack,{w:e,minW:n,...r}),l={List:a,ListItem:o,Label:s,Value:c,Item:({label:e,direction:t,icon:n,children:r,description:a,labelProps:l,valueProps:u,...d})=>(0,i.jsxs)(o,{direction:t,...d,children:[(0,i.jsx)(s,{icon:n,description:a,...l,children:e}),(0,i.jsx)(c,{...u,children:r})]})};exports.DataList=l;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/DataList/DataList.tsx"],"sourcesContent":["import { TgphComponentProps } from \"@telegraph/helpers\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nexport type ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\nexport type ListItemProps = TgphComponentProps<typeof Stack>;\n\nconst ListItem = ({\n  direction = \"row\",\n  gap = \"1\",\n  align = \"baseline\",\n  ...props\n}: ListItemProps) => {\n  return <Stack direction={direction} gap={gap} align={align} {...props} />;\n};\n\nexport type LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  tooltipProps?: Omit<\n    Partial<TgphComponentProps<typeof Tooltip>>,\n    \"enabled\" | \"label\"\n  >;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  description,\n  tooltipProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\n\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"baseline\"\n      gap=\"2\"\n      maxW={maxW}\n      w={w}\n      maxH={maxH}\n      {...props}\n    >\n      {icon && (\n        <Stack alignSelf=\"center\">\n          <Icon size=\"1\" color=\"gray\" {...icon} />\n        </Stack>\n      )}\n      <Tooltip label={description} enabled={!!description} {...tooltipProps}>\n        <Text\n          as=\"label\"\n          {...restTextProps}\n          color={color}\n          weight={weight}\n          size={size}\n          borderBottom={description ? \"px\" : undefined}\n          borderStyle={description ? \"dashed\" : undefined}\n        >\n          {children}\n        </Text>\n      </Tooltip>\n    </Stack>\n  );\n};\n\nexport type ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\nexport type ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  description,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} description={description} {...labelProps}>\n        {label}\n      </Label>\n      <Value {...valueProps}>{children}</Value>\n    </ListItem>\n  );\n};\n\nconst DataList = {\n  List,\n  ListItem,\n  Label,\n  Value,\n  Item,\n};\n\nexport { DataList };\n"],"names":["List","direction","gap","props","jsx","Stack","ListItem","align","Label","maxW","maxH","w","icon","children","textProps","description","tooltipProps","color","weight","size","restTextProps","jsxs","Icon","Tooltip","Text","Value","Item","label","labelProps","valueProps","DataList"],"mappings":"oPASMA,EAAO,CAAC,CAAE,UAAAC,EAAY,SAAU,IAAAC,EAAM,IAAK,GAAGC,KAC3CC,EAAAA,IAACC,EAAAA,MAAA,CAAM,UAAAJ,EAAsB,IAAAC,EAAW,GAAGC,EAAO,EAKrDG,EAAW,CAAC,CAChB,UAAAL,EAAY,MACZ,IAAAC,EAAM,IACN,MAAAK,EAAQ,WACR,GAAGJ,CACL,UACUE,EAAAA,MAAA,CAAM,UAAAJ,EAAsB,IAAAC,EAAU,MAAAK,EAAe,GAAGJ,EAAO,EAanEK,EAAQ,CAAC,CACb,KAAAC,EAAO,KACP,KAAAC,EAAO,IACP,EAAAC,EAAI,OAAA,KACJC,EACA,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,GAAGb,CACL,IAAkB,CAChB,KAAM,CACJ,MAAAc,EAAQ,OACR,OAAAC,EAAS,SACT,KAAAC,EAAO,IACP,GAAGC,CAAA,EACDN,GAAa,CAAA,EAEjB,OACEO,EAAAA,KAAChB,EAAAA,MAAA,CACC,UAAU,MACV,MAAM,WACN,IAAI,IACJ,KAAAI,EACA,EAAAE,EACA,KAAAD,EACC,GAAGP,EAEH,SAAA,CAAAS,GACCR,EAAAA,IAACC,EAAAA,MAAA,CAAM,UAAU,SACf,SAAAD,EAAAA,IAACkB,EAAAA,KAAA,CAAK,KAAK,IAAI,MAAM,OAAQ,GAAGV,CAAA,CAAM,EACxC,EAEFR,EAAAA,IAACmB,EAAAA,SAAQ,MAAOR,EAAa,QAAS,CAAC,CAACA,EAAc,GAAGC,EACvD,SAAAZ,EAAAA,IAACoB,EAAAA,KAAA,CACC,GAAG,QACF,GAAGJ,EACJ,MAAAH,EACA,OAAAC,EACA,KAAAC,EACA,aAAcJ,EAAc,KAAO,OACnC,YAAaA,EAAc,SAAW,OAErC,SAAAF,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CAAA,CAGN,EAIMY,EAAQ,CAAC,CAAE,GAAGtB,KACXC,MAACC,EAAAA,MAAA,CAAO,GAAGF,CAAA,CAAO,EAWrBuB,EAAO,CAAC,CACZ,MAAAC,EACA,UAAA1B,EACA,KAAAW,EACA,SAAAC,EACA,YAAAE,EACA,WAAAa,EACA,WAAAC,EACA,GAAG1B,CACL,IAEIkB,EAAAA,KAACf,EAAA,CAAS,UAAAL,EAAuB,GAAGE,EAClC,SAAA,CAAAC,MAACI,EAAA,CAAM,KAAAI,EAAY,YAAAG,EAA2B,GAAGa,EAC9C,SAAAD,EACH,EACAvB,EAAAA,IAACqB,EAAA,CAAO,GAAGI,EAAa,SAAAhB,CAAA,CAAS,CAAA,EACnC,EAIEiB,EAAW,CACf,KAAA9B,EACA,SAAAM,EACA,MAAAE,EACA,MAAAiB,EACA,KAAAC,CACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/DataList/DataList.tsx"],"sourcesContent":["import { TgphComponentProps } from \"@telegraph/helpers\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nexport type ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\nexport type ListItemProps = TgphComponentProps<typeof Stack>;\n\nconst ListItem = ({\n  direction = \"row\",\n  gap = \"1\",\n  align = \"baseline\",\n  ...props\n}: ListItemProps) => {\n  return <Stack direction={direction} gap={gap} align={align} {...props} />;\n};\n\nexport type LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  tooltipProps?: Omit<\n    Partial<TgphComponentProps<typeof Tooltip>>,\n    \"enabled\" | \"label\"\n  >;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  description,\n  tooltipProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\n\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"baseline\"\n      gap=\"2\"\n      maxW={maxW}\n      w={w}\n      {...props}\n    >\n      {icon && (\n        <Stack alignSelf=\"center\">\n          <Icon size=\"0\" color=\"gray\" {...icon} />\n        </Stack>\n      )}\n      <Tooltip label={description} enabled={!!description} {...tooltipProps}>\n        <Stack direction=\"row\" align=\"center\" minH=\"6\">\n          <Text\n            as=\"label\"\n            {...restTextProps}\n            color={color}\n            weight={weight}\n            size={size}\n            borderBottom={description ? \"px\" : undefined}\n            borderStyle={description ? \"dashed\" : undefined}\n          >\n            {children}\n          </Text>\n        </Stack>\n      </Tooltip>\n    </Stack>\n  );\n};\n\nexport type ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ w = \"full\", minW = \"0\", ...props }: ValueProps) => {\n  return <Stack w={w} minW={minW} {...props} />;\n};\n\nexport type ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  description,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} description={description} {...labelProps}>\n        {label}\n      </Label>\n      <Value {...valueProps}>{children}</Value>\n    </ListItem>\n  );\n};\n\nconst DataList = {\n  List,\n  ListItem,\n  Label,\n  Value,\n  Item,\n};\n\nexport { DataList };\n"],"mappings":"0PASA,IAAM,GAAQ,CAAE,YAAY,SAAU,MAAM,IAAK,GAAG,MAC3C,EAAA,EAAA,KAAC,EAAA,MAAD,CAAkB,YAAgB,MAAK,GAAI,EAAS,CAAA,CAKvD,GAAY,CAChB,YAAY,MACZ,MAAM,IACN,QAAQ,WACR,GAAG,MAEI,EAAA,EAAA,KAAC,EAAA,MAAD,CAAkB,YAAgB,MAAY,QAAO,GAAI,EAAS,CAAA,CAarE,GAAS,CACb,OAAO,KACP,IAAI,OACJ,OACA,WACA,YACA,cACA,eACA,GAAG,KACa,CAChB,GAAM,CACJ,QAAQ,OACR,SAAS,SACT,OAAO,IACP,GAAG,GACD,GAAa,EAAE,CAEnB,OACE,EAAA,EAAA,MAAC,EAAA,MAAD,CACE,UAAU,MACV,MAAM,WACN,IAAI,IACE,OACH,IACH,GAAI,WANN,CAQG,IACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,mBACf,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAK,IAAI,MAAM,OAAO,GAAI,EAAQ,CAAA,CAClC,CAAA,EAEV,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,EAAa,QAAS,CAAC,CAAC,EAAa,GAAI,YACvD,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,MAAM,MAAM,SAAS,KAAK,cACzC,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAG,QACH,GAAI,EACG,QACC,SACF,OACN,aAAc,EAAc,KAAO,IAAA,GACnC,YAAa,EAAc,SAAW,IAAA,GAErC,WACI,CAAA,CACD,CAAA,CACA,CAAA,CACJ,IAMN,GAAS,CAAE,IAAI,OAAQ,OAAO,IAAK,GAAG,MACnC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAU,IAAS,OAAM,GAAI,EAAS,CAAA,CA+BzC,EAAW,CACf,OACA,WACA,QACA,QACA,MAzBY,CACZ,QACA,YACA,OACA,WACA,cACA,aACA,aACA,GAAG,MAGD,EAAA,EAAA,MAAC,EAAD,CAAqB,YAAW,GAAI,WAApC,EACE,EAAA,EAAA,KAAC,EAAD,CAAa,OAAmB,cAAa,GAAI,WAC9C,EACK,CAAA,EACR,EAAA,EAAA,KAAC,EAAD,CAAO,GAAI,EAAa,WAAiB,CAAA,CAChC,GAUd"}

package/dist/esm/index.mjs

@@ -1,78 +1,80 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Icon as L } from "@telegraph/icon";
-import { Stack as i } from "@telegraph/layout";
-import { Tooltip as w } from "@telegraph/tooltip";
-import { Text as y } from "@telegraph/typography";
-const I = ({ direction: r = "column", gap: o = "4", ...t }) => /* @__PURE__ */ e(i, { direction: r, gap: o, ...t }), d = ({
-  direction: r = "row",
-  gap: o = "1",
-  align: t = "baseline",
-  ...l
-}) => /* @__PURE__ */ e(i, { direction: r, gap: o, align: t, ...l }), u = ({
-  maxW: r = "36",
-  maxH: o = "6",
-  w: t = "full",
-  icon: l,
-  children: s,
-  textProps: a,
-  description: n,
-  tooltipProps: m,
-  ...f
-}) => {
-  const {
-    color: h = "gray",
-    weight: p = "medium",
-    size: g = "1",
-    ...x
-  } = a || {};
-  return /* @__PURE__ */ c(
-    i,
-    {
-      direction: "row",
-      align: "baseline",
-      gap: "2",
-      maxW: r,
-      w: t,
-      maxH: o,
-      ...f,
-      children: [
-        l && /* @__PURE__ */ e(i, { alignSelf: "center", children: /* @__PURE__ */ e(L, { size: "1", color: "gray", ...l }) }),
-        /* @__PURE__ */ e(w, { label: n, enabled: !!n, ...m, children: /* @__PURE__ */ e(
-          y,
-          {
-            as: "label",
-            ...x,
-            color: h,
-            weight: p,
-            size: g,
-            borderBottom: n ? "px" : void 0,
-            borderStyle: n ? "dashed" : void 0,
-            children: s
-          }
-        ) })
-      ]
-    }
-  );
-}, b = ({ ...r }) => /* @__PURE__ */ e(i, { ...r }), S = ({
-  label: r,
-  direction: o,
-  icon: t,
-  children: l,
-  description: s,
-  labelProps: a,
-  valueProps: n,
-  ...m
-}) => /* @__PURE__ */ c(d, { direction: o, ...m, children: [
-  /* @__PURE__ */ e(u, { icon: t, description: s, ...a, children: r }),
-  /* @__PURE__ */ e(b, { ...n, children: l })
-] }), B = {
-  List: I,
-  ListItem: d,
-  Label: u,
-  Value: b,
-  Item: S
+import { Icon as e } from "@telegraph/icon";
+import { Stack as t } from "@telegraph/layout";
+import { Tooltip as n } from "@telegraph/tooltip";
+import { Text as r } from "@telegraph/typography";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/DataList/DataList.tsx
+var o = ({ direction: e = "column", gap: n = "4", ...r }) => /* @__PURE__ */ i(t, {
+	direction: e,
+	gap: n,
+	...r
+}), s = ({ direction: e = "row", gap: n = "1", align: r = "baseline", ...a }) => /* @__PURE__ */ i(t, {
+	direction: e,
+	gap: n,
+	align: r,
+	...a
+}), c = ({ maxW: o = "36", w: s = "full", icon: c, children: l, textProps: u, description: d, tooltipProps: f, ...p }) => {
+	let { color: m = "gray", weight: h = "medium", size: g = "1", ..._ } = u || {};
+	return /* @__PURE__ */ a(t, {
+		direction: "row",
+		align: "baseline",
+		gap: "2",
+		maxW: o,
+		w: s,
+		...p,
+		children: [c && /* @__PURE__ */ i(t, {
+			alignSelf: "center",
+			children: /* @__PURE__ */ i(e, {
+				size: "0",
+				color: "gray",
+				...c
+			})
+		}), /* @__PURE__ */ i(n, {
+			label: d,
+			enabled: !!d,
+			...f,
+			children: /* @__PURE__ */ i(t, {
+				direction: "row",
+				align: "center",
+				minH: "6",
+				children: /* @__PURE__ */ i(r, {
+					as: "label",
+					..._,
+					color: m,
+					weight: h,
+					size: g,
+					borderBottom: d ? "px" : void 0,
+					borderStyle: d ? "dashed" : void 0,
+					children: l
+				})
+			})
+		})]
+	});
+}, l = ({ w: e = "full", minW: n = "0", ...r }) => /* @__PURE__ */ i(t, {
+	w: e,
+	minW: n,
+	...r
+}), u = {
+	List: o,
+	ListItem: s,
+	Label: c,
+	Value: l,
+	Item: ({ label: e, direction: t, icon: n, children: r, description: o, labelProps: u, valueProps: d, ...f }) => /* @__PURE__ */ a(s, {
+		direction: t,
+		...f,
+		children: [/* @__PURE__ */ i(c, {
+			icon: n,
+			description: o,
+			...u,
+			children: e
+		}), /* @__PURE__ */ i(l, {
+			...d,
+			children: r
+		})]
+	})
 };
-export {
-  B as DataList
-};
-//# sourceMappingURL=index.mjs.map
+//#endregion
+export { u as DataList };
+
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/DataList/DataList.tsx"],"sourcesContent":["import { TgphComponentProps } from \"@telegraph/helpers\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nexport type ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\nexport type ListItemProps = TgphComponentProps<typeof Stack>;\n\nconst ListItem = ({\n  direction = \"row\",\n  gap = \"1\",\n  align = \"baseline\",\n  ...props\n}: ListItemProps) => {\n  return <Stack direction={direction} gap={gap} align={align} {...props} />;\n};\n\nexport type LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  tooltipProps?: Omit<\n    Partial<TgphComponentProps<typeof Tooltip>>,\n    \"enabled\" | \"label\"\n  >;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  description,\n  tooltipProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\n\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"baseline\"\n      gap=\"2\"\n      maxW={maxW}\n      w={w}\n      maxH={maxH}\n      {...props}\n    >\n      {icon && (\n        <Stack alignSelf=\"center\">\n          <Icon size=\"1\" color=\"gray\" {...icon} />\n        </Stack>\n      )}\n      <Tooltip label={description} enabled={!!description} {...tooltipProps}>\n        <Text\n          as=\"label\"\n          {...restTextProps}\n          color={color}\n          weight={weight}\n          size={size}\n          borderBottom={description ? \"px\" : undefined}\n          borderStyle={description ? \"dashed\" : undefined}\n        >\n          {children}\n        </Text>\n      </Tooltip>\n    </Stack>\n  );\n};\n\nexport type ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\nexport type ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  description,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} description={description} {...labelProps}>\n        {label}\n      </Label>\n      <Value {...valueProps}>{children}</Value>\n    </ListItem>\n  );\n};\n\nconst DataList = {\n  List,\n  ListItem,\n  Label,\n  Value,\n  Item,\n};\n\nexport { DataList };\n"],"names":["List","direction","gap","props","jsx","Stack","ListItem","align","Label","maxW","maxH","w","icon","children","textProps","description","tooltipProps","color","weight","size","restTextProps","jsxs","Icon","Tooltip","Text","Value","Item","label","labelProps","valueProps","DataList"],"mappings":";;;;;AASA,MAAMA,IAAO,CAAC,EAAE,WAAAC,IAAY,UAAU,KAAAC,IAAM,KAAK,GAAGC,QAC3C,gBAAAC,EAACC,GAAA,EAAM,WAAAJ,GAAsB,KAAAC,GAAW,GAAGC,GAAO,GAKrDG,IAAW,CAAC;AAAA,EAChB,WAAAL,IAAY;AAAA,EACZ,KAAAC,IAAM;AAAA,EACN,OAAAK,IAAQ;AAAA,EACR,GAAGJ;AACL,wBACUE,GAAA,EAAM,WAAAJ,GAAsB,KAAAC,GAAU,OAAAK,GAAe,GAAGJ,GAAO,GAanEK,IAAQ,CAAC;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,GAAAC,IAAI;AAAA,EACJ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGb;AACL,MAAkB;AAChB,QAAM;AAAA,IACJ,OAAAc,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDN,KAAa,CAAA;AAEjB,SACE,gBAAAO;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAI;AAAA,MACJ,MAAAI;AAAA,MACA,GAAAE;AAAA,MACA,MAAAD;AAAA,MACC,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAS,KACC,gBAAAR,EAACC,GAAA,EAAM,WAAU,UACf,UAAA,gBAAAD,EAACkB,GAAA,EAAK,MAAK,KAAI,OAAM,QAAQ,GAAGV,EAAA,CAAM,GACxC;AAAA,QAEF,gBAAAR,EAACmB,KAAQ,OAAOR,GAAa,SAAS,CAAC,CAACA,GAAc,GAAGC,GACvD,UAAA,gBAAAZ;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAGJ;AAAA,YACJ,OAAAH;AAAA,YACA,QAAAC;AAAA,YACA,MAAAC;AAAA,YACA,cAAcJ,IAAc,OAAO;AAAA,YACnC,aAAaA,IAAc,WAAW;AAAA,YAErC,UAAAF;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAIMY,IAAQ,CAAC,EAAE,GAAGtB,QACX,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO,GAWrBuB,IAAO,CAAC;AAAA,EACZ,OAAAC;AAAA,EACA,WAAA1B;AAAA,EACA,MAAAW;AAAA,EACA,UAAAC;AAAA,EACA,aAAAE;AAAA,EACA,YAAAa;AAAA,EACA,YAAAC;AAAA,EACA,GAAG1B;AACL,MAEI,gBAAAkB,EAACf,GAAA,EAAS,WAAAL,GAAuB,GAAGE,GAClC,UAAA;AAAA,EAAA,gBAAAC,EAACI,GAAA,EAAM,MAAAI,GAAY,aAAAG,GAA2B,GAAGa,GAC9C,UAAAD,GACH;AAAA,EACA,gBAAAvB,EAACqB,GAAA,EAAO,GAAGI,GAAa,UAAAhB,EAAA,CAAS;AAAA,GACnC,GAIEiB,IAAW;AAAA,EACf,MAAA9B;AAAA,EACA,UAAAM;AAAA,EACA,OAAAE;AAAA,EACA,OAAAiB;AAAA,EACA,MAAAC;AACF;"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/DataList/DataList.tsx"],"sourcesContent":["import { TgphComponentProps } from \"@telegraph/helpers\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nexport type ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\nexport type ListItemProps = TgphComponentProps<typeof Stack>;\n\nconst ListItem = ({\n  direction = \"row\",\n  gap = \"1\",\n  align = \"baseline\",\n  ...props\n}: ListItemProps) => {\n  return <Stack direction={direction} gap={gap} align={align} {...props} />;\n};\n\nexport type LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  tooltipProps?: Omit<\n    Partial<TgphComponentProps<typeof Tooltip>>,\n    \"enabled\" | \"label\"\n  >;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  description,\n  tooltipProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\n\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"baseline\"\n      gap=\"2\"\n      maxW={maxW}\n      w={w}\n      {...props}\n    >\n      {icon && (\n        <Stack alignSelf=\"center\">\n          <Icon size=\"0\" color=\"gray\" {...icon} />\n        </Stack>\n      )}\n      <Tooltip label={description} enabled={!!description} {...tooltipProps}>\n        <Stack direction=\"row\" align=\"center\" minH=\"6\">\n          <Text\n            as=\"label\"\n            {...restTextProps}\n            color={color}\n            weight={weight}\n            size={size}\n            borderBottom={description ? \"px\" : undefined}\n            borderStyle={description ? \"dashed\" : undefined}\n          >\n            {children}\n          </Text>\n        </Stack>\n      </Tooltip>\n    </Stack>\n  );\n};\n\nexport type ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ w = \"full\", minW = \"0\", ...props }: ValueProps) => {\n  return <Stack w={w} minW={minW} {...props} />;\n};\n\nexport type ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  description?: React.ReactNode;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  description,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} description={description} {...labelProps}>\n        {label}\n      </Label>\n      <Value {...valueProps}>{children}</Value>\n    </ListItem>\n  );\n};\n\nconst DataList = {\n  List,\n  ListItem,\n  Label,\n  Value,\n  Item,\n};\n\nexport { DataList };\n"],"mappings":";;;;;;;AASA,IAAM,KAAQ,EAAE,eAAY,UAAU,SAAM,KAAK,GAAG,QAC3C,kBAAC,GAAD;CAAkB;CAAgB;CAAK,GAAI;CAAS,CAAA,EAKvD,KAAY,EAChB,eAAY,OACZ,SAAM,KACN,WAAQ,YACR,GAAG,QAEI,kBAAC,GAAD;CAAkB;CAAgB;CAAY;CAAO,GAAI;CAAS,CAAA,EAarE,KAAS,EACb,UAAO,MACP,OAAI,QACJ,SACA,aACA,cACA,gBACA,iBACA,GAAG,QACa;CAChB,IAAM,EACJ,WAAQ,QACR,YAAS,UACT,UAAO,KACP,GAAG,MACD,KAAa,EAAE;AAEnB,QACE,kBAAC,GAAD;EACE,WAAU;EACV,OAAM;EACN,KAAI;EACE;EACH;EACH,GAAI;YANN,CAQG,KACC,kBAAC,GAAD;GAAO,WAAU;aACf,kBAAC,GAAD;IAAM,MAAK;IAAI,OAAM;IAAO,GAAI;IAAQ,CAAA;GAClC,CAAA,EAEV,kBAAC,GAAD;GAAS,OAAO;GAAa,SAAS,CAAC,CAAC;GAAa,GAAI;aACvD,kBAAC,GAAD;IAAO,WAAU;IAAM,OAAM;IAAS,MAAK;cACzC,kBAAC,GAAD;KACE,IAAG;KACH,GAAI;KACG;KACC;KACF;KACN,cAAc,IAAc,OAAO,KAAA;KACnC,aAAa,IAAc,WAAW,KAAA;KAErC;KACI,CAAA;IACD,CAAA;GACA,CAAA,CACJ;;GAMN,KAAS,EAAE,OAAI,QAAQ,UAAO,KAAK,GAAG,QACnC,kBAAC,GAAD;CAAU;CAAS;CAAM,GAAI;CAAS,CAAA,EA+BzC,IAAW;CACf;CACA;CACA;CACA;CACA,OAzBY,EACZ,UACA,cACA,SACA,aACA,gBACA,eACA,eACA,GAAG,QAGD,kBAAC,GAAD;EAAqB;EAAW,GAAI;YAApC,CACE,kBAAC,GAAD;GAAa;GAAmB;GAAa,GAAI;aAC9C;GACK,CAAA,EACR,kBAAC,GAAD;GAAO,GAAI;GAAa;GAAiB,CAAA,CAChC;;CAUd"}

package/dist/types/DataList/DataList.d.ts

@@ -12,9 +12,9 @@ export type LabelProps = {
     description?: React.ReactNode;
     tooltipProps?: Omit<Partial<TgphComponentProps<typeof Tooltip>>, "enabled" | "label">;
 } & TgphComponentProps<typeof Stack>;
-declare const Label: ({ maxW, maxH, w, icon, children, textProps, description, tooltipProps, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Label: ({ maxW, w, icon, children, textProps, description, tooltipProps, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export type ValueProps = TgphComponentProps<typeof Stack>;
-declare const Value: ({ ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
+declare const Value: ({ w, minW, ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
 export type ItemProps = ListItemProps & {
     label: React.ReactNode | string;
     icon?: TgphComponentProps<typeof Icon>;
@@ -25,8 +25,8 @@ export type ItemProps = ListItemProps & {
 declare const DataList: {
     List: ({ direction, gap, ...props }: ListProps) => import("react/jsx-runtime").JSX.Element;
     ListItem: ({ direction, gap, align, ...props }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ maxW, maxH, w, icon, children, textProps, description, tooltipProps, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-    Value: ({ ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ maxW, w, icon, children, textProps, description, tooltipProps, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ w, minW, ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ label, direction, icon, children, description, labelProps, valueProps, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { DataList };

package/dist/types/DataList/DataList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.d.ts","sourceRoot":"","sources":["../../../src/DataList/DataList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAMzD,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAW7D,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,IAAI,CACjB,OAAO,CAAC,kBAAkB,CAAC,OAAO,OAAO,CAAC,CAAC,EAC3C,SAAS,GAAG,OAAO,CACpB,CAAC;CACH,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,GAAI,mFAUZ,UAAU,4CAsCZ,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,cAAc,UAAU,4CAEtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;CAC/C,CAAC;AAsBF,QAAA,MAAM,QAAQ;yCA7G+C,SAAS;oDAWnE,aAAa;+FAwBb,UAAU;0BA0CgB,UAAU;gGAqBpC,SAAS;CAiBX,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"DataList.d.ts","sourceRoot":"","sources":["../../../src/DataList/DataList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAMzD,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAW7D,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,IAAI,CACjB,OAAO,CAAC,kBAAkB,CAAC,OAAO,OAAO,CAAC,CAAC,EAC3C,SAAS,GAAG,OAAO,CACpB,CAAC;CACH,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,GAAI,6EASZ,UAAU,4CAuCZ,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,uBAAsC,UAAU,4CAE9D,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;CAC/C,CAAC;AAsBF,QAAA,MAAM,QAAQ;yCA7G+C,SAAS;oDAWnE,aAAa;yFAuBb,UAAU;mCA2CwC,UAAU;gGAqB5D,SAAS;CAiBX,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/data-list",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "Flexible data list component for displaying label-value pairs in a structured, composable format.",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/data-list",
   "author": "@knocklabs",
@@ -33,21 +33,21 @@
     "@telegraph/helpers": "^0.0.15",
     "@telegraph/icon": "^0.5.0",
     "@telegraph/layout": "^0.5.0",
-    "@telegraph/tooltip": "^0.2.1",
+    "@telegraph/tooltip": "^0.3.0",
     "@telegraph/typography": "^0.4.0"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.5",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.1.1",
-    "@telegraph/prettier-config": "^0.0.7",
+    "@telegraph/postcss-config": "^0.1.2",
+    "@telegraph/prettier-config": "^0.0.8",
     "@telegraph/vite-config": "^0.0.15",
     "@types/react": "^19.2.9",
-    "eslint": "^10.2.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3",
-    "vite": "^6.4.1"
+    "eslint": "^10.2.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",