ml-uikit 1.1.4 → 1.1.6

package/dist/index.es7.js

@@ -1,6 +1,6 @@
 import * as a from "react";
 import * as e from "@radix-ui/react-avatar";
-import { cn as m } from "./index.es59.js";
+import { cn as m } from "./index.es60.js";
 const s = a.forwardRef(({ className: l, ...r }, t) => /* @__PURE__ */ a.createElement(
   e.Root,
   {

package/dist/index.es8.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { X as u } from "lucide-react";
 import { cva as N } from "class-variance-authority";
-import { cn as v } from "./index.es59.js";
+import { cn as v } from "./index.es60.js";
 const w = N("inline-flex items-center gap-1 rounded-[12px] font-medium", {
   variants: {
     variant: {

package/dist/index.es9.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { Slot as o } from "@radix-ui/react-slot";
 import { ChevronRight as l, MoreHorizontal as c } from "lucide-react";
-import { cn as m } from "./index.es59.js";
+import { cn as m } from "./index.es60.js";
 const i = e.forwardRef(({ ...r }, a) => /* @__PURE__ */ e.createElement("nav", { ref: a, "aria-label": "breadcrumb", ...r }));
 i.displayName = "Breadcrumb";
 const d = e.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ e.createElement(

package/dist/style.css

@@ -710,9 +710,15 @@ video {
 .order-last {
   order: 9999;
 }
+.col-start-1 {
+  grid-column-start: 1;
+}
 .col-start-2 {
   grid-column-start: 2;
 }
+.col-start-3 {
+  grid-column-start: 3;
+}
 .\!m-0 {
   margin: 0px !important;
 }
@@ -767,6 +773,9 @@ video {
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .ml-4 {
   margin-left: 1rem;
 }
@@ -788,6 +797,9 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -878,6 +890,9 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -1079,6 +1094,9 @@ video {
 .w-\[120px\] {
   width: 120px;
 }
+.w-\[132px\] {
+  width: 132px;
+}
 .w-\[140px\] {
   width: 140px;
 }
@@ -1103,6 +1121,9 @@ video {
 .w-\[60\%\] {
   width: 60%;
 }
+.w-\[min\(96vw\2c 980px\)\] {
+  width: min(96vw, 980px);
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -1159,6 +1180,9 @@ video {
 .max-w-\[320px\] {
   max-width: 320px;
 }
+.max-w-\[720px\] {
+  max-width: 720px;
+}
 .max-w-\[760px\] {
   max-width: 760px;
 }
@@ -1302,12 +1326,23 @@ video {
 .list-none {
   list-style-type: none;
 }
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
 .grid-cols-\[0_1fr\] {
   grid-template-columns: 0 1fr;
 }
 .grid-cols-\[120px_200px_1fr\] {
   grid-template-columns: 120px 200px 1fr;
 }
+.grid-cols-\[auto_1fr_auto\] {
+  grid-template-columns: auto 1fr auto;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1380,6 +1415,9 @@ video {
 .gap-7 {
   gap: 1.75rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-\[13px\] {
   gap: 13px;
 }
@@ -1437,6 +1475,15 @@ video {
 .self-stretch {
   align-self: stretch;
 }
+.justify-self-start {
+  justify-self: start;
+}
+.justify-self-end {
+  justify-self: end;
+}
+.justify-self-center {
+  justify-self: center;
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -1469,6 +1516,12 @@ video {
 .rounded-\[12px\] {
   border-radius: 12px;
 }
+.rounded-\[14px\] {
+  border-radius: 14px;
+}
+.rounded-\[16px\] {
+  border-radius: 16px;
+}
 .rounded-\[2px\] {
   border-radius: 2px;
 }
@@ -1568,10 +1621,18 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(48 127 74 / var(--tw-border-opacity, 1));
 }
+.border-\[\#b7b7b9\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(183 183 185 / var(--tw-border-opacity, 1));
+}
 .border-\[\#bdbdbd\] {
   --tw-border-opacity: 1;
   border-color: rgb(189 189 189 / var(--tw-border-opacity, 1));
 }
+.border-\[\#d8d8da\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(216 216 218 / var(--tw-border-opacity, 1));
+}
 .border-\[\#dcdcde\] {
   --tw-border-opacity: 1;
   border-color: rgb(220 220 222 / var(--tw-border-opacity, 1));
@@ -1655,6 +1716,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#f7f7f8\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
+}
 .bg-\[\#fafafa\] {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
@@ -1728,6 +1793,10 @@ video {
 .fill-current {
   fill: currentColor;
 }
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .p-0 {
   padding: 0px;
 }
@@ -1781,6 +1850,10 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
 .px-\[--cell-size\] {
   padding-left: var(--cell-size);
   padding-right: var(--cell-size);
@@ -1855,6 +1928,12 @@ video {
 .pr-1 {
   padding-right: 0.25rem;
 }
+.pr-10 {
+  padding-right: 2.5rem;
+}
+.pr-11 {
+  padding-right: 2.75rem;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1919,6 +1998,9 @@ video {
 .text-\[16px\] {
   font-size: 16px;
 }
+.text-\[18px\] {
+  font-size: 18px;
+}
 .text-\[20px\] {
   font-size: 20px;
 }
@@ -1997,6 +2079,9 @@ video {
 .leading-\[20px\] {
   line-height: 20px;
 }
+.leading-\[22px\] {
+  line-height: 22px;
+}
 .leading-\[24px\] {
   line-height: 24px;
 }
@@ -2065,6 +2150,22 @@ video {
   --tw-text-opacity: 1;
   color: rgb(48 127 74 / var(--tw-text-opacity, 1));
 }
+.text-\[\#444444\] {
+  --tw-text-opacity: 1;
+  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
+}
+.text-\[\#4f4d55\] {
+  --tw-text-opacity: 1;
+  color: rgb(79 77 85 / var(--tw-text-opacity, 1));
+}
+.text-\[\#666666\] {
+  --tw-text-opacity: 1;
+  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
+}
+.text-\[\#6e6d71\] {
+  --tw-text-opacity: 1;
+  color: rgb(110 109 113 / var(--tw-text-opacity, 1));
+}
 .text-\[\#7f7d83\] {
   --tw-text-opacity: 1;
   color: rgb(127 125 131 / var(--tw-text-opacity, 1));
@@ -2077,6 +2178,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
+.text-\[\#a4a4a8\] {
+  --tw-text-opacity: 1;
+  color: rgb(164 164 168 / var(--tw-text-opacity, 1));
+}
 .text-\[\#adacb0\] {
   --tw-text-opacity: 1;
   color: rgb(173 172 176 / var(--tw-text-opacity, 1));
@@ -2085,6 +2190,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(179 179 179 / var(--tw-text-opacity, 1));
 }
+.text-\[\#d3d3d6\] {
+  --tw-text-opacity: 1;
+  color: rgb(211 211 214 / var(--tw-text-opacity, 1));
+}
 .text-\[\#e49614\] {
   --tw-text-opacity: 1;
   color: rgb(228 150 20 / var(--tw-text-opacity, 1));
@@ -2164,6 +2273,11 @@ video {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0px_12px_24px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
+  --tw-shadow: 0px 12px 24px rgba(0,0,0,0.08);
+  --tw-shadow-colored: 0px 12px 24px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-\[0px_2px_4px_-2px_rgba\(19\2c 25\2c 39\2c 0\.12\)\2c 0px_4px_4px_-2px_rgba\(19\2c 25\2c 39\2c 0\.08\)\] {
   --tw-shadow: 0px 2px 4px -2px rgba(19,25,39,0.12),0px 4px 4px -2px rgba(19,25,39,0.08);
   --tw-shadow-colored: 0px 2px 4px -2px var(--tw-shadow-color), 0px 4px 4px -2px var(--tw-shadow-color);
@@ -2450,6 +2564,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(29 28 32 / var(--tw-border-opacity, 1));
 }
+.hover\:border-\[\#cccccc\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity, 1));
+}
 .hover\:border-\[\#dcdcde\]:hover {
   --tw-border-opacity: 1;
   border-color: rgb(220 220 222 / var(--tw-border-opacity, 1));
@@ -2604,10 +2722,16 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(29 28 32 / var(--tw-ring-opacity, 1));
 }
+.focus-visible\:ring-\[\#1d1c20\]\/20:focus-visible {
+  --tw-ring-color: rgb(29 28 32 / 0.2);
+}
 .focus-visible\:ring-\[\#26453f\]:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 69 63 / var(--tw-ring-opacity, 1));
 }
+.focus-visible\:ring-\[\#2bbd8f\]\/25:focus-visible {
+  --tw-ring-color: rgb(43 189 143 / 0.25);
+}
 .focus-visible\:ring-destructive\/20:focus-visible {
   --tw-ring-color: hsl(var(--destructive) / 0.2);
 }
@@ -2670,6 +2794,9 @@ video {
 .disabled\:opacity-100:disabled {
   opacity: 1;
 }
+.disabled\:opacity-40:disabled {
+  opacity: 0.4;
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -2826,6 +2953,14 @@ video {
 .aria-disabled\:opacity-50[aria-disabled="true"] {
   opacity: 0.5;
 }
+.aria-selected\:border-\[\#2bbd8f\][aria-selected="true"] {
+  --tw-border-opacity: 1;
+  border-color: rgb(43 189 143 / var(--tw-border-opacity, 1));
+}
+.aria-selected\:text-\[\#111111\][aria-selected="true"] {
+  --tw-text-opacity: 1;
+  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
+}
 .aria-selected\:text-muted-foreground[aria-selected="true"] {
   color: hsl(var(--muted-foreground));
 }
@@ -3490,13 +3625,29 @@ video {
     width: auto;
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
 
+  .md\:gap-10 {
+    gap: 2.5rem;
+  }
+
+  .md\:gap-3 {
+    gap: 0.75rem;
+  }
+
   .md\:p-12 {
     padding: 3rem;
   }
+
+  .md\:p-6 {
+    padding: 1.5rem;
+  }
 }
 @media (min-width: 1024px) {
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "ml-uikit",
   "description": "A Metis Labs UI kit library starter for React with Tailwind CSS, Vite, TypeScript and Shadcn-ui components.",
   "private": false,
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -58,6 +58,7 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "cmdk": "^1.1.1",
+    "country-flag-icons": "^1.6.15",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
@@ -79,37 +80,37 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "^10.2.4",
+    "@storybook/addon-docs": "^10.2.4",
+    "@storybook/addon-onboarding": "^10.2.4",
+    "@storybook/addon-vitest": "^10.2.4",
+    "@storybook/react-vite": "^10.2.4",
     "@types/lodash": "^4.17.23",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "autoprefixer": "^10.4.14",
     "concurrently": "^9.2.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^10.2.4",
+    "playwright": "^1.58.1",
     "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "storybook": "^10.2.4",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^2.3.0",
-    "storybook": "^10.2.4",
-    "@storybook/react-vite": "^10.2.4",
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-vitest": "^10.2.4",
-    "@storybook/addon-a11y": "^10.2.4",
-    "@storybook/addon-docs": "^10.2.4",
-    "@storybook/addon-onboarding": "^10.2.4",
-    "eslint-plugin-storybook": "^10.2.4",
-    "vitest": "^4.0.18",
-    "playwright": "^1.58.1",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18"
+    "vitest": "^4.0.18"
   }
 }