ml-uikit 1.0.7 → 1.0.8

package/dist/style.css

@@ -870,9 +870,6 @@ video {
 .h-10 {
   height: 2.5rem;
 }
-.h-11 {
-  height: 2.75rem;
-}
 .h-12 {
   height: 3rem;
 }
@@ -972,6 +969,9 @@ video {
 .min-h-4 {
   min-height: 1rem;
 }
+.min-h-\[120px\] {
+  min-height: 120px;
+}
 .min-h-\[200px\] {
   min-height: 200px;
 }
@@ -981,9 +981,6 @@ video {
 .min-h-\[260px\] {
   min-height: 260px;
 }
-.min-h-\[60px\] {
-  min-height: 60px;
-}
 .min-h-svh {
   min-height: 100svh;
 }
@@ -1065,6 +1062,18 @@ video {
 .w-\[100px\] {
   width: 100px;
 }
+.w-\[120px\] {
+  width: 120px;
+}
+.w-\[140px\] {
+  width: 140px;
+}
+.w-\[160px\] {
+  width: 160px;
+}
+.w-\[180px\] {
+  width: 180px;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -1118,6 +1127,9 @@ video {
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
+.min-w-\[72px\] {
+  min-width: 72px;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1127,6 +1139,12 @@ video {
 .max-w-\[--skeleton-width\] {
   max-width: var(--skeleton-width);
 }
+.max-w-\[1120px\] {
+  max-width: 1120px;
+}
+.max-w-\[760px\] {
+  max-width: 760px;
+}
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1327,12 +1345,18 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-6 {
   gap: 1.5rem;
 }
 .gap-7 {
   gap: 1.75rem;
 }
+.gap-\[13px\] {
+  gap: 13px;
+}
 .gap-y-0\.5 {
   row-gap: 0.125rem;
 }
@@ -1411,9 +1435,15 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
 .rounded-\[2px\] {
   border-radius: 2px;
 }
+.rounded-\[8px\] {
+  border-radius: 8px;
+}
 .rounded-\[calc\(var\(--radius\)-5px\)\] {
   border-radius: calc(var(--radius) - 5px);
 }
@@ -1484,6 +1514,22 @@ video {
 .border-dashed {
   border-style: dashed;
 }
+.border-\[\#26453f\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 69 63 / var(--tw-border-opacity, 1));
+}
+.border-\[\#bdbdbd\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(189 189 189 / var(--tw-border-opacity, 1));
+}
+.border-\[\#dcdcde\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 220 222 / var(--tw-border-opacity, 1));
+}
+.border-\[\#e6e6e6\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
+}
 .border-\[--color-border\] {
   border-color: var(--color-border);
 }
@@ -1496,6 +1542,9 @@ video {
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
+.border-foreground {
+  border-color: hsl(var(--foreground));
+}
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -1517,6 +1566,34 @@ video {
 .border-t-transparent {
   border-top-color: transparent;
 }
+.bg-\[\#26453f\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 69 63 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#e5f1ee\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 241 238 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#e8f6ed\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 246 237 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#f1f1f1\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 241 241 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#fafafa\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#fceaea\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 234 234 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#fff0d8\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 240 216 / var(--tw-bg-opacity, 1));
+}
 .bg-\[--color-bg\] {
   background-color: var(--color-bg);
 }
@@ -1574,6 +1651,10 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .fill-current {
   fill: currentColor;
 }
@@ -1625,9 +1706,9 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 .px-\[--cell-size\] {
   padding-left: var(--cell-size);
@@ -1645,6 +1726,10 @@ video {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1661,6 +1746,10 @@ video {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.py-\[2px\] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -1757,10 +1846,6 @@ video {
 .text-\[48px\] {
   font-size: 48px;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1799,6 +1884,9 @@ video {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
+.leading-4 {
+  line-height: 1rem;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -1841,9 +1929,49 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-\[\#0046ff\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 70 255 / var(--tw-text-opacity, 1));
+}
+.text-\[\#0f172a\] {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
+.text-\[\#26453f\] {
+  --tw-text-opacity: 1;
+  color: rgb(38 69 63 / var(--tw-text-opacity, 1));
+}
+.text-\[\#2f80ed\] {
+  --tw-text-opacity: 1;
+  color: rgb(47 128 237 / var(--tw-text-opacity, 1));
+}
+.text-\[\#307f4a\] {
+  --tw-text-opacity: 1;
+  color: rgb(48 127 74 / var(--tw-text-opacity, 1));
+}
+.text-\[\#7f7d83\] {
+  --tw-text-opacity: 1;
+  color: rgb(127 125 131 / var(--tw-text-opacity, 1));
+}
+.text-\[\#95bf47\] {
+  --tw-text-opacity: 1;
+  color: rgb(149 191 71 / var(--tw-text-opacity, 1));
+}
+.text-\[\#e49614\] {
+  --tw-text-opacity: 1;
+  color: rgb(228 150 20 / var(--tw-text-opacity, 1));
+}
+.text-\[\#e73f3f\] {
+  --tw-text-opacity: 1;
+  color: rgb(231 63 63 / var(--tw-text-opacity, 1));
+}
 .text-accent-foreground {
   color: hsl(var(--accent-foreground));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -1944,6 +2072,9 @@ video {
 .outline {
   outline-style: solid;
 }
+.outline-primary {
+  outline-color: hsl(var(--primary));
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2081,6 +2212,27 @@ video {
 .ease-linear {
   animation-timing-function: linear;
 }
+.ml-table-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: #dcdcde transparent;
+  }
+.ml-table-scroll::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+.ml-table-scroll::-webkit-scrollbar-thumb {
+    background-color: #dcdcde;
+    border-radius: 999px;
+  }
+.ml-table-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+.ml-search-input::-webkit-search-cancel-button,
+  .ml-search-input::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+  }
 .\[--cell-size\:2rem\] {
   --cell-size: 2rem;
 }
@@ -2100,6 +2252,14 @@ video {
 .file\:text-foreground::file-selector-button {
   color: hsl(var(--foreground));
 }
+.placeholder\:text-\[\#b3b3b3\]::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(179 179 179 / var(--tw-text-opacity, 1));
+}
+.placeholder\:text-\[\#b3b3b3\]::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(179 179 179 / var(--tw-text-opacity, 1));
+}
 .placeholder\:text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
@@ -2144,20 +2304,14 @@ video {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
-.hover\:bg-destructive\/80:hover {
-  background-color: hsl(var(--destructive) / 0.8);
-}
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
-.hover\:bg-muted\/50:hover {
-  background-color: hsl(var(--muted) / 0.5);
-}
-.hover\:bg-primary\/80:hover {
-  background-color: hsl(var(--primary) / 0.8);
+.hover\:bg-primary\/10:hover {
+  background-color: hsl(var(--primary) / 0.1);
 }
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
@@ -2221,6 +2375,10 @@ video {
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
+.focus-visible\:border-\[\#111111\]:focus-visible {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 17 17 / var(--tw-border-opacity, 1));
+}
 .focus-visible\:border-ring:focus-visible {
   border-color: hsl(var(--ring));
 }
@@ -2278,9 +2436,28 @@ video {
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
+.disabled\:bg-\[\#f2f2f2\]:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
+}
+.disabled\:text-\[\#9ca3af\]:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.disabled\:opacity-100:disabled {
+  opacity: 1;
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.disabled\:placeholder\:text-\[\#b3b3b3\]:disabled::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(179 179 179 / var(--tw-text-opacity, 1));
+}
+.disabled\:placeholder\:text-\[\#b3b3b3\]:disabled::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(179 179 179 / var(--tw-text-opacity, 1));
+}
 .group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
   opacity: 1;
 }
@@ -2557,9 +2734,6 @@ video {
 .data-\[state\=open\]\:bg-secondary[data-state="open"] {
   background-color: hsl(var(--secondary));
 }
-.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
-  background-color: hsl(var(--muted));
-}
 .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
   background-color: hsl(var(--input));
 }
@@ -3009,11 +3183,6 @@ video {
     padding: 3rem;
   }
 
-  .md\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
   .md\:opacity-0 {
     opacity: 0;
   }
@@ -3052,9 +3221,6 @@ video {
   border-top-left-radius: calc(var(--radius) - 2px);
   border-bottom-left-radius: calc(var(--radius) - 2px);
 }
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: 0px;
-}
 .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);
@@ -3114,10 +3280,6 @@ video {
   width: -moz-fit-content;
   width: fit-content;
 }
-.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
-  --tw-translate-y: 2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .\[\&\>a\:hover\]\:text-primary>a:hover {
   color: hsl(var(--primary));
 }
@@ -3365,19 +3527,48 @@ video {
 .\[\&_svg\]\:pointer-events-none svg {
   pointer-events: none;
 }
+.\[\&_svg\]\:size-3 svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.\[\&_svg\]\:size-3\.5 svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 .\[\&_svg\]\:size-4 svg {
   width: 1rem;
   height: 1rem;
 }
+.\[\&_svg\]\:size-5 svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .\[\&_svg\]\:shrink-0 svg {
   flex-shrink: 0;
 }
+.\[\&_thead\]\:sticky thead {
+  position: sticky;
+}
+.\[\&_thead\]\:top-0 thead {
+  top: 0px;
+}
+.\[\&_thead\]\:z-10 thead {
+  z-index: 10;
+}
+.\[\&_thead\]\:bg-\[\#fafafa\] thead {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
+}
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
 }
+.\[\&_tr\]\:border-\[\#e6e6e6\] tr {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
+}
 [data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
   right: -0.5rem;
 }

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.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/dist/index.cjs58.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=s(c),i=768;function a(){const[e,n]=r.useState(void 0);return r.useEffect(()=>{const t=window.matchMedia(`(max-width: ${i-1}px)`),o=()=>{n(window.innerWidth<i)};return t.addEventListener("change",o),n(window.innerWidth<i),()=>t.removeEventListener("change",o)},[]),!!e}exports.useIsMobile=a;
-//# sourceMappingURL=index.cjs58.js.map

package/dist/index.cjs58.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs58.js","sources":["../src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":"mYAEMA,EAAoB,IAEnB,SAASC,GAAc,CAC5B,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAM,SAA8B,MAAS,EAE7EA,OAAAA,EAAM,UAAU,IAAM,CACpB,MAAMC,EAAM,OAAO,WAAW,eAAeL,EAAoB,CAAC,KAAK,EACjEM,EAAW,IAAM,CACrBH,EAAY,OAAO,WAAaH,CAAiB,CACnD,EACA,OAAAK,EAAI,iBAAiB,SAAUC,CAAQ,EACvCH,EAAY,OAAO,WAAaH,CAAiB,EAC1C,IAAMK,EAAI,oBAAoB,SAAUC,CAAQ,CACzD,EAAG,CAAA,CAAE,EAEE,CAAC,CAACJ,CACX"}

package/dist/index.es58.js

@@ -1,15 +0,0 @@
-import * as o from "react";
-const e = 768;
-function r() {
-  const [s, n] = o.useState(void 0);
-  return o.useEffect(() => {
-    const t = window.matchMedia(`(max-width: ${e - 1}px)`), i = () => {
-      n(window.innerWidth < e);
-    };
-    return t.addEventListener("change", i), n(window.innerWidth < e), () => t.removeEventListener("change", i);
-  }, []), !!s;
-}
-export {
-  r as useIsMobile
-};
-//# sourceMappingURL=index.es58.js.map

package/dist/index.es58.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es58.js","sources":["../src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC5B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM,SAA8B,MAAS;AAE7E,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACrB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IACnD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACzD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACX;"}