@telegraph/data-list 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @telegraph/data-list
 
+## 0.0.5
+
+### Patch Changes
+
+- [#626](https://github.com/knocklabs/telegraph/pull/626) [`5634e8d`](https://github.com/knocklabs/telegraph/commit/5634e8dbedea588c793ea460ead27a0a39746ffa) Thanks [@connorlindsey](https://github.com/connorlindsey)! - feat: add description as tooltip
+
+## 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

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"),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

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 { Tooltip } from \"@telegraph/tooltip\";\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  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\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  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"}

package/dist/esm/index.mjs

@@ -1,53 +1,78 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { Icon as h } from "@telegraph/icon";
+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 { 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 { 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: e = "1",
-  align: o = "baseline",
-  ...n
-}) => /* @__PURE__ */ t(i, { direction: r, gap: e, align: o, ...n }), a = ({
+  gap: o = "1",
+  align: t = "baseline",
+  ...l
+}) => /* @__PURE__ */ e(i, { direction: r, gap: o, align: t, ...l }), u = ({
   maxW: r = "36",
-  maxH: e = "6",
-  w: o = "full",
-  icon: n,
+  maxH: o = "6",
+  w: t = "full",
+  icon: l,
   children: s,
-  textProps: u,
-  ...p
+  textProps: a,
+  description: n,
+  tooltipProps: m,
+  ...f
 }) => {
   const {
-    color: d = "gray",
-    weight: f = "medium",
-    ...g
-  } = u || {};
-  return /* @__PURE__ */ l(
+    color: h = "gray",
+    weight: p = "medium",
+    size: g = "1",
+    ...x
+  } = a || {};
+  return /* @__PURE__ */ c(
     i,
     {
       direction: "row",
       align: "baseline",
       gap: "2",
       maxW: r,
-      w: o,
-      maxH: e,
-      ...p,
+      w: t,
+      maxH: o,
+      ...f,
       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 })
+        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
+          }
+        ) })
       ]
     }
   );
-}, 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 })
-] }), S = {
-  List: b,
-  ListItem: c,
-  Label: a,
-  Value: m,
-  Item: L
+}, 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
 };
 export {
-  S as DataList
+  B 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 { 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 { Tooltip } from \"@telegraph/tooltip\";\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  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\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  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;"}

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

@@ -1,6 +1,7 @@
 import { TgphComponentProps } from '@telegraph/helpers';
 import { Icon } from '@telegraph/icon';
 import { Stack } from '@telegraph/layout';
+import { Tooltip } from '@telegraph/tooltip';
 import { Text } from '@telegraph/typography';
 import { default as React } from 'react';
 type ListProps = TgphComponentProps<typeof Stack>;
@@ -8,18 +9,25 @@ type ListItemProps = TgphComponentProps<typeof Stack>;
 type LabelProps = {
     textProps?: TgphComponentProps<typeof Text>;
     icon?: TgphComponentProps<typeof Icon>;
+    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;
 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>;
+    description?: React.ReactNode;
+    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;
+    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;
-    Item: ({ label, direction, icon, children, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ label, direction, icon, children, description, 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,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,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;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,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/data-list",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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,6 +33,7 @@
     "@telegraph/helpers": "^0.0.13",
     "@telegraph/icon": "^0.3.1",
     "@telegraph/layout": "^0.3.0",
+    "@telegraph/tooltip": "^0.0.59",
     "@telegraph/typography": "^0.1.26"
   },
   "devDependencies": {