@mendylanda/ui 0.1.1 → 0.1.3

package/dist/styles.css

@@ -13,6 +13,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --tracking-widest: 0.1em;
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
     --animate-pulse: mendy-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -60,9 +61,6 @@
   .mui-cea70f23972e:where([data-mendy-ui], [data-mendy-ui] *) {
     inset-inline-start: calc(var(--spacing) * 3);
   }
-  .mui-96a350bd3168:where([data-mendy-ui], [data-mendy-ui] *) {
-    inset-inline-start: calc(var(--spacing) * 4);
-  }
   .mui-361e48d0308f:where([data-mendy-ui], [data-mendy-ui] *) {
     inset-inline-end: var(--spacing);
   }
@@ -78,9 +76,6 @@
   .mui-4e45f4841abb:where([data-mendy-ui], [data-mendy-ui] *) {
     top: calc(1 / 2 * 100%);
   }
-  .mui-866c339ea145:where([data-mendy-ui], [data-mendy-ui] *) {
-    left: calc(var(--spacing) * 4);
-  }
   .mui-3eef1ce97dba:where([data-mendy-ui], [data-mendy-ui] *) {
     z-index: 50;
   }
@@ -117,6 +112,9 @@
   .mui-958e2cfcf5b6:where([data-mendy-ui], [data-mendy-ui] *) {
     margin-inline-start: calc(var(--spacing) * -2);
   }
+  .mui-291952c2525a:where([data-mendy-ui], [data-mendy-ui] *) {
+    margin-inline-start: -1px;
+  }
   .mui-8cc46fa87f41:where([data-mendy-ui], [data-mendy-ui] *) {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
@@ -129,6 +127,9 @@
   .mui-496aca80e4d8:where([data-mendy-ui], [data-mendy-ui] *) {
     display: block;
   }
+  .mui-d1b2a59fbea7:where([data-mendy-ui], [data-mendy-ui] *) {
+    display: contents;
+  }
   .mui-222f930b8752:where([data-mendy-ui], [data-mendy-ui] *) {
     display: flex;
   }
@@ -158,10 +159,6 @@
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
   }
-  .mui-9e7600197f38:where([data-mendy-ui], [data-mendy-ui] *) {
-    width: calc(var(--spacing) * 2);
-    height: calc(var(--spacing) * 2);
-  }
   .mui-61c000c8a98a:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -209,6 +206,9 @@
   .mui-fdd2f85cad6b:where([data-mendy-ui], [data-mendy-ui] *) {
     height: calc(var(--spacing) * 10);
   }
+  .mui-2bf5d58a824b:where([data-mendy-ui], [data-mendy-ui] *) {
+    height: calc(var(--spacing) * 12);
+  }
   .mui-a66e9985b093:where([data-mendy-ui], [data-mendy-ui] *) {
     height: auto;
   }
@@ -260,11 +260,11 @@
   .mui-37535002f0f7:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 72);
   }
-  .mui-919182384559:where([data-mendy-ui], [data-mendy-ui] *) {
-    width: 18.75rem;
+  .mui-0b9c84552e40:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem));
   }
-  .mui-8dd3eece40db:where([data-mendy-ui], [data-mendy-ui] *) {
-    width: var(--mendy-filter-menu-width,32rem);
+  .mui-bd8a502f98ae:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: var(--mendy-filter-menu-width,calc(var(--filter-list-width) + 19rem));
   }
   .mui-8cfb5a42ef9f:where([data-mendy-ui], [data-mendy-ui] *) {
     width: fit-content;
@@ -327,8 +327,8 @@
   .mui-ae112c903ef8:where([data-mendy-ui], [data-mendy-ui] *) {
     resize: vertical;
   }
-  .mui-da607d0a2538:where([data-mendy-ui], [data-mendy-ui] *) {
-    grid-template-columns: min(var(--mendy-filter-list-width,13rem), 50%) minmax(0,1fr);
+  .mui-a3c6c8c31aed:where([data-mendy-ui], [data-mendy-ui] *) {
+    grid-template-columns: min(var(--filter-list-width), calc(100% - min(19rem, 50%))) minmax(0,1fr);
   }
   .mui-b5985369ee35:where([data-mendy-ui], [data-mendy-ui] *) {
     grid-template-rows: minmax(0,1fr);
@@ -366,6 +366,9 @@
   .mui-074569488cca:where([data-mendy-ui], [data-mendy-ui] *) {
     gap: calc(var(--spacing) * 2);
   }
+  .mui-d7db3451d154:where([data-mendy-ui], [data-mendy-ui] *) {
+    gap: calc(var(--spacing) * 3);
+  }
   .mui-90fc3ec35a37:where([data-mendy-ui], [data-mendy-ui] *) {
     gap: calc(var(--spacing) * 4);
   }
@@ -391,6 +394,9 @@
   .mui-d5111d0e9f48:where([data-mendy-ui], [data-mendy-ui] *) {
     overflow: hidden;
   }
+  .mui-0fc84a692dad:where([data-mendy-ui], [data-mendy-ui] *) {
+    overflow: visible;
+  }
   .mui-3b82279f859f:where([data-mendy-ui], [data-mendy-ui] *) {
     overflow-x: hidden;
   }
@@ -412,6 +418,14 @@
   .mui-02e603944040:where([data-mendy-ui], [data-mendy-ui] *) {
     border-radius: max(0px, calc(var(--radius, 0.5rem) - 4px));
   }
+  .mui-b31810dbd8a9:where([data-mendy-ui], [data-mendy-ui] *) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .mui-a22ea0ba562a:where([data-mendy-ui], [data-mendy-ui] *) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .mui-10c0bae8cba9:where([data-mendy-ui], [data-mendy-ui] *) {
     border-top-left-radius: max(0px, calc(var(--radius, 0.5rem) - 2px));
     border-bottom-left-radius: max(0px, calc(var(--radius, 0.5rem) - 2px));
@@ -490,9 +504,6 @@
   .mui-8fca9236d191:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: transparent;
   }
-  .mui-717b342c2d01:where([data-mendy-ui], [data-mendy-ui] *) {
-    fill: currentcolor;
-  }
   .mui-04760bcd507f:where([data-mendy-ui], [data-mendy-ui] *) {
     padding: calc(var(--spacing) * 0);
   }
@@ -541,6 +552,9 @@
   .mui-05d4103bd67f:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-inline-end: calc(var(--spacing) * 2);
   }
+  .mui-a202804a1738:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding-inline-end: calc(var(--spacing) * 3);
+  }
   .mui-0e14c365f9e8:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-inline-end: calc(var(--spacing) * 9);
   }
@@ -550,15 +564,15 @@
   .mui-0a702d97ed7d:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-top: calc(var(--spacing) * 3);
   }
+  .mui-be02e79e6a27:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding-top: calc(var(--spacing) * 3) !important;
+  }
   .mui-1a52da5bc88c:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-right: calc(var(--spacing) * 1);
   }
   .mui-f5d8e661d857:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-left: calc(var(--spacing) * 2);
   }
-  .mui-75b27e813dcc:where([data-mendy-ui], [data-mendy-ui] *) {
-    padding-left: calc(var(--spacing) * 8);
-  }
   .mui-05ab12448317:where([data-mendy-ui], [data-mendy-ui] *) {
     text-align: center;
   }
@@ -661,6 +675,10 @@
     --mendy-tw-shadow: 0 4px 6px -1px var(--mendy-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--mendy-tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
   }
+  .mui-89c3006b2722:where([data-mendy-ui], [data-mendy-ui] *) {
+    --mendy-tw-shadow: 0 0 #0000;
+    box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
+  }
   .mui-7de07d413c13:where([data-mendy-ui], [data-mendy-ui] *) {
     --mendy-tw-shadow: 0 1px 2px 0 var(--mendy-tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
@@ -677,9 +695,19 @@
     outline-style: var(--mendy-tw-outline-style);
     outline-width: 1px;
   }
+  .mui-e0122edc668b:where([data-mendy-ui], [data-mendy-ui] *) {
+    --mendy-tw-drop-shadow-size: drop-shadow(0 3px 3px var(--mendy-tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
+    --mendy-tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
+    filter: var(--mendy-tw-blur,) var(--mendy-tw-brightness,) var(--mendy-tw-contrast,) var(--mendy-tw-grayscale,) var(--mendy-tw-hue-rotate,) var(--mendy-tw-invert,) var(--mendy-tw-saturate,) var(--mendy-tw-sepia,) var(--mendy-tw-drop-shadow,);
+  }
   .mui-dfc3376b8266:where([data-mendy-ui], [data-mendy-ui] *) {
     filter: var(--mendy-tw-blur,) var(--mendy-tw-brightness,) var(--mendy-tw-contrast,) var(--mendy-tw-grayscale,) var(--mendy-tw-hue-rotate,) var(--mendy-tw-invert,) var(--mendy-tw-saturate,) var(--mendy-tw-sepia,) var(--mendy-tw-drop-shadow,);
   }
+  .mui-70dd37c11434:where([data-mendy-ui], [data-mendy-ui] *) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --mendy-tw-gradient-from, --mendy-tw-gradient-via, --mendy-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
+  }
   .mui-eae178841c68:where([data-mendy-ui], [data-mendy-ui] *) {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --mendy-tw-gradient-from, --mendy-tw-gradient-via, --mendy-tw-gradient-to;
     transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
@@ -712,8 +740,11 @@
   .mui-82c2977beb8e:where([data-mendy-ui], [data-mendy-ui] *) {
     --cell-size: min(2rem, calc((100vw - 3.5rem) / 7));
   }
-  .mui-5662a94d9dba:where([data-mendy-ui], [data-mendy-ui] *) {
-    --filter-menu-height: min(30rem, var(--radix-dropdown-menu-content-available-height,30rem));
+  .mui-d7d803c609c5:where([data-mendy-ui], [data-mendy-ui] *) {
+    --filter-list-width: var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,13rem));
+  }
+  .mui-971625533e56:where([data-mendy-ui], [data-mendy-ui] *) {
+    --filter-menu-height: min(var(--mendy-filter-menu-max-height,44rem), var(--radix-dropdown-menu-content-available-height,44rem));
   }
   .mui-cacb19aa9640:where([data-mendy-ui], [data-mendy-ui] *) {
     scrollbar-width: thin;
@@ -795,10 +826,29 @@
       color: var(--muted-foreground, #737373);
     }
   }
-  .mui-4fa4c190281c:where([data-mendy-ui], [data-mendy-ui] *) {
-    &:first-child {
+  .mui-a267680f9f49:where([data-mendy-ui], [data-mendy-ui] *) {
+    &::before {
+      content: var(--mendy-tw-content);
+      position: absolute;
+    }
+  }
+  .mui-e22234c7b474:where([data-mendy-ui], [data-mendy-ui] *) {
+    &::before {
+      content: var(--mendy-tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .mui-4d24300d447b:where([data-mendy-ui], [data-mendy-ui] *) {
+    &::before {
+      content: var(--mendy-tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .mui-37a30b916086:where([data-mendy-ui], [data-mendy-ui] *) {
+    &::before {
+      content: var(--mendy-tw-content);
       border-top-style: var(--mendy-tw-border-style);
-      border-top-width: 0px;
+      border-top-width: 1px;
     }
   }
   .mui-37ad15a95595:where([data-mendy-ui], [data-mendy-ui] *) {
@@ -1234,29 +1284,6 @@
       }
     }
   }
-  .mui-5e49f8678d00:where([data-mendy-ui], [data-mendy-ui] *) {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: mendy-enter var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
-    }
-  }
-  .mui-b225f0361d28:where([data-mendy-ui], [data-mendy-ui] *) {
-    @media (prefers-reduced-motion: no-preference) {
-      --mendy-tw-duration: 200ms;
-      transition-duration: 200ms;
-    }
-  }
-  .mui-3bc474178684:where([data-mendy-ui], [data-mendy-ui] *) {
-    @media (prefers-reduced-motion: no-preference) {
-      --mendy-tw-enter-opacity: calc(0/100);
-      --mendy-tw-enter-opacity: 0;
-    }
-  }
-  .mui-bc94a66158a3:where([data-mendy-ui], [data-mendy-ui] *) {
-    @media (prefers-reduced-motion: no-preference) {
-      animation-fill-mode: backwards;
-      --mendy-tw-animation-fill-mode: backwards;
-    }
-  }
   .mui-237747164b60:where([data-mendy-ui], [data-mendy-ui] *) {
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -1839,8 +1866,9 @@
   syntax: "*";
   inherits: false;
 }
-@property --mendy-tw-duration {
+@property --mendy-tw-content {
   syntax: "*";
+  initial-value: "";
   inherits: false;
 }
 @keyframes mendy-pulse {
@@ -1906,7 +1934,7 @@
       --mendy-tw-drop-shadow-color: initial;
       --mendy-tw-drop-shadow-alpha: 100%;
       --mendy-tw-drop-shadow-size: initial;
-      --mendy-tw-duration: initial;
+      --mendy-tw-content: "";
       --mendy-tw-animation-delay: 0s;
       --mendy-tw-animation-direction: normal;
       --mendy-tw-animation-duration: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Mendy Landa’s reusable React components. Typed filters with dynamic options, URL persistence, and customizable UI.",
   "homepage": "https://ui.mendylanda.com",
   "license": "MIT",
@@ -62,12 +62,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "prepack": "pnpm build"
+  },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.11.0",
+    "motion": "12.34.2",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.5.0"
@@ -91,9 +97,5 @@
     "nuqs": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit"
   }
-}
+}