lines-overlay 0.1.1

package/components/config-button.tsx

@@ -0,0 +1,54 @@
+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
+      className="h-10 border pointer-events-auto fixed bottom-2 right-2 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>
+  );
+}

package/components/config-options.tsx

@@ -0,0 +1,76 @@
+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`,
+};
+
+export function ConfigOptions(props: ConfigOptionsProps) {
+  const fieldBindings = {
+    lines: { value: props.lines, set: props.setLines },
+    gap: { value: props.gap, set: props.setGap },
+    opacity: { value: props.opacity, set: props.setOpacity },
+  };
+
+  return (
+    <div className={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>
+                <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)}
+                />
+              </div>
+              <div className="flex gap-1.25 mt-1">
+                {field.quick.map((v) => {
+                  return (
+                    <Button
+                      selected={binding.value === v}
+                      key={v}
+                      data-option
+                      variant="ghost"
+                      size="icon-sm"
+                      className="text-sm-button font-medium"
+                      onClick={() => binding.set(v)}>
+                      {v}
+                    </Button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      <div className="mt-2">
+        <span className="block text-xs font-medium mb-1">Cor</span>
+        <div className="flex gap-2">
+          {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 }} />
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/data.ts

@@ -0,0 +1,52 @@
+export type FieldBinding = {
+  value: number;
+  set: (v: number) => void;
+};
+
+export type ConfigOptionsProps = {
+  lines: number;
+  gap: number;
+  opacity: number;
+  color: string;
+  setLines: (v: number) => void;
+  setGap: (v: number) => void;
+  setOpacity: (v: number) => void;
+  setColor: (v: string) => void;
+};
+
+export type NumberFieldConfig = {
+  key: 'lines' | 'gap' | 'opacity';
+  label: string;
+  step?: number;
+  quick: number[];
+};
+
+export const NUMBER_FIELDS: NumberFieldConfig[] = [
+  {
+    key: 'lines',
+    label: 'Linhas',
+    quick: [8, 12, 16, 24],
+    step: 4,
+  },
+  {
+    key: 'gap',
+    label: 'Gap',
+    quick: [16, 24, 32, 40, 44],
+    step: 4,
+  },
+  {
+    key: 'opacity',
+    label: 'Opacidade',
+    quick: [0.2, 0.3, 0.5, 0.7],
+    step: 0.05,
+  },
+];
+
+export const colorOptions = [
+  { name: 'Azul', value: '#2563eb' },
+  { name: 'Amarelo', value: '#eab308' },
+  { name: 'Verde', value: '#16a34a' },
+  { name: 'Roxo', value: '#7c3aed' },
+  { name: 'Violeta', value: '#9333ea' },
+  { name: 'Violeta', value: '#d71212' },
+];

package/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./move-lines-button";
+export * from "./config-button";
+export * from "./config-options"

package/components/move-lines-button.tsx

@@ -0,0 +1,50 @@
+import { Move } from 'lucide-react';
+import { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
+import { Button, Icon } from '../ui';
+
+export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {
+  const dragging = useRef(false);
+  const last = useRef({ x: 0, y: 0 });
+
+  function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {
+    dragging.current = true;
+    last.current = { x: e.clientX, y: e.clientY };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  function onMove(e: MouseEvent) {
+    if (!dragging.current || !targetRef.current) return;
+
+    const dx = e.clientX - last.current.x;
+    const dy = e.clientY - last.current.y;
+
+    const el = targetRef.current;
+
+    el.style.left = `${el.offsetLeft + dx}px`;
+    el.style.top = `${el.offsetTop + dy}px`;
+
+    last.current = { x: e.clientX, y: e.clientY };
+  }
+
+  function onUp() {
+    dragging.current = false;
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  }
+
+  return (
+    <div
+      className="pointer-events-auto absolute left-1/2 top-[44%]
+        -translate-x-1/2 -translate-y-1/2">
+      <Button
+        size="icon-sm"
+        data-black
+        variant="ghost"
+        onMouseDown={onMouseDown}
+        className="rounded-full bg-white/75 backdrop-blur-xs">
+        <Icon Icon={Move} size="lg" strokeWidth="thin" />
+      </Button>
+    </div>
+  );
+}

package/dist/components/config-button.d.ts

@@ -0,0 +1,6 @@
+import { StateSetter } from '../types';
+export declare function ConfigButton({ onToggleConfig, open, setShow, }: {
+    open: boolean;
+    onToggleConfig: () => void;
+    setShow: StateSetter<boolean>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/config-button.js

@@ -0,0 +1,17 @@
+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';
+export function ConfigButton({ onToggleConfig, open, setShow, }) {
+    const handleClick = (e, item) => {
+        if (item === 1) {
+            onToggleConfig();
+        }
+        else {
+            e.stopPropagation();
+            setShow((v) => !v);
+        }
+    };
+    return (_jsxs("div", { className: "h-10 border pointer-events-auto fixed bottom-2 right-2 bg-white/66 \r\n    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) => {
+                        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" }))) })] }));
+}

package/dist/components/config-options.d.ts

@@ -0,0 +1,2 @@
+import { ConfigOptionsProps } from './data';
+export declare function ConfigOptions(props: ConfigOptionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/config-options.js

@@ -0,0 +1,23 @@
+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`,
+};
+export function ConfigOptions(props) {
+    const fieldBindings = {
+        lines: { value: props.lines, set: props.setLines },
+        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) => {
+                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));
+                                }) })] }) }, 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))) })] })] }));
+}

package/dist/components/data.d.ts

@@ -0,0 +1,25 @@
+export type FieldBinding = {
+    value: number;
+    set: (v: number) => void;
+};
+export type ConfigOptionsProps = {
+    lines: number;
+    gap: number;
+    opacity: number;
+    color: string;
+    setLines: (v: number) => void;
+    setGap: (v: number) => void;
+    setOpacity: (v: number) => void;
+    setColor: (v: string) => void;
+};
+export type NumberFieldConfig = {
+    key: 'lines' | 'gap' | 'opacity';
+    label: string;
+    step?: number;
+    quick: number[];
+};
+export declare const NUMBER_FIELDS: NumberFieldConfig[];
+export declare const colorOptions: {
+    name: string;
+    value: string;
+}[];

package/dist/components/data.js

@@ -0,0 +1,28 @@
+export const NUMBER_FIELDS = [
+    {
+        key: 'lines',
+        label: 'Linhas',
+        quick: [8, 12, 16, 24],
+        step: 4,
+    },
+    {
+        key: 'gap',
+        label: 'Gap',
+        quick: [16, 24, 32, 40, 44],
+        step: 4,
+    },
+    {
+        key: 'opacity',
+        label: 'Opacidade',
+        quick: [0.2, 0.3, 0.5, 0.7],
+        step: 0.05,
+    },
+];
+export const colorOptions = [
+    { name: 'Azul', value: '#2563eb' },
+    { name: 'Amarelo', value: '#eab308' },
+    { name: 'Verde', value: '#16a34a' },
+    { name: 'Roxo', value: '#7c3aed' },
+    { name: 'Violeta', value: '#9333ea' },
+    { name: 'Violeta', value: '#d71212' },
+];

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./move-lines-button";
+export * from "./config-button";
+export * from "./config-options";

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export * from "./move-lines-button";
+export * from "./config-button";
+export * from "./config-options";

package/dist/components/move-lines-button.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+export declare function MoveLinesButton({ targetRef }: {
+    targetRef: RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Move } from 'lucide-react';
+import { useRef } from 'react';
+import { Button, Icon } from '../ui';
+export function MoveLinesButton({ targetRef }) {
+    const dragging = useRef(false);
+    const last = useRef({ x: 0, y: 0 });
+    function onMouseDown(e) {
+        dragging.current = true;
+        last.current = { x: e.clientX, y: e.clientY };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    function onMove(e) {
+        if (!dragging.current || !targetRef.current)
+            return;
+        const dx = e.clientX - last.current.x;
+        const dy = e.clientY - last.current.y;
+        const el = targetRef.current;
+        el.style.left = `${el.offsetLeft + dx}px`;
+        el.style.top = `${el.offsetTop + dy}px`;
+        last.current = { x: e.clientX, y: e.clientY };
+    }
+    function onUp() {
+        dragging.current = false;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+    }
+    return (_jsx("div", { className: "pointer-events-auto absolute left-1/2 top-[44%]\r\n        -translate-x-1/2 -translate-y-1/2", 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" }) }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './lines-overlay';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './lines-overlay';

package/dist/lines-overlay.d.ts

@@ -0,0 +1 @@
+export declare function RowGrid(): import("react/jsx-runtime").JSX.Element;

package/dist/lines-overlay.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Eye } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { ConfigButton, ConfigOptions, MoveLinesButton } from './components/index';
+import { Button, Icon } from './ui';
+function RowGridCore({ show, setShow }) {
+    const containerRef = useRef(null);
+    const [lines, setLines] = useState(12);
+    const [gap, setGap] = useState(24);
+    const [opacity, setOpacity] = useState(0.3);
+    const [color, setColor] = useState('#d71212');
+    const [showConfig, setShowConfig] = useState(false);
+    // Toggle por tecla
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.ctrlKey && e.key === ';') {
+                setShow((v) => !v);
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, []);
+    if (!show)
+        return null;
+    const height = lines * gap;
+    return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, className: "fixed w-full pointer-events-none flex justify-center", style: {
+                    top: 100,
+                    left: 0,
+                    height,
+                }, children: [_jsx("div", { className: "w-full", style: {
+                            height,
+                            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' }, onClick: () => setShow((v) => !v), className: "fixed bottom-2 right-2 z-50 text-xs bg-white/66 ", children: ["Mostrar linhas", _jsx(Icon, { Icon: Eye })] }), _jsx(RowGridCore, { setShow: setShow, show: show })] }));
+}

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+export type BooleanSetter = Dispatch<SetStateAction<boolean>>;
+export type StateSetter<T> = Dispatch<SetStateAction<T>>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/button.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "transparent" | "link" | "secondary" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon-sm" | "icon" | "icon-md" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    closeButton?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/ui/button.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+const cn = (...classes) => classes.filter(Boolean).join(' ');
+const buttonVariants = cva('w-auto tracking-wide inline-flex items-center justify-center gap-2 rounded-xs ring-offset-background transition-colors disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 relative data-w-full:w-full data-round:rounded-full focus:outline-none data-option:rounded-full data-black:text-foreground', {
+    variants: {
+        variant: {
+            default: 'bg-primary hover:bg-primary/90 text-primary-foreground disabled:bg-neutral-300 disabled:text-neutral-500/80 data-active:bg-primary-800 data-hover:bg-primary-600 data-focus:border-3 data-focus:border-selected/75',
+            outline: 'border-2 border-primary/88 text-primary bg-transparent hover:bg-gray-50 shadow-xs/12 disabled:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500/75 data-hover:bg-primary-50 data-focus:outline-selected/70 data-focus:outline-2 data-active:bg-primary-100',
+            ghost: 'hover:bg-primary-50 border text-primary bg-transparent disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-none data-hover:bg-primary-50 data-focus:outline-selected/70 data-focus:outline-3 data-focus:border-primary-400 data-active:bg-primary-100',
+            transparent: 'bg-transparent text-primary hover:bg-primary-50',
+            link: 'text-primary underline-offset-4 hover:underline',
+            secondary: 'bg-primary-50 text-primary hover:bg-primary-100 disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-none data-hover:bg-primary-50/75 data-focus:outline-3 data-focus:outline-selected/75 data-active:bg-primary-100',
+            destructive: 'bg-red-700 text-red-50 hover:bg-red-600 data-hover:bg-red-600 data-focus:outline-3 data-focus:outline-red-200 data-active:bg-red-800',
+        },
+        size: {
+            sm: 'min-h-9 small-button',
+            default: `min-h-10`,
+            lg: 'min-h-11 large-text large-button',
+            'icon-sm': 'size-8',
+            icon: 'size-8.5',
+            'icon-md': 'size-9.5',
+            'icon-lg': 'size-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const paddings = {
+    default: {
+        sm: 'px-[0.93em] py-[0.63885rem]',
+        default: 'px-[0.93em] py-[0.73438rem]',
+        lg: 'px-[0.93em] py-[0.82813rem]',
+    },
+    outline: {
+        sm: 'px-[0.82716em] py-[0.54794rem]',
+        default: 'px-[0.83304em] py-[0.64347rem]',
+        lg: 'px-[0.83857em] py-[0.73722rem]',
+    },
+    ghost: {
+        sm: 'px-[0.82841em] py-[0.6076rem]',
+        default: 'px-[0.83429em] py-[0.70313rem]',
+        lg: 'px-[0.83982em] py-[0.79688rem]',
+    },
+};
+const paddingExptions = {
+    variants: ['link', 'transparent'],
+    sizes: ['icon', 'icon-sm', 'icon-md', 'icon-lg'],
+};
+const getPaddings = (variant, size) => {
+    let padding = '';
+    if (!paddingExptions.sizes.includes(size) && !paddingExptions.variants.includes(variant)) {
+        if (variant === 'destructive' || variant === 'secondary') {
+            padding = paddings.default[size];
+        }
+        else {
+            padding = paddings[variant][size];
+        }
+    }
+    return padding;
+};
+const Button = React.forwardRef(({ className, variant = 'default', size = "default", asChild = false, selected, disabled, closeButton = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    const padding = getPaddings(variant, size);
+    const selectedCSS = selected
+        ? 'border-2 border-selected text-primary bg-primary-50/25 hover:bg-card'
+        : '';
+    const closeButtonCSS = closeButton ? 'rounded-full text-foreground' : '';
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), selectedCSS, closeButtonCSS, padding, className), ref: ref, disabled: disabled, ...props }));
+});
+Button.displayName = 'Button';
+export { Button };

package/dist/ui/buttons-wrapper.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface ButtonsWrapperProps {
+    children: ReactNode;
+    className?: string;
+    gap?: number;
+}
+export declare const ButtonsWrapper: React.FC<ButtonsWrapperProps>;
+export {};

package/dist/ui/buttons-wrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cn = (...classes) => classes.filter(Boolean).join(' ');
+export const ButtonsWrapper = ({ children, className = '', gap = 3, }) => {
+    return (_jsx("div", { style: { '--custom-gap': `${gap * 0.25}rem` }, className: cn(`h-auto flex flex-wrap items-center gap-(--custom-gap)`, className), children: children }));
+};

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './lucide-icon';
+export * from './separator';

package/dist/ui/index.js

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './lucide-icon';
+export * from './separator';

package/dist/ui/lucide-icon.d.ts

@@ -0,0 +1,34 @@
+import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';
+type StrokeWidthValue = keyof typeof weights;
+declare const weights: {
+    thin: number;
+    light: number;
+    normal: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+};
+type SizeValue = keyof typeof iconSizes;
+declare const iconSizes: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    h6: string;
+    h5: string;
+    h4: string;
+    h3: string;
+    h2: string;
+    h1: string;
+};
+interface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {
+    Icon: LucideIconType;
+    size?: SizeValue | string;
+    strokeWidth?: StrokeWidthValue | string;
+}
+export declare const Icon: ({ Icon, size, className, strokeWidth, fill }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/lucide-icon.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Ajuste depois */
+const weights = {
+    thin: 2.25,
+    light: 2.35,
+    normal: 2.65, // valor padrão
+    semibold: 2.75,
+    bold: 2.85,
+    extrabold: 3,
+};
+const iconSizes = {
+    xs: '0.937em',
+    sm: '0.968em',
+    base: '1em',
+    md: '1.033em',
+    lg: '1.067em',
+    xl: '1.138em',
+    '2xl': '1.215em',
+    '3xl': '1.296em',
+    h6: '1.067em',
+    h5: '1.138em',
+    h4: '1.215em',
+    h3: '1.296em',
+    h2: '1.383em',
+    h1: '1.4757em',
+};
+export const Icon = ({ Icon, size, className, strokeWidth, fill }) => {
+    return (_jsx("div", { "data-icon": true, className: "h-3 inline-flex justify-center items-center overflow-visible [&_svg]:shrink-0", children: _jsx(Icon, { size: iconSizes[size] || size || '1.067em', strokeWidth: weights[strokeWidth] || strokeWidth || 2.6, className: className, fill: fill || 'none' }) }));
+};

package/dist/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/ui/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+const cn = (...classes) => classes.filter(Boolean).join(' ');
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full scale-y-99' : 'h-full w-px scale-x-99', className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/index.ts

@@ -0,0 +1 @@
+export * from './lines-overlay';

package/lines-overlay.tsx

@@ -0,0 +1,104 @@
+import { Eye } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { ConfigButton, ConfigOptions, MoveLinesButton } from './components/index';
+import { StateSetter } from './types';
+import { Button, Icon } from './ui';
+
+type Props = {
+  setShow: StateSetter<boolean>;
+  show: boolean;
+};
+
+function RowGridCore({ show, setShow }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [lines, setLines] = useState(12);
+  const [gap, setGap] = useState(24);
+  const [opacity, setOpacity] = useState(0.3);
+  const [color, setColor] = useState('#d71212');
+  const [showConfig, setShowConfig] = useState(false);
+
+  // Toggle por tecla
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === ';') {
+        setShow((v) => !v);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  if (!show) return null;
+
+  const height = lines * gap;
+
+  return (
+    <div>
+      <div
+        ref={containerRef}
+        className="fixed w-full pointer-events-none flex justify-center"
+        style={{
+          top: 100,
+          left: 0,
+          height,
+        }}>
+        {/* linhas */}
+        <div
+          className="w-full"
+          style={{
+            height,
+            backgroundImage: `repeating-linear-gradient(
+                to bottom,
+                ${color},
+                ${color} 1px,
+                transparent 1px,
+                transparent ${gap}px
+              )`,
+            opacity,
+          }}
+        />
+        {/* Move */}
+        <MoveLinesButton targetRef={containerRef} />
+      </div>
+              {/* Config */}
+        <ConfigButton
+          setShow={setShow}
+          onToggleConfig={() => setShowConfig((v) => !v)}
+          open={showConfig}
+        />
+        {showConfig && (
+          <ConfigOptions
+            lines={lines}
+            gap={gap}
+            opacity={opacity}
+            color={color}
+            setLines={setLines}
+            setGap={setGap}
+            setOpacity={setOpacity}
+            setColor={setColor}
+          />
+        )}
+    </div>
+  );
+}
+
+export function RowGrid() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="ghost"
+        style={{ visibility: show ? 'hidden' : 'visible' }}
+        onClick={() => setShow((v) => !v)}
+        className="fixed bottom-2 right-2 z-50 text-xs bg-white/66 ">
+        Mostrar linhas
+        <Icon Icon={Eye} />
+      </Button>
+
+      <RowGridCore setShow={setShow} show={show} />
+    </>
+  );
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "lines-overlay",
+  "version": "0.1.1",
+  "description": "Overlay de linhas configuráveis para interfaces React.",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "prepare": "npm run build",
+    "test": "echo \"Sem testes definidos\""
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "lucide-react": ">=0.462.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-separator": "^1.1.8",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "lucide-react": "^0.574.0",
+    "react": "^19.2.4",
+    "typescript": "^5.6.3"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "declaration": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["./**/*"],
+  "exclude": ["dist", "node_modules"]
+}
+

package/types.ts

@@ -0,0 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export type BooleanSetter = Dispatch<SetStateAction<boolean>>;
+export type StateSetter<T> = Dispatch<SetStateAction<T>>;

package/ui/button.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const cn = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ');
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+const buttonVariants = cva(
+  'w-auto tracking-wide inline-flex items-center justify-center gap-2 rounded-xs ring-offset-background transition-colors disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 relative data-w-full:w-full data-round:rounded-full focus:outline-none data-option:rounded-full data-black:text-foreground',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary hover:bg-primary/90 text-primary-foreground disabled:bg-neutral-300 disabled:text-neutral-500/80 data-active:bg-primary-800 data-hover:bg-primary-600 data-focus:border-3 data-focus:border-selected/75',
+        outline:
+          'border-2 border-primary/88 text-primary bg-transparent hover:bg-gray-50 shadow-xs/12 disabled:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500/75 data-hover:bg-primary-50 data-focus:outline-selected/70 data-focus:outline-2 data-active:bg-primary-100',
+        ghost:
+          'hover:bg-primary-50 border text-primary bg-transparent disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-none data-hover:bg-primary-50 data-focus:outline-selected/70 data-focus:outline-3 data-focus:border-primary-400 data-active:bg-primary-100',
+        transparent: 'bg-transparent text-primary hover:bg-primary-50',
+        link: 'text-primary underline-offset-4 hover:underline',
+        secondary:
+          'bg-primary-50 text-primary hover:bg-primary-100 disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-none data-hover:bg-primary-50/75 data-focus:outline-3 data-focus:outline-selected/75 data-active:bg-primary-100',
+        destructive:
+          'bg-red-700 text-red-50 hover:bg-red-600 data-hover:bg-red-600 data-focus:outline-3 data-focus:outline-red-200 data-active:bg-red-800',
+      },
+      size: {
+        sm: 'min-h-9 small-button',
+        default: `min-h-10`,
+        lg: 'min-h-11 large-text large-button',
+        'icon-sm': 'size-8',
+        icon: 'size-8.5',
+        'icon-md': 'size-9.5',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const paddings = {
+  default: {
+    sm: 'px-[0.93em] py-[0.63885rem]',
+    default: 'px-[0.93em] py-[0.73438rem]',
+    lg: 'px-[0.93em] py-[0.82813rem]',
+  },
+  outline: {
+    sm: 'px-[0.82716em] py-[0.54794rem]',
+    default: 'px-[0.83304em] py-[0.64347rem]',
+    lg: 'px-[0.83857em] py-[0.73722rem]',
+  },
+  ghost: {
+    sm: 'px-[0.82841em] py-[0.6076rem]',
+    default: 'px-[0.83429em] py-[0.70313rem]',
+    lg: 'px-[0.83982em] py-[0.79688rem]',
+  },
+};
+
+type OmitVariant = keyof typeof paddings | 'destructive' | 'secondary';
+type OmitSize = keyof typeof paddings.default;
+const paddingExptions = {
+  variants: ['link', 'transparent'],
+  sizes: ['icon', 'icon-sm', 'icon-md', 'icon-lg'],
+};
+
+const getPaddings = (variant: OmitVariant, size: OmitSize): string => {
+  let padding = '';
+  if (!paddingExptions.sizes.includes(size) && !paddingExptions.variants.includes(variant)) {
+    if (variant === 'destructive' || variant === 'secondary') {
+      padding = paddings.default[size];
+    } else {
+      padding = paddings[variant][size];
+    }
+  }
+  return padding;
+};
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  closeButton?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      size = "default",
+      asChild = false,
+      selected,
+      disabled,
+      closeButton = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    const padding = getPaddings(variant as OmitVariant, size as OmitSize);
+    const selectedCSS = selected
+      ? 'border-2 border-selected text-primary bg-primary-50/25 hover:bg-card'
+      : '';
+    const closeButtonCSS = closeButton ? 'rounded-full text-foreground' : '';
+
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ variant, size }),
+          selectedCSS,
+          closeButtonCSS,
+          padding,
+          className,
+        )}
+        ref={ref}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button };

package/ui/buttons-wrapper.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+
+const cn = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ');
+
+interface ButtonsWrapperProps {
+  children: ReactNode;
+  className?: string;
+  gap?: number;
+}
+
+export const ButtonsWrapper: React.FC<ButtonsWrapperProps> = ({
+  children,
+  className = '',
+  gap = 3,
+}) => {
+  return (
+    <div
+      style={{ '--custom-gap': `${gap * 0.25}rem` } as React.CSSProperties}
+      className={cn(`h-auto flex flex-wrap items-center gap-(--custom-gap)`, className)}>
+      {children}
+    </div>
+  );
+};

package/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './lucide-icon';
+export * from './separator';

package/ui/lucide-icon.tsx

@@ -0,0 +1,50 @@
+import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';
+
+type StrokeWidthValue = keyof typeof weights;
+/* Ajuste depois */
+const weights = {
+  thin: 2.25,
+  light: 2.35,
+  normal: 2.65, // valor padrão
+  semibold: 2.75,
+  bold: 2.85,
+  extrabold: 3,
+};
+
+type SizeValue = keyof typeof iconSizes;
+
+const iconSizes = {
+  xs: '0.937em',
+  sm: '0.968em',
+  base: '1em',
+  md: '1.033em',
+  lg: '1.067em',
+  xl: '1.138em',
+  '2xl': '1.215em',
+  '3xl': '1.296em',
+  h6: '1.067em',
+  h5: '1.138em',
+  h4: '1.215em',
+  h3: '1.296em',
+  h2: '1.383em',
+  h1: '1.4757em',
+};
+
+interface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {
+  Icon: LucideIconType;
+  size?: SizeValue | string;
+  strokeWidth?: StrokeWidthValue | string;
+}
+
+export const Icon = ({ Icon, size, className, strokeWidth, fill }: IconProps) => {
+  return (
+    <div data-icon className="h-3 inline-flex justify-center items-center overflow-visible [&_svg]:shrink-0">
+      <Icon
+        size={iconSizes[size as SizeValue] || size || '1.067em'}
+        strokeWidth={weights[strokeWidth as StrokeWidthValue] || strokeWidth || 2.6}
+        className={className}
+        fill={fill || 'none'}
+      />
+    </div>
+  );
+};

package/ui/separator.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+const cn = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ');
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-px w-full scale-y-99' : 'h-full w-px scale-x-99',
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };