inkonchain · fran-ink · Feb 19, 2025 · Feb 18, 2025
@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

@@ -7,6 +7,7 @@
 import fs from "fs/promises";
 import path from "path";
 
+const filesToIgnore = ["AllIcons.tsx"];
 /** Use this to map an invalid name temporarily (until it is fixed in the Figma)  */
 const iconNameMapping = {};
 
@@ -51,11 +52,18 @@ async function createIndexFile(folder) {
   const header = `/**\n * This file is auto-generated by the \`import-svgs.mjs\` script.\n */`;
   const stuffInDir = await fs.readdir(folder);
   const foundSvgs = [];
+  const foundTsx = [];
   const foundFolders = [];
   await Promise.all(
     stuffInDir.map(async (stuff) => {
+      if (filesToIgnore.includes(stuff)) {
+        return;
+      }
+
       if (stuff.endsWith(".svg")) {
         foundSvgs.push(stuff);
+      } else if (stuff.endsWith(".tsx")) {
+        foundTsx.push(stuff);
       } else if ((await fs.stat(path.join(folder, stuff))).isDirectory()) {
         foundFolders.push(stuff);
       }
@@ -71,6 +79,7 @@ async function createIndexFile(folder) {
       (svg) =>
         `export { default as ${getIconName(svg)} } from "./${svg}?react";`
     )
+    .concat(foundTsx.map((tsx) => `export * from "./${tsx}";`))
     .concat(
       foundFolders.map(
         (folder) => `export * as ${folder} from "./${folder}/index.ts";`

@@ -27,7 +27,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       className={classNames(
         "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:rounded-xs ink:box-border",
         "ink:transition-colors ink:transition-default-animation",
-        "ink:bg-background-container ink:shadow-xs",
+        "ink:bg-button-secondary ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:group-data-checked:bg-button-primary",
         "ink:data-indeterminate:bg-button-primary ink:group-data-indeterminate:bg-button-primary",

@@ -17,7 +17,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         className={classNames(
           "ink:w-full ink:flex ink:items-center ink:justify-center ink:gap-1 ink:box-border ink:group",
           "ink:p-2 ink:h-5",
-          "ink:font-default ink:rounded-xs ink:bg-background-container ink:text-body-3-regular ink:text-text-default",
+          "ink:font-default ink:rounded-xs ink:bg-button-secondary ink:text-body-3-regular ink:text-text-default",
           "ink:border-1 ink:border-transparent ink:focus-within:border-text-on-secondary ink:transition-colors ink:transition-default-animation",
           className
         )}

@@ -15,7 +15,7 @@ export const Radio: React.FC<RadioProps> = ({ value, asChild }) => {
       className={classNames(
         "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:cursor-pointer ink:rounded-full ink:box-border",
         "ink:transition-colors ink:transition-default-animation",
-        "ink:border-2 ink:border-transparent ink:bg-background-container ink:shadow-xs",
+        "ink:border-2 ink:border-transparent ink:bg-button-secondary ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover"
       )}

@@ -14,7 +14,7 @@ export const Toggle: React.FC<ToggleProps> = ({ checked, onChange }) => {
       className={classNames(
         "ink:group ink:relative ink:inline-flex ink:h-4 ink:w-6 ink:shrink-0 ink:cursor-pointer ink:rounded-full ink:box-border",
         "ink:transition-colors ink:transition-default-animation",
-        "ink:bg-background-container",
+        "ink:bg-button-secondary",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-status-success",
         "ink:flex ink:items-center ink:p-0.5"

@@ -1,11 +1,12 @@
 import { classNames } from "../util/classes";
 import * as Icons from "./index";
 import "./AllIcons.css";
-
-type IconType = (typeof Icons)[keyof typeof Icons];
+import React from "react";
 
 interface IconsOrFolder {
-  [key: string]: IconType | IconsOrFolder;
+  [key: string]:
+    | React.ComponentType<React.SVGProps<SVGSVGElement>>
+    | IconsOrFolder;
 }
 
 export const AllIcons: React.FC<{
@@ -47,6 +48,7 @@ function IconsOrFolder({
           if (!isIconFolder(IconOrFolder)) {
             return (
               <div
+                key={name}
                 className="tooltip-on-hover ink:cursor-pointer ink:whitespace-nowrap"
                 data-title={`<${title}.${name} />`}
                 onClick={() =>
@@ -55,8 +57,6 @@ function IconsOrFolder({
               >
                 <IconOrFolder
                   className={classNames("ink:size-4", iconClassName)}
-                  title={`${title}.${name}`}
-                  key={name}
                 />
               </div>
             );
@@ -80,6 +80,6 @@ function IconsOrFolder({
   );
 }
 
-function isIconFolder(icon: IconType | IconsOrFolder): icon is IconsOrFolder {
+function isIconFolder(icon: IconsOrFolder[string]): icon is IconsOrFolder {
   return typeof icon === "object";
 }
@@ -0,0 +1,72 @@
+import { SVGProps, useId } from "react";
+
+export const Placeholder = (props: SVGProps<SVGSVGElement>) => {
+  const id = useId();
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id={`${id}-mask`}
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="48"
+        height="48"
+      >
+        <path
+          d="M47.9885 24.0077C48.0525 22.8733 47.8445 22.0106 47.4766 21.2916C46.4847 19.1668 44.3089 18.6395 43.253 15.2365C42.805 14.0543 42.837 12.904 42.821 11.7696C42.837 10.9229 42.821 10.0921 42.4851 9.22934C42.2291 8.49441 41.7811 7.75949 40.9652 7.02457C40.9172 6.97664 40.8692 6.92871 40.8212 6.88078C40.4052 6.43344 39.9733 6.1139 39.5253 5.87426C38.3095 5.13933 37.2535 5.13934 36.1017 5.13934C34.9818 5.07543 33.8299 5.0275 32.726 4.61211C29.1423 3.28605 28.6944 1.43277 26.7426 0.538082C26.0226 0.170621 25.1587 -0.0530492 24.0228 0.0108571C23.9108 0.0108571 23.8149 0.0268346 23.7029 0.0268346C23.0949 0.010858 22.551 0.106717 22.071 0.266483C19.6651 0.898752 19.1697 2.59445 16.7115 4.0539C16.6591 4.08501 16.6025 4.11161 16.5479 4.13864C16.5085 4.15814 16.467 4.17528 16.4277 4.19492C13.4723 5.6717 11.7232 4.87105 9.81621 5.36301C8.9043 5.53875 7.99239 5.98609 7.04848 7.04055C6.9857 7.1346 6.89377 7.20649 6.81259 7.28521C6.29026 7.79175 5.94227 8.31304 5.70461 8.86188C4.40873 11.2743 5.52863 12.9838 3.84879 16.8981C3.7368 17.1537 3.60881 17.3774 3.46482 17.6011C2.28094 19.3585 0.985065 19.9336 0.377124 21.6591C0.10515 22.2982 -0.0388336 23.0491 0.00916172 24.0077C-0.0388336 24.9503 0.105154 25.7012 0.36113 26.3403C0.985069 28.1136 2.32894 28.6728 3.52882 30.5261C3.64081 30.7018 3.7368 30.8936 3.8328 31.1013C5.48064 34.9197 4.44073 36.6451 5.60862 38.9777C5.88059 39.6647 6.31255 40.3357 7.03249 40.9588C7.06448 40.9908 7.11247 41.0227 7.14447 41.0547C7.8164 41.7736 8.47234 42.189 9.12828 42.4286C11.3361 43.3553 13.1439 42.1571 16.4716 43.8506C16.7275 43.9624 16.9675 44.1062 17.1915 44.25C18.9993 45.4802 19.6713 46.8062 21.3831 47.4932C22.103 47.8447 22.9509 48.0524 23.9908 47.9885C24.2256 47.9885 24.4608 47.9757 24.6953 47.9637C25.1077 47.9424 25.4839 47.8829 25.8313 47.7852C25.8415 47.7823 25.852 47.7808 25.8627 47.7808C25.8733 47.7808 25.8842 47.7794 25.8945 47.7768C28.6145 47.0853 28.6542 44.9021 32.694 43.4192C34.0379 42.9079 35.4297 42.9559 36.7736 42.844C37.4935 42.8281 38.1975 42.7482 38.9334 42.4127C39.6373 42.1411 40.3093 41.7097 40.9492 40.9908C41.0132 40.9269 41.0932 40.847 41.1572 40.7831C41.7011 40.2558 42.0691 39.7126 42.3091 39.1694C42.789 38.1629 42.821 37.2363 42.805 36.2457C42.821 35.1114 42.789 33.9611 43.237 32.7788C44.2929 29.3918 46.4527 28.8645 47.4446 26.7716C47.8445 26.0207 48.0525 25.158 47.9885 24.0077Z"
+          fill={`url(#${id}-paint0)`}
+        />
+        <path
+          d="M47.9885 24.0077C48.0525 22.8733 47.8445 22.0106 47.4766 21.2916C46.4847 19.1668 44.3089 18.6395 43.253 15.2365C42.805 14.0543 42.837 12.904 42.821 11.7696C42.837 10.9229 42.821 10.0921 42.4851 9.22934C42.2291 8.49441 41.7811 7.75949 40.9652 7.02457C40.9172 6.97664 40.8692 6.92871 40.8212 6.88078C40.4052 6.43344 39.9733 6.1139 39.5253 5.87426C38.3095 5.13933 37.2535 5.13934 36.1017 5.13934C34.9818 5.07543 33.8299 5.0275 32.726 4.61211C29.1423 3.28605 28.6944 1.43277 26.7426 0.538082C26.0226 0.170621 25.1587 -0.0530492 24.0228 0.0108571C23.9108 0.0108571 23.8149 0.0268346 23.7029 0.0268346C23.0949 0.010858 22.551 0.106717 22.071 0.266483C19.6651 0.898752 19.1697 2.59445 16.7115 4.0539C16.6591 4.08501 16.6025 4.11161 16.5479 4.13864C16.5085 4.15814 16.467 4.17528 16.4277 4.19492C13.4723 5.6717 11.7232 4.87105 9.81621 5.36301C8.9043 5.53875 7.99239 5.98609 7.04848 7.04055C6.9857 7.1346 6.89377 7.20649 6.81259 7.28521C6.29026 7.79175 5.94227 8.31304 5.70461 8.86188C4.40873 11.2743 5.52863 12.9838 3.84879 16.8981C3.7368 17.1537 3.60881 17.3774 3.46482 17.6011C2.28094 19.3585 0.985065 19.9336 0.377124 21.6591C0.10515 22.2982 -0.0388336 23.0491 0.00916172 24.0077C-0.0388336 24.9503 0.105154 25.7012 0.36113 26.3403C0.985069 28.1136 2.32894 28.6728 3.52882 30.5261C3.64081 30.7018 3.7368 30.8936 3.8328 31.1013C5.48064 34.9197 4.44073 36.6451 5.60862 38.9777C5.88059 39.6647 6.31255 40.3357 7.03249 40.9588C7.06448 40.9908 7.11247 41.0227 7.14447 41.0547C7.8164 41.7736 8.47234 42.189 9.12828 42.4286C11.3361 43.3553 13.1439 42.1571 16.4716 43.8506C16.7275 43.9624 16.9675 44.1062 17.1915 44.25C18.9993 45.4802 19.6713 46.8062 21.3831 47.4932C22.103 47.8447 22.9509 48.0524 23.9908 47.9885C24.2256 47.9885 24.4608 47.9757 24.6953 47.9637C25.1077 47.9424 25.4839 47.8829 25.8313 47.7852C25.8415 47.7823 25.852 47.7808 25.8627 47.7808C25.8733 47.7808 25.8842 47.7794 25.8945 47.7768C28.6145 47.0853 28.6542 44.9021 32.694 43.4192C34.0379 42.9079 35.4297 42.9559 36.7736 42.844C37.4935 42.8281 38.1975 42.7482 38.9334 42.4127C39.6373 42.1411 40.3093 41.7097 40.9492 40.9908C41.0132 40.9269 41.0932 40.847 41.1572 40.7831C41.7011 40.2558 42.0691 39.7126 42.3091 39.1694C42.789 38.1629 42.821 37.2363 42.805 36.2457C42.821 35.1114 42.789 33.9611 43.237 32.7788C44.2929 29.3918 46.4527 28.8645 47.4446 26.7716C47.8445 26.0207 48.0525 25.158 47.9885 24.0077Z"
+          fill={`url(#${id}-paint1)`}
+        />
+      </mask>
+      <g mask={`url(#${id}-mask)`}>
+        <rect width="48" height="48" fill={`url(#${id}-paint2)`} />
+      </g>
+      <defs>
+        <radialGradient
+          id={`${id}-paint0`}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(24 -0.151619) rotate(90) scale(48.3033)"
+        >
+          <stop stop-color="#2E2E2E" />
+          <stop offset="1" stop-color="#080808" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}-paint1`}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(46.906 -4.75865) rotate(129.211) scale(84.0086 264.059)"
+        >
+          <stop stop-color="#8049F2" />
+          <stop offset="1" stop-color="#6D4EAE" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}-paint2`}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(46.906 -4.75865) rotate(129.211) scale(84.0086 264.059)"
+        >
+          <stop stop-color="#160F1F" />
+          <stop offset="1" stop-color="#7132F5" />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+};
@@ -3,4 +3,4 @@
  */
 
 export { default as Ink } from "./Ink.svg?react";
-export { default as Placeholder } from "./Placeholder.svg?react";
+export * from "./Placeholder.tsx";
@@ -3,9 +3,18 @@ import {
   InkLayoutMobileNav,
   InkLayoutMobileNavProps,
 } from "../InkLayout/MobileNav";
+import { useInkLayoutContext } from "../InkLayout/InkLayoutContext";
 
 export const ExampleMobileNav = (
   props: Omit<InkLayoutMobileNavProps, "links">
 ) => {
-  return <InkLayoutMobileNav links={EXAMPLE_LINKS} {...props} />;
+  const { setIsMobileNavOpen } = useInkLayoutContext();
+  return (
+    <InkLayoutMobileNav
+      links={EXAMPLE_LINKS}
+      bottom={<div>Bottom content</div>}
+      {...props}
+      onLinkClick={() => setIsMobileNavOpen(false)}
+    />
+  );
 };
@@ -2,5 +2,10 @@ import { InkLayoutSideNav } from "../InkLayout";
 import { EXAMPLE_LINKS } from "./ExampleLayoutLinks";
 
 export const ExampleSideNav = () => {
-  return <InkLayoutSideNav links={EXAMPLE_LINKS} />;
+  return (
+    <InkLayoutSideNav
+      links={EXAMPLE_LINKS}
+      bottom={<div>Bottom content</div>}
+    />
+  );
 };
@@ -30,9 +30,7 @@ const meta: Meta<InkLayoutProps> = {
     headerContent: <div>Header content</div>,
     topNavigation: <ExampleTopNav />,
     sideNavigation: <ExampleSideNav />,
-    mobileNavigation: (props) => (
-      <ExampleMobileNav onLinkClick={props.closeMobileNavigation} />
-    ),
+    mobileNavigation: <ExampleMobileNav />,
   },
 };