@pk-design/react-tailwind 1.1.2 → 1.1.4

package/dist/react-tailwind.es.js

@@ -344,14 +344,15 @@ const Breadcrumb = ({ items, render }) => {
 };
 Breadcrumb.displayName = 'Breadcrumb';
 
-const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-800';
-const Card = forwardRef((props, ref) => {
+const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-900 block';
+const Card = forwardRef(({ as, ...props }, ref) => {
     // Remove Card-only props from rest (avoid leaking to DOM)
-    const { as: Element = 'div', hoverable = false, bordered = false, noPadding = false, ...rest } = props;
+    const { hoverable = false, bordered = true, compact = false, zeroPadding = false, ...rest } = props;
+    const Component = as || 'div';
     // Extract className safely from rest
     const { className, ...cleanRest } = rest;
-    const classes = buildClassName(BASE_CARD_CLASS, !noPadding && 'p-2 md:p-4', hoverable && 'shadow hover:shadow-md transition-shadow duration-200', bordered && 'border border-gray-200 dark:border-gray-700', className);
-    return jsx(Element, { ref: ref, className: classes, ...cleanRest });
+    const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-gray-200 dark:border-gray-800', className);
+    return jsx(Component, { ref: ref, className: classes, ...cleanRest });
 });
 Card.displayName = 'Card';
 
@@ -850,7 +851,7 @@ const Input = forwardRef((props, ref) => {
     const hasError = Boolean(error);
     const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 Input.displayName = 'Input';
 
@@ -2064,25 +2065,31 @@ const VirtualizedDataTable = ({ items, columns, sorting = {}, onSort, loading =
 };
 
 const useIsMobile = () => {
-    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+    const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
-        function handleResize() {
-            setIsMobile(window.innerWidth < 768);
-        }
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        const detect = () => {
+            const width = window.innerWidth;
+            const isTouch = navigator.maxTouchPoints > 1 || window.matchMedia('(pointer: coarse)').matches;
+            setIsMobile(width < 600 && isTouch);
+        };
+        detect();
+        window.addEventListener('resize', detect);
+        return () => window.removeEventListener('resize', detect);
     }, []);
     return isMobile;
 };
 
 const useIsTablet = () => {
-    const [isTablet, setIsTablet] = useState(window.innerWidth < 768 && window.innerHeight > 960);
+    const [isTablet, setIsTablet] = useState(false);
     useEffect(() => {
-        function handleResize() {
-            setIsTablet(window.innerWidth > 768 && window.innerHeight < 960);
-        }
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        const detect = () => {
+            const width = window.innerWidth;
+            const isTouch = navigator.maxTouchPoints > 1 || window.matchMedia('(pointer: coarse)').matches;
+            setIsTablet(width >= 600 && width <= 1024 && isTouch);
+        };
+        detect();
+        window.addEventListener('resize', detect);
+        return () => window.removeEventListener('resize', detect);
     }, []);
     return isTablet;
 };