@spark-ui/components 10.0.0

package/dist/tag/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ButtonHTMLAttributes, Ref } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const tagStyles: (props?: ({
+    design?: "filled" | "outlined" | "tinted" | null | undefined;
+    intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "danger" | "info" | "neutral" | "surface" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TagStylesProps = VariantProps<typeof tagStyles>;
+
+interface BaseTagProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>, TagStylesProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+}
+interface FilteredDesignIntent<Design extends TagProps['design'], K extends TagStylesProps['intent'] | never = never> {
+    design?: Design;
+    intent?: Exclude<TagStylesProps['intent'], K>;
+    ref?: Ref<HTMLButtonElement>;
+}
+type ValidTagDesignIntent = FilteredDesignIntent<'tinted', 'surface'> | FilteredDesignIntent<'outlined', 'surface'> | FilteredDesignIntent<'filled'>;
+type TagProps = BaseTagProps & ValidTagDesignIntent;
+declare const Tag: ({ design, intent, asChild, className, ref, ...others }: TagProps) => react_jsx_runtime.JSX.Element;
+
+export { Tag, type TagProps, type ValidTagDesignIntent };

package/dist/tag/index.js

@@ -0,0 +1,269 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tag/index.ts
+var tag_exports = {};
+__export(tag_exports, {
+  Tag: () => Tag
+});
+module.exports = __toCommonJS(tag_exports);
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/tag/Tag.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/tag/variants/default.ts
+var tw = (a) => a;
+
+// src/tag/variants/filled.ts
+var filledVariants = [
+  {
+    intent: "main",
+    design: "filled",
+    class: tw(["bg-main", "text-on-main"])
+  },
+  {
+    intent: "support",
+    design: "filled",
+    class: tw(["bg-support", "text-on-support"])
+  },
+  {
+    intent: "accent",
+    design: "filled",
+    class: tw(["bg-accent", "text-on-accent"])
+  },
+  {
+    intent: "basic",
+    design: "filled",
+    class: tw(["bg-basic", "text-on-basic"])
+  },
+  {
+    intent: "success",
+    design: "filled",
+    class: tw(["bg-success", "text-on-success"])
+  },
+  {
+    intent: "alert",
+    design: "filled",
+    class: tw(["bg-alert", "text-on-alert"])
+  },
+  {
+    intent: "danger",
+    design: "filled",
+    class: tw(["bg-error", "text-on-error"])
+  },
+  {
+    intent: "info",
+    design: "filled",
+    class: tw(["bg-info", "text-on-info"])
+  },
+  {
+    intent: "neutral",
+    design: "filled",
+    class: tw(["bg-neutral", "text-on-neutral"])
+  },
+  {
+    intent: "surface",
+    design: "filled",
+    class: tw(["bg-surface", "text-on-surface"])
+  }
+];
+
+// src/tag/variants/outlined.ts
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: tw(["text-main"])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: tw(["text-support"])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: tw(["text-accent"])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: tw(["text-basic"])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: tw(["text-success"])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: tw(["text-alert"])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: tw(["text-error"])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: tw(["text-info"])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: tw(["text-neutral"])
+  }
+];
+
+// src/tag/variants/tinted.ts
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: tw(["bg-main-container", "text-on-main-container"])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: tw(["bg-support-container", "text-on-support-container"])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: tw(["bg-accent-container", "text-on-accent-container"])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: tw(["bg-basic-container", "text-on-basic-container"])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: tw(["bg-success-container", "text-on-success-container"])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: tw(["bg-alert-container", "text-on-alert-container"])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: tw(["bg-error-container", "text-on-error-container"])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: tw(["bg-info-container", "text-on-info-container"])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: tw(["bg-neutral-container", "text-on-neutral-container"])
+  }
+];
+
+// src/tag/Tag.styles.tsx
+var tagStyles = (0, import_class_variance_authority.cva)(
+  [
+    "box-border inline-flex items-center justify-center gap-sm whitespace-nowrap",
+    "text-caption font-bold",
+    "h-sz-20 px-md",
+    "rounded-full"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the tag.
+       * - `filled`: Tag will be plain.
+       * - `outlined`: Tag will have a surface background with an colored outline/text.
+       * - `tinted`: Tag will be filled but using a lighter color scheme.
+       */
+      design: (0, import_internal_utils.makeVariants)({
+        filled: [],
+        outlined: ["border-sm", "border-current"],
+        tinted: []
+      }),
+      /**
+       * Color scheme of the tag.
+       */
+      intent: (0, import_internal_utils.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: []
+      })
+    },
+    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
+    defaultVariants: {
+      design: "filled",
+      intent: "basic"
+    }
+  }
+);
+
+// src/tag/Tag.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Tag = ({
+  design = "filled",
+  intent = "basic",
+  asChild,
+  className,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      "data-spark-component": "tag",
+      ref,
+      className: tagStyles({
+        className,
+        design,
+        intent
+      }),
+      ...others
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tag
+});
+//# sourceMappingURL=index.js.map

package/dist/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tag/index.ts","../../src/slot/Slot.tsx","../../src/tag/Tag.styles.tsx","../../src/tag/variants/default.ts","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["export * from './Tag'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'h-sz-20 px-md',\n    'rounded-full',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","export const tw = <T>(a: T): T => a\n","import { tw } from './default'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":["RadixSlot","import_jsx_runtime"]}

package/dist/tag/index.mjs

@@ -0,0 +1,237 @@
+import {
+  Slot
+} from "../chunk-4F5DOL57.mjs";
+
+// src/tag/Tag.styles.tsx
+import { makeVariants } from "@spark-ui/internal-utils";
+import { cva } from "class-variance-authority";
+
+// src/tag/variants/default.ts
+var tw = (a) => a;
+
+// src/tag/variants/filled.ts
+var filledVariants = [
+  {
+    intent: "main",
+    design: "filled",
+    class: tw(["bg-main", "text-on-main"])
+  },
+  {
+    intent: "support",
+    design: "filled",
+    class: tw(["bg-support", "text-on-support"])
+  },
+  {
+    intent: "accent",
+    design: "filled",
+    class: tw(["bg-accent", "text-on-accent"])
+  },
+  {
+    intent: "basic",
+    design: "filled",
+    class: tw(["bg-basic", "text-on-basic"])
+  },
+  {
+    intent: "success",
+    design: "filled",
+    class: tw(["bg-success", "text-on-success"])
+  },
+  {
+    intent: "alert",
+    design: "filled",
+    class: tw(["bg-alert", "text-on-alert"])
+  },
+  {
+    intent: "danger",
+    design: "filled",
+    class: tw(["bg-error", "text-on-error"])
+  },
+  {
+    intent: "info",
+    design: "filled",
+    class: tw(["bg-info", "text-on-info"])
+  },
+  {
+    intent: "neutral",
+    design: "filled",
+    class: tw(["bg-neutral", "text-on-neutral"])
+  },
+  {
+    intent: "surface",
+    design: "filled",
+    class: tw(["bg-surface", "text-on-surface"])
+  }
+];
+
+// src/tag/variants/outlined.ts
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: tw(["text-main"])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: tw(["text-support"])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: tw(["text-accent"])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: tw(["text-basic"])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: tw(["text-success"])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: tw(["text-alert"])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: tw(["text-error"])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: tw(["text-info"])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: tw(["text-neutral"])
+  }
+];
+
+// src/tag/variants/tinted.ts
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: tw(["bg-main-container", "text-on-main-container"])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: tw(["bg-support-container", "text-on-support-container"])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: tw(["bg-accent-container", "text-on-accent-container"])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: tw(["bg-basic-container", "text-on-basic-container"])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: tw(["bg-success-container", "text-on-success-container"])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: tw(["bg-alert-container", "text-on-alert-container"])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: tw(["bg-error-container", "text-on-error-container"])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: tw(["bg-info-container", "text-on-info-container"])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: tw(["bg-neutral-container", "text-on-neutral-container"])
+  }
+];
+
+// src/tag/Tag.styles.tsx
+var tagStyles = cva(
+  [
+    "box-border inline-flex items-center justify-center gap-sm whitespace-nowrap",
+    "text-caption font-bold",
+    "h-sz-20 px-md",
+    "rounded-full"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the tag.
+       * - `filled`: Tag will be plain.
+       * - `outlined`: Tag will have a surface background with an colored outline/text.
+       * - `tinted`: Tag will be filled but using a lighter color scheme.
+       */
+      design: makeVariants({
+        filled: [],
+        outlined: ["border-sm", "border-current"],
+        tinted: []
+      }),
+      /**
+       * Color scheme of the tag.
+       */
+      intent: makeVariants({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: []
+      })
+    },
+    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
+    defaultVariants: {
+      design: "filled",
+      intent: "basic"
+    }
+  }
+);
+
+// src/tag/Tag.tsx
+import { jsx } from "react/jsx-runtime";
+var Tag = ({
+  design = "filled",
+  intent = "basic",
+  asChild,
+  className,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      "data-spark-component": "tag",
+      ref,
+      className: tagStyles({
+        className,
+        design,
+        intent
+      }),
+      ...others
+    }
+  );
+};
+export {
+  Tag
+};
+//# sourceMappingURL=index.mjs.map

package/dist/tag/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tag/Tag.styles.tsx","../../src/tag/variants/default.ts","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'h-sz-20 px-md',\n    'rounded-full',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","export const tw = <T>(a: T): T => a\n","import { tw } from './default'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/text-link/index.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef } from 'react';
+
+declare const textLinkStyles: (props?: ({
+    intent?: "main" | "current" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | null | undefined;
+    bold?: boolean | null | undefined;
+    underline?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StylesProps = VariantProps<typeof textLinkStyles>;
+type TextLinkProps = ComponentPropsWithRef<'a'> & StylesProps & {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+};
+declare const TextLink: ({ asChild, bold, children, className, intent, underline, ref, ...props }: TextLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { type StylesProps, TextLink, type TextLinkProps };

package/dist/text-link/index.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef } from 'react';
+
+declare const textLinkStyles: (props?: ({
+    intent?: "main" | "current" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | null | undefined;
+    bold?: boolean | null | undefined;
+    underline?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StylesProps = VariantProps<typeof textLinkStyles>;
+type TextLinkProps = ComponentPropsWithRef<'a'> & StylesProps & {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+};
+declare const TextLink: ({ asChild, bold, children, className, intent, underline, ref, ...props }: TextLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { type StylesProps, TextLink, type TextLinkProps };