Couple of fixes (see description)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.9.1-beta.5",
+  "version": "0.9.1-beta.16",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -19,7 +19,8 @@
       "import": "./dist/providers.es.js",
       "require": "./dist/providers.cjs.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./tailwind.css": "./dist/tailwind.css"
   },
   "scripts": {
     "build": "tsc && vite build --mode production",
@@ -77,7 +78,7 @@
     "@tanstack/react-query": "^5",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^3",
+    "tailwindcss": "^3 || ^4",
     "viem": "^2",
     "wagmi": "^2"
   },

scripts/import-svgs.mjs

@@ -22,11 +22,14 @@ async function processSvgsInFolder(folder) {
     (await fs.readdir(folder, { recursive: true })).map(async (name) => {
       if (name.includes("=")) {
         const currentPath = name.split("/").slice(0, -1).join("/");
-        const newName = currentPath + "/" + name.split("=")[1];
-        if (await fs.access(path.join(folder, newName)).catch(() => false)) {
-          await fs.unlink(path.join(folder, newName));
+        const newName = path.join(
+          folder,
+          currentPath + "/" + name.split("=")[1]
+        );
+        if (await fs.access(newName).catch(() => false)) {
+          await fs.unlink(newName);
         }
-        await fs.rename(path.join(folder, name), path.join(folder, newName));
+        await fs.rename(path.join(folder, name), newName);
       }
     })
   );

src/components/Alert/Alert.tsx

@@ -92,3 +92,5 @@ export const Alert: React.FC<AlertProps> = ({
     </div>
   );
 };
+
+Alert.displayName = "Alert";

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, forwardRef } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot/Slot";
 
@@ -14,80 +14,88 @@ export interface ButtonProps
   iconRight?: React.ReactNode;
 }
 
-export const Button: React.FC<ButtonProps> = ({
-  asChild,
-  className,
-  children,
-  variant = "primary",
-  size = "md",
-  rounded = "default",
-  iconLeft,
-  iconRight,
-  ...restProps
-}: ButtonProps) => {
-  const Component = asChild ? Slot : "button";
-  const iconClasses = classNames(
-    "ink:size-3 ink:-my-1",
-    variant === "wallet" &&
-      classNames(
-        "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
-        variantClassNames(size, {
-          md: "ink:size-4",
-          lg: "ink:size-6",
-        })
-      )
-  );
-  return (
-    <Component
-      className={classNames(
-        "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-lg",
-        "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
-        variantClassNames(size, {
-          md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
-          lg: "ink:px-4 ink:py-3 ink:text-h5 ink:h-8",
-        }),
-        variantClassNames(rounded, {
-          full: `ink:rounded-full ${variantClassNames(size, {
-            md: "ink:p-1 ink:size-5",
-            lg: "ink:p-2 ink:size-8",
-          })}`,
-          default: "",
-        }),
-        variantClassNames(variant, {
-          primary:
-            "ink:bg-button-primary ink:text-text-on-primary ink:hover:bg-button-primary-hover ink:disabled:bg-button-primary-disabled ink:disabled:text-text-on-primary-disabled ink:active:bg-button-primary-pressed",
-          secondary:
-            "ink:bg-button-secondary ink:text-text-on-secondary ink:hover:bg-button-secondary-hover ink:disabled:bg-button-secondary-disabled ink:disabled:text-text-on-secondary-disabled ink:active:bg-button-secondary-pressed",
-          wallet: classNames(
-            "ink:bg-background-light-transparent ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
-            "ink:border-background-container ink:border",
-            iconLeft &&
-              variantClassNames(size, {
-                md: "ink:pl-0.5",
-                lg: "ink:pl-1",
-              }),
-            iconRight &&
-              variantClassNames(size, {
-                md: "ink:pr-0.5",
-                lg: "ink:pr-1",
-              })
-          ),
-          transparent:
-            "ink:bg-transparent ink:text-text-default ink:hover:bg-background-light-transparent ink:disabled:bg-transparent ink:disabled:text-muted",
-        }),
-        className
-      )}
-      {...restProps}
-    >
-      <Slottable child={children}>
-        {(child) => (
-          <>
-            {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
-            {child}
-            {iconRight && <div className={iconClasses}>{iconRight}</div>}
-          </>
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      asChild,
+      className,
+      children,
+      variant = "primary",
+      size = "md",
+      rounded = "default",
+      iconLeft,
+      iconRight,
+      ...restProps
+    },
+    ref
+  ) {
+    const Component = asChild ? Slot : "button";
+    const iconClasses = classNames(
+      "ink:size-3 ink:-my-1",
+      variant === "wallet" &&
+        classNames(
+          "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
+          variantClassNames(size, {
+            md: "ink:size-4",
+            lg: "ink:size-6",
+          })
+        )
+    );
+    return (
+      <Component
+        className={classNames(
+          "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-lg",
+          "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
+          variantClassNames(size, {
+            md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
+            lg: "ink:px-4 ink:py-3 ink:text-h5 ink:h-8",
+          }),
+          variantClassNames(rounded, {
+            full: `ink:rounded-full ${variantClassNames(size, {
+              md: "ink:p-1 ink:size-5",
+              lg: "ink:p-2 ink:size-8",
+            })}`,
+            default: "",
+          }),
+          variantClassNames(variant, {
+            primary:
+              "ink:bg-button-primary ink:text-text-on-primary ink:hover:bg-button-primary-hover ink:disabled:bg-button-primary-disabled ink:disabled:text-text-on-primary-disabled ink:active:bg-button-primary-pressed",
+            secondary:
+              "ink:bg-button-secondary ink:text-text-on-secondary ink:hover:bg-button-secondary-hover ink:disabled:bg-button-secondary-disabled ink:disabled:text-text-on-secondary-disabled ink:active:bg-button-secondary-pressed",
+            wallet: classNames(
+              "ink:bg-background-light-transparent ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
+              "ink:border-background-container ink:border",
+              iconLeft &&
+                variantClassNames(size, {
+                  md: "ink:pl-0.5",
+                  lg: "ink:pl-1",
+                }),
+              iconRight &&
+                variantClassNames(size, {
+                  md: "ink:pr-0.5",
+                  lg: "ink:pr-1",
+                })
+            ),
+            transparent:
+              "ink:bg-transparent ink:text-text-default ink:hover:bg-background-light-transparent ink:disabled:bg-transparent ink:disabled:text-muted",
+          }),
+          className
         )}
-      </Slottable>
-    </Component>
-  );
-};
+        {...restProps}
+        ref={ref}
+      >
+        <Slottable child={children}>
+          {(child) => (
+            <>
+              {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
+              {child}
+              {iconRight && <div className={iconClasses}>{iconRight}</div>}
+            </>
+          )}
+        </Slottable>
+      </Component>
+    );
+  }
+);
+
+Button.displayName = "Button";

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -61,19 +61,23 @@ ink:overflow-hidden
   }
 );
 
-export const Card: React.FC<CardProps> = ({
-  children,
-  className,
-  image,
-  imageLocation,
-  asChild,
-  variant,
-  clickable,
-  size,
-}) => {
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  {
+    children,
+    className,
+    image,
+    imageLocation,
+    asChild,
+    variant,
+    clickable,
+    size,
+  },
+  ref
+) {
   const Component = asChild ? Slot : "div";
   return (
     <Component
+      ref={ref}
       className={classNames(
         cardVariants({
           variant,
@@ -128,4 +132,6 @@ export const Card: React.FC<CardProps> = ({
       </Slottable>
     </Component>
   );
-};
+});
+
+Card.displayName = "Card";

src/components/Card/Content/CallToAction.tsx

@@ -21,3 +21,5 @@ export const CallToAction: React.FC<CallToActionProps> = ({
     </div>
   );
 };
+
+CallToAction.displayName = "CallToAction";

src/components/Card/Content/CardInfo.tsx

@@ -35,3 +35,5 @@ export const CardInfo = ({
     </Card>
   );
 };
+
+CardInfo.displayName = "CardInfo";

src/components/Card/Content/CardInfos.tsx

@@ -18,3 +18,5 @@ export const CardInfos = ({ children, className }: CardInfosProps) => {
     </div>
   );
 };
+
+CardInfos.displayName = "CardInfos";

src/components/Card/Content/Image.tsx

@@ -53,3 +53,5 @@ export const Image: React.FC<ImageProps> = ({
     </div>
   );
 };
+
+Image.displayName = "Image";

src/components/Card/Content/LargeLink.tsx

@@ -47,3 +47,5 @@ export const LargeLink = ({
     </Component>
   );
 };
+
+LargeLink.displayName = "LargeLink";

src/components/Card/Content/LargeLinks.tsx

@@ -18,3 +18,5 @@ export const LargeLinks = ({ children, className }: LargeLinksProps) => {
     </div>
   );
 };
+
+LargeLinks.displayName = "LargeLinks";

src/components/Card/Content/Link.tsx

@@ -37,3 +37,5 @@ export const Link = ({
     </Tiny>
   );
 };
+
+Link.displayName = "Link";

src/components/Card/Content/Tagline.tsx

@@ -28,3 +28,5 @@ export const Tagline: React.FC<TaglineProps> = ({
     </div>
   );
 };
+
+Tagline.displayName = "Tagline";

src/components/Card/Content/Tiny.tsx

@@ -32,3 +32,5 @@ export const Tiny = ({
     </div>
   );
 };
+
+Tiny.displayName = "Tiny";

src/components/Card/Content/TitleAndDescription.tsx

@@ -26,7 +26,7 @@ export const TitleAndDescription = ({
         {title}
       </h3>
       {description && (
-        <p
+        <div
           className={classNames(
             "ink:text-body-3-regular ink:text-(--ink-card-muted-color) ink:box-border ink:m-0",
             variantClassNames(size, {
@@ -37,8 +37,10 @@ export const TitleAndDescription = ({
           )}
         >
           {description}
-        </p>
+        </div>
       )}
     </div>
   );
 };
+
+TitleAndDescription.displayName = "TitleAndDescription";

src/components/Card/Content/index.ts

@@ -1,6 +1,6 @@
 export * from "./CallToAction";
-export * from "./CardInfos";
 export * from "./CardInfo";
+export * from "./CardInfos";
 export * from "./Image";
 export * from "./LargeLink";
 export * from "./LargeLinks";

src/components/Card/index.ts

@@ -1,2 +1,2 @@
-export * as CardContent from "./Content";
 export * from "./Card";
+export * as CardContent from "./Content";

src/components/Checkbox/Checkbox.stories.tsx

@@ -120,7 +120,7 @@ export const NestingWithIndeterminateState: Story = {
   },
 };
 
-/** If you want to use the Checkbox without it's own managed state, don't set `onChange` and simply pass `checked={value}`. */
+/** If you want to use the Checkbox without it's own managed state, set checked={undefined} and onChange={undefined}, and add `data-checked={value}` to the parent item. */
 export const ManagedByAParentItem: Story = {
   argTypes: {
     onChange: {

src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,8 @@ import { Checkbox as HeadlessCheckbox } from "@headlessui/react";
 import { classNames } from "../../util/classes";
 import { InkIcon } from "../..";
 
-export interface CheckboxProps {
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   checked?: boolean;
   indeterminate?: boolean;
   onChange?: (enabled: boolean) => void;
@@ -12,6 +13,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   checked,
   indeterminate,
   onChange,
+  className,
+  ...props
 }) => {
   const Component = onChange ? HeadlessCheckbox : "span";
   return (
@@ -36,10 +39,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary",
         "ink:group-data-checked:text-text-on-primary ink:group-data-indeterminate:text-text-on-primary",
         "ink:group-data-selected:text-text-on-primary",
-        "ink:cursor-pointer"
+        "ink:cursor-pointer",
+        className
       )}
       data-checked={checked ? "true" : undefined}
       data-indeterminate={indeterminate ? "true" : undefined}
+      {...props}
     >
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center ink:box-border">
         <InkIcon.Check