@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/checkbox-D1vhO7CT.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const checkbox = require('@base-ui/react/checkbox');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils_cn = require('./cn-vA5sWo9W.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 React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Checkbox = React__namespace.forwardRef(
+  ({ className, checked, indeterminate, ...props }, ref) => {
+    const isCheckedIndeterminate = checked === "indeterminate";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox.Root,
+      {
+        ref,
+        checked: isCheckedIndeterminate ? false : checked,
+        indeterminate: indeterminate ?? isCheckedIndeterminate,
+        "data-slot": "checkbox",
+        className: utils_cn.cn(
+          "peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[0.3125rem]",
+          "border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden",
+          transitions.transitions.all,
+          "hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]",
+          "active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]",
+          "focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1",
+          "data-[indeterminate]:border-neutral6 data-[indeterminate]:bg-neutral6 data-[indeterminate]:text-surface1",
+          "data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5",
+          "data-[indeterminate]:hover:border-neutral5 data-[indeterminate]:hover:bg-neutral5",
+          "data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4",
+          "data-[indeterminate]:active:border-neutral4 data-[indeterminate]:active:bg-neutral4",
+          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.
+          "data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100",
+          "data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6",
+          "data-[disabled]:data-[indeterminate]:border-neutral6/[0.38] data-[disabled]:data-[indeterminate]:bg-neutral6/[0.38] data-[disabled]:data-[indeterminate]:text-neutral6",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          checkbox.Checkbox.Indicator,
+          {
+            keepMounted: true,
+            className: utils_cn.cn(
+              "group/checkbox-indicator flex items-center justify-center text-current",
+              "opacity-0 scale-75 transition-[opacity,transform] duration-200 ease-out-custom",
+              "data-[checked]:opacity-100 data-[checked]:scale-100",
+              "data-[indeterminate]:opacity-100 data-[indeterminate]:scale-100",
+              "data-[starting-style]:opacity-0 data-[starting-style]:scale-75",
+              "data-[ending-style]:opacity-0 data-[ending-style]:scale-75"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorIcon, {})
+          }
+        )
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxIndicatorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Check,
+      {
+        className: utils_cn.cn(
+          "size-3 scale-95 stroke-[3.25] transition-[stroke-dashoffset,transform] duration-200 ease-out-custom",
+          // Lucide's check path is ~22.6 units long. Use a longer dash so the
+          // final checked mark is never clipped.
+          "[stroke-dasharray:28] [stroke-dashoffset:28]",
+          "group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]",
+          "group-data-[checked]/checkbox-indicator:scale-100",
+          "group-data-[indeterminate]/checkbox-indicator:hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Minus,
+      {
+        className: utils_cn.cn(
+          "hidden size-3 scale-95 stroke-[3.25] transition-transform duration-200 ease-out-custom",
+          "group-data-[indeterminate]/checkbox-indicator:block",
+          "group-data-[indeterminate]/checkbox-indicator:scale-100"
+        )
+      }
+    )
+  ] });
+}
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=checkbox-D1vhO7CT.cjs.map

package/dist/checkbox-D1vhO7CT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-D1vhO7CT.cjs","sources":["../src/ds/components/Checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * Radix-style tri-state value for the controlled `checked` prop. Base UI splits\n * this into a strict `checked` boolean plus a separate `indeterminate` boolean —\n * we keep the Radix union here so existing consumers (which pass\n * `checked=\"indeterminate\"`) keep working without changes.\n *\n * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox\n * cannot start \"indeterminate\" and then be toggled out of it (the indeterminate\n * state is inherently controlled), so `'indeterminate'` is not allowed there.\n */\nexport type CheckedState = boolean | 'indeterminate';\n\ntype CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {\n  className?: string;\n  checked?: CheckedState;\n};\n\nconst Checkbox = React.forwardRef<HTMLSpanElement, CheckboxProps>(\n  ({ className, checked, indeterminate, ...props }, ref) => {\n    // Translate the Radix `'indeterminate'` sentinel into Base UI's dedicated\n    // `indeterminate` prop while leaving `checked` as a boolean.\n    const isCheckedIndeterminate = checked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        checked={isCheckedIndeterminate ? false : checked}\n        indeterminate={indeterminate ?? isCheckedIndeterminate}\n        data-slot=\"checkbox\"\n        className={cn(\n          'peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[0.3125rem]',\n          'border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden',\n          transitions.all,\n          'hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]',\n          'active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]',\n          'focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n          'data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1',\n          'data-[indeterminate]:border-neutral6 data-[indeterminate]:bg-neutral6 data-[indeterminate]:text-surface1',\n          'data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5',\n          'data-[indeterminate]:hover:border-neutral5 data-[indeterminate]:hover:bg-neutral5',\n          'data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4',\n          'data-[indeterminate]:active:border-neutral4 data-[indeterminate]:active:bg-neutral4',\n          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.\n          'data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100',\n          'data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6',\n          'data-[disabled]:data-[indeterminate]:border-neutral6/[0.38] data-[disabled]:data-[indeterminate]:bg-neutral6/[0.38] data-[disabled]:data-[indeterminate]:text-neutral6',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          className={cn(\n            'group/checkbox-indicator flex items-center justify-center text-current',\n            'opacity-0 scale-75 transition-[opacity,transform] duration-200 ease-out-custom',\n            'data-[checked]:opacity-100 data-[checked]:scale-100',\n            'data-[indeterminate]:opacity-100 data-[indeterminate]:scale-100',\n            'data-[starting-style]:opacity-0 data-[starting-style]:scale-75',\n            'data-[ending-style]:opacity-0 data-[ending-style]:scale-75',\n          )}\n        >\n          <CheckboxIndicatorIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\n/**\n * Picks the checkmark vs. the dash based on the Indicator's data attributes.\n * The Indicator stays mounted so unchecked transitions can animate out cleanly.\n */\nfunction CheckboxIndicatorIcon() {\n  return (\n    <>\n      <Check\n        className={cn(\n          'size-3 scale-95 stroke-[3.25] transition-[stroke-dashoffset,transform] duration-200 ease-out-custom',\n          // Lucide's check path is ~22.6 units long. Use a longer dash so the\n          // final checked mark is never clipped.\n          '[stroke-dasharray:28] [stroke-dashoffset:28]',\n          'group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]',\n          'group-data-[checked]/checkbox-indicator:scale-100',\n          'group-data-[indeterminate]/checkbox-indicator:hidden',\n        )}\n      />\n      <Minus\n        className={cn(\n          'hidden size-3 scale-95 stroke-[3.25] transition-transform duration-200 ease-out-custom',\n          'group-data-[indeterminate]/checkbox-indicator:block',\n          'group-data-[indeterminate]/checkbox-indicator:scale-100',\n        )}\n      />\n    </>\n  );\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],"names":["React","jsx","CheckboxPrimitive","cn","transitions","jsxs","Fragment","Check","Minus"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,WAAWA,gBAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAe,GAAG,KAAA,IAAS,GAAA,KAAQ;AAGxD,IAAA,MAAM,yBAAyB,OAAA,KAAY,eAAA;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAACC,iBAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAS,yBAAyB,KAAA,GAAQ,OAAA;AAAA,QAC1C,eAAe,aAAA,IAAiB,sBAAA;AAAA,QAChC,WAAA,EAAU,UAAA;AAAA,QACV,SAAA,EAAWC,WAAA;AAAA,UACT,2FAAA;AAAA,UACA,+EAAA;AAAA,UACAC,uBAAA,CAAY,GAAA;AAAA,UACZ,uDAAA;AAAA,UACA,yEAAA;AAAA,UACA,iJAAA;AAAA,UACA,wFAAA;AAAA,UACA,0GAAA;AAAA,UACA,uEAAA;AAAA,UACA,mFAAA;AAAA,UACA,yEAAA;AAAA,UACA,qFAAA;AAAA;AAAA,UAEA,qOAAA;AAAA,UACA,sJAAA;AAAA,UACA,wKAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAH,cAAA;AAAA,UAACC,iBAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAWC,WAAA;AAAA,cACT,wEAAA;AAAA,cACA,gFAAA;AAAA,cACA,qDAAA;AAAA,cACA,iEAAA;AAAA,cACA,gEAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,yCAAC,qBAAA,EAAA,EAAsB;AAAA;AAAA;AACzB;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,SAAS,qBAAA,GAAwB;AAC/B,EAAA,uBACEE,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAL,cAAA;AAAA,MAACM,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWJ,WAAA;AAAA,UACT,qGAAA;AAAA;AAAA;AAAA,UAGA,8CAAA;AAAA,UACA,+DAAA;AAAA,UACA,mDAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,oBACAF,cAAA;AAAA,MAACO,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWL,WAAA;AAAA,UACT,wFAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/chip-C-TQBr40.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const sizeClasses = {
+  small: "text-[10.5px]   pt-[5px] pb-[4px]",
+  default: "text-[11.5px] pt-[5px] pb-[4px] ",
+  large: "text-[12.5px]   pt-[5px] pb-[4px] "
+};
+const bgColorClasses = {
+  gray: {
+    bright: "bg-neutral-500/30",
+    muted: "bg-neutral-500/10"
+  },
+  red: { bright: "bg-red-500/30", muted: "bg-red-500/10" },
+  orange: {
+    bright: "bg-orange-500/30",
+    muted: "bg-orange-500/10"
+  },
+  blue: { bright: "bg-blue-500/30", muted: "bg-blue-500/10" },
+  green: { bright: "bg-green-500/30", muted: "bg-green-500/10" },
+  purple: {
+    bright: "bg-purple-500/30",
+    muted: "bg-purple-500/10"
+  },
+  yellow: {
+    bright: "bg-yellow-500/30",
+    muted: "bg-yellow-500/10"
+  },
+  cyan: { bright: "bg-cyan-500/30", muted: "bg-cyan-500/10" },
+  pink: { bright: "bg-pink-500/30", muted: "bg-pink-500/10" }
+};
+const txtIntensityClasses = {
+  bright: "text-neutral4/90",
+  muted: "text-neutral3/90"
+};
+const Chip = ({
+  color = "gray",
+  size = "default",
+  intensity = "bright",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal",
+        // general styles for svg icons within the chip
+        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
+        // if the chip has only one child and it's an svg, make it fully opaque
+        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
+        sizeClasses[size],
+        bgColorClasses[color][intensity],
+        txtIntensityClasses[intensity],
+        className
+      ),
+      style: { lineHeight: 1 },
+      ...props,
+      children
+    }
+  );
+};
+
+export { Chip as C };
+//# sourceMappingURL=chip-C-TQBr40.js.map

package/dist/chip-C-TQBr40.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-C-TQBr40.js","sources":["../src/ds/components/Chip/chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst sizeClasses = {\n  small: 'text-[10.5px]   pt-[5px] pb-[4px]',\n  default: 'text-[11.5px] pt-[5px] pb-[4px] ',\n  large: 'text-[12.5px]   pt-[5px] pb-[4px] ',\n};\n\nconst bgColorClasses = {\n  gray: {\n    bright: 'bg-neutral-500/30',\n    muted: 'bg-neutral-500/10',\n  },\n  red: { bright: 'bg-red-500/30', muted: 'bg-red-500/10' },\n  orange: {\n    bright: 'bg-orange-500/30',\n    muted: 'bg-orange-500/10',\n  },\n  blue: { bright: 'bg-blue-500/30', muted: 'bg-blue-500/10' },\n  green: { bright: 'bg-green-500/30', muted: 'bg-green-500/10' },\n  purple: {\n    bright: 'bg-purple-500/30',\n    muted: 'bg-purple-500/10',\n  },\n  yellow: {\n    bright: 'bg-yellow-500/30',\n    muted: 'bg-yellow-500/10',\n  },\n  cyan: { bright: 'bg-cyan-500/30', muted: 'bg-cyan-500/10' },\n  pink: { bright: 'bg-pink-500/30', muted: 'bg-pink-500/10' },\n};\n\nconst txtIntensityClasses = {\n  bright: 'text-neutral4/90',\n  muted: 'text-neutral3/90',\n};\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: 'gray' | 'red' | 'orange' | 'blue' | 'green' | 'purple' | 'yellow' | 'cyan' | 'pink';\n  size?: 'small' | 'default' | 'large';\n  intensity?: 'bright' | 'muted';\n  children: React.ReactNode;\n}\n\nexport const Chip = ({\n  color = 'gray',\n  size = 'default',\n  intensity = 'bright',\n  className,\n  children,\n  ...props\n}: ChipProps) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal',\n        // general styles for svg icons within the chip\n        '[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]',\n        // if the chip has only one child and it's an svg, make it fully opaque\n        '[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100',\n        sizeClasses[size],\n        bgColorClasses[color][intensity],\n        txtIntensityClasses[intensity],\n        className,\n      )}\n      style={{ lineHeight: 1 }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,WAAA,GAAc;AAAA,EAClB,KAAA,EAAO,mCAAA;AAAA,EACP,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,mBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,GAAA,EAAK,EAAE,MAAA,EAAQ,eAAA,EAAiB,OAAO,eAAA,EAAgB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,KAAA,EAAO,EAAE,MAAA,EAAQ,iBAAA,EAAmB,OAAO,iBAAA,EAAkB;AAAA,EAC7D,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA;AAC3C,CAAA;AAEA,MAAM,mBAAA,GAAsB;AAAA,EAC1B,MAAA,EAAQ,kBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AASO,MAAM,OAAO,CAAC;AAAA,EACnB,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4FAAA;AAAA;AAAA,QAEA,mFAAA;AAAA;AAAA,QAEA,+DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,cAAA,CAAe,KAAK,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,oBAAoB,SAAS,CAAA;AAAA,QAC7B;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE;AAAA,MACtB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/chip-DYly-1k3.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const sizeClasses = {
+  small: "text-[10.5px]   pt-[5px] pb-[4px]",
+  default: "text-[11.5px] pt-[5px] pb-[4px] ",
+  large: "text-[12.5px]   pt-[5px] pb-[4px] "
+};
+const bgColorClasses = {
+  gray: {
+    bright: "bg-neutral-500/30",
+    muted: "bg-neutral-500/10"
+  },
+  red: { bright: "bg-red-500/30", muted: "bg-red-500/10" },
+  orange: {
+    bright: "bg-orange-500/30",
+    muted: "bg-orange-500/10"
+  },
+  blue: { bright: "bg-blue-500/30", muted: "bg-blue-500/10" },
+  green: { bright: "bg-green-500/30", muted: "bg-green-500/10" },
+  purple: {
+    bright: "bg-purple-500/30",
+    muted: "bg-purple-500/10"
+  },
+  yellow: {
+    bright: "bg-yellow-500/30",
+    muted: "bg-yellow-500/10"
+  },
+  cyan: { bright: "bg-cyan-500/30", muted: "bg-cyan-500/10" },
+  pink: { bright: "bg-pink-500/30", muted: "bg-pink-500/10" }
+};
+const txtIntensityClasses = {
+  bright: "text-neutral4/90",
+  muted: "text-neutral3/90"
+};
+const Chip = ({
+  color = "gray",
+  size = "default",
+  intensity = "bright",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        "inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal",
+        // general styles for svg icons within the chip
+        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
+        // if the chip has only one child and it's an svg, make it fully opaque
+        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
+        sizeClasses[size],
+        bgColorClasses[color][intensity],
+        txtIntensityClasses[intensity],
+        className
+      ),
+      style: { lineHeight: 1 },
+      ...props,
+      children
+    }
+  );
+};
+
+exports.Chip = Chip;
+//# sourceMappingURL=chip-DYly-1k3.cjs.map

package/dist/chip-DYly-1k3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-DYly-1k3.cjs","sources":["../src/ds/components/Chip/chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst sizeClasses = {\n  small: 'text-[10.5px]   pt-[5px] pb-[4px]',\n  default: 'text-[11.5px] pt-[5px] pb-[4px] ',\n  large: 'text-[12.5px]   pt-[5px] pb-[4px] ',\n};\n\nconst bgColorClasses = {\n  gray: {\n    bright: 'bg-neutral-500/30',\n    muted: 'bg-neutral-500/10',\n  },\n  red: { bright: 'bg-red-500/30', muted: 'bg-red-500/10' },\n  orange: {\n    bright: 'bg-orange-500/30',\n    muted: 'bg-orange-500/10',\n  },\n  blue: { bright: 'bg-blue-500/30', muted: 'bg-blue-500/10' },\n  green: { bright: 'bg-green-500/30', muted: 'bg-green-500/10' },\n  purple: {\n    bright: 'bg-purple-500/30',\n    muted: 'bg-purple-500/10',\n  },\n  yellow: {\n    bright: 'bg-yellow-500/30',\n    muted: 'bg-yellow-500/10',\n  },\n  cyan: { bright: 'bg-cyan-500/30', muted: 'bg-cyan-500/10' },\n  pink: { bright: 'bg-pink-500/30', muted: 'bg-pink-500/10' },\n};\n\nconst txtIntensityClasses = {\n  bright: 'text-neutral4/90',\n  muted: 'text-neutral3/90',\n};\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: 'gray' | 'red' | 'orange' | 'blue' | 'green' | 'purple' | 'yellow' | 'cyan' | 'pink';\n  size?: 'small' | 'default' | 'large';\n  intensity?: 'bright' | 'muted';\n  children: React.ReactNode;\n}\n\nexport const Chip = ({\n  color = 'gray',\n  size = 'default',\n  intensity = 'bright',\n  className,\n  children,\n  ...props\n}: ChipProps) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal',\n        // general styles for svg icons within the chip\n        '[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]',\n        // if the chip has only one child and it's an svg, make it fully opaque\n        '[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100',\n        sizeClasses[size],\n        bgColorClasses[color][intensity],\n        txtIntensityClasses[intensity],\n        className,\n      )}\n      style={{ lineHeight: 1 }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["jsx","cn"],"mappings":";;;;;AAIA,MAAM,WAAA,GAAc;AAAA,EAClB,KAAA,EAAO,mCAAA;AAAA,EACP,OAAA,EAAS,kCAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ,mBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,GAAA,EAAK,EAAE,MAAA,EAAQ,eAAA,EAAiB,OAAO,eAAA,EAAgB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,KAAA,EAAO,EAAE,MAAA,EAAQ,iBAAA,EAAmB,OAAO,iBAAA,EAAkB;AAAA,EAC7D,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,kBAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,MAAA,EAAQ,gBAAA,EAAkB,OAAO,gBAAA;AAC3C,CAAA;AAEA,MAAM,mBAAA,GAAsB;AAAA,EAC1B,MAAA,EAAQ,kBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AASO,MAAM,OAAO,CAAC;AAAA,EACnB,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAiB;AACf,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4FAAA;AAAA;AAAA,QAEA,mFAAA;AAAA;AAAA,QAEA,+DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,cAAA,CAAe,KAAK,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,oBAAoB,SAAS,CAAA;AAAA,QAC7B;AAAA,OACF;AAAA,MACA,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE;AAAA,MACtB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/chips-group-BYi8MN_c.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const ChipsGroup = forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+export { ChipsGroup as C };
+//# sourceMappingURL=chips-group-BYi8MN_c.js.map

package/dist/chips-group-BYi8MN_c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-group-BYi8MN_c.js","sources":["../src/ds/components/Chip/chips-group.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ChipsGroupProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ChipsGroup = forwardRef<HTMLDivElement, ChipsGroupProps>(function ChipsGroup(\n  { children, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["ChipsGroup"],"mappings":";;;;AAKO,MAAM,UAAA,GAAa,UAAA,CAA4C,SAASA,WAAAA,CAC7E,EAAE,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAChC,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist/chips-group-yhKjmkd9.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+const ChipsGroup = React.forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils_cn.cn(
+        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+exports.ChipsGroup = ChipsGroup;
+//# sourceMappingURL=chips-group-yhKjmkd9.cjs.map

package/dist/chips-group-yhKjmkd9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-group-yhKjmkd9.cjs","sources":["../src/ds/components/Chip/chips-group.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type ChipsGroupProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ChipsGroup = forwardRef<HTMLDivElement, ChipsGroupProps>(function ChipsGroup(\n  { children, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","ChipsGroup","jsx","cn"],"mappings":";;;;;;AAKO,MAAM,UAAA,GAAaA,gBAAA,CAA4C,SAASC,WAAAA,CAC7E,EAAE,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAChC,GAAA,EACA;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,WAAA;AAAA,QACT,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}