@traefik-labs/faency 12.0.7

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { Box } from "../Box/Box.js";
+const StyledAvatar = styled(AvatarPrimitive.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 = styled(AvatarPrimitive.Image, {
+  display: "flex",
+  objectFit: "cover",
+  boxSizing: "border-box",
+  height: "100%",
+  verticalAlign: "middle",
+  width: "100%"
+});
+const StyledAvatarFallback = styled(AvatarPrimitive.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__ */ jsx(
+      Box,
+      {
+        css: {
+          ...css,
+          position: "relative",
+          height: "fit-content",
+          width: "fit-content"
+        },
+        children: /* @__PURE__ */ jsxs(StyledAvatar, { ...props, ref: forwardedRef, size, variant, shape, children: [
+          /* @__PURE__ */ jsx(StyledAvatarImage, { alt, src }),
+          /* @__PURE__ */ jsx(StyledAvatarFallback, { size, children: fallback })
+        ] })
+      }
+    );
+  }
+);
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","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":[],"mappings":"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"}

package/dist/components/Badge/Badge.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Badge_vanilla = require("./Badge.vanilla.cjs");
+const getColorBadgeStyles = (color) => ({
+  bc: `$${color}6`,
+  color: `$${color}10`,
+  border: `1px solid $${color}10`
+});
+const colorVariants = Badge_vanilla.COLORS.reduce(
+  (variants, color) => ({
+    ...variants,
+    [color]: getColorBadgeStyles(color)
+  }),
+  {}
+);
+const interactiveColorVariants = Badge_vanilla.COLORS.reduce(
+  (variants, color) => ({
+    ...variants,
+    [color]: {
+      ...getColorBadgeStyles(color)
+    }
+  }),
+  {}
+);
+const alphaColorCompoundVariants = Badge_vanilla.COLORS.map((color) => ({
+  alphaBg: true,
+  variant: color,
+  css: { bc: `$${color}A6` }
+}));
+const BADGE_BASE_STYLES = {
+  // Reset
+  alignItems: "center",
+  appearance: "none",
+  border: "none",
+  boxSizing: "border-box",
+  display: "inline-flex",
+  flexShrink: 0,
+  fontFamily: "$rubik",
+  fontWeight: "$medium",
+  justifyContent: "center",
+  lineHeight: "1",
+  verticalAlign: "middle",
+  outline: "none",
+  padding: "0",
+  textDecoration: "none",
+  userSelect: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  borderRadius: "$pill",
+  whiteSpace: "nowrap",
+  fontVariantNumeric: "tabular-nums",
+  position: "relative",
+  "&:disabled": {
+    backgroundColor: "$slate3",
+    pointerEvents: "none",
+    color: "$slate8"
+  },
+  variants: {
+    size: {
+      small: {
+        height: "$4",
+        px: "$2",
+        fontSize: "$2"
+      },
+      large: {
+        height: "$5",
+        px: "$3",
+        fontSize: "$3"
+      }
+    },
+    variant: colorVariants,
+    alphaBg: {
+      true: {}
+    },
+    borderless: {
+      true: {
+        border: "none"
+      }
+    }
+  },
+  compoundVariants: alphaColorCompoundVariants,
+  defaultVariants: {
+    size: "small",
+    variant: "gray",
+    borderless: false
+  }
+};
+const StyledSpanBadge = stitches_config.styled("span", BADGE_BASE_STYLES);
+const StyledSpanBadgeSlot = stitches_config.styled(reactSlot.Slot, StyledSpanBadge);
+const StyledButtonBadge = stitches_config.styled("button", BADGE_BASE_STYLES, {
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "&:focus-visible": {
+    outline: "2px solid $primary"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "&::before": {
+      backgroundColor: "$badgeInteractiveBackgroundHover"
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "$badgeInteractiveBackgroundActive"
+    }
+  },
+  variants: {
+    variant: interactiveColorVariants,
+    borderless: {
+      true: {
+        border: "none"
+      }
+    }
+  }
+});
+const StyledButtonBadgeSlot = stitches_config.styled(reactSlot.Slot, StyledButtonBadge);
+const Badge = React.forwardRef(
+  ({ interactive, asChild, ...props }, forwardedRef) => {
+    const Component = React.useMemo(() => {
+      if (interactive) {
+        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
+      }
+      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
+    }, [asChild]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, ref: forwardedRef });
+  }
+);
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.cjs.map

package/dist/components/Badge/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"names":["COLORS","styled","Slot","useMemo","jsx"],"mappings":"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"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,137 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import React, { useMemo } from "react";
+import { styled } from "../../stitches.config.js";
+import { COLORS } from "./Badge.vanilla.js";
+const getColorBadgeStyles = (color) => ({
+  bc: `$${color}6`,
+  color: `$${color}10`,
+  border: `1px solid $${color}10`
+});
+const colorVariants = COLORS.reduce(
+  (variants, color) => ({
+    ...variants,
+    [color]: getColorBadgeStyles(color)
+  }),
+  {}
+);
+const interactiveColorVariants = COLORS.reduce(
+  (variants, color) => ({
+    ...variants,
+    [color]: {
+      ...getColorBadgeStyles(color)
+    }
+  }),
+  {}
+);
+const alphaColorCompoundVariants = COLORS.map((color) => ({
+  alphaBg: true,
+  variant: color,
+  css: { bc: `$${color}A6` }
+}));
+const BADGE_BASE_STYLES = {
+  // Reset
+  alignItems: "center",
+  appearance: "none",
+  border: "none",
+  boxSizing: "border-box",
+  display: "inline-flex",
+  flexShrink: 0,
+  fontFamily: "$rubik",
+  fontWeight: "$medium",
+  justifyContent: "center",
+  lineHeight: "1",
+  verticalAlign: "middle",
+  outline: "none",
+  padding: "0",
+  textDecoration: "none",
+  userSelect: "none",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  borderRadius: "$pill",
+  whiteSpace: "nowrap",
+  fontVariantNumeric: "tabular-nums",
+  position: "relative",
+  "&:disabled": {
+    backgroundColor: "$slate3",
+    pointerEvents: "none",
+    color: "$slate8"
+  },
+  variants: {
+    size: {
+      small: {
+        height: "$4",
+        px: "$2",
+        fontSize: "$2"
+      },
+      large: {
+        height: "$5",
+        px: "$3",
+        fontSize: "$3"
+      }
+    },
+    variant: colorVariants,
+    alphaBg: {
+      true: {}
+    },
+    borderless: {
+      true: {
+        border: "none"
+      }
+    }
+  },
+  compoundVariants: alphaColorCompoundVariants,
+  defaultVariants: {
+    size: "small",
+    variant: "gray",
+    borderless: false
+  }
+};
+const StyledSpanBadge = styled("span", BADGE_BASE_STYLES);
+const StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);
+const StyledButtonBadge = styled("button", BADGE_BASE_STYLES, {
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit"
+  },
+  "&:focus-visible": {
+    outline: "2px solid $primary"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "&::before": {
+      backgroundColor: "$badgeInteractiveBackgroundHover"
+    }
+  },
+  "&:active": {
+    "&::before": {
+      backgroundColor: "$badgeInteractiveBackgroundActive"
+    }
+  },
+  variants: {
+    variant: interactiveColorVariants,
+    borderless: {
+      true: {
+        border: "none"
+      }
+    }
+  }
+});
+const StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);
+const Badge = React.forwardRef(
+  ({ interactive, asChild, ...props }, forwardedRef) => {
+    const Component = useMemo(() => {
+      if (interactive) {
+        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
+      }
+      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
+    }, [asChild]);
+    return /* @__PURE__ */ jsx(Component, { ...props, ref: forwardedRef });
+  }
+);
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/Badge.theme.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const badgeLightTheme = {
+  badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.05)",
+  badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.1)"
+};
+const badgeDarkTheme = {
+  badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.1)",
+  badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.2)"
+};
+exports.badgeDarkTheme = badgeDarkTheme;
+exports.badgeLightTheme = badgeLightTheme;
+//# sourceMappingURL=Badge.theme.cjs.map

package/dist/components/Badge/Badge.theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.theme.cjs","sources":["../../../components/Badge/Badge.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const badgeLightTheme = {\n  badgeInteractiveBackgroundHover: 'hsla(0, 0%, 0%, 0.05)',\n  badgeInteractiveBackgroundActive: 'hsla(0, 0%, 0%, 0.1)',\n};\n\nexport const badgeDarkTheme = {\n  badgeInteractiveBackgroundHover: 'hsla(0, 0%, 0%, 0.1)',\n  badgeInteractiveBackgroundActive: 'hsla(0, 0%, 0%, 0.2)',\n};\n"],"names":[],"mappings":";;AAEO,MAAM,kBAAkB;AAAA,EAC7B,iCAAiC;AAAA,EACjC,kCAAkC;AACpC;AAEO,MAAM,iBAAiB;AAAA,EAC5B,iCAAiC;AAAA,EACjC,kCAAkC;AACpC;;;"}

package/dist/components/Badge/Badge.theme.js

@@ -0,0 +1,13 @@
+const badgeLightTheme = {
+  badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.05)",
+  badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.1)"
+};
+const badgeDarkTheme = {
+  badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.1)",
+  badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.2)"
+};
+export {
+  badgeDarkTheme,
+  badgeLightTheme
+};
+//# sourceMappingURL=Badge.theme.js.map

package/dist/components/Badge/Badge.theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.theme.js","sources":["../../../components/Badge/Badge.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const badgeLightTheme = {\n  badgeInteractiveBackgroundHover: 'hsla(0, 0%, 0%, 0.05)',\n  badgeInteractiveBackgroundActive: 'hsla(0, 0%, 0%, 0.1)',\n};\n\nexport const badgeDarkTheme = {\n  badgeInteractiveBackgroundHover: 'hsla(0, 0%, 0%, 0.1)',\n  badgeInteractiveBackgroundActive: 'hsla(0, 0%, 0%, 0.2)',\n};\n"],"names":[],"mappings":"AAEO,MAAM,kBAAkB;AAAA,EAC7B,iCAAiC;AAAA,EACjC,kCAAkC;AACpC;AAEO,MAAM,iBAAiB;AAAA,EAC5B,iCAAiC;AAAA,EACjC,kCAAkC;AACpC;"}

package/dist/components/Badge/Badge.themes.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    badgeInteractiveBackgroundActive: tinycolor("black").setAlpha(0.1).toHslString(),
+    badgeInteractiveBackgroundHover: tinycolor("black").setAlpha(0.05).toHslString()
+  });
+  Theme2.getDark = () => ({
+    badgeInteractiveBackgroundActive: tinycolor("black").setAlpha(0.2).toHslString(),
+    badgeInteractiveBackgroundHover: tinycolor("black").setAlpha(0.1).toHslString()
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Badge.themes.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.themes.cjs","sources":["../../../components/Badge/Badge.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    badgeInteractiveBackgroundActive: Property.Color;\n    badgeInteractiveBackgroundHover: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n    badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n  });\n\n  export const getDark: Factory = () => ({\n    badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n    badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAQQA,SAAA,WAAoB,OAAO;AAAA,IACtC,kCAAkC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnE,iCAAiC,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGpEA,SAAA,UAAmB,OAAO;AAAA,IACrC,kCAAkC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnE,iCAAiC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAAY;AAChF,GAhBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Badge/Badge.themes.js

@@ -0,0 +1,16 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    badgeInteractiveBackgroundActive: tinycolor("black").setAlpha(0.1).toHslString(),
+    badgeInteractiveBackgroundHover: tinycolor("black").setAlpha(0.05).toHslString()
+  });
+  Theme2.getDark = () => ({
+    badgeInteractiveBackgroundActive: tinycolor("black").setAlpha(0.2).toHslString(),
+    badgeInteractiveBackgroundHover: tinycolor("black").setAlpha(0.1).toHslString()
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Badge.themes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.themes.js","sources":["../../../components/Badge/Badge.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    badgeInteractiveBackgroundActive: Property.Color;\n    badgeInteractiveBackgroundHover: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.1).toHslString(),\n    badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.05).toHslString(),\n  });\n\n  export const getDark: Factory = () => ({\n    badgeInteractiveBackgroundActive: tinycolor('black').setAlpha(0.2).toHslString(),\n    badgeInteractiveBackgroundHover: tinycolor('black').setAlpha(0.1).toHslString(),\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAQQA,SAAA,WAAoB,OAAO;AAAA,IACtC,kCAAkC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnE,iCAAiC,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGpEA,SAAA,UAAmB,OAAO;AAAA,IACrC,kCAAkC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IACnE,iCAAiC,UAAU,OAAO,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,EAAY;AAChF,GAhBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/Badge/Badge.vanilla.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Badge_vanilla_css = require("./Badge.vanilla.css.cjs");
+const COLORS = ["gray", "red", "blue", "green", "neon", "orange", "purple"];
+const BadgeVanillaComponentImpl = React.forwardRef(
+  ({
+    as,
+    interactive,
+    className,
+    css,
+    style,
+    size,
+    variant,
+    alphaBg,
+    borderless,
+    ...props
+  }, ref) => {
+    const Component = as || (interactive ? "button" : "span");
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const recipe = interactive ? Badge_vanilla_css.interactiveBadgeRecipe : Badge_vanilla_css.badgeRecipe;
+    const recipeClass = recipe({ size, variant, alphaBg, borderless });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+BadgeVanillaComponentImpl.displayName = "BadgeVanilla";
+const BadgeVanilla = BadgeVanillaComponentImpl;
+exports.BadgeVanilla = BadgeVanilla;
+exports.COLORS = COLORS;
+//# sourceMappingURL=Badge.vanilla.cjs.map

package/dist/components/Badge/Badge.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.vanilla.cjs","sources":["../../../components/Badge/Badge.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { badgeRecipe, interactiveBadgeRecipe } from './Badge.vanilla.css';\n\nexport const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;\n\ntype BadgeRecipeVariants = RecipeVariants<typeof badgeRecipe>;\n\ninterface BadgeOwnProps extends Omit<BadgeRecipeVariants, 'color'>, CSSProps {\n  interactive?: boolean;\n}\n\nexport type BadgeVanillaProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  BadgeOwnProps\n>;\n\ntype BadgeVanillaComponent = PolymorphicComponent<'span', BadgeVanillaProps<ElementType>>;\n\nconst BadgeVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'span'>(\n    {\n      as,\n      interactive,\n      className,\n      css,\n      style,\n      size,\n      variant,\n      alphaBg,\n      borderless,\n      ...props\n    }: BadgeVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || (interactive ? 'button' : 'span');\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipe = interactive ? interactiveBadgeRecipe : badgeRecipe;\n    const recipeClass = recipe({ size, variant, alphaBg, borderless });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBadgeVanillaComponentImpl.displayName = 'BadgeVanilla';\n\nexport const BadgeVanilla = BadgeVanillaComponentImpl as BadgeVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","interactiveBadgeRecipe","badgeRecipe","jsx"],"mappings":";;;;;;;;AAaO,MAAM,SAAS,CAAC,QAAQ,OAAO,QAAQ,SAAS,QAAQ,UAAU,QAAQ;AAejF,MAAM,4BAA4BA,MAAAA;AAAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,OAAO,cAAc,WAAW;AAElD,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,SAAS,cAAcC,kBAAAA,yBAAyBC,kBAAAA;AACtD,UAAM,cAAc,OAAO,EAAE,MAAM,SAAS,SAAS,YAAY;AAEjE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,0BAA0B,cAAc;AAEjC,MAAM,eAAe;;;"}

package/dist/components/Badge/Badge.vanilla.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                   */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var badgeRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_16nnnz62 _16nnnz60", variantClassNames: { size: { small: "_16nnnz63", large: "_16nnnz64" }, variant: { gray: "_16nnnz65", red: "_16nnnz66", blue: "_16nnnz67", green: "_16nnnz68", neon: "_16nnnz69", orange: "_16nnnz6a", purple: "_16nnnz6b" }, alphaBg: { true: "_16nnnz6c" }, borderless: { true: "_16nnnz6d" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6e"], [{ alphaBg: true, variant: "red" }, "_16nnnz6f"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6g"], [{ alphaBg: true, variant: "green" }, "_16nnnz6h"], [{ alphaBg: true, variant: "neon" }, "_16nnnz6i"], [{ alphaBg: true, variant: "orange" }, "_16nnnz6j"], [{ alphaBg: true, variant: "purple" }, "_16nnnz6k"]] });
+var interactiveBadgeRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_16nnnz6l _16nnnz61 _16nnnz60", variantClassNames: { size: { small: "_16nnnz6m", large: "_16nnnz6n" }, variant: { gray: "_16nnnz6o", red: "_16nnnz6p", blue: "_16nnnz6q", green: "_16nnnz6r", neon: "_16nnnz6s", orange: "_16nnnz6t", purple: "_16nnnz6u" }, alphaBg: { true: "_16nnnz6v" }, borderless: { true: "_16nnnz6w" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6x"], [{ alphaBg: true, variant: "red" }, "_16nnnz6y"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6z"], [{ alphaBg: true, variant: "green" }, "_16nnnz610"], [{ alphaBg: true, variant: "neon" }, "_16nnnz611"], [{ alphaBg: true, variant: "orange" }, "_16nnnz612"], [{ alphaBg: true, variant: "purple" }, "_16nnnz613"]] });
+exports.badgeRecipe = badgeRecipe;
+exports.interactiveBadgeRecipe = interactiveBadgeRecipe;
+//# sourceMappingURL=Badge.vanilla.css.cjs.map

package/dist/components/Badge/Badge.vanilla.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Badge/Badge.vanilla.css.js

@@ -0,0 +1,9 @@
+/* empty css                                 */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var badgeRecipe = createRuntimeFn({ defaultClassName: "_16nnnz62 _16nnnz60", variantClassNames: { size: { small: "_16nnnz63", large: "_16nnnz64" }, variant: { gray: "_16nnnz65", red: "_16nnnz66", blue: "_16nnnz67", green: "_16nnnz68", neon: "_16nnnz69", orange: "_16nnnz6a", purple: "_16nnnz6b" }, alphaBg: { true: "_16nnnz6c" }, borderless: { true: "_16nnnz6d" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6e"], [{ alphaBg: true, variant: "red" }, "_16nnnz6f"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6g"], [{ alphaBg: true, variant: "green" }, "_16nnnz6h"], [{ alphaBg: true, variant: "neon" }, "_16nnnz6i"], [{ alphaBg: true, variant: "orange" }, "_16nnnz6j"], [{ alphaBg: true, variant: "purple" }, "_16nnnz6k"]] });
+var interactiveBadgeRecipe = createRuntimeFn({ defaultClassName: "_16nnnz6l _16nnnz61 _16nnnz60", variantClassNames: { size: { small: "_16nnnz6m", large: "_16nnnz6n" }, variant: { gray: "_16nnnz6o", red: "_16nnnz6p", blue: "_16nnnz6q", green: "_16nnnz6r", neon: "_16nnnz6s", orange: "_16nnnz6t", purple: "_16nnnz6u" }, alphaBg: { true: "_16nnnz6v" }, borderless: { true: "_16nnnz6w" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6x"], [{ alphaBg: true, variant: "red" }, "_16nnnz6y"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6z"], [{ alphaBg: true, variant: "green" }, "_16nnnz610"], [{ alphaBg: true, variant: "neon" }, "_16nnnz611"], [{ alphaBg: true, variant: "orange" }, "_16nnnz612"], [{ alphaBg: true, variant: "purple" }, "_16nnnz613"]] });
+export {
+  badgeRecipe,
+  interactiveBadgeRecipe
+};
+//# sourceMappingURL=Badge.vanilla.css.js.map

package/dist/components/Badge/Badge.vanilla.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}