@neoptocom/neopto-ui 0.9.8 → 0.10.0

package/dist/index.cjs

@@ -301,7 +301,8 @@ function Modal({
   }, [open, onClose]);
   if (!mounted) return null;
   const hasMaxWidth = className?.includes("max-w-");
-  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
+  const hasMaxHeight = className?.includes("max-h-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${!hasMaxHeight ? "max-h-[80vh]" : ""} ${className || ""}`.trim();
   const modal = /* @__PURE__ */ jsxRuntime.jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
     BackgroundBlur,
     {

package/dist/index.js

@@ -280,7 +280,8 @@ function Modal({
   }, [open, onClose]);
   if (!mounted) return null;
   const hasMaxWidth = className?.includes("max-w-");
-  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
+  const hasMaxHeight = className?.includes("max-h-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${!hasMaxHeight ? "max-h-[80vh]" : ""} ${className || ""}`.trim();
   const modal = /* @__PURE__ */ jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsx(
     BackgroundBlur,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.9.8",
+  "version": "0.10.0",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Modal.tsx

@@ -84,7 +84,8 @@ export function Modal({
 
   // Smart class merging: only add defaults if not provided
   const hasMaxWidth = className?.includes("max-w-");
-  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
+  const hasMaxHeight = className?.includes("max-h-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${!hasMaxHeight ? "max-h-[80vh]" : ""} ${className || ""}`.trim();
 
   const modal = (
     <div className={isDark ? "dark" : ""}>

package/src/styles/library.css

@@ -33,3 +33,65 @@
 .btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
 .btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }
 .btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }
+
+/* Unified Scrollbar Styles */
+:root {
+  --scrollbar-width: 6px;
+  --scrollbar-thumb: #797980;
+  --scrollbar-thumb-hover: #9C9C9C;
+  --scrollbar-track: transparent;
+}
+
+.dark {
+  --scrollbar-thumb: #4b4d59;
+  --scrollbar-thumb-hover: #797980;
+}
+
+/* Default scrollbar - applies to most scrollable containers */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 1rem;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 1rem;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: padding-box;
+}
+
+/* Scrollbar width variants */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-medium::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Hide scrollbar utility */
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}