feat: v7

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 inkonchain
+Copyright (c) 2024-2025 inkonchain
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/Alert/Alert.stories.tsx

@@ -61,7 +61,7 @@ export const Dismissable: Story = {
     title: "This alert can be dismissed",
     description:
       "Click the X to dismiss. The state will persist across refreshes.",
-    dismissable: true,
+    dismissible: true,
     id: "example-alert",
     onDismiss: fn(),
   },

src/components/Alert/Alert.tsx

@@ -9,13 +9,13 @@ export interface AlertProps {
   icon?: React.ReactNode;
   className?: string;
   /**
-   * Unique identifier for the alert. Required if dismissable is true.
+   * Unique identifier for the alert. Required if dismissible is true.
    */
   id?: string;
   /**
    * Whether the alert can be dismissed. If true, id is required.
    */
-  dismissable?: boolean;
+  dismissible?: boolean;
   /**
    * Callback fired when the alert is dismissed
    */
@@ -29,17 +29,17 @@ export const Alert: React.FC<AlertProps> = ({
   icon,
   className,
   id,
-  dismissable,
+  dismissible,
   onDismiss,
 }) => {
   const [isDismissed, setIsDismissed] = useState(false);
 
   useEffect(() => {
-    if (dismissable && id) {
+    if (dismissible && id) {
       const isDismissedStored = localStorage.getItem(`ink-alert-${id}`);
       setIsDismissed(isDismissedStored === "true");
     }
-  }, [dismissable, id]);
+  }, [dismissible, id]);
 
   if (isDismissed) {
     return null;
@@ -53,7 +53,7 @@ export const Alert: React.FC<AlertProps> = ({
   }[variant];
 
   const handleDismiss = () => {
-    if (dismissable && id) {
+    if (dismissible && id) {
       localStorage.setItem(`ink-alert-${id}`, "true");
       setIsDismissed(true);
       onDismiss?.();
@@ -80,7 +80,7 @@ export const Alert: React.FC<AlertProps> = ({
           <div className="ink:text-body-2-regular">{description}</div>
         )}
       </div>
-      {dismissable && (
+      {dismissible && (
         <button
           onClick={handleDismiss}
           className="ink:size-4 ink:shrink-0 ink:opacity-60 hover:ink:opacity-100 ink:cursor-pointer"

src/components/Card/Content/CardInfo.tsx

@@ -10,7 +10,7 @@ export const CardInfo = ({ children, className }: CardInfoProps) => {
   return (
     <div
       className={classNames(
-        "ink:grid ink:grid-cols-[minmax(200px,1fr)] ink:lg:grid-cols-2 ink:gap-1 ink:box-border",
+        "ink:grid ink:grid-cols-[repeat(auto-fit,minmax(max(200px,calc(100%/3)),1fr))] ink:xl:grid-cols-2 ink:gap-1 ink:box-border",
         className
       )}
     >

src/components/Card/Content/LargeLinks.tsx

@@ -10,7 +10,7 @@ export const LargeLinks = ({ children, className }: LargeLinksProps) => {
   return (
     <div
       className={classNames(
-        "ink:grid ink:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] ink:lg:grid-cols-2 ink:gap-1 ink:box-border",
+        "ink:grid ink:grid-cols-[repeat(auto-fit,minmax(max(200px,calc(100%/3)),1fr))] ink:xl:grid-cols-2 ink:gap-1 ink:box-border",
         className
       )}
     >

src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./Listbox";
 export * from "./Modal";
 export * from "./Popover";
 export * from "./SegmentedControl";
+export * from "./Tag";
 export * from "./Toggle";
 export * from "./Typography";
 export * from "./Wallet";