react-restyle-components 0.4.51 → 0.4.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts +4 -102
  2. package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js +4 -2
  3. package/lib/src/core-components/src/components/Modal/BasicModal/types.d.ts +103 -0
  4. package/lib/src/core-components/src/components/Modal/BasicModal/types.js +1 -0
  5. package/lib/src/core-components/src/components/Table/Table.js +13 -2
  6. package/lib/src/core-components/src/tc.global.css +4 -0
  7. package/package.json +1 -1
package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts CHANGED
@@ -1,102 +1,4 @@
1
- import React, { CSSProperties } from 'react';
2
- export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
3
- export type ModalPosition = 'center' | 'top' | 'bottom';
4
- export interface ModalClassNames {
5
- /** Custom className for the overlay */
6
- overlay?: string;
7
- /** Custom className for the modal container */
8
- container?: string;
9
- /** Custom className for the modal wrapper */
10
- wrapper?: string;
11
- /** Custom className for the modal content */
12
- content?: string;
13
- /** Custom className for the header */
14
- header?: string;
15
- /** Custom className for the title */
16
- title?: string;
17
- /** Custom className for the close button */
18
- closeButton?: string;
19
- /** Custom className for the body/children container */
20
- body?: string;
21
- }
22
- export interface ModalStyles {
23
- /** Custom style for the overlay */
24
- overlay?: CSSProperties;
25
- /** Custom style for the modal container */
26
- container?: CSSProperties;
27
- /** Custom style for the modal wrapper */
28
- wrapper?: CSSProperties;
29
- /** Custom style for the modal content */
30
- content?: CSSProperties;
31
- /** Custom style for the header */
32
- header?: CSSProperties;
33
- /** Custom style for the title */
34
- title?: CSSProperties;
35
- /** Custom style for the close button */
36
- closeButton?: CSSProperties;
37
- /** Custom style for the body/children container */
38
- body?: CSSProperties;
39
- }
40
- export interface ModalProps {
41
- /** Controls modal visibility */
42
- visible: boolean;
43
- /** Modal title text */
44
- title?: string;
45
- /** Additional className for the modal container */
46
- className?: string;
47
- /** Additional className for the modal content */
48
- contentClassName?: string;
49
- /** Additional className for the header */
50
- headerClassName?: string;
51
- /** Inline styles for the modal container */
52
- style?: React.CSSProperties;
53
- /** Inline styles for the modal content */
54
- contentStyle?: React.CSSProperties;
55
- /** Callback when modal should close */
56
- onClose?: () => void;
57
- /** Auto close modal after delay (in milliseconds) */
58
- isAutoClose?: boolean | number;
59
- /** Auto close delay in milliseconds (default: 1000) */
60
- autoCloseDelay?: number;
61
- /** Modal size: sm, md, lg, xl, full */
62
- size?: ModalSize;
63
- /** Modal vertical position */
64
- position?: ModalPosition;
65
- /** Show/hide close button */
66
- showCloseButton?: boolean;
67
- /** Custom close button element */
68
- closeButton?: React.ReactNode;
69
- /** Overlay background opacity (0-1) */
70
- overlayOpacity?: number;
71
- /** Overlay background color */
72
- overlayColor?: string;
73
- /** Base z-index for overlay/content stack */
74
- zIndex?: number;
75
- /** Click overlay to close */
76
- closeOnOverlayClick?: boolean;
77
- /** Close on Escape key */
78
- closeOnEscape?: boolean;
79
- /** Show header section */
80
- showHeader?: boolean;
81
- /** Header background color */
82
- headerBgColor?: string;
83
- /** Header text color */
84
- headerTextColor?: string;
85
- /** Border radius */
86
- borderRadius?: string;
87
- /** Max width (CSS value) */
88
- maxWidth?: string;
89
- /** Padding for content area */
90
- contentPadding?: string;
91
- /** Header padding */
92
- headerPadding?: string;
93
- /** Animation duration (in ms) */
94
- animationDuration?: number;
95
- /** Custom classNames for component parts */
96
- classNames?: ModalClassNames;
97
- /** Custom inline styles for component parts */
98
- styles?: ModalStyles;
99
- /** Modal content */
100
- children: React.ReactNode;
101
- }
102
- export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;
1
+ import React from 'react';
2
+ export type { ModalSize, ModalPosition, ModalClassNames, ModalStyles, ModalProps } from './types';
3
+ import type { ModalProps } from './types';
4
+ export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, isAutoCloseOutside, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;
package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js CHANGED
@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { useEffect, useState } from 'react';
3
3
  import s from '../../../tc.module.css';
4
4
  import { cn } from '../../../utils';
5
- export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
5
+ export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, isAutoCloseOutside, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
6
+ // isAutoCloseOutside takes priority, then closeOnOverlayClick, default true
7
+ const shouldCloseOnOutsideClick = isAutoCloseOutside ?? closeOnOverlayClick ?? true;
6
8
  const [showModal, setShowModal] = useState(visible);
7
9
  const [isAnimating, setIsAnimating] = useState(false);
8
10
  useEffect(() => {
@@ -36,7 +38,7 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
36
38
  return () => document.removeEventListener('keydown', handleEscape);
37
39
  }, [showModal, closeOnEscape, onClose]);
38
40
  const handleOverlayClick = (e) => {
39
- if (closeOnOverlayClick && e.target === e.currentTarget) {
41
+ if (shouldCloseOnOutsideClick && e.target === e.currentTarget) {
40
42
  onClose && onClose();
41
43
  }
42
44
  };
package/lib/src/core-components/src/components/Modal/BasicModal/types.d.ts ADDED
@@ -0,0 +1,103 @@
1
+ import React, { CSSProperties } from 'react';
2
+ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
3
+ export type ModalPosition = 'center' | 'top' | 'bottom';
4
+ export interface ModalClassNames {
5
+ /** Custom className for the overlay */
6
+ overlay?: string;
7
+ /** Custom className for the modal container */
8
+ container?: string;
9
+ /** Custom className for the modal wrapper */
10
+ wrapper?: string;
11
+ /** Custom className for the modal content */
12
+ content?: string;
13
+ /** Custom className for the header */
14
+ header?: string;
15
+ /** Custom className for the title */
16
+ title?: string;
17
+ /** Custom className for the close button */
18
+ closeButton?: string;
19
+ /** Custom className for the body/children container */
20
+ body?: string;
21
+ }
22
+ export interface ModalStyles {
23
+ /** Custom style for the overlay */
24
+ overlay?: CSSProperties;
25
+ /** Custom style for the modal container */
26
+ container?: CSSProperties;
27
+ /** Custom style for the modal wrapper */
28
+ wrapper?: CSSProperties;
29
+ /** Custom style for the modal content */
30
+ content?: CSSProperties;
31
+ /** Custom style for the header */
32
+ header?: CSSProperties;
33
+ /** Custom style for the title */
34
+ title?: CSSProperties;
35
+ /** Custom style for the close button */
36
+ closeButton?: CSSProperties;
37
+ /** Custom style for the body/children container */
38
+ body?: CSSProperties;
39
+ }
40
+ export interface ModalProps {
41
+ /** Controls modal visibility */
42
+ visible: boolean;
43
+ /** Modal title text */
44
+ title?: string;
45
+ /** Additional className for the modal container */
46
+ className?: string;
47
+ /** Additional className for the modal content */
48
+ contentClassName?: string;
49
+ /** Additional className for the header */
50
+ headerClassName?: string;
51
+ /** Inline styles for the modal container */
52
+ style?: CSSProperties;
53
+ /** Inline styles for the modal content */
54
+ contentStyle?: CSSProperties;
55
+ /** Callback when modal should close */
56
+ onClose?: () => void;
57
+ /** Auto close modal after delay (in milliseconds) */
58
+ isAutoClose?: boolean | number;
59
+ /** Auto close delay in milliseconds (default: 1000) */
60
+ autoCloseDelay?: number;
61
+ /** Auto close modal on outside click (default: true) */
62
+ isAutoCloseOutside?: boolean;
63
+ /** Modal size: sm, md, lg, xl, full */
64
+ size?: ModalSize;
65
+ /** Modal vertical position */
66
+ position?: ModalPosition;
67
+ /** Show/hide close button */
68
+ showCloseButton?: boolean;
69
+ /** Custom close button element */
70
+ closeButton?: React.ReactNode;
71
+ /** Overlay background opacity (0-1) */
72
+ overlayOpacity?: number;
73
+ /** Overlay background color */
74
+ overlayColor?: string;
75
+ /** Base z-index for overlay/content stack */
76
+ zIndex?: number;
77
+ /** Click overlay to close (alias for isAutoCloseOutside) */
78
+ closeOnOverlayClick?: boolean;
79
+ /** Close on Escape key */
80
+ closeOnEscape?: boolean;
81
+ /** Show header section */
82
+ showHeader?: boolean;
83
+ /** Header background color */
84
+ headerBgColor?: string;
85
+ /** Header text color */
86
+ headerTextColor?: string;
87
+ /** Border radius */
88
+ borderRadius?: string;
89
+ /** Max width (CSS value) */
90
+ maxWidth?: string;
91
+ /** Padding for content area */
92
+ contentPadding?: string;
93
+ /** Header padding */
94
+ headerPadding?: string;
95
+ /** Animation duration (in ms) */
96
+ animationDuration?: number;
97
+ /** Custom classNames for component parts */
98
+ classNames?: ModalClassNames;
99
+ /** Custom inline styles for component parts */
100
+ styles?: ModalStyles;
101
+ /** Modal content */
102
+ children: React.ReactNode;
103
+ }
package/lib/src/core-components/src/components/Table/Table.js CHANGED
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
4
4
  import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, TableCellContent, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, ColumnToggleDragHandle, SelectionIndicator, SelectionCount, } from './elements';
5
5
  import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
@@ -969,7 +969,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
969
969
  };
970
970
  editorRendererCacheRef.current.set(cacheKey, column.editorRenderer(editorProps, editValue, row, column, rowIndex, colIndex));
971
971
  }
972
- return editorRendererCacheRef.current.get(cacheKey);
972
+ const formatterContent = column.formatter
973
+ ? column.formatter(value, row, rowIndex, colIndex)
974
+ : value !== null && value !== undefined
975
+ ? typeof value === 'boolean'
976
+ ? value
977
+ ? 'Yes'
978
+ : 'No'
979
+ : typeof value === 'object'
980
+ ? JSON.stringify(value)
981
+ : String(value)
982
+ : '';
983
+ return (_jsxs(_Fragment, { children: [formatterContent, editorRendererCacheRef.current.get(cacheKey)] }));
973
984
  }
974
985
  // Default editor
975
986
  return (_jsx(CellEditor, { type: column.editorType === 'number' ? 'number' : 'text', value: editValue ?? '', onChange: (e) => setEditValue(e.target.value), onBlur: () => handleCellEditComplete(row, rowIndex, column), onKeyDown: (e) => {
package/lib/src/core-components/src/tc.global.css CHANGED
@@ -14,5 +14,9 @@
14
14
  /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
15
15
  /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
16
16
  /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
17
+ /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
18
+ /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
19
+ /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
20
+ /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
17
21
  /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
18
22
  /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.\!filter,.backdrop-blur-sm,.blur,.ring,.ring-2,.shadow,.shadow-inner,body{font-family:Arima Regular;font-size:14px}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.top-1\/2{top:50%}.-translate-x-1\/2,.-translate-x-1\/2,.-translate-y-1\/2{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))}.-translate-y-1\/2{--tw-translate-y:-50%}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.\!filter,.blur,.ring,.ring-2,.shadow,.shadow-inner,.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.top-1\/2{top:50%}.flex-grow,.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{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))}.-translate-y-1\/2{--tw-translate-y:-50%}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.4.51",
3
+ "version": "0.4.53",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {