@telegraph/data-list 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @telegraph/data-list
 
+## 0.0.4
+
+### Patch Changes
+
+- [#624](https://github.com/knocklabs/telegraph/pull/624) [`794e5aa`](https://github.com/knocklabs/telegraph/commit/794e5aa8df38d6d687faceaa933a8fdda6da49a3) Thanks [@kylemcd](https://github.com/kylemcd)! - fix: data-list label size, additional props for default component
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`aeb1c2b`](https://github.com/knocklabs/telegraph/commit/aeb1c2bf0db098320ecc960debf7f99ce0bb35d3), [`7c5f127`](https://github.com/knocklabs/telegraph/commit/7c5f127d945bfe3a171032195e214454ac4291cf), [`5901b31`](https://github.com/knocklabs/telegraph/commit/5901b317bef94ae6ff3903ed5c8129bde6a4532b)]:
+  - @telegraph/layout@0.3.0
+  - @telegraph/typography@0.1.26
+  - @telegraph/icon@0.3.1
+
 ## 0.0.2
 
 ### 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"),S=require("@telegraph/icon"),c=require("@telegraph/layout"),m=require("@telegraph/typography"),y=({direction:t="column",gap:r="4",...s})=>e.jsx(c.Stack,{direction:t,gap:r,...s}),i=({direction:t="row",gap:r="1",align:s="baseline",...n})=>e.jsx(c.Stack,{direction:t,gap:r,align:s,...n}),a=({maxW:t="36",maxH:r="6",w:s="full",icon:n,children:o,textProps:u,...x})=>{const{color:j="gray",weight:g="medium",...d}=u||{};return e.jsxs(c.Stack,{direction:"row",align:"baseline",gap:"2",maxW:t,w:s,maxH:r,...x,children:[n&&e.jsx(c.Stack,{alignSelf:"center",children:e.jsx(S.Icon,{size:"1",color:"gray",...n})}),e.jsx(m.Text,{as:"label",...d,color:j,weight:g,children:o})]})},l=({...t})=>e.jsx(c.Stack,{...t}),b=({label:t,direction:r,icon:s,children:n,...o})=>e.jsxs(i,{direction:r,...o,children:[e.jsx(a,{icon:s,children:t}),e.jsx(l,{children:n})]}),h={List:y,ListItem:i,Label:a,Value:l,Item:b};exports.DataList=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@telegraph/icon"),c=require("@telegraph/layout"),y=require("@telegraph/typography"),b=({direction:t="column",gap:r="4",...s})=>e.jsx(c.Stack,{direction:t,gap:r,...s}),l=({direction:t="row",gap:r="1",align:s="baseline",...n})=>e.jsx(c.Stack,{direction:t,gap:r,align:s,...n}),u=({maxW:t="36",maxH:r="6",w:s="full",icon:n,children:o,textProps:i,...a})=>{const{color:j="gray",weight:g="medium",size:d="1",...S}=i||{};return e.jsxs(c.Stack,{direction:"row",align:"baseline",gap:"2",maxW:t,w:s,maxH:r,...a,children:[n&&e.jsx(c.Stack,{alignSelf:"center",children:e.jsx(m.Icon,{size:"1",color:"gray",...n})}),e.jsx(y.Text,{as:"label",...S,color:j,weight:g,size:d,children:o})]})},x=({...t})=>e.jsx(c.Stack,{...t}),h=({label:t,direction:r,icon:s,children:n,labelProps:o,valueProps:i,...a})=>e.jsxs(l,{direction:r,...a,children:[e.jsx(u,{icon:s,...o,children:t}),e.jsx(x,{...i,children:n})]}),k={List:b,ListItem:l,Label:u,Value:x,Item:h};exports.DataList=k;
 //# 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 { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\ntype ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\ntype 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\ntype LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    ...restTextProps\n  } = textProps || {};\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      <Text as=\"label\" {...restTextProps} color={color} weight={weight}>\n        {children}\n      </Text>\n    </Stack>\n  );\n};\n\ntype ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\ntype ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n};\n\nconst Item = ({ label, direction, icon, children, ...props }: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon}>{label}</Label>\n      <Value>{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","color","weight","restTextProps","jsxs","Icon","Text","Value","Item","label","DataList"],"mappings":"oNAQMA,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,EAQnEK,EAAQ,CAAC,CACb,KAAAC,EAAO,KACP,KAAAC,EAAO,IACP,EAAAC,EAAI,OAAA,KACJC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGX,CACL,IAAkB,CAChB,KAAM,CACJ,MAAAY,EAAQ,OACR,OAAAC,EAAS,SACT,GAAGC,CAAA,EACDH,GAAa,CAAA,EACjB,OACEI,EAAAA,KAACb,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,IAACe,EAAAA,KAAA,CAAK,KAAK,IAAI,MAAM,OAAQ,GAAGP,CAAA,CAAM,EACxC,EAEFR,MAACgB,EAAAA,MAAK,GAAG,QAAS,GAAGH,EAAe,MAAAF,EAAc,OAAAC,EAC/C,SAAAH,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,EAIMQ,EAAQ,CAAC,CAAE,GAAGlB,KACXC,MAACC,EAAAA,MAAA,CAAO,GAAGF,CAAA,CAAO,EAQrBmB,EAAO,CAAC,CAAE,MAAAC,EAAO,UAAAtB,EAAW,KAAAW,EAAM,SAAAC,EAAU,GAAGV,KAEjDe,EAAAA,KAACZ,EAAA,CAAS,UAAAL,EAAuB,GAAGE,EAClC,SAAA,CAAAC,EAAAA,IAACI,EAAA,CAAM,KAAAI,EAAa,SAAAW,CAAA,CAAM,EAC1BnB,MAACiB,GAAO,SAAAR,CAAA,CAAS,CAAA,EACnB,EAIEW,EAAW,CACf,KAAAxB,EACA,SAAAM,EACA,MAAAE,EACA,MAAAa,EACA,KAAAC,CACF"}
+{"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 { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\ntype ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\ntype 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\ntype LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\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      <Text\n        as=\"label\"\n        {...restTextProps}\n        color={color}\n        weight={weight}\n        size={size}\n      >\n        {children}\n      </Text>\n    </Stack>\n  );\n};\n\ntype ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\ntype ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} {...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","color","weight","size","restTextProps","jsxs","Icon","Text","Value","Item","label","labelProps","valueProps","DataList"],"mappings":"oNAQMA,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,EAQnEK,EAAQ,CAAC,CACb,KAAAC,EAAO,KACP,KAAAC,EAAO,IACP,EAAAC,EAAI,OAAA,KACJC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGX,CACL,IAAkB,CAChB,KAAM,CACJ,MAAAY,EAAQ,OACR,OAAAC,EAAS,SACT,KAAAC,EAAO,IACP,GAAGC,CAAA,EACDJ,GAAa,CAAA,EACjB,OACEK,EAAAA,KAACd,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,IAACgB,EAAAA,KAAA,CAAK,KAAK,IAAI,MAAM,OAAQ,GAAGR,CAAA,CAAM,EACxC,EAEFR,EAAAA,IAACiB,EAAAA,KAAA,CACC,GAAG,QACF,GAAGH,EACJ,MAAAH,EACA,OAAAC,EACA,KAAAC,EAEC,SAAAJ,CAAA,CAAA,CACH,CAAA,CAAA,CAGN,EAIMS,EAAQ,CAAC,CAAE,GAAGnB,KACXC,MAACC,EAAAA,MAAA,CAAO,GAAGF,CAAA,CAAO,EAUrBoB,EAAO,CAAC,CACZ,MAAAC,EACA,UAAAvB,EACA,KAAAW,EACA,SAAAC,EACA,WAAAY,EACA,WAAAC,EACA,GAAGvB,CACL,IAEIgB,EAAAA,KAACb,EAAA,CAAS,UAAAL,EAAuB,GAAGE,EAClC,SAAA,CAAAC,EAAAA,IAACI,EAAA,CAAM,KAAAI,EAAa,GAAGa,EACpB,SAAAD,EACH,EACApB,EAAAA,IAACkB,EAAA,CAAO,GAAGI,EAAa,SAAAb,CAAA,CAAS,CAAA,EACnC,EAIEc,EAAW,CACf,KAAA3B,EACA,SAAAM,EACA,MAAAE,EACA,MAAAc,EACA,KAAAC,CACF"}

package/dist/esm/index.mjs

@@ -1,27 +1,28 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { Icon as h } from "@telegraph/icon";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Icon as x } from "@telegraph/icon";
 import { Stack as i } from "@telegraph/layout";
-import { Text as x } from "@telegraph/typography";
-const b = ({ direction: r = "column", gap: e = "4", ...o }) => /* @__PURE__ */ t(i, { direction: r, gap: e, ...o }), c = ({
+import { Text as b } from "@telegraph/typography";
+const L = ({ direction: r = "column", gap: t = "4", ...o }) => /* @__PURE__ */ e(i, { direction: r, gap: t, ...o }), m = ({
   direction: r = "row",
-  gap: e = "1",
+  gap: t = "1",
   align: o = "baseline",
   ...n
-}) => /* @__PURE__ */ t(i, { direction: r, gap: e, align: o, ...n }), a = ({
+}) => /* @__PURE__ */ e(i, { direction: r, gap: t, align: o, ...n }), u = ({
   maxW: r = "36",
-  maxH: e = "6",
+  maxH: t = "6",
   w: o = "full",
   icon: n,
   children: s,
-  textProps: u,
-  ...p
+  textProps: l,
+  ...c
 }) => {
   const {
     color: d = "gray",
     weight: f = "medium",
-    ...g
-  } = u || {};
-  return /* @__PURE__ */ l(
+    size: g = "1",
+    ...h
+  } = l || {};
+  return /* @__PURE__ */ a(
     i,
     {
       direction: "row",
@@ -29,23 +30,41 @@ const b = ({ direction: r = "column", gap: e = "4", ...o }) => /* @__PURE__ */ t
       gap: "2",
       maxW: r,
       w: o,
-      maxH: e,
-      ...p,
+      maxH: t,
+      ...c,
       children: [
-        n && /* @__PURE__ */ t(i, { alignSelf: "center", children: /* @__PURE__ */ t(h, { size: "1", color: "gray", ...n }) }),
-        /* @__PURE__ */ t(x, { as: "label", ...g, color: d, weight: f, children: s })
+        n && /* @__PURE__ */ e(i, { alignSelf: "center", children: /* @__PURE__ */ e(x, { size: "1", color: "gray", ...n }) }),
+        /* @__PURE__ */ e(
+          b,
+          {
+            as: "label",
+            ...h,
+            color: d,
+            weight: f,
+            size: g,
+            children: s
+          }
+        )
       ]
     }
   );
-}, m = ({ ...r }) => /* @__PURE__ */ t(i, { ...r }), L = ({ label: r, direction: e, icon: o, children: n, ...s }) => /* @__PURE__ */ l(c, { direction: e, ...s, children: [
-  /* @__PURE__ */ t(a, { icon: o, children: r }),
-  /* @__PURE__ */ t(m, { children: n })
+}, p = ({ ...r }) => /* @__PURE__ */ e(i, { ...r }), w = ({
+  label: r,
+  direction: t,
+  icon: o,
+  children: n,
+  labelProps: s,
+  valueProps: l,
+  ...c
+}) => /* @__PURE__ */ a(m, { direction: t, ...c, children: [
+  /* @__PURE__ */ e(u, { icon: o, ...s, children: r }),
+  /* @__PURE__ */ e(p, { ...l, children: n })
 ] }), S = {
-  List: b,
-  ListItem: c,
-  Label: a,
-  Value: m,
-  Item: L
+  List: L,
+  ListItem: m,
+  Label: u,
+  Value: p,
+  Item: w
 };
 export {
   S as DataList

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 { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\ntype ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\ntype 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\ntype LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    ...restTextProps\n  } = textProps || {};\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      <Text as=\"label\" {...restTextProps} color={color} weight={weight}>\n        {children}\n      </Text>\n    </Stack>\n  );\n};\n\ntype ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\ntype ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n};\n\nconst Item = ({ label, direction, icon, children, ...props }: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon}>{label}</Label>\n      <Value>{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","color","weight","restTextProps","jsxs","Icon","Text","Value","Item","label","DataList"],"mappings":";;;;AAQA,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,GAQnEK,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,GAAGX;AACL,MAAkB;AAChB,QAAM;AAAA,IACJ,OAAAY,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,GAAGC;AAAA,EAAA,IACDH,KAAa,CAAA;AACjB,SACE,gBAAAI;AAAA,IAACb;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,EAACe,GAAA,EAAK,MAAK,KAAI,OAAM,QAAQ,GAAGP,EAAA,CAAM,GACxC;AAAA,QAEF,gBAAAR,EAACgB,KAAK,IAAG,SAAS,GAAGH,GAAe,OAAAF,GAAc,QAAAC,GAC/C,UAAAH,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAIMQ,IAAQ,CAAC,EAAE,GAAGlB,QACX,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO,GAQrBmB,IAAO,CAAC,EAAE,OAAAC,GAAO,WAAAtB,GAAW,MAAAW,GAAM,UAAAC,GAAU,GAAGV,QAEjD,gBAAAe,EAACZ,GAAA,EAAS,WAAAL,GAAuB,GAAGE,GAClC,UAAA;AAAA,EAAA,gBAAAC,EAACI,GAAA,EAAM,MAAAI,GAAa,UAAAW,EAAA,CAAM;AAAA,EAC1B,gBAAAnB,EAACiB,KAAO,UAAAR,EAAA,CAAS;AAAA,GACnB,GAIEW,IAAW;AAAA,EACf,MAAAxB;AAAA,EACA,UAAAM;AAAA,EACA,OAAAE;AAAA,EACA,OAAAa;AAAA,EACA,MAAAC;AACF;"}
+{"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 { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\ntype ListProps = TgphComponentProps<typeof Stack>;\n\nconst List = ({ direction = \"column\", gap = \"4\", ...props }: ListProps) => {\n  return <Stack direction={direction} gap={gap} {...props} />;\n};\n\ntype 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\ntype LabelProps = {\n  textProps?: TgphComponentProps<typeof Text>;\n  icon?: TgphComponentProps<typeof Icon>;\n} & TgphComponentProps<typeof Stack>;\n\nconst Label = ({\n  maxW = \"36\",\n  maxH = \"6\",\n  w = \"full\",\n  icon,\n  children,\n  textProps,\n  ...props\n}: LabelProps) => {\n  const {\n    color = \"gray\",\n    weight = \"medium\",\n    size = \"1\",\n    ...restTextProps\n  } = textProps || {};\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      <Text\n        as=\"label\"\n        {...restTextProps}\n        color={color}\n        weight={weight}\n        size={size}\n      >\n        {children}\n      </Text>\n    </Stack>\n  );\n};\n\ntype ValueProps = TgphComponentProps<typeof Stack>;\n\nconst Value = ({ ...props }: ValueProps) => {\n  return <Stack {...props} />;\n};\n\ntype ItemProps = ListItemProps & {\n  label: React.ReactNode | string;\n  icon?: TgphComponentProps<typeof Icon>;\n  labelProps?: TgphComponentProps<typeof Label>;\n  valueProps?: TgphComponentProps<typeof Value>;\n};\n\nconst Item = ({\n  label,\n  direction,\n  icon,\n  children,\n  labelProps,\n  valueProps,\n  ...props\n}: ItemProps) => {\n  return (\n    <ListItem direction={direction} {...props}>\n      <Label icon={icon} {...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","color","weight","size","restTextProps","jsxs","Icon","Text","Value","Item","label","labelProps","valueProps","DataList"],"mappings":";;;;AAQA,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,GAQnEK,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,GAAGX;AACL,MAAkB;AAChB,QAAM;AAAA,IACJ,OAAAY,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDJ,KAAa,CAAA;AACjB,SACE,gBAAAK;AAAA,IAACd;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,EAACgB,GAAA,EAAK,MAAK,KAAI,OAAM,QAAQ,GAAGR,EAAA,CAAM,GACxC;AAAA,QAEF,gBAAAR;AAAA,UAACiB;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAGH;AAAA,YACJ,OAAAH;AAAA,YACA,QAAAC;AAAA,YACA,MAAAC;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,GAIMS,IAAQ,CAAC,EAAE,GAAGnB,QACX,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO,GAUrBoB,IAAO,CAAC;AAAA,EACZ,OAAAC;AAAA,EACA,WAAAvB;AAAA,EACA,MAAAW;AAAA,EACA,UAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,GAAGvB;AACL,MAEI,gBAAAgB,EAACb,GAAA,EAAS,WAAAL,GAAuB,GAAGE,GAClC,UAAA;AAAA,EAAA,gBAAAC,EAACI,GAAA,EAAM,MAAAI,GAAa,GAAGa,GACpB,UAAAD,GACH;AAAA,EACA,gBAAApB,EAACkB,GAAA,EAAO,GAAGI,GAAa,UAAAb,EAAA,CAAS;AAAA,GACnC,GAIEc,IAAW;AAAA,EACf,MAAA3B;AAAA,EACA,UAAAM;AAAA,EACA,OAAAE;AAAA,EACA,OAAAc;AAAA,EACA,MAAAC;AACF;"}

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

@@ -9,17 +9,21 @@ type LabelProps = {
     textProps?: TgphComponentProps<typeof Text>;
     icon?: TgphComponentProps<typeof Icon>;
 } & TgphComponentProps<typeof Stack>;
+declare const Label: ({ maxW, maxH, w, icon, children, textProps, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 type ValueProps = TgphComponentProps<typeof Stack>;
+declare const Value: ({ ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
 type ItemProps = ListItemProps & {
     label: React.ReactNode | string;
     icon?: TgphComponentProps<typeof Icon>;
+    labelProps?: TgphComponentProps<typeof Label>;
+    valueProps?: TgphComponentProps<typeof Value>;
 };
 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, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
     Value: ({ ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ label, direction, icon, children, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ label, direction, icon, children, labelProps, valueProps, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { DataList };
 //# sourceMappingURL=DataList.d.ts.map

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,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAMlD,KAAK,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAWtD,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;CACxC,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAsCrC,KAAK,UAAU,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAMnD,KAAK,SAAS,GAAG,aAAa,GAAG;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;CACxC,CAAC;AAWF,QAAA,MAAM,QAAQ;yCA5E+C,SAAS;oDAWnE,aAAa;oEAiBb,UAAU;0BA8BgB,UAAU;2DASuB,SAAS;CAetE,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,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAMlD,KAAK,aAAa,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAWtD,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;CACxC,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,GAAI,wDAQZ,UAAU,4CAiCZ,CAAC;AAEF,KAAK,UAAU,GAAG,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAEnD,QAAA,MAAM,KAAK,GAAI,cAAc,UAAU,4CAEtC,CAAC;AAEF,KAAK,SAAS,GAAG,aAAa,GAAG;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;CAC/C,CAAC;AAqBF,QAAA,MAAM,QAAQ;yCA/F+C,SAAS;oDAWnE,aAAa;oEAiBb,UAAU;0BAqCgB,UAAU;mFAmBpC,SAAS;CAiBX,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/data-list",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@telegraph/helpers": "^0.0.13",
-    "@telegraph/icon": "^0.3.0",
-    "@telegraph/layout": "^0.2.3",
-    "@telegraph/typography": "^0.1.25"
+    "@telegraph/icon": "^0.3.1",
+    "@telegraph/layout": "^0.3.0",
+    "@telegraph/typography": "^0.1.26"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.5",