@signozhq/drawer 0.0.0

package/dist/drawer.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Drawer as Drawer$1 } from 'vaul';
+
+declare function Drawer({ ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DrawerContent({ className, children, showOverlay, ...props }: React.ComponentProps<typeof Drawer$1.Content> & {
+    showOverlay?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
+interface DrawerWrapperProps {
+    trigger: React.ReactNode;
+    header?: {
+        title: string;
+        description?: string;
+    };
+    content: React.ReactNode;
+    footer?: React.ReactNode;
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+    allowOutsideClick?: boolean;
+    showOverlay?: boolean;
+    className?: string;
+}
+declare function DrawerWrapper({ trigger, header, content, footer, direction, showCloseButton, allowOutsideClick, showOverlay, className, }: DrawerWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerWrapper };

package/dist/drawer.js

@@ -0,0 +1,209 @@
+import { Drawer as Drawer$1 } from 'vaul';
+import { X } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/index.css
+styleInject('/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans: var(--font-sans);\n    --font-serif: var(--font-serif);\n    --font-mono: var(--font-mono);\n    --color-slate-500: var(--bg-slate-500);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-sm: 24rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --font-weight-normal: 400;\n    --font-weight-semibold: 600;\n    --radius-sm: calc(var(--radius) - 4px);\n    --radius-md: calc(var(--radius) - 2px);\n    --radius-lg: var(--radius);\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-background: var(--background);\n    --color-foreground: var(--foreground);\n    --color-card: var(--card);\n    --color-muted: var(--muted);\n    --color-muted-foreground: var(--muted-foreground);\n    --color-border: var(--border);\n    --color-ring: var(--ring);\n    --color-vanilla-300: var(--bg-vanilla-300);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-auto {\n    margin-top: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-auto {\n    height: auto;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-\\[100px\\] {\n    width: 100px;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-sm {\n    max-width: var(--container-sm);\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-vanilla-300 {\n    border-color: var(--color-vanilla-300);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-card {\n    background-color: var(--color-card);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-foreground {\n    color: var(--color-foreground);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--color-background);\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .group-data-\\[vaul-drawer-direction\\=bottom\\]\\/drawer-content\\:block {\n    &:is(:where(.group\\/drawer-content)[data-vaul-drawer-direction=bottom] *) {\n      display: block;\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--color-ring);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:inset-x-0 {\n    &[data-vaul-drawer-direction=bottom] {\n      inset-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:bottom-0 {\n    &[data-vaul-drawer-direction=bottom] {\n      bottom: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:mt-24 {\n    &[data-vaul-drawer-direction=bottom] {\n      margin-top: calc(var(--spacing) * 24);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:max-h-\\[80vh\\] {\n    &[data-vaul-drawer-direction=bottom] {\n      max-height: 80vh;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:rounded-t-lg {\n    &[data-vaul-drawer-direction=bottom] {\n      border-top-left-radius: var(--radius-lg);\n      border-top-right-radius: var(--radius-lg);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=bottom\\]\\:border-t {\n    &[data-vaul-drawer-direction=bottom] {\n      border-top-style: var(--tw-border-style);\n      border-top-width: 1px;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=left\\]\\:inset-y-0 {\n    &[data-vaul-drawer-direction=left] {\n      inset-block: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=left\\]\\:left-0 {\n    &[data-vaul-drawer-direction=left] {\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=left\\]\\:w-3\\/4 {\n    &[data-vaul-drawer-direction=left] {\n      width: calc(3/4 * 100%);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=left\\]\\:border-r {\n    &[data-vaul-drawer-direction=left] {\n      border-right-style: var(--tw-border-style);\n      border-right-width: 1px;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=right\\]\\:inset-y-0 {\n    &[data-vaul-drawer-direction=right] {\n      inset-block: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=right\\]\\:right-0 {\n    &[data-vaul-drawer-direction=right] {\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=right\\]\\:w-3\\/4 {\n    &[data-vaul-drawer-direction=right] {\n      width: calc(3/4 * 100%);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=right\\]\\:border-l {\n    &[data-vaul-drawer-direction=right] {\n      border-left-style: var(--tw-border-style);\n      border-left-width: 1px;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:inset-x-0 {\n    &[data-vaul-drawer-direction=top] {\n      inset-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:top-0 {\n    &[data-vaul-drawer-direction=top] {\n      top: calc(var(--spacing) * 0);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:mb-24 {\n    &[data-vaul-drawer-direction=top] {\n      margin-bottom: calc(var(--spacing) * 24);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:max-h-\\[80vh\\] {\n    &[data-vaul-drawer-direction=top] {\n      max-height: 80vh;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:rounded-b-lg {\n    &[data-vaul-drawer-direction=top] {\n      border-bottom-right-radius: var(--radius-lg);\n      border-bottom-left-radius: var(--radius-lg);\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=top\\]\\:border-b {\n    &[data-vaul-drawer-direction=top] {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 1px;\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=left\\]\\:sm\\:max-w-sm {\n    &[data-vaul-drawer-direction=left] {\n      @media (width >= 40rem) {\n        max-width: var(--container-sm);\n      }\n    }\n  }\n  .data-\\[vaul-drawer-direction\\=right\\]\\:sm\\:max-w-sm {\n    &[data-vaul-drawer-direction=right] {\n      @media (width >= 40rem) {\n        max-width: var(--container-sm);\n      }\n    }\n  }\n  .dark\\:border-slate-500 {\n    &:is(.dark *) {\n      border-color: var(--color-slate-500);\n    }\n  }\n}\n:root {\n  --bg-robin-100: #cad5fd;\n  --bg-robin-200: #b8c7fc;\n  --bg-robin-300: #95acfb;\n  --bg-robin-400: #7190f9;\n  --bg-robin-500: #4e74f8;\n  --bg-robin-600: #3f5ecc;\n  --bg-sienna-100: #e6d9cd;\n  --bg-sienna-200: #deccbc;\n  --bg-sienna-300: #ceb29b;\n  --bg-sienna-400: #bd9979;\n  --bg-sienna-500: #ad7f58;\n  --bg-sienna-600: #8a6646;\n  --bg-cherry-100: #fadadb;\n  --bg-cherry-200: #f7c8ca;\n  --bg-cherry-300: #f5b6b8;\n  --bg-cherry-400: #ea6d71;\n  --bg-cherry-500: #e5484d;\n  --bg-cherry-600: #b83a3e;\n  --bg-aqua-100: #c1eefd;\n  --bg-aqua-200: #9ae4fc;\n  --bg-aqua-300: #72d9fb;\n  --bg-aqua-400: #4bcff9;\n  --bg-aqua-500: #23c4f8;\n  --bg-aqua-600: #07afe6;\n  --bg-sakura-100: #fbc8d2;\n  --bg-sakura-200: #fab5c3;\n  --bg-sakura-300: #f791a5;\n  --bg-sakura-400: #f56c87;\n  --bg-sakura-500: #f24769;\n  --bg-sakura-600: #c53955;\n  --bg-amber-100: #fff0cc;\n  --bg-amber-200: #ffebbb;\n  --bg-amber-300: #ffe19a;\n  --bg-amber-400: #ffd778;\n  --bg-amber-500: #ffcd56;\n  --bg-amber-600: #d5aa45;\n  --bg-ink-100: #2a2e37;\n  --bg-ink-200: #23262e;\n  --bg-ink-300: #16181d;\n  --bg-ink-400: #121317;\n  --bg-ink-500: #0b0c0e;\n  --bg-vanilla-100: #fff;\n  --bg-vanilla-200: #f5f5f5;\n  --bg-vanilla-300: #e9e9e9;\n  --bg-vanilla-400: #c0c1c3;\n  --bg-slate-50: #62687c;\n  --bg-slate-100: #3c4152;\n  --bg-slate-200: #2c3140;\n  --bg-slate-300: #242834;\n  --bg-slate-400: #1d212d;\n  --bg-slate-500: #161922;\n  --bg-gradient-coral:\n    linear-gradient(\n      114deg,#ed6d68 14.99%,#fca083 77.27%);\n  --bg-gradient-dark-shadow:\n    linear-gradient(\n      139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n  --bg-gradient-dawn:\n    linear-gradient(\n      99deg,#7a97fa 4.42%,#f977ff 96.6%);\n  --bg-gradient-ocean:\n    linear-gradient(\n      99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n  --bg-gradient-splash:\n    linear-gradient(\n      99deg,#4568dc 4.42%,#324daa 96.6%);\n  --bg-gradient-flamingo:\n    linear-gradient(\n      92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n  --bg-forest-200: #a8f3d3;\n  --bg-forest-300: #7cedbe;\n  --bg-forest-400: #51e7a8;\n  --bg-forest-500: #25e192;\n  --bg-forest-600: #1eb475;\n  --text-robin-100: #cad5fd;\n  --text-robin-200: #b8c7fc;\n  --text-robin-300: #95acfb;\n  --text-robin-400: #7190f9;\n  --text-robin-500: #4e74f8;\n  --text-robin-600: #3f5ecc;\n  --text-sienna-100: #e6d9cd;\n  --text-sienna-200: #deccbc;\n  --text-sienna-300: #ceb29b;\n  --text-sienna-400: #bd9979;\n  --text-sienna-500: #ad7f58;\n  --text-sienna-600: #8a6646;\n  --text-cherry-100: #fadadb;\n  --text-cherry-200: #f7c8ca;\n  --text-cherry-300: #f5b6b8;\n  --text-cherry-400: #ea6d71;\n  --text-cherry-500: #e5484d;\n  --text-cherry-600: #b83a3e;\n  --text-aqua-100: #c1eefd;\n  --text-aqua-200: #9ae4fc;\n  --text-aqua-300: #72d9fb;\n  --text-aqua-400: #4bcff9;\n  --text-aqua-500: #23c4f8;\n  --text-aqua-600: #07afe6;\n  --text-sakura-100: #fbc8d2;\n  --text-sakura-200: #fab5c3;\n  --text-sakura-300: #f791a5;\n  --text-sakura-400: #f56c87;\n  --text-sakura-500: #f24769;\n  --text-sakura-600: #c53955;\n  --text-amber-100: #fff0cc;\n  --text-amber-200: #ffebbb;\n  --text-amber-300: #ffe19a;\n  --text-amber-400: #ffd778;\n  --text-amber-500: #ffcd56;\n  --text-amber-600: #d5aa45;\n  --text-ink-100: #2a2e37;\n  --text-ink-200: #23262e;\n  --text-ink-300: #16181d;\n  --text-ink-400: #121317;\n  --text-ink-500: #0b0c0e;\n  --text-vanilla-100: #fff;\n  --text-vanilla-200: #f5f5f5;\n  --text-vanilla-300: #e9e9e9;\n  --text-vanilla-400: #c0c1c3;\n  --text-slate-200: #2c3140;\n  --text-slate-300: #242834;\n  --text-slate-400: #1d212d;\n  --text-slate-500: #161922;\n  --text-gradient-coral:\n    linear-gradient(\n      114deg,#ed6d68 14.99%,#fca083 77.27%);\n  --text-gradient-dark-shadow:\n    linear-gradient(\n      139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n  --text-gradient-dawn:\n    linear-gradient(\n      99deg,#7a97fa 4.42%,#f977ff 96.6%);\n  --text-gradient-ocean:\n    linear-gradient(\n      99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n  --text-gradient-splash:\n    linear-gradient(\n      99deg,#4568dc 4.42%,#324daa 96.6%);\n  --text-gradient-flamingo:\n    linear-gradient(\n      92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n  --text-forest-200: #a8f3d3;\n  --text-forest-300: #7cedbe;\n  --text-forest-400: #51e7a8;\n  --text-forest-500: #25e192;\n  --text-forest-600: #1eb475;\n  --padding-1: 0.25rem;\n  --padding-2: 0.5rem;\n  --padding-3: 0.75rem;\n  --padding-4: 1rem;\n  --padding-5: 1.25rem;\n  --padding-6: 1.5rem;\n  --padding-7: 1.75rem;\n  --padding-8: 2rem;\n  --padding-10: 2.5rem;\n  --padding-12: 3rem;\n  --padding-16: 4rem;\n  --padding-20: 5rem;\n  --padding-24: 6rem;\n  --padding-32: 8rem;\n  --padding-40: 10rem;\n  --padding-48: 12rem;\n  --padding-56: 14rem;\n  --padding-64: 16rem;\n  --margin-1: 0.25rem;\n  --margin-2: 0.5rem;\n  --margin-3: 0.75rem;\n  --margin-4: 1rem;\n  --margin-5: 1.25rem;\n  --margin-6: 1.5rem;\n  --margin-7: 1.75rem;\n  --margin-8: 2rem;\n  --margin-10: 2.5rem;\n  --margin-12: 3rem;\n  --margin-16: 4rem;\n  --margin-20: 5rem;\n  --margin-24: 6rem;\n  --margin-32: 8rem;\n  --margin-40: 10rem;\n  --margin-48: 12rem;\n  --margin-56: 14rem;\n  --margin-64: 16rem;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n  --font-size-5xl: 3rem;\n  --font-size-6xl: 3.75rem;\n  --font-size-7xl: 4.5rem;\n  --font-size-8xl: 6rem;\n  --font-size-9xl: 8rem;\n  --font-weight-thin: 100;\n  --font-weight-extralight: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n  --font-weight-black: 900;\n}\n:root {\n  --background: var(--bg-vanilla-200);\n  --foreground: var(--text-ink-400);\n  --card: var(--bg-vanilla-100);\n  --card-foreground: var(--text-ink-400);\n  --popover: var(--bg-vanilla-100);\n  --popover-foreground: var(--text-ink-400);\n  --primary: var(--bg-robin-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --secondary: var(--bg-vanilla-300);\n  --secondary-foreground: var(--text-slate-400);\n  --muted: var(--bg-vanilla-300);\n  --muted-foreground: var(--text-slate-50);\n  --accent: var(--bg-aqua-100);\n  --accent-foreground: var(--text-slate-400);\n  --destructive: var(--bg-cherry-500);\n  --destructive-foreground: var(--text-vanilla-100);\n  --border: var(--bg-slate-400);\n  --input: var(--bg-slate-400);\n  --ring: var(--bg-robin-500);\n  --chart-1: var(--bg-robin-500);\n  --chart-2: var(--bg-robin-600);\n  --chart-3: var(--bg-slate-300);\n  --chart-4: var(--bg-slate-400);\n  --chart-5: var(--bg-slate-500);\n  --radius: 0.25rem;\n  --sidebar: var(--bg-vanilla-300);\n  --sidebar-foreground: var(--text-ink-400);\n  --sidebar-primary: var(--bg-robin-500);\n  --sidebar-primary-foreground: var(--text-vanilla-100);\n  --sidebar-accent: var(--bg-aqua-100);\n  --sidebar-accent-foreground: var(--text-slate-400);\n  --sidebar-border: var(--bg-slate-400);\n  --sidebar-ring: var(--bg-robin-500);\n  --font-sans: "Inter";\n  --font-serif: "Open Sans";\n  --font-mono: "Geist Mono";\n}\n.dark {\n  --background: var(--bg-ink-500);\n  --foreground: var(--text-vanilla-400);\n  --card: var(--bg-ink-400);\n  --card-foreground: var(--text-vanilla-100);\n  --popover: var(--bg-ink-400);\n  --popover-foreground: var(--text-vanilla-100);\n  --primary: var(--bg-robin-500);\n  --primary-foreground: var(--text-ink-500);\n  --secondary: var(--bg-slate-500);\n  --secondary-foreground: var(--text-vanilla-400);\n  --muted: var(--bg-slate-500);\n  --muted-foreground: var(--text-vanilla-400);\n  --accent: var(--bg-slate-300);\n  --accent-foreground: var(--text-vanilla-100);\n  --destructive: var(--bg-cherry-500);\n  --destructive-foreground: var(--text-ink-500);\n  --border: var(--bg-slate-400);\n  --input: var(--bg-slate-300);\n  --ring: var(--bg-robin-500);\n  --chart-1: var(--bg-robin-400);\n  --chart-2: var(--bg-robin-500);\n  --chart-3: var(--bg-robin-600);\n  --chart-4: var(--bg-slate-200);\n  --chart-5: var(--bg-slate-300);\n  --sidebar: var(--bg-slate-500);\n  --sidebar-foreground: var(--text-vanilla-400);\n  --sidebar-primary: var(--bg-robin-500);\n  --sidebar-primary-foreground: var(--text-ink-500);\n  --sidebar-accent: var(--bg-slate-400);\n  --sidebar-accent-foreground: var(--text-vanilla-400);\n  --sidebar-border: var(--bg-slate-500);\n  --sidebar-ring: var(--bg-robin-500);\n}\n@layer base {\n  * {\n    border-color: var(--color-border);\n    outline-color: var(--color-ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);\n    }\n  }\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n  }\n}\n[data-theme-color=blue] {\n  --primary: var(--bg-robin-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --ring: var(--bg-robin-500);\n  --sidebar-primary: var(--bg-robin-500);\n  --sidebar-ring: var(--bg-robin-500);\n}\n.dark[data-theme-color=blue] {\n  --primary: var(--bg-robin-400);\n  --primary-foreground: var(--text-ink-500);\n  --ring: var(--bg-robin-400);\n  --sidebar-primary: var(--bg-robin-400);\n  --sidebar-ring: var(--bg-robin-400);\n}\n[data-theme-color=green] {\n  --primary: var(--bg-forest-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --ring: var(--bg-forest-500);\n  --sidebar-primary: var(--bg-forest-500);\n  --sidebar-ring: var(--bg-forest-500);\n}\n.dark[data-theme-color=green] {\n  --primary: var(--bg-forest-400);\n  --primary-foreground: var(--text-ink-500);\n  --ring: var(--bg-forest-400);\n  --sidebar-primary: var(--bg-forest-400);\n  --sidebar-ring: var(--bg-forest-400);\n}\n[data-theme-color=amber] {\n  --primary: var(--bg-amber-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --ring: var(--bg-amber-500);\n  --sidebar-primary: var(--bg-amber-500);\n  --sidebar-ring: var(--bg-amber-500);\n}\n.dark[data-theme-color=amber] {\n  --primary: var(--bg-amber-400);\n  --primary-foreground: var(--text-ink-500);\n  --ring: var(--bg-amber-400);\n  --sidebar-primary: var(--bg-amber-400);\n  --sidebar-ring: var(--bg-amber-400);\n}\n[data-theme-color=cherry] {\n  --primary: var(--bg-cherry-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --ring: var(--bg-cherry-500);\n  --sidebar-primary: var(--bg-cherry-500);\n  --sidebar-ring: var(--bg-cherry-500);\n}\n.dark[data-theme-color=cherry] {\n  --primary: var(--bg-cherry-400);\n  --primary-foreground: var(--text-ink-500);\n  --ring: var(--bg-cherry-400);\n  --sidebar-primary: var(--bg-cherry-400);\n  --sidebar-ring: var(--bg-cherry-400);\n}\n[data-theme-color=aqua] {\n  --primary: var(--bg-aqua-500);\n  --primary-foreground: var(--text-vanilla-100);\n  --ring: var(--bg-aqua-500);\n  --sidebar-primary: var(--bg-aqua-500);\n  --sidebar-ring: var(--bg-aqua-500);\n}\n.dark[data-theme-color=aqua] {\n  --primary: var(--bg-aqua-400);\n  --primary-foreground: var(--text-ink-500);\n  --ring: var(--bg-aqua-400);\n  --sidebar-primary: var(--bg-aqua-400);\n  --sidebar-ring: var(--bg-aqua-400);\n}\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n    }\n  }\n}\n');
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Drawer(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(Drawer$1.Root, __spreadValues({ "data-slot": "drawer" }, props));
+}
+function DrawerTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, __spreadValues({ "data-slot": "drawer-trigger" }, props));
+}
+function DrawerPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, __spreadValues({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerClose(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(Drawer$1.Close, __spreadValues({ "data-slot": "drawer-close" }, props));
+}
+function DrawerOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    __spreadValues({
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )
+    }, props)
+  );
+}
+function DrawerContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    showOverlay = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "showOverlay"
+  ]);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    showOverlay && /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-card fixed z-50 flex h-auto flex-col shadow-lg",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "border border-vanilla-300 dark:border-slate-500 rounded-md",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      })
+    )
+  ] });
+}
+function DrawerHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "drawer-header",
+      className: cn("flex flex-col gap-1.5 p-4", className)
+    }, props)
+  );
+}
+function DrawerFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className)
+    }, props)
+  );
+}
+function DrawerTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    __spreadValues({
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className)
+    }, props)
+  );
+}
+function DrawerDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    __spreadValues({
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+function DrawerWrapper({
+  trigger,
+  header,
+  content,
+  footer,
+  direction = "right",
+  showCloseButton = true,
+  allowOutsideClick = true,
+  showOverlay = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Drawer, { direction, modal: allowOutsideClick, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DrawerContent, { className, showOverlay, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-sm", children: [
+      header && /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b border-vanilla-300 dark:border-slate-500 px-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(DrawerTitle, { className: "font-inter text-sm font-normal", children: header.title }) }),
+        showCloseButton && /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(DrawerHeader, { children: (header == null ? void 0 : header.description) && /* @__PURE__ */ jsx(DrawerDescription, { children: header.description }) }),
+      content,
+      footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
+    ] }) })
+  ] });
+}
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerWrapper };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@signozhq/drawer",
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js"
+    }
+  },
+  "main": "./dist/drawer.js",
+  "module": "./dist/drawer.js",
+  "types": "./dist/drawer.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.3",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^9.11.0",
+    "postcss": "^8.4.47",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^4.1.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3",
+    "@repo/eslint-config": "0.0.0",
+    "@signozhq/tailwind-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.445.0",
+    "react": "^18.2.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "side drawer component",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}