feat: ink kit pill component

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  // Enables tailwind autocompletion in cva function
+  // https://cva.style/docs/getting-started/installation#tailwind-css
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

package.json

@@ -49,8 +49,8 @@
     "@tailwindcss/postcss": "4.0.0-beta.3",
     "@tailwindcss/vite": "4.0.0-beta.3",
     "@tanstack/react-query": "^5.60.5",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
@@ -60,8 +60,8 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "react": "19.0.0-rc-7ac8e612-20241113",
-    "react-dom": "19.0.0-rc-7ac8e612-20241113",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rollup-plugin-preserve-use-client": "^3.0.1",
     "storybook": "8.2.9",
     "tailwindcss": "4.0.0-beta.3",
@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.5.4"
   },

src/components/Slot/Slot.tsx

@@ -105,7 +105,7 @@ SlotClone.displayName = "SlotClone";
 
 type SlottableProps = {
   child: React.ReactNode;
-  children: (child: React.ReactNode) => JSX.Element;
+  children: (child: React.ReactNode) => React.JSX.Element;
 };
 
 const Slottable = ({ child, children }: SlottableProps) => {

src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag, type TagProps } from "./Tag";
+import { useState } from "react";
+import { InkIcon } from "../..";
+
+const meta: Meta<TagProps> = {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  args: {
+    children: "Tag Content",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Fill: Story = {
+  args: {
+    variant: "fill",
+    children: "Fill Tag",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Tag",
+  },
+};
+
+export const Filter: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return (
+      <Tag
+        variant="filter"
+        selected={selected}
+        onClick={() => setSelected((prev) => !prev)}
+      >
+        Tag
+      </Tag>
+    );
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return (
+      <div className="ink:flex ink:flex-col ink:gap-4">
+        <div className="ink:flex ink:items-center ink:gap-4">
+          <Tag variant="fill" icon={<InkIcon.InkLogo />}>
+            Tag
+          </Tag>
+          <Tag variant="outline" icon={<InkIcon.Settings />}>
+            Tag
+          </Tag>
+        </div>
+        <div className="ink:flex ink:items-center ink:gap-4">
+          <Tag variant="fill">Fill</Tag>
+          <Tag variant="outline">Outline</Tag>
+          <Tag
+            variant="filter"
+            selected={selected}
+            onClick={() => setSelected((prev) => !prev)}
+          >
+            Selectable Tag
+          </Tag>
+        </div>
+      </div>
+    );
+  },
+};

src/components/Tag/Tag.tsx

@@ -0,0 +1,62 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { classNames } from "../../util/classes";
+
+const tagVariants = cva(
+  "ink:inline-flex ink:font-default ink:items-center ink:gap-1 ink:flex-shrink-0 ink:rounded-full ink:text-body-3-bold ink:font-bold ink:leading-[18px] ink:px-1.5",
+  {
+    variants: {
+      variant: {
+        fill: "ink:bg-background-container ink:text-text-muted",
+        outline:
+          "ink:text-text-muted ink:border-background-container ink:border-[1.5px]",
+        filter:
+          "ink:text-text-muted ink:hover:text-text-default ink:duration-200 ink:cursor-pointer",
+      },
+      selected: {
+        true: "",
+        false: "",
+      },
+      hasIcon: {
+        true: "ink:py-1",
+        false: "ink:py-1.5",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "filter",
+        selected: true,
+        class: "ink:bg-background-container ink:text-text-default",
+      },
+    ],
+    defaultVariants: {
+      variant: "fill",
+      hasIcon: false,
+    },
+  }
+);
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof tagVariants>, "hasIcon"> {
+  icon?: React.ReactNode;
+}
+
+export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
+  ({ className, variant, selected, icon, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          tagVariants({ variant, selected, hasIcon: !!icon, className })
+        )}
+        {...props}
+      >
+        {icon && <div className="ink:size-3">{icon}</div>}
+        {children}
+      </div>
+    );
+  }
+);
+
+Tag.displayName = "Tag";

src/components/Tag/index.ts

@@ -0,0 +1 @@
+export * from "./Tag";

src/icons/index.ts

@@ -14,6 +14,7 @@ export { default as Disconnect } from "./Type=Disconnect.svg?react";
 export { default as Error } from "./Type=Error.svg?react";
 export { default as History } from "./Type=History.svg?react";
 export { default as Home } from "./Type=Home.svg?react";
+export { default as InkLogo } from "./Type=InkLogo.svg?react";
 export { default as Loading } from "./Type=Loading.svg?react";
 export { default as Menu } from "./Type=Menu.svg?react";
 export { default as Minus } from "./Type=Minus.svg?react";