lines-overlay 0.1.16 → 0.1.18

package/components/config-button.tsx

@@ -1,60 +1,89 @@
-import { ChevronDown, ChevronUp, X } from 'lucide-react';
-import { MouseEvent } from 'react';
-import { StateSetter } from '../types';
-import { Button, Icon, Separator } from '../ui/index';
-
-export function ConfigButton({
-  onToggleConfig,
-  open,
-  setShow,
-}: {
-  open: boolean;
-  onToggleConfig: () => void;
-  setShow: StateSetter<boolean>;
-}) {
-  const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {
-    if (item === 1) {
-      onToggleConfig();
-    } else {
-      e.stopPropagation();
-      setShow((v) => !v);
-    }
-  };
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: 8,
-        right: 8,
-        zIndex: 9999,
-        pointerEvents: 'auto',
-      }}
-      className="h-10 border bg-white/66 shadow-sm flex items-center pl-[0.9em] pr-1">
-      <span className="font-medium text-sm-button tracking-wide pr-2">Configurar</span>
-
-      <div className="h-full flex items-center gap-1">
-        {[1, 2, 3].map((item) =>
-          item !== 2 ? (
-            <Button
-              variant={'transparent'}
-              size="icon-sm"
-              data-black
-              key={item}
-              onClick={(e) => {
-                handleClick(e, item);
-              }}>
-              {item === 1 ? (
-                <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth="light" />
-              ) : (
-                <Icon Icon={X} size="sm" className="text-red-600" strokeWidth="light" />
-              )}
-            </Button>
-          ) : (
-            <Separator orientation="vertical" />
-          ),
-        )}
-      </div>
-    </div>
-  );
-}
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import { MouseEvent } from 'react';
+import { StateSetter } from '../types';
+import { Button, Icon, Separator } from '../ui/index';
+
+const css = {
+  container: {
+    position: 'fixed',
+    bottom: 8,
+    right: 8,
+    zIndex: 9999,
+    pointerEvents: 'auto',
+    height: 40,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'rgba(148,163,184,0.8)',
+    backgroundColor: 'rgba(255,255,255,0.70)',
+    boxShadow: '0 1px 3px rgba(15,23,42,0.2)',
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: 14,
+    paddingRight: 4,
+  },
+  label: {
+    fontWeight: 500,
+    fontSize: '0.8125rem',
+    letterSpacing: '0.03em',
+    paddingRight: 8,
+  },
+  buttonsRow: {
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+  },
+  closeIcon: {
+    color: '#dc2626',
+  },
+} as const;
+
+export function ConfigButton({
+  onToggleConfig,
+  open,
+  setShow,
+}: {
+  open: boolean;
+  onToggleConfig: () => void;
+  setShow: StateSetter<boolean>;
+}) {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {
+    if (item === 1) {
+      onToggleConfig();
+    } else {
+      e.stopPropagation();
+      setShow((v) => !v);
+    }
+  };
+
+  return (
+    <div style={css.container}>
+      <span style={css.label}>
+        Configurar
+      </span>
+
+      <div style={css.buttonsRow}>
+        {[1, 2, 3].map((item) =>
+          item !== 2 ? (
+            <Button
+              variant={'transparent'}
+              size="icon-sm"
+              data-black
+              key={item}
+              onClick={(e) => {
+                handleClick(e, item);
+              }}>
+              {item === 1 ? (
+                <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth="light" />
+              ) : (
+                <Icon Icon={X} size="sm" strokeWidth="light" className={undefined} />
+              )}
+            </Button>
+          ) : (
+            <Separator orientation="vertical" />
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/components/config-options.tsx

@@ -2,12 +2,90 @@ import { Button } from '../ui';
 import { ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from './data';
 
 const css = {
-  container: `text-sm pointer-events-auto fixed bottom-13 right-2 
-      bg-white/94 backdrop-blur-sm shadow-md border border-border/50 p-3 pt-2 w-auto flex flex-col gap-2
-      [&>div]:flex [&>div]:gap-2`,
-  wrapper: `flex items-end gap-2`,
-  inputWrapper: `[&>input]:h-8 w-26`,
-};
+  container: {
+    position: 'fixed',
+    bottom: 52,
+    right: 8,
+    zIndex: 1000,
+    pointerEvents: 'auto',
+    fontSize: '0.875rem',
+    backgroundColor: 'rgba(255,255,255,0.94)',
+    backdropFilter: 'blur(4px)',
+    boxShadow: '0 4px 6px rgba(15,23,42,0.12)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'rgba(148,163,184,0.5)',
+    paddingInline: 12,
+    paddingBlock: 8,
+    width: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+  },
+  fieldRow: {
+    width: '100%',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'rgba(148,163,184,0.4)',
+    paddingBottom: 12,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+  wrapper: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: 8,
+    borderRadius: 6,
+  },
+  inputWrapper: {
+    width: 104,
+  },
+  label: {
+    display: 'block',
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    marginBottom: 4,
+  },
+  numberInput: {
+    width: '100%',
+    height: 32,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#e5e7eb',
+    paddingInline: 8,
+    fontSize: '0.875rem',
+  },
+  quickRow: {
+    display: 'flex',
+    gap: 5,
+    marginTop: 4,
+  },
+  quickButton: {
+    fontWeight: 500,
+    fontSize: '0.875rem',
+  },
+  colorSection: {
+    marginTop: 8,
+  },
+  colorLabel: {
+    display: 'block',
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    marginBottom: 4,
+  },
+  colorRow: {
+    display: 'flex',
+    gap: 8,
+  },
+  colorDot: {
+    display: 'block',
+    width: '80%',
+    height: '80%',
+    borderRadius: 9999,
+  },
+} as const;
 
 export function ConfigOptions(props: ConfigOptionsProps) {
   const fieldBindings = {
@@ -17,24 +95,24 @@ export function ConfigOptions(props: ConfigOptionsProps) {
   };
 
   return (
-    <div className={css.container}>
+    <div style={css.container}>
       {NUMBER_FIELDS.map((field) => {
         const binding = fieldBindings[field.key];
 
         return (
-          <div className="w-full border-b border-border/66 pb-3" key={field.key}>
-            <div className={css.wrapper}>
-              <div className={css.inputWrapper}>
-                <label className="block text-xs font-medium mb-1">{field.label}</label>
+          <div style={css.fieldRow} key={field.key}>
+            <div style={css.wrapper}>
+              <div style={css.inputWrapper}>
+                <label style={css.label}>{field.label}</label>
                 <input
-                  className="w-full h-8 rounded border border-border px-2 text-sm"
+                  style={css.numberInput}
                   type="number"
                   step={field.step}
                   value={binding.value}
                   onChange={(e) => binding.set(+e.target.value)}
                 />
               </div>
-              <div className="flex gap-1.25 mt-1">
+              <div style={css.quickRow}>
                 {field.quick.map((v) => {
                   return (
                     <Button
@@ -43,7 +121,7 @@ export function ConfigOptions(props: ConfigOptionsProps) {
                       data-option
                       variant="ghost"
                       size="icon-sm"
-                      className="text-sm-button font-medium"
+                      style={css.quickButton}
                       onClick={() => binding.set(v)}>
                       {v}
                     </Button>
@@ -55,18 +133,17 @@ export function ConfigOptions(props: ConfigOptionsProps) {
         );
       })}
 
-      <div className="mt-2">
-        <span className="block text-xs font-medium mb-1">Cor</span>
-        <div className="flex gap-2">
+      <div style={css.colorSection}>
+        <span style={css.colorLabel}>Cor</span>
+        <div style={css.colorRow}>
           {colorOptions.map((c) => (
             <Button
               key={c.value}
               variant="ghost"
               size="icon-sm"
               title={c.name}
-              className="rounded-full"
               onClick={() => props.setColor(c.value)}>
-              <span className="block size-4/5 rounded-full" style={{ backgroundColor: c.value }} />
+              <span style={{ ...css.colorDot, backgroundColor: c.value }} />
             </Button>
           ))}
         </div>

package/components/data.ts

@@ -25,7 +25,7 @@ export const NUMBER_FIELDS: NumberFieldConfig[] = [
   {
     key: 'lines',
     label: 'Linhas',
-    quick: [8, 12, 16, 24],
+    quick: [2, 4, 8, 12],
     step: 4,
   },
   {

package/components/move-lines-button.tsx

@@ -1,6 +1,21 @@
 import { Move } from 'lucide-react';
 import { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
 import { Button, Icon } from '../ui';
+
+const css = {
+  wrapper: {
+    position: 'absolute' as const,
+    left: '50%',
+    top: '44%',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'auto',
+  },
+  button: {
+    borderRadius: 9999,
+    backgroundColor: 'rgba(255,255,255,0.75)',
+    backdropFilter: 'blur(2px)',
+  },
+} as const;
 
 export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {
   const dragging = useRef(false);
@@ -34,21 +49,13 @@ export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivEle
   }
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '50%',
-        top: '44%',
-        transform: 'translate(-50%, -50%)',
-        pointerEvents: 'auto',
-      }}
-    >
+    <div style={css.wrapper}>
       <Button
         size="icon-sm"
         data-black
         variant="ghost"
         onMouseDown={onMouseDown}
-        className="rounded-full bg-white/75 backdrop-blur-xs">
+        style={css.button}>
         <Icon Icon={Move} size="lg" strokeWidth="thin" />
       </Button>
     </div>

package/dist/components/config-button.js

@@ -1,6 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, X } from 'lucide-react';
 import { Button, Icon, Separator } from '../ui/index';
+const css = {
+    container: {
+        position: 'fixed',
+        bottom: 8,
+        right: 8,
+        zIndex: 9999,
+        pointerEvents: 'auto',
+        height: 40,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'rgba(148,163,184,0.8)',
+        backgroundColor: 'rgba(255,255,255,0.70)',
+        boxShadow: '0 1px 3px rgba(15,23,42,0.2)',
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: 14,
+        paddingRight: 4,
+    },
+    label: {
+        fontWeight: 500,
+        fontSize: '0.8125rem',
+        letterSpacing: '0.03em',
+        paddingRight: 8,
+    },
+    buttonsRow: {
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+    },
+    closeIcon: {
+        color: '#dc2626',
+    },
+};
 export function ConfigButton({ onToggleConfig, open, setShow, }) {
     const handleClick = (e, item) => {
         if (item === 1) {
@@ -11,13 +45,7 @@ export function ConfigButton({ onToggleConfig, open, setShow, }) {
             setShow((v) => !v);
         }
     };
-    return (_jsxs("div", { style: {
-            position: 'fixed',
-            bottom: 8,
-            right: 8,
-            zIndex: 9999,
-            pointerEvents: 'auto',
-        }, className: "h-10 border bg-white/66 shadow-sm flex items-center pl-[0.9em] pr-1", children: [_jsx("span", { className: "font-medium text-sm-button tracking-wide pr-2", children: "Configurar" }), _jsx("div", { className: "h-full flex items-center gap-1", children: [1, 2, 3].map((item) => item !== 2 ? (_jsx(Button, { variant: 'transparent', size: "icon-sm", "data-black": true, onClick: (e) => {
+    return (_jsxs("div", { style: css.container, children: [_jsx("span", { style: css.label, children: "Configurar" }), _jsx("div", { style: css.buttonsRow, children: [1, 2, 3].map((item) => item !== 2 ? (_jsx(Button, { variant: 'transparent', size: "icon-sm", "data-black": true, onClick: (e) => {
                         handleClick(e, item);
-                    }, children: item === 1 ? (_jsx(Icon, { Icon: open ? ChevronDown : ChevronUp, size: 'xl', strokeWidth: "light" })) : (_jsx(Icon, { Icon: X, size: "sm", className: "text-red-600", strokeWidth: "light" })) }, item)) : (_jsx(Separator, { orientation: "vertical" }))) })] }));
+                    }, children: item === 1 ? (_jsx(Icon, { Icon: open ? ChevronDown : ChevronUp, size: 'xl', strokeWidth: "light" })) : (_jsx(Icon, { Icon: X, size: "sm", strokeWidth: "light", className: undefined })) }, item)) : (_jsx(Separator, { orientation: "vertical" }))) })] }));
 }

package/dist/components/config-options.js

@@ -2,11 +2,89 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../ui';
 import { NUMBER_FIELDS, colorOptions } from './data';
 const css = {
-    container: `text-sm pointer-events-auto fixed bottom-13 right-2 
-      bg-white/94 backdrop-blur-sm shadow-md border border-border/50 p-3 pt-2 w-auto flex flex-col gap-2
-      [&>div]:flex [&>div]:gap-2`,
-    wrapper: `flex items-end gap-2`,
-    inputWrapper: `[&>input]:h-8 w-26`,
+    container: {
+        position: 'fixed',
+        bottom: 52,
+        right: 8,
+        zIndex: 1000,
+        pointerEvents: 'auto',
+        fontSize: '0.875rem',
+        backgroundColor: 'rgba(255,255,255,0.94)',
+        backdropFilter: 'blur(4px)',
+        boxShadow: '0 4px 6px rgba(15,23,42,0.12)',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'rgba(148,163,184,0.5)',
+        paddingInline: 12,
+        paddingBlock: 8,
+        width: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+    },
+    fieldRow: {
+        width: '100%',
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: 'rgba(148,163,184,0.4)',
+        paddingBottom: 12,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+    },
+    wrapper: {
+        display: 'flex',
+        alignItems: 'flex-end',
+        gap: 8,
+        borderRadius: 6,
+    },
+    inputWrapper: {
+        width: 104,
+    },
+    label: {
+        display: 'block',
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        marginBottom: 4,
+    },
+    numberInput: {
+        width: '100%',
+        height: 32,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: '#e5e7eb',
+        paddingInline: 8,
+        fontSize: '0.875rem',
+    },
+    quickRow: {
+        display: 'flex',
+        gap: 5,
+        marginTop: 4,
+    },
+    quickButton: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+    },
+    colorSection: {
+        marginTop: 8,
+    },
+    colorLabel: {
+        display: 'block',
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        marginBottom: 4,
+    },
+    colorRow: {
+        display: 'flex',
+        gap: 8,
+    },
+    colorDot: {
+        display: 'block',
+        width: '80%',
+        height: '80%',
+        borderRadius: 9999,
+    },
 };
 export function ConfigOptions(props) {
     const fieldBindings = {
@@ -14,10 +92,10 @@ export function ConfigOptions(props) {
         gap: { value: props.gap, set: props.setGap },
         opacity: { value: props.opacity, set: props.setOpacity },
     };
-    return (_jsxs("div", { className: css.container, children: [NUMBER_FIELDS.map((field) => {
+    return (_jsxs("div", { style: css.container, children: [NUMBER_FIELDS.map((field) => {
                 const binding = fieldBindings[field.key];
-                return (_jsx("div", { className: "w-full border-b border-border/66 pb-3", children: _jsxs("div", { className: css.wrapper, children: [_jsxs("div", { className: css.inputWrapper, children: [_jsx("label", { className: "block text-xs font-medium mb-1", children: field.label }), _jsx("input", { className: "w-full h-8 rounded border border-border px-2 text-sm", type: "number", step: field.step, value: binding.value, onChange: (e) => binding.set(+e.target.value) })] }), _jsx("div", { className: "flex gap-1.25 mt-1", children: field.quick.map((v) => {
-                                    return (_jsx(Button, { selected: binding.value === v, "data-option": true, variant: "ghost", size: "icon-sm", className: "text-sm-button font-medium", onClick: () => binding.set(v), children: v }, v));
+                return (_jsx("div", { style: css.fieldRow, children: _jsxs("div", { style: css.wrapper, children: [_jsxs("div", { style: css.inputWrapper, children: [_jsx("label", { style: css.label, children: field.label }), _jsx("input", { style: css.numberInput, type: "number", step: field.step, value: binding.value, onChange: (e) => binding.set(+e.target.value) })] }), _jsx("div", { style: css.quickRow, children: field.quick.map((v) => {
+                                    return (_jsx(Button, { selected: binding.value === v, "data-option": true, variant: "ghost", size: "icon-sm", style: css.quickButton, onClick: () => binding.set(v), children: v }, v));
                                 }) })] }) }, field.key));
-            }), _jsxs("div", { className: "mt-2", children: [_jsx("span", { className: "block text-xs font-medium mb-1", children: "Cor" }), _jsx("div", { className: "flex gap-2", children: colorOptions.map((c) => (_jsx(Button, { variant: "ghost", size: "icon-sm", title: c.name, className: "rounded-full", onClick: () => props.setColor(c.value), children: _jsx("span", { className: "block size-4/5 rounded-full", style: { backgroundColor: c.value } }) }, c.value))) })] })] }));
+            }), _jsxs("div", { style: css.colorSection, children: [_jsx("span", { style: css.colorLabel, children: "Cor" }), _jsx("div", { style: css.colorRow, children: colorOptions.map((c) => (_jsx(Button, { variant: "ghost", size: "icon-sm", title: c.name, onClick: () => props.setColor(c.value), children: _jsx("span", { style: { ...css.colorDot, backgroundColor: c.value } }) }, c.value))) })] })] }));
 }

package/dist/components/data.js

@@ -2,7 +2,7 @@ export const NUMBER_FIELDS = [
     {
         key: 'lines',
         label: 'Linhas',
-        quick: [8, 12, 16, 24],
+        quick: [2, 4, 8, 12],
         step: 4,
     },
     {

package/dist/components/move-lines-button.js

@@ -2,6 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Move } from 'lucide-react';
 import { useRef } from 'react';
 import { Button, Icon } from '../ui';
+const css = {
+    wrapper: {
+        position: 'absolute',
+        left: '50%',
+        top: '44%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'auto',
+    },
+    button: {
+        borderRadius: 9999,
+        backgroundColor: 'rgba(255,255,255,0.75)',
+        backdropFilter: 'blur(2px)',
+    },
+};
 export function MoveLinesButton({ targetRef }) {
     const dragging = useRef(false);
     const last = useRef({ x: 0, y: 0 });
@@ -26,11 +40,5 @@ export function MoveLinesButton({ targetRef }) {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
     }
-    return (_jsx("div", { style: {
-            position: 'absolute',
-            left: '50%',
-            top: '44%',
-            transform: 'translate(-50%, -50%)',
-            pointerEvents: 'auto',
-        }, children: _jsx(Button, { size: "icon-sm", "data-black": true, variant: "ghost", onMouseDown: onMouseDown, className: "rounded-full bg-white/75 backdrop-blur-xs", children: _jsx(Icon, { Icon: Move, size: "lg", strokeWidth: "thin" }) }) }));
+    return (_jsx("div", { style: css.wrapper, children: _jsx(Button, { size: "icon-sm", "data-black": true, variant: "ghost", onMouseDown: onMouseDown, style: css.button, children: _jsx(Icon, { Icon: Move, size: "lg", strokeWidth: "thin" }) }) }));
 }

package/dist/lines-overlay.js

@@ -3,6 +3,29 @@ import { Eye } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { ConfigButton, ConfigOptions, MoveLinesButton, } from "./components/index";
 import { Button, Icon } from "./ui";
+const css = {
+    overlay: {
+        position: 'fixed',
+        top: 100,
+        left: 0,
+        width: '100%',
+        pointerEvents: 'none',
+        display: 'flex',
+        justifyContent: 'center',
+        zIndex: 9998,
+    },
+    grid: {
+        width: '100%',
+    },
+    triggerButton: {
+        position: 'fixed',
+        bottom: 8,
+        right: 8,
+        zIndex: 9999,
+        fontSize: '0.75rem',
+        backgroundColor: 'rgba(255,255,255,0.66)',
+    },
+};
 function RowGridCore({ show, setShow }) {
     const containerRef = useRef(null);
     const [lines, setLines] = useState(12);
@@ -23,35 +46,20 @@ function RowGridCore({ show, setShow }) {
     if (!show)
         return null;
     const height = lines * gap;
-    return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, style: {
-                    position: "fixed",
-                    top: 100,
-                    left: 0,
-                    width: "100%",
-                    height,
-                    pointerEvents: "none",
-                    display: "flex",
-                    justifyContent: "center",
-                    zIndex: 9998,
-                }, children: [_jsx("div", { className: "w-full", style: {
+    return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, style: { ...css.overlay, height }, children: [_jsx("div", { style: {
+                            ...css.grid,
                             height,
-                            backgroundImage: `repeating-linear-gradient(
-                to bottom,
-                ${color},
-                ${color} 1px,
-                transparent 1px,
-                transparent ${gap}px
+                            backgroundImage: `repeating-linear-gradient(
+                to bottom,
+                ${color},
+                ${color} 1px,
+                transparent 1px,
+                transparent ${gap}px
               )`,
                             opacity,
                         } }), _jsx(MoveLinesButton, { targetRef: containerRef })] }), _jsx(ConfigButton, { setShow: setShow, onToggleConfig: () => setShowConfig((v) => !v), open: showConfig }), showConfig && (_jsx(ConfigOptions, { lines: lines, gap: gap, opacity: opacity, color: color, setLines: setLines, setGap: setGap, setOpacity: setOpacity, setColor: setColor }))] }));
 }
 export function RowGrid() {
     const [show, setShow] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "ghost", style: {
-                    visibility: show ? "hidden" : "visible",
-                    position: "fixed",
-                    bottom: 8,
-                    right: 8,
-                    zIndex: 9999,
-                }, onClick: () => setShow((v) => !v), className: "text-xs bg-white/66", children: ["Mostrar linhas", _jsx(Icon, { Icon: Eye })] }), _jsx(RowGridCore, { setShow: setShow, show: show })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "ghost", style: { ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }, onClick: () => setShow((v) => !v), children: ["Mostrar linhas", _jsx(Icon, { Icon: Eye })] }), _jsx(RowGridCore, { setShow: setShow, show: show })] }));
 }