Skip to content

Commit 34265ce

Browse files
ink-victorink-victor
committed
feat: ink kit pill component
1 parent 0192362 commit 34265ce

File tree

10 files changed

+350
-170
lines changed

10 files changed

+350
-170
lines changed

‎.vscode/settings.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
// Enables tailwind autocompletion in cva function
3+
// https://cva.style/docs/getting-started/installation#tailwind-css
4+
"tailwindCSS.experimental.classRegex": [
5+
["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
6+
["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
7+
]
8+
}

‎package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
"@tailwindcss/postcss": "4.0.0-beta.3",
5050
"@tailwindcss/vite": "4.0.0-beta.3",
5151
"@tanstack/react-query": "^5.60.5",
52-
"@types/react": "npm:types-react@19.0.0-rc.1",
53-
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
52+
"@types/react": "19.0.8",
53+
"@types/react-dom": "19.0.3",
5454
"eslint": "^9.14.0",
5555
"eslint-config-prettier": "^9.1.0",
5656
"eslint-plugin-import": "^2.31.0",
@@ -60,8 +60,8 @@
6060
"eslint-plugin-unused-imports": "^4.1.4",
6161
"postcss": "^8.4.47",
6262
"prettier": "^3.3.3",
63-
"react": "19.0.0-rc-7ac8e612-20241113",
64-
"react-dom": "19.0.0-rc-7ac8e612-20241113",
63+
"react": "19.0.0",
64+
"react-dom": "19.0.0",
6565
"rollup-plugin-preserve-use-client": "^3.0.1",
6666
"storybook": "8.2.9",
6767
"tailwindcss": "4.0.0-beta.3",
@@ -83,6 +83,7 @@
8383
},
8484
"dependencies": {
8585
"@headlessui/react": "^2.2.0",
86+
"class-variance-authority": "^0.7.1",
8687
"clsx": "^2.1.1",
8788
"tailwind-merge": "^2.5.4"
8889
},

‎pnpm-lock.yaml

+177-165
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Slot/Slot.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ SlotClone.displayName = "SlotClone";
105105

106106
type SlottableProps = {
107107
child: React.ReactNode;
108-
children: (child: React.ReactNode) => JSX.Element;
108+
children: (child: React.ReactNode) => React.JSX.Element;
109109
};
110110

111111
const Slottable = ({ child, children }: SlottableProps) => {

‎src/components/Tag/Tag.stories.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { Tag, type TagProps } from "./Tag";
3+
import { useState } from "react";
4+
import { InkIcon } from "../..";
5+
6+
const meta: Meta<TagProps> = {
7+
title: "Components/Tag",
8+
component: Tag,
9+
tags: ["autodocs"],
10+
args: {
11+
children: "Tag Content",
12+
},
13+
};
14+
15+
export default meta;
16+
type Story = StoryObj<typeof meta>;
17+
18+
export const Fill: Story = {
19+
args: {
20+
variant: "fill",
21+
children: "Fill Tag",
22+
},
23+
};
24+
25+
export const Outline: Story = {
26+
args: {
27+
variant: "outline",
28+
children: "Outline Tag",
29+
},
30+
};
31+
32+
export const Filter: Story = {
33+
render: () => {
34+
const [selected, setSelected] = useState(false);
35+
return (
36+
<Tag
37+
variant="filter"
38+
selected={selected}
39+
onClick={() => setSelected((prev) => !prev)}
40+
>
41+
Tag
42+
</Tag>
43+
);
44+
},
45+
};
46+
47+
export const AllVariants: Story = {
48+
render: () => {
49+
const [selected, setSelected] = useState(false);
50+
return (
51+
<div className="ink:flex ink:flex-col ink:gap-4">
52+
<div className="ink:flex ink:items-center ink:gap-4">
53+
<Tag variant="fill" icon={<InkIcon.InkLogo />}>
54+
Tag
55+
</Tag>
56+
<Tag variant="outline" icon={<InkIcon.Settings />}>
57+
Tag
58+
</Tag>
59+
</div>
60+
<div className="ink:flex ink:items-center ink:gap-4">
61+
<Tag variant="fill">Fill</Tag>
62+
<Tag variant="outline">Outline</Tag>
63+
<Tag
64+
variant="filter"
65+
selected={selected}
66+
onClick={() => setSelected((prev) => !prev)}
67+
>
68+
Selectable Tag
69+
</Tag>
70+
</div>
71+
</div>
72+
);
73+
},
74+
};

‎src/components/Tag/Tag.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { cva, type VariantProps } from "class-variance-authority";
2+
import * as React from "react";
3+
import { cn } from "../../lib/utils";
4+
5+
const tagVariants = cva(
6+
"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:py-1.5 ink:px-1.5 ",
7+
{
8+
variants: {
9+
variant: {
10+
fill: "ink:bg-background-container ink:text-text-muted",
11+
outline:
12+
"ink:text-text-muted ink:border-background-container ink:border-[1.5px]",
13+
filter:
14+
"ink:text-text-muted ink:hover:text-text-default ink:duration-200 ink:cursor-pointer",
15+
},
16+
selected: {
17+
true: "",
18+
false: "",
19+
},
20+
hasIcon: {
21+
true: "",
22+
false: "",
23+
},
24+
},
25+
compoundVariants: [
26+
{
27+
variant: "filter",
28+
selected: true,
29+
class: "ink:bg-background-container ink:text-text-default",
30+
},
31+
{
32+
hasIcon: true,
33+
class: "ink:py-1",
34+
},
35+
],
36+
defaultVariants: {
37+
variant: "fill",
38+
hasIcon: false,
39+
},
40+
}
41+
);
42+
43+
export interface TagProps
44+
extends React.HTMLAttributes<HTMLDivElement>,
45+
VariantProps<typeof tagVariants> {
46+
icon?: React.ReactNode;
47+
}
48+
49+
export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
50+
({ className, variant, selected, icon, children, ...props }, ref) => {
51+
return (
52+
<div
53+
ref={ref}
54+
className={cn(
55+
tagVariants({ variant, selected, hasIcon: !!icon, className })
56+
)}
57+
{...props}
58+
>
59+
{icon && <div className="ink:size-3">{icon}</div>}
60+
{children}
61+
</div>
62+
);
63+
}
64+
);
65+
66+
Tag.displayName = "Tag";

‎src/components/Tag/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Tag";

‎src/icons/Type=InkLogo.svg

+11
Loading

‎src/icons/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export { default as Disconnect } from "./Type=Disconnect.svg?react";
1414
export { default as Error } from "./Type=Error.svg?react";
1515
export { default as History } from "./Type=History.svg?react";
1616
export { default as Home } from "./Type=Home.svg?react";
17+
export { default as InkLogo } from "./Type=InkLogo.svg?react";
1718
export { default as Loading } from "./Type=Loading.svg?react";
1819
export { default as Menu } from "./Type=Menu.svg?react";
1920
export { default as Minus } from "./Type=Minus.svg?react";

‎src/lib/utils.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { type ClassValue, clsx } from "clsx";
2+
import { twMerge } from "tailwind-merge";
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs));
6+
}

0 commit comments

Comments
 (0)