@quillsql/react 1.1.1 → 1.1.2

package/src/PieChart.tsx

@@ -135,7 +135,7 @@ const ChartLegend = (categories: string[], colors: string[]) => {
   //   });
 
   return (
-    <div ref={legendRef} className="flex items-center justify-end">
+    <div ref={legendRef} className="qq-flex qq-items-center qq-justify-end">
       <Legend
         // @ts-ignore
         categories={categories}
@@ -387,7 +387,7 @@ export const ChartTooltipFrame = ({
 }) => (
   <div
     // style={{ transform: 'translateX(-120px)' }}
-    className="bg-white text-sm rounded-md border shadow-lg"
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-border qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -412,8 +412,8 @@ export const ChartTooltipRow = ({
   name,
   color,
 }: ChartTooltipRowProps) => (
-  <div className="flex items-center justify-between space-x-8">
-    <div className="flex items-center space-x-2">
+  <div className="qq-flex qq-items-center qq-justify-between qq-space-x-8">
+    <div className="qq-flex qq-items-center qq-space-x-2">
       <span
         style={{ background: color, borderWidth: 2, borderColor: 'white' }}
         className={twMerge(
@@ -423,10 +423,10 @@ export const ChartTooltipRow = ({
           // 'border-black',
           // sizing.sm.height,
           // sizing.sm.width,
-          'h-3',
-          'w-3',
-          'shadow',
-          'rounded-full'
+          'qq-h-3',
+          'qq-w-3',
+          'qq-shadow',
+          'qq-rounded-full'
           // border.md.all,
           // boxShadow.md
         )}
@@ -436,16 +436,16 @@ export const ChartTooltipRow = ({
         //   'font-medium tabular-nums text-right whitespace-nowrap',
         //   'text-[#212121] !important'
         // )}
-        className="font-medium tabular-nums text-right whitespace-nowrap text-black"
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
     </div>
     <p
       className={twMerge(
-        'text-right whitespace-nowrap',
+        'qq-text-right qq-whitespace-nowrap',
         // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        'text-gray-500'
+        'qq-text-gray-500'
         // fontWeight.sm
       )}
     >
@@ -471,7 +471,7 @@ export const DonutChartTooltip = ({
       <ChartTooltipFrame>
         <div
           //   style={{ transform: 'translateX(-120px)' }}
-          className={twMerge('px-4', 'py-2')}
+          className={twMerge('qq-px-4', 'qq-py-2')}
         >
           <ChartTooltipRow
             value={valueFormatter(payloadRow.value)}
@@ -825,7 +825,7 @@ function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
                 display: 'block',
                 maxWidth: 120,
               }}
-              className="text-sm text-gray-600 whitespace-nowrap overflow-hidden overflow-ellipsis text-sm font-normal"
+              className="qq-text-sm qq-text-gray-600 qq-whitespace-nowrap qq-overflow-hidden qq-overflow-ellipsis qq-text-sm qq-font-normal"
             >
               {item.value}
             </div>

package/src/components/Dropdown/Dropdown.tsx

@@ -92,7 +92,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
         onKeyDown={handleKeyDown}
         className={twMerge(
           makeDropdownClassName('root'),
-          'relative w-full min-w-[10rem]',
+          'qq-relative qq-w-full qq-min-w-[10rem]',
           className
         )}
         {...other}
@@ -101,7 +101,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           type="button"
           className={twMerge(
             makeDropdownClassName('button'),
-            'flex justify-between items-center w-full focus:outline-none focus:ring-2',
+            'qq-flex qq-justify-between qq-items-center qq-w-full focus:qq-outline-none focus:qq-ring-2',
             getSelectButtonColors(hasSelection, disabled),
             getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
               .focusRingColor,
@@ -115,12 +115,12 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           onClick={() => setIsFocused(!isFocused)}
           disabled={disabled}
         >
-          <div className="flex justify-start items-center truncate">
+          <div className="qq-flex qq-justify-start qq-items-center qq-truncate">
             {Icon ? (
               <Icon
                 className={twMerge(
                   makeDropdownClassName('icon'),
-                  'shrink-0',
+                  'qq-shrink-0',
                   sizing.lg.height,
                   sizing.lg.width,
                   getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
@@ -133,7 +133,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
             <p
               className={twMerge(
                 makeDropdownClassName('text'),
-                'whitespace-nowrap truncate',
+                'qq-whitespace-nowrap qq-truncate',
                 fontSize.sm,
                 fontWeight.md
               )}
@@ -146,7 +146,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           <ArrowDownHeadIcon
             className={twMerge(
               makeDropdownClassName('arrowDownIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,

package/src/components/Dropdown/DropdownItem.tsx

@@ -46,7 +46,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
         onClick={() => handleValueChange?.(value)}
         className={twMerge(
           makeDropdownItemClassName('root'),
-          'flex items-center justify-start w-full truncate',
+          'qq-flex qq-items-center qq-justify-start qq-w-full qq-truncate',
           spacing.twoXl.paddingX,
           spacing.md.paddingY,
           fontSize.sm,
@@ -60,7 +60,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
           <Icon
             className={twMerge(
               makeDropdownItemClassName('icon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.lg.marginRight,
@@ -73,7 +73,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
         <p
           className={twMerge(
             makeDropdownItemClassName('text'),
-            'text-sm whitespace-nowrap truncate'
+            'qq-text-sm qq-whitespace-nowrap qq-truncate'
           )}
         >
           {text ?? value}

package/src/components/Modal/Modal.tsx

@@ -88,8 +88,8 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     <div
       ref={mergeRefs([modalRef, ref])}
       className={twMerge(
-        'absolute z-10 divide-y overflow-y-auto',
-        width ? '' : 'w-full',
+        'qq-absolute qq-z-10 qq-divide-y qq-overflow-y-auto',
+        width ? '' : 'qq-w-full',
         getAbsoluteSpacing(),
         maxHeight,
         getColorClassNames('white').bgColor,