@traefik-labs/faency 12.0.7

package/dist/components/Switch/Switch.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+const THUMB_DIAMETER = 14;
+const LARGE_RATIO = 1.5;
+const THUMB_GAP = 2;
+const ROOT_WIDTH = 32;
+const ROOT_HEIGHT = 18;
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  position: "absolute",
+  left: 0,
+  width: THUMB_DIAMETER,
+  height: THUMB_DIAMETER,
+  backgroundColor: "$switchThumb",
+  borderRadius: "$round",
+  boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;",
+  transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
+  transform: `translateX(${THUMB_GAP}px)`,
+  willChange: "transform",
+  '&[data-state="checked"]': {
+    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`
+  }
+});
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: "unset",
+  boxSizing: "border-box",
+  userSelect: "none",
+  "&::before": {
+    boxSizing: "border-box"
+  },
+  "&::after": {
+    boxSizing: "border-box"
+  },
+  // Reset
+  alignItems: "center",
+  display: "inline-flex",
+  justifyContent: "center",
+  lineHeight: "1",
+  margin: "0",
+  outline: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  backgroundColor: "$switchBackground",
+  borderRadius: "$pill",
+  position: "relative",
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer",
+      [`& ${StyledThumb}`]: {
+        ...elevationVariants[1]
+      }
+    }
+  },
+  "&:focus": {
+    outline: "2px solid $switchFocusBorder",
+    [`& ${StyledThumb}`]: {
+      ...elevationVariants[2]
+    }
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    opacity: 0.38
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: "$switchActiveBackground"
+  },
+  variants: {
+    size: {
+      "1": {
+        width: ROOT_WIDTH,
+        height: ROOT_HEIGHT,
+        m: "$2"
+      },
+      "2": {
+        width: ROOT_WIDTH * LARGE_RATIO,
+        height: ROOT_HEIGHT * LARGE_RATIO,
+        [`& ${StyledThumb}`]: {
+          width: THUMB_DIAMETER * LARGE_RATIO,
+          height: THUMB_DIAMETER * LARGE_RATIO,
+          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,
+          '&[data-state="checked"]': {
+            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "1"
+  }
+});
+const Switch = React.forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(StyledSwitch, { ...props, ref: forwardedRef, children: /* @__PURE__ */ jsx(StyledThumb, {}) })
+);
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from '@radix-ui/react-switch';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst THUMB_DIAMETER = 14; // @FIXME: shouldn't this size be part of theme ?\nconst LARGE_RATIO = 1.5;\nconst THUMB_GAP = 2; // Gap between thumb and background\nconst ROOT_WIDTH = 32;\nconst ROOT_HEIGHT = 18;\n\n// COMPONENTS\nconst StyledThumb = styled(SwitchPrimitive.Thumb, {\n  position: 'absolute',\n  left: 0,\n  width: THUMB_DIAMETER,\n  height: THUMB_DIAMETER,\n  backgroundColor: '$switchThumb',\n  borderRadius: '$round',\n  boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;',\n  transition: 'transform 100ms cubic-bezier(0.22, 1, 0.36, 1)',\n  transform: `translateX(${THUMB_GAP}px)`,\n  willChange: 'transform',\n\n  '&[data-state=\"checked\"]': {\n    transform: `translateX(${ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER}px)`,\n  },\n});\n\nconst StyledSwitch = styled(SwitchPrimitive.Root, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  userSelect: 'none',\n  '&::before': {\n    boxSizing: 'border-box',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n  },\n\n  // Reset\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  backgroundColor: '$switchBackground',\n  borderRadius: '$pill',\n  position: 'relative',\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      [`& ${StyledThumb}`]: {\n        ...elevationVariants[1],\n      },\n    },\n  },\n  '&:focus': {\n    outline: '2px solid $switchFocusBorder',\n    [`& ${StyledThumb}`]: {\n      ...elevationVariants[2],\n    },\n  },\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.38,\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$switchActiveBackground',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: ROOT_WIDTH,\n        height: ROOT_HEIGHT,\n        m: '$2',\n      },\n      '2': {\n        width: ROOT_WIDTH * LARGE_RATIO,\n        height: ROOT_HEIGHT * LARGE_RATIO,\n        [`& ${StyledThumb}`]: {\n          width: THUMB_DIAMETER * LARGE_RATIO,\n          height: THUMB_DIAMETER * LARGE_RATIO,\n          transform: `translateX(${LARGE_RATIO * THUMB_GAP})`,\n\n          '&[data-state=\"checked\"]': {\n            transform: `translateX(${LARGE_RATIO * (ROOT_WIDTH - THUMB_GAP - THUMB_DIAMETER)}px)`,\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n  },\n});\n\nexport type SwitchVariants = VariantProps<typeof StyledSwitch>;\ntype SwitchPrimitiveProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'as'>;\nexport type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };\n\nexport const Switch = React.forwardRef<React.ElementRef<typeof StyledSwitch>, SwitchProps>(\n  (props, forwardedRef) => (\n    <StyledSwitch {...props} ref={forwardedRef}>\n      <StyledThumb />\n    </StyledSwitch>\n  )\n);\n"],"names":[],"mappings":";;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,aAAa;AACnB,MAAM,cAAc;AAGpB,MAAM,cAAc,OAAO,gBAAgB,OAAO;AAAA,EAChD,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW,cAAc,SAAS;AAAA,EAClC,YAAY;AAAA,EAEZ,2BAA2B;AAAA,IACzB,WAAW,cAAc,aAAa,YAAY,cAAc;AAAA,EAAA;AAEpE,CAAC;AAED,MAAM,eAAe,OAAO,gBAAgB,MAAM;AAAA,EAChD,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA;AAAA,EAIb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,yBAAyB;AAAA,EAEzB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,QACpB,GAAG,kBAAkB,CAAC;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,SAAS;AAAA,IACT,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,MACpB,GAAG,kBAAkB,CAAC;AAAA,IAAA;AAAA,EACxB;AAAA,EAEF,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,EAAA;AAAA,EAEX,2BAA2B;AAAA,IACzB,iBAAiB;AAAA,EAAA;AAAA,EAGnB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,QACH,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,MAEL,KAAK;AAAA,QACH,OAAO,aAAa;AAAA,QACpB,QAAQ,cAAc;AAAA,QACtB,CAAC,KAAK,WAAW,EAAE,GAAG;AAAA,UACpB,OAAO,iBAAiB;AAAA,UACxB,QAAQ,iBAAiB;AAAA,UACzB,WAAW,cAAc,cAAc,SAAS;AAAA,UAEhD,2BAA2B;AAAA,YACzB,WAAW,cAAc,eAAe,aAAa,YAAY,eAAe;AAAA,UAAA;AAAA,QAClF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAMM,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,OAAO,iBACN,oBAAC,cAAA,EAAc,GAAG,OAAO,KAAK,cAC5B,UAAA,oBAAC,aAAA,CAAA,CAAY,EAAA,CACf;AAEJ;"}

package/dist/components/Switch/Switch.themes.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    switchBackground: tinycolor("black").setAlpha(0.2).toHslString(),
+    switchActiveBackground: "$primary",
+    switchFocusBorder: primaryColor.helpers.pickScale(8),
+    switchThumb: tinycolor("white").setAlpha(0.87).toHslString()
+  });
+  Theme2.getDark = (primaryColor) => ({
+    switchBackground: tinycolor("white").setAlpha(0.2).toHslString(),
+    switchActiveBackground: "$primary",
+    switchFocusBorder: primaryColor.helpers.pickScale(11),
+    switchThumb: tinycolor("black").setAlpha(0.87).toHslString()
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Switch.themes.cjs.map

package/dist/components/Switch/Switch.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.themes.cjs","sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAUQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,kBAAkB,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnD,wBAAwB;AAAA,IACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACnD,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGhDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,kBAAkB,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnD,wBAAwB;AAAA,IACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACpD,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAC7D,GAtBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Switch/Switch.themes.js

@@ -0,0 +1,20 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = (primaryColor) => ({
+    switchBackground: tinycolor("black").setAlpha(0.2).toHslString(),
+    switchActiveBackground: "$primary",
+    switchFocusBorder: primaryColor.helpers.pickScale(8),
+    switchThumb: tinycolor("white").setAlpha(0.87).toHslString()
+  });
+  Theme2.getDark = (primaryColor) => ({
+    switchBackground: tinycolor("white").setAlpha(0.2).toHslString(),
+    switchActiveBackground: "$primary",
+    switchFocusBorder: primaryColor.helpers.pickScale(11),
+    switchThumb: tinycolor("black").setAlpha(0.87).toHslString()
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Switch.themes.js.map

package/dist/components/Switch/Switch.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.themes.js","sources":["../../../components/Switch/Switch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    switchBackground: Property.Color;\n    switchActiveBackground: Property.Color;\n    switchFocusBorder: Property.Color;\n    switchThumb: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('black').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(8),\n    switchThumb: tinycolor('white').setAlpha(0.87).toHslString(),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    switchBackground: tinycolor('white').setAlpha(0.2).toHslString(),\n    switchActiveBackground: '$primary',\n    switchFocusBorder: primaryColor.helpers.pickScale(11),\n    switchThumb: tinycolor('black').setAlpha(0.87).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAUQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,kBAAkB,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnD,wBAAwB;AAAA,IACxB,mBAAmB,aAAa,QAAQ,UAAU,CAAC;AAAA,IACnD,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGhDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,kBAAkB,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnD,wBAAwB;AAAA,IACxB,mBAAmB,aAAa,QAAQ,UAAU,EAAE;AAAA,IACpD,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAC7D,GAtBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/Table/Table.cjs

@@ -0,0 +1,290 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Label = require("../Label/Label.cjs");
+const Flex = require("../Flex/Flex.cjs");
+const Box = require("../Box/Box.cjs");
+const Text = require("../Text/Text.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const Caption = stitches_config.styled("caption", Text.Text, {
+  display: "table-caption",
+  textAlign: "start",
+  fontVariantNumeric: "proportional-nums",
+  fontWeight: "$medium",
+  lineHeight: "1.25"
+});
+const Tbody = stitches_config.styled("tbody", {
+  width: "100%",
+  verticalAlign: "middle"
+});
+const Th = stitches_config.styled("th", Label.Label, {
+  // override Label
+  display: "table-cell",
+  verticalAlign: "inherit",
+  borderTopLeftRadius: "inherit",
+  borderTopRightRadius: "inherit",
+  textAlign: "start",
+  p: "$2 $3",
+  borderBottom: "1px solid $tableRowBorder",
+  variants: {
+    align: {
+      start: {
+        textAlign: "start"
+      },
+      center: {
+        textAlign: "center"
+      },
+      end: {
+        textAlign: "end"
+      }
+    },
+    transform: {
+      capitalize: {
+        display: "table-cell"
+        // revert Label enforced value
+      }
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+const Td = stitches_config.styled("td", {
+  boxSizing: "border-box",
+  p: "$5 $3",
+  borderBottom: "1px solid $tableRowBorder",
+  fontSize: "$3",
+  lineHeight: "16px",
+  verticalAlign: "inherit",
+  variants: {
+    subtle: {
+      true: {
+        fontWeight: "$regular",
+        color: "$tableSubtleText"
+      }
+    },
+    align: {
+      start: {
+        textAlign: "start"
+      },
+      center: {
+        textAlign: "center"
+      },
+      end: {
+        textAlign: "end"
+      }
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+const StyledTr = stitches_config.styled("tr", {
+  verticalAlign: "inherit",
+  "&:hover": {
+    color: "$tableHoverText"
+  },
+  [`&:last-child > ${Td}`]: {
+    borderBottom: "none"
+  },
+  variants: {
+    interactive: {
+      true: {
+        "&:hover": {
+          backgroundColor: "$tableHoverBackground",
+          cursor: "pointer"
+        }
+      }
+    },
+    active: {
+      true: {
+        backgroundColor: "$tableHoverBackground",
+        color: "$tableActiveText",
+        fontWeight: "$semiBold"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      interactive: true,
+      active: true,
+      css: {
+        "&:hover": {
+          color: "$tableActiveHoverText"
+        }
+      }
+    }
+  ]
+});
+const AnimatedTr = ({
+  collapsedContentColSpan,
+  isOpen,
+  children
+}) => {
+  const appliedStyle = React.useMemo(
+    () => isOpen ? { transition: "padding 0.2s ease-out" } : {
+      transition: "padding 0.2s ease-out",
+      lineHeight: 0,
+      fontSize: 0,
+      padding: "0px 16px",
+      border: "none"
+    },
+    [isOpen]
+  );
+  const containerStyle = React.useMemo(
+    () => isOpen ? { transition: "all 0.2s ease-out" } : {
+      transition: "all 0.2s ease-out",
+      height: 0,
+      overflow: "hidden"
+    },
+    [isOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(Td, { colSpan: collapsedContentColSpan, css: appliedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: containerStyle, children }) }) });
+};
+const Tr = React.forwardRef(
+  ({
+    children,
+    collapsedContent,
+    emptyFirstColumn = false,
+    tableHead = false,
+    collapsedContentColSpan = 1,
+    css,
+    ...props
+  }, ref) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        StyledTr,
+        {
+          ref,
+          css: !!collapsedContent && !isCollapsed ? {
+            ...css,
+            [`&:nth-last-child(2) > ${Td}`]: {
+              borderBottom: "none"
+            }
+          } : { ...css },
+          ...props,
+          children: [
+            emptyFirstColumn ? tableHead ? /* @__PURE__ */ jsxRuntime.jsx(Th, { css: { width: 24 } }) : /* @__PURE__ */ jsxRuntime.jsx(Td, {}) : null,
+            !!collapsedContent && /* @__PURE__ */ jsxRuntime.jsx(
+              Td,
+              {
+                css: { padding: "0 0 0 $3" },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Flex.Flex,
+                  {
+                    align: "center",
+                    justify: "center",
+                    css: {
+                      height: "40px",
+                      "&:hover": {
+                        color: "$tableActiveText"
+                      }
+                    },
+                    onClick: () => setIsCollapsed(!isCollapsed),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactIcons.ChevronRightIcon,
+                      {
+                        style: {
+                          cursor: "pointer",
+                          transition: "transform 0.2s ease-out",
+                          transform: isCollapsed ? "rotate(90deg)" : "initial"
+                        }
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            children
+          ]
+        }
+      ),
+      !!collapsedContent && /* @__PURE__ */ jsxRuntime.jsx(AnimatedTr, { isOpen: isCollapsed, collapsedContentColSpan, children: collapsedContent })
+    ] });
+  }
+);
+const Tfoot = stitches_config.styled("tfoot", {
+  verticalAlign: "middle",
+  position: "relative",
+  borderRadius: "inherit",
+  "&::after": {
+    pointerEvents: "none",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "$tableFooterLayerBackground",
+    borderRadius: "inherit"
+  },
+  [`& ${Td}`]: {
+    fontSize: "$1",
+    color: "$tableHeaderText",
+    fontWeight: "$light",
+    p: "$2 $3"
+  }
+});
+const Thead = stitches_config.styled("thead", {
+  position: "relative",
+  borderTopLeftRadius: "inherit",
+  borderTopRightRadius: "inherit",
+  verticalAlign: "middle",
+  "&::after": {
+    pointerEvents: "none",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "$tableHeaderLayerBackground",
+    borderTopLeftRadius: "inherit",
+    borderTopRightRadius: "inherit"
+  },
+  [`& ${Th}`]: {
+    fontSize: "$1",
+    color: "$tableHeaderText",
+    fontWeight: "$light"
+  }
+});
+const Table = stitches_config.styled("table", {
+  width: "100%",
+  tableLayout: "fixed",
+  boxSizing: "border-box",
+  borderCollapse: "separate",
+  borderSpacing: 0,
+  fontFamily: "$rubik",
+  color: "$tableText",
+  borderRadius: "$3",
+  overflow: "hidden",
+  [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {
+    borderTopLeftRadius: "0",
+    borderTopRightRadius: "0",
+    [`& ${Td}`]: {
+      borderTop: "1px solid $tableRowBorder"
+    }
+  },
+  [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {
+    borderTopLeftRadius: "0",
+    borderTopRightRadius: "0"
+  },
+  variants: {
+    elevation: Elevation.elevationVariants
+  },
+  defaultVariants: {
+    elevation: 1
+  }
+});
+exports.Caption = Caption;
+exports.StyledTr = StyledTr;
+exports.Table = Table;
+exports.Tbody = Tbody;
+exports.Td = Td;
+exports.Tfoot = Tfoot;
+exports.Th = Th;
+exports.Thead = Thead;
+exports.Tr = Tr;
+//# sourceMappingURL=Table.cjs.map

package/dist/components/Table/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.cjs","sources":["../../../components/Table/Table.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport React, { ComponentProps, ElementRef, forwardRef, ReactNode, useMemo, useState } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\nimport { Label } from '../Label';\nimport { Text } from '../Text';\n\nexport const Caption = styled('caption', Text, {\n  display: 'table-caption',\n  textAlign: 'start',\n  fontVariantNumeric: 'proportional-nums',\n  fontWeight: '$medium',\n  lineHeight: '1.25',\n});\n\nexport const Tbody = styled('tbody', {\n  width: '100%',\n  verticalAlign: 'middle',\n});\n\nexport const Th = styled('th', Label, {\n  // override Label\n  display: 'table-cell',\n  verticalAlign: 'inherit',\n\n  borderTopLeftRadius: 'inherit',\n  borderTopRightRadius: 'inherit',\n\n  textAlign: 'start',\n  p: '$2 $3',\n  borderBottom: '1px solid $tableRowBorder',\n\n  variants: {\n    align: {\n      start: {\n        textAlign: 'start',\n      },\n      center: {\n        textAlign: 'center',\n      },\n      end: {\n        textAlign: 'end',\n      },\n    },\n    transform: {\n      capitalize: {\n        display: 'table-cell', // revert Label enforced value\n      },\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n  },\n});\n\nexport const Td = styled('td', {\n  boxSizing: 'border-box',\n  p: '$5 $3',\n  borderBottom: '1px solid $tableRowBorder',\n  fontSize: '$3',\n  lineHeight: '16px',\n  verticalAlign: 'inherit',\n  variants: {\n    subtle: {\n      true: {\n        fontWeight: '$regular',\n        color: '$tableSubtleText',\n      },\n    },\n    align: {\n      start: {\n        textAlign: 'start',\n      },\n      center: {\n        textAlign: 'center',\n      },\n      end: {\n        textAlign: 'end',\n      },\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n  },\n});\n\nexport const StyledTr = styled('tr', {\n  verticalAlign: 'inherit',\n  '&:hover': {\n    color: '$tableHoverText',\n  },\n  [`&:last-child > ${Td}`]: {\n    borderBottom: 'none',\n  },\n\n  variants: {\n    interactive: {\n      true: {\n        '&:hover': {\n          backgroundColor: '$tableHoverBackground',\n          cursor: 'pointer',\n        },\n      },\n    },\n    active: {\n      true: {\n        backgroundColor: '$tableHoverBackground',\n        color: '$tableActiveText',\n        fontWeight: '$semiBold',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      interactive: true,\n      active: true,\n      css: {\n        '&:hover': {\n          color: '$tableActiveHoverText',\n        },\n      },\n    },\n  ],\n});\n\nconst AnimatedTr = ({\n  collapsedContentColSpan,\n  isOpen,\n  children,\n}: {\n  collapsedContentColSpan: number;\n  isOpen: boolean;\n  children: ReactNode;\n}) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? { transition: 'padding 0.2s ease-out' }\n        : {\n            transition: 'padding 0.2s ease-out',\n            lineHeight: 0,\n            fontSize: 0,\n            padding: '0px 16px',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? { transition: 'all 0.2s ease-out' }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n          },\n    [isOpen],\n  );\n\n  return (\n    <Tr>\n      <Td colSpan={collapsedContentColSpan} css={appliedStyle}>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </Tr>\n  );\n};\nexport type TrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    children: React.ReactNode;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    collapsedContentColSpan?: number;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(\n  (\n    {\n      children,\n      collapsedContent,\n      emptyFirstColumn = false,\n      tableHead = false,\n      collapsedContentColSpan = 1,\n      css,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    return (\n      <>\n        <StyledTr\n          ref={ref}\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > ${Td}`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}\n          {!!collapsedContent && (\n            <Td\n              css={{ padding: '0 0 0 $3' }}\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <Flex\n                align=\"center\"\n                justify=\"center\"\n                css={{\n                  height: '40px',\n                  '&:hover': {\n                    color: '$tableActiveText',\n                  },\n                }}\n                onClick={() => setIsCollapsed(!isCollapsed)}\n              >\n                <ChevronRightIcon\n                  style={{\n                    cursor: 'pointer',\n                    transition: 'transform 0.2s ease-out',\n                    transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                  }}\n                />\n              </Flex>\n            </Td>\n          )}\n          {children}\n        </StyledTr>\n        {!!collapsedContent && (\n          <AnimatedTr isOpen={isCollapsed} collapsedContentColSpan={collapsedContentColSpan}>\n            {collapsedContent}\n          </AnimatedTr>\n        )}\n      </>\n    );\n  },\n);\n\nexport const Tfoot = styled('tfoot', {\n  verticalAlign: 'middle',\n  position: 'relative',\n  borderRadius: 'inherit',\n\n  '&::after': {\n    pointerEvents: 'none',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    backgroundColor: '$tableFooterLayerBackground',\n    borderRadius: 'inherit',\n  },\n\n  [`& ${Td}`]: {\n    fontSize: '$1',\n    color: '$tableHeaderText',\n    fontWeight: '$light',\n    p: '$2 $3',\n  },\n});\n\nexport const Thead = styled('thead', {\n  position: 'relative',\n  borderTopLeftRadius: 'inherit',\n  borderTopRightRadius: 'inherit',\n  verticalAlign: 'middle',\n\n  '&::after': {\n    pointerEvents: 'none',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    backgroundColor: '$tableHeaderLayerBackground',\n    borderTopLeftRadius: 'inherit',\n    borderTopRightRadius: 'inherit',\n  },\n\n  [`& ${Th}`]: {\n    fontSize: '$1',\n    color: '$tableHeaderText',\n    fontWeight: '$light',\n  },\n});\n\nexport const Table = styled('table', {\n  width: '100%',\n  tableLayout: 'fixed',\n  boxSizing: 'border-box',\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$rubik',\n  color: '$tableText',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  [`& ${Tbody}:not(:empty) ~ ${Tfoot}`]: {\n    borderTopLeftRadius: '0',\n    borderTopRightRadius: '0',\n    [`& ${Td}`]: {\n      borderTop: '1px solid $tableRowBorder',\n    },\n  },\n  [`& ${Thead}:not(:empty) ~ ${Tfoot}`]: {\n    borderTopLeftRadius: '0',\n    borderTopRightRadius: '0',\n  },\n\n  variants: {\n    elevation: elevationVariants,\n  },\n  defaultVariants: {\n    elevation: 1,\n  },\n});\n\nexport type TableVariants = VariantProps<typeof Table>;\nexport type TableProps = TableVariants & NonNullable<unknown>;\n"],"names":["styled","Text","Label","useMemo","jsx","Box","forwardRef","useState","jsxs","Fragment","Flex","ChevronRightIcon","elevationVariants"],"mappings":"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"}