@traefik-labs/faency 12.0.7

package/dist/components/AriaTable/AriaTable.cjs

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const reactSlot = require("@radix-ui/react-slot");
+const merge = require("lodash.merge");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Table$1 = require("../Table/Table.cjs");
+const Box = require("../Box/Box.cjs");
+const Caption = stitches_config.styled("div", Table$1.Caption, {
+  display: "table-caption"
+});
+const StyledTbody = stitches_config.styled("div", Table$1.Tbody, {
+  display: "table-row-group"
+});
+const Tbody = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTbody, { ref, role: "rowgroup", ...props }));
+const StyledTfoot = stitches_config.styled("div", Table$1.Tfoot, {
+  display: "table-footer-group"
+});
+const Tfoot = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTfoot, { ref, role: "rowgroup", ...props }));
+const StyledTr = stitches_config.styled("div", Table$1.StyledTr, {
+  display: "table-row"
+});
+const StyledTrSlot = stitches_config.styled(reactSlot.Slot, StyledTr);
+const AnimatedContainer = ({ isOpen, children }) => {
+  const appliedStyle = React.useMemo(
+    () => isOpen ? {
+      transition: "all 0.2s ease-out",
+      paddingBottom: 0,
+      paddingTop: 0,
+      border: "none"
+    } : {
+      transition: "all 0.2s ease-out",
+      padding: "0px 16px",
+      pointerEvents: "none",
+      border: "none"
+    },
+    [isOpen]
+  );
+  const containerStyle = React.useMemo(
+    () => isOpen ? {
+      transition: "all 0.2s ease-out",
+      padding: "16px",
+      paddingBottom: 0
+    } : {
+      transition: "all 0.2s ease-out",
+      height: 0,
+      overflow: "hidden",
+      padding: "0px 16px"
+    },
+    [isOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTr,
+    {
+      css: isOpen ? { "&:not(:last-child)": { borderBottom: "1px solid $tableRowBorder" } } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(Td, { css: appliedStyle, fullColSpan: true, children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: containerStyle, children }) })
+    }
+  );
+};
+const Tr = React.forwardRef(
+  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {
+    const Component = asChild ? StyledTrSlot : StyledTr;
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+    if (!asChild) {
+      const arrayChildren = React.Children.toArray(children);
+      const hasColSpanChildren = arrayChildren.some((child) => {
+        if (!React.isValidElement(child)) {
+          return false;
+        }
+        const { fullColSpan } = child.props;
+        return !!fullColSpan;
+      });
+      if (hasColSpanChildren && arrayChildren.length > 1) {
+        throw new Error("Using fullColSpan is allowed only for a single full width Td.");
+      }
+    }
+    const TdEl = React.useMemo(
+      () => emptyFirstColumn ? tableHead ? /* @__PURE__ */ jsxRuntime.jsx(Th, { css: { width: 24 } }) : /* @__PURE__ */ jsxRuntime.jsx(Td, {}, "empty-td") : collapsedContent ? /* @__PURE__ */ jsxRuntime.jsx(Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box.Box,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactIcons.ChevronRightIcon,
+            {
+              onClick: () => setIsCollapsed(!isCollapsed),
+              style: {
+                cursor: "pointer",
+                transition: "transform 0.2s ease-out",
+                transform: isCollapsed ? "rotate(90deg)" : "initial"
+              }
+            }
+          )
+        }
+      ) }, "chevron-td") : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [isCollapsed]
+    );
+    const renderedChildren = React.useMemo(() => {
+      if (asChild) {
+        return React.cloneElement(
+          children,
+          {
+            // @ts-ignore: Object is possibly 'null'.
+            ...children?.props
+          },
+          // @ts-ignore: Object is possibly 'null'.
+          [TdEl, ...children?.props?.children || []]
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        TdEl,
+        children
+      ] });
+    }, [asChild, TdEl, children]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ref,
+          role: "row",
+          css: !!collapsedContent && !isCollapsed ? {
+            ...css,
+            [`&:nth-last-child(2) > span`]: {
+              borderBottom: "none"
+            }
+          } : { ...css },
+          ...props,
+          children: renderedChildren
+        }
+      ),
+      !!collapsedContent && /* @__PURE__ */ jsxRuntime.jsx(AnimatedContainer, { isOpen: isCollapsed, children: collapsedContent })
+    ] });
+  }
+);
+const StyledTh = stitches_config.styled("span", Table$1.Th, {
+  display: "table-cell"
+});
+const Th = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTh, { ref, role: "columnheader", ...props })
+);
+const StyledTd = stitches_config.styled("span", Table$1.Td, {
+  display: "table-cell"
+});
+const FillerTd = stitches_config.styled(StyledTd, {
+  visibility: "hidden"
+});
+const Td = React.forwardRef(
+  ({ fullColSpan, css, ...props }, ref) => {
+    const fullColSpanCss = React.useMemo(
+      () => fullColSpan ? {
+        position: "absolute",
+        left: 0,
+        width: "100%",
+        height: "100%"
+      } : {},
+      [fullColSpan]
+    );
+    if (fullColSpan) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FillerTd, { css, ...props }),
+        /* @__PURE__ */ jsxRuntime.jsx(StyledTd, { ref, role: "cell", css: merge(fullColSpanCss, css), ...props })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledTd, { ref, role: "cell", css, ...props });
+  }
+);
+const StyledThead = stitches_config.styled("div", Table$1.Thead, {
+  display: "table-header-group"
+});
+const Thead = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledThead, { ref, role: "rowgroup", ...props }));
+const StyledTable = stitches_config.styled("div", Table$1.Table, {
+  display: "table"
+});
+const Table = React.forwardRef(({ hasCollapsibleChildren, css, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  StyledTable,
+  {
+    ref,
+    role: "table",
+    css: hasCollapsibleChildren ? { borderCollapse: "collapse", ...css } : css,
+    ...props
+  }
+));
+exports.Caption = Caption;
+exports.Table = Table;
+exports.Tbody = Tbody;
+exports.Td = Td;
+exports.Tfoot = Tfoot;
+exports.Th = Th;
+exports.Thead = Thead;
+exports.Tr = Tr;
+//# sourceMappingURL=AriaTable.cjs.map

package/dist/components/AriaTable/AriaTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaTable.cjs","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={merge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & NonNullable<unknown>;\n"],"names":["styled","TableCaption","TableTbody","forwardRef","jsx","TableTfoot","TableTr","Slot","useMemo","Box","useState","Children","isValidElement","ChevronRightIcon","cloneElement","jsxs","Fragment","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}

package/dist/components/AriaTable/AriaTable.js

@@ -0,0 +1,196 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import merge from "lodash.merge";
+import { forwardRef, useMemo, useState, Children, isValidElement, cloneElement } from "react";
+import { styled } from "../../stitches.config.js";
+import { Caption as Caption$1, Table as Table$1, Tbody as Tbody$1, Td as Td$1, Tfoot as Tfoot$1, Th as Th$1, Thead as Thead$1, StyledTr as StyledTr$1 } from "../Table/Table.js";
+import { Box } from "../Box/Box.js";
+const Caption = styled("div", Caption$1, {
+  display: "table-caption"
+});
+const StyledTbody = styled("div", Tbody$1, {
+  display: "table-row-group"
+});
+const Tbody = forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledTbody, { ref, role: "rowgroup", ...props }));
+const StyledTfoot = styled("div", Tfoot$1, {
+  display: "table-footer-group"
+});
+const Tfoot = forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledTfoot, { ref, role: "rowgroup", ...props }));
+const StyledTr = styled("div", StyledTr$1, {
+  display: "table-row"
+});
+const StyledTrSlot = styled(Slot, StyledTr);
+const AnimatedContainer = ({ isOpen, children }) => {
+  const appliedStyle = useMemo(
+    () => isOpen ? {
+      transition: "all 0.2s ease-out",
+      paddingBottom: 0,
+      paddingTop: 0,
+      border: "none"
+    } : {
+      transition: "all 0.2s ease-out",
+      padding: "0px 16px",
+      pointerEvents: "none",
+      border: "none"
+    },
+    [isOpen]
+  );
+  const containerStyle = useMemo(
+    () => isOpen ? {
+      transition: "all 0.2s ease-out",
+      padding: "16px",
+      paddingBottom: 0
+    } : {
+      transition: "all 0.2s ease-out",
+      height: 0,
+      overflow: "hidden",
+      padding: "0px 16px"
+    },
+    [isOpen]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledTr,
+    {
+      css: isOpen ? { "&:not(:last-child)": { borderBottom: "1px solid $tableRowBorder" } } : {},
+      children: /* @__PURE__ */ jsx(Td, { css: appliedStyle, fullColSpan: true, children: /* @__PURE__ */ jsx(Box, { css: containerStyle, children }) })
+    }
+  );
+};
+const Tr = forwardRef(
+  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {
+    const Component = asChild ? StyledTrSlot : StyledTr;
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    if (!asChild) {
+      const arrayChildren = Children.toArray(children);
+      const hasColSpanChildren = arrayChildren.some((child) => {
+        if (!isValidElement(child)) {
+          return false;
+        }
+        const { fullColSpan } = child.props;
+        return !!fullColSpan;
+      });
+      if (hasColSpanChildren && arrayChildren.length > 1) {
+        throw new Error("Using fullColSpan is allowed only for a single full width Td.");
+      }
+    }
+    const TdEl = useMemo(
+      () => emptyFirstColumn ? tableHead ? /* @__PURE__ */ jsx(Th, { css: { width: 24 } }) : /* @__PURE__ */ jsx(Td, {}, "empty-td") : collapsedContent ? /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          children: /* @__PURE__ */ jsx(
+            ChevronRightIcon,
+            {
+              onClick: () => setIsCollapsed(!isCollapsed),
+              style: {
+                cursor: "pointer",
+                transition: "transform 0.2s ease-out",
+                transform: isCollapsed ? "rotate(90deg)" : "initial"
+              }
+            }
+          )
+        }
+      ) }, "chevron-td") : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [isCollapsed]
+    );
+    const renderedChildren = useMemo(() => {
+      if (asChild) {
+        return cloneElement(
+          children,
+          {
+            // @ts-ignore: Object is possibly 'null'.
+            ...children?.props
+          },
+          // @ts-ignore: Object is possibly 'null'.
+          [TdEl, ...children?.props?.children || []]
+        );
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        TdEl,
+        children
+      ] });
+    }, [asChild, TdEl, children]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          role: "row",
+          css: !!collapsedContent && !isCollapsed ? {
+            ...css,
+            [`&:nth-last-child(2) > span`]: {
+              borderBottom: "none"
+            }
+          } : { ...css },
+          ...props,
+          children: renderedChildren
+        }
+      ),
+      !!collapsedContent && /* @__PURE__ */ jsx(AnimatedContainer, { isOpen: isCollapsed, children: collapsedContent })
+    ] });
+  }
+);
+const StyledTh = styled("span", Th$1, {
+  display: "table-cell"
+});
+const Th = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(StyledTh, { ref, role: "columnheader", ...props })
+);
+const StyledTd = styled("span", Td$1, {
+  display: "table-cell"
+});
+const FillerTd = styled(StyledTd, {
+  visibility: "hidden"
+});
+const Td = forwardRef(
+  ({ fullColSpan, css, ...props }, ref) => {
+    const fullColSpanCss = useMemo(
+      () => fullColSpan ? {
+        position: "absolute",
+        left: 0,
+        width: "100%",
+        height: "100%"
+      } : {},
+      [fullColSpan]
+    );
+    if (fullColSpan) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FillerTd, { css, ...props }),
+        /* @__PURE__ */ jsx(StyledTd, { ref, role: "cell", css: merge(fullColSpanCss, css), ...props })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(StyledTd, { ref, role: "cell", css, ...props });
+  }
+);
+const StyledThead = styled("div", Thead$1, {
+  display: "table-header-group"
+});
+const Thead = forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledThead, { ref, role: "rowgroup", ...props }));
+const StyledTable = styled("div", Table$1, {
+  display: "table"
+});
+const Table = forwardRef(({ hasCollapsibleChildren, css, ...props }, ref) => /* @__PURE__ */ jsx(
+  StyledTable,
+  {
+    ref,
+    role: "table",
+    css: hasCollapsibleChildren ? { borderCollapse: "collapse", ...css } : css,
+    ...props
+  }
+));
+export {
+  Caption,
+  Table,
+  Tbody,
+  Td,
+  Tfoot,
+  Th,
+  Thead,
+  Tr
+};
+//# sourceMappingURL=AriaTable.js.map

package/dist/components/AriaTable/AriaTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaTable.js","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={merge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & NonNullable<unknown>;\n"],"names":["TableCaption","TableTbody","TableTfoot","TableTr","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AvatarPrimitive = require("@radix-ui/react-avatar");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Box = require("../Box/Box.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AvatarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AvatarPrimitive);
+const StyledAvatar = stitches_config.styled(AvatarPrimitive__namespace.Root, {
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
+  overflow: "hidden",
+  userSelect: "none",
+  boxSizing: "border-box",
+  display: "flex",
+  flexShrink: 0,
+  position: "relative",
+  border: "none",
+  fontFamily: "inherit",
+  lineHeight: "1",
+  margin: "0",
+  outline: "none",
+  padding: "0",
+  fontWeight: "$medium",
+  color: "$hiContrast",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: "inherit",
+    boxShadow: "inset 0px 0px 1px rgba(0, 0, 0, 0.12)"
+  },
+  variants: {
+    size: {
+      "1": {
+        width: "$3",
+        height: "$3"
+      },
+      "2": {
+        width: "$5",
+        height: "$5"
+      },
+      "3": {
+        width: "$6",
+        height: "$6"
+      },
+      "4": {
+        width: "$7",
+        height: "$7"
+      },
+      "5": {
+        width: "$8",
+        height: "$8"
+      },
+      "6": {
+        width: "$9",
+        height: "$9"
+      }
+    },
+    variant: {
+      gray: {
+        backgroundColor: "$slate5"
+      },
+      red: {
+        backgroundColor: "$red5"
+      },
+      purple: {
+        backgroundColor: "$purple5"
+      },
+      blue: {
+        backgroundColor: "$blue5"
+      },
+      green: {
+        backgroundColor: "$green5"
+      },
+      orange: {
+        backgroundColor: "$orange5"
+      }
+    },
+    shape: {
+      square: {
+        borderRadius: "$2"
+      },
+      circle: {
+        borderRadius: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "2",
+    variant: "gray",
+    shape: "circle"
+  }
+});
+const StyledAvatarImage = stitches_config.styled(AvatarPrimitive__namespace.Image, {
+  display: "flex",
+  objectFit: "cover",
+  boxSizing: "border-box",
+  height: "100%",
+  verticalAlign: "middle",
+  width: "100%"
+});
+const StyledAvatarFallback = stitches_config.styled(AvatarPrimitive__namespace.Fallback, {
+  textTransform: "uppercase",
+  fontFamily: "$rubik",
+  color: "$deepBlue10",
+  variants: {
+    size: {
+      "1": {
+        fontSize: "10px",
+        lineHeight: "15px"
+      },
+      "2": {
+        fontSize: "$3"
+      },
+      "3": {
+        fontSize: "$6"
+      },
+      "4": {
+        fontSize: "$7"
+      },
+      "5": {
+        fontSize: "$8"
+      },
+      "6": {
+        fontSize: "$9"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "2"
+  }
+});
+const Avatar = React.forwardRef(
+  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box.Box,
+      {
+        css: {
+          ...css,
+          position: "relative",
+          height: "fit-content",
+          width: "fit-content"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatar, { ...props, ref: forwardedRef, size, variant, shape, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { alt, src }),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarFallback, { size, children: fallback })
+        ] })
+      }
+    );
+  }
+);
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: '$medium',\n  color: '$hiContrast',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: '$3',\n        height: '$3',\n      },\n      '2': {\n        width: '$5',\n        height: '$5',\n      },\n      '3': {\n        width: '$6',\n        height: '$6',\n      },\n      '4': {\n        width: '$7',\n        height: '$7',\n      },\n      '5': {\n        width: '$8',\n        height: '$8',\n      },\n      '6': {\n        width: '$9',\n        height: '$9',\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: '$slate5',\n      },\n      red: {\n        backgroundColor: '$red5',\n      },\n      purple: {\n        backgroundColor: '$purple5',\n      },\n      blue: {\n        backgroundColor: '$blue5',\n      },\n      green: {\n        backgroundColor: '$green5',\n      },\n      orange: {\n        backgroundColor: '$orange5',\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n  textTransform: 'uppercase',\n  fontFamily: '$rubik',\n  color: '$deepBlue10',\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: '$3',\n      },\n      '3': {\n        fontSize: '$6',\n      },\n      '4': {\n        fontSize: '$7',\n      },\n      '5': {\n        fontSize: '$8',\n      },\n      '6': {\n        fontSize: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n  },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n  AvatarVariants & {\n    css?: CSS;\n    alt?: string;\n    src?: string;\n    fallback?: React.ReactNode;\n    // status?: StatusColors['variant'];\n  };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n    return (\n      <Box\n        css={{\n          ...css,\n          position: 'relative',\n          height: 'fit-content',\n          width: 'fit-content',\n        }}\n      >\n        <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n          <StyledAvatarImage alt={alt} src={src} />\n          <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n        </StyledAvatar>\n      </Box>\n    );\n  }\n);\n"],"names":["styled","AvatarPrimitive","jsx","Box","jsxs"],"mappings":"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"}