@snapcall/design-system 1.0.0

package/README.md

@@ -0,0 +1,38 @@
+# Design System
+
+This is SnapCall's design system, the goal is to use this library in all of our apps with the ability to re-use the same components everywhere.
+
+Storybook preview link (based on `develop`): https://d3iwrju745oc71.cloudfront.net
+
+## Installation
+
+```sh
+npm i @snapcall/design-system
+```
+
+## Usage
+
+### Inside a Tailwind project
+
+First, update your tailwind config:
+
+```js
+{
+  content: ['./node_modules/@snapcall/design-system/dist/*.{js,mjs}',],
+  presets: [require('@snapcall/design-system/dist/tailwind.config')],
+}
+```
+
+Then, include the base style at the root of your app:
+
+```js
+import '@snapcall/design-system/dist/style.css';
+```
+
+### Inside a non-Tailwind project
+
+Include the full style at the root of your app:
+
+```js
+import '@snapcall/design-system/dist/tailwind.css';
+```

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { AriaButtonProps } from 'react-aria';
+import { OverlayTriggerState, useOverlayTriggerState } from 'react-stately';
+
+interface ButtonProps extends AriaButtonProps {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'dark' | 'gray' | 'red';
+    size?: 'large' | 'medium' | 'small' | 'extraSmall';
+    /** Only supported for secondary and red variants */
+    blank?: boolean;
+    fullWidth?: boolean;
+    form?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    variant?: 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'secondary' | 'basic';
+    capitalize?: boolean;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+interface DrawerProps {
+    state: OverlayTriggerState;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    container?: Element;
+    children: ReactElement | ((close: () => void) => ReactElement);
+}
+declare const Drawer: ({ state, placement, container, children, ...props }: DrawerProps) => JSX.Element | null;
+declare const useDrawerState: typeof useOverlayTriggerState;
+
+export { Badge, BadgeProps, Button, ButtonProps, Drawer, DrawerProps, useDrawerState };

package/dist/index.js

@@ -0,0 +1,614 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Drawer: () => Drawer,
+  useDrawerState: () => useDrawerState
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Button/Button.tsx
+var import_react_aria = require("react-aria");
+
+// node_modules/@react-aria/utils/dist/import.mjs
+var import_react = __toESM(require("react"), 1);
+var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof window !== "undefined" ? (0, import_react.default).useLayoutEffect : () => {
+};
+var $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
+var $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window === "undefined")
+    return;
+  let onTransitionStart = (e) => {
+    let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!transitions) {
+      transitions = /* @__PURE__ */ new Set();
+      $bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions);
+      e.target.addEventListener("transitioncancel", onTransitionEnd);
+    }
+    transitions.add(e.propertyName);
+  };
+  let onTransitionEnd = (e) => {
+    let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!properties)
+      return;
+    properties.delete(e.propertyName);
+    if (properties.size === 0) {
+      e.target.removeEventListener("transitioncancel", onTransitionEnd);
+      $bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
+    }
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
+        cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart);
+  document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $bbed8b41f857bcc0$var$setupGlobalEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
+var $5df64b3807dc15ee$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+function $c87311424ea30a05$var$testUserAgent(re) {
+  var _window_navigator_userAgentData;
+  if (typeof window === "undefined" || window.navigator == null)
+    return false;
+  return ((_window_navigator_userAgentData = window.navigator["userAgentData"]) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.brands.some((brand) => re.test(brand.brand))) || re.test(window.navigator.userAgent);
+}
+function $c87311424ea30a05$var$testPlatform(re) {
+  var _window_navigator_userAgentData;
+  return typeof window !== "undefined" && window.navigator != null ? re.test(((_window_navigator_userAgentData = window.navigator["userAgentData"]) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.platform) || window.navigator.platform) : false;
+}
+function $c87311424ea30a05$export$9ac100e40613ea10() {
+  return $c87311424ea30a05$var$testPlatform(/^Mac/i);
+}
+function $c87311424ea30a05$export$a11b0059900ceec8() {
+  return $c87311424ea30a05$var$testUserAgent(/Android/i);
+}
+function $6a7db85432448f7f$export$60278871457622de(event) {
+  if (event.mozInputSource === 0 && event.isTrusted)
+    return true;
+  if ((0, $c87311424ea30a05$export$a11b0059900ceec8)() && event.pointerType)
+    return event.type === "click" && event.buttons === 1;
+  return event.detail === 0 && !event.pointerType;
+}
+
+// node_modules/@react-aria/interactions/dist/import.mjs
+var import_react2 = __toESM(require("react"), 1);
+var $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = (0, import_react2.default).createContext(null);
+$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = "PressResponderContext";
+var $507fabe10e71c6fb$var$currentModality = null;
+var $507fabe10e71c6fb$var$changeHandlers = /* @__PURE__ */ new Set();
+var $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
+var $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+var $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
+  for (let handler of $507fabe10e71c6fb$var$changeHandlers)
+    handler(modality, e);
+}
+function $507fabe10e71c6fb$var$isValidKey(e) {
+  return !(e.metaKey || !(0, $c87311424ea30a05$export$9ac100e40613ea10)() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function $507fabe10e71c6fb$var$handleKeyboardEvent(e) {
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+  if ($507fabe10e71c6fb$var$isValidKey(e)) {
+    $507fabe10e71c6fb$var$currentModality = "keyboard";
+    $507fabe10e71c6fb$var$triggerChangeHandlers("keyboard", e);
+  }
+}
+function $507fabe10e71c6fb$var$handlePointerEvent(e) {
+  $507fabe10e71c6fb$var$currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    $507fabe10e71c6fb$var$triggerChangeHandlers("pointer", e);
+  }
+}
+function $507fabe10e71c6fb$var$handleClickEvent(e) {
+  if ((0, $6a7db85432448f7f$export$60278871457622de)(e)) {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    $507fabe10e71c6fb$var$currentModality = "virtual";
+  }
+}
+function $507fabe10e71c6fb$var$handleFocusEvent(e) {
+  if (e.target === window || e.target === document)
+    return;
+  if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
+    $507fabe10e71c6fb$var$currentModality = "virtual";
+    $507fabe10e71c6fb$var$triggerChangeHandlers("virtual", e);
+  }
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+  $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+}
+function $507fabe10e71c6fb$var$handleWindowBlur() {
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+  $507fabe10e71c6fb$var$hasBlurredWindowRecently = true;
+}
+function $507fabe10e71c6fb$var$setupGlobalFocusEvents() {
+  if (typeof window === "undefined" || $507fabe10e71c6fb$var$hasSetupGlobalListeners)
+    return;
+  let focus = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function() {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  };
+  document.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+  document.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+  document.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+  window.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+  window.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+  } else {
+    document.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+  }
+  $507fabe10e71c6fb$var$hasSetupGlobalListeners = true;
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $507fabe10e71c6fb$var$setupGlobalFocusEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $507fabe10e71c6fb$var$setupGlobalFocusEvents);
+}
+var $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
+var $6179b936705e76d3$var$hoverCount = 0;
+function $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents() {
+  $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = true;
+  setTimeout(() => {
+    $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
+  }, 50);
+}
+function $6179b936705e76d3$var$handleGlobalPointerEvent(e) {
+  if (e.pointerType === "touch")
+    $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents();
+}
+function $6179b936705e76d3$var$setupGlobalTouchEvents() {
+  if (typeof document === "undefined")
+    return;
+  if (typeof PointerEvent !== "undefined")
+    document.addEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent);
+  else
+    document.addEventListener("touchend", $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
+  $6179b936705e76d3$var$hoverCount++;
+  return () => {
+    $6179b936705e76d3$var$hoverCount--;
+    if ($6179b936705e76d3$var$hoverCount > 0)
+      return;
+    if (typeof PointerEvent !== "undefined")
+      document.removeEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent);
+    else
+      document.removeEventListener("touchend", $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
+  };
+}
+function $6179b936705e76d3$export$ae780daf29e6d456(props) {
+  let { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
+  let [isHovered, setHovered] = (0, import_react2.useState)(false);
+  let state = (0, import_react2.useRef)({
+    isHovered: false,
+    ignoreEmulatedMouseEvents: false,
+    pointerType: "",
+    target: null
+  }).current;
+  (0, import_react2.useEffect)($6179b936705e76d3$var$setupGlobalTouchEvents, []);
+  let { hoverProps, triggerHoverEnd } = (0, import_react2.useMemo)(() => {
+    let triggerHoverStart = (event, pointerType) => {
+      state.pointerType = pointerType;
+      if (isDisabled || pointerType === "touch" || state.isHovered || !event.currentTarget.contains(event.target))
+        return;
+      state.isHovered = true;
+      let target = event.currentTarget;
+      state.target = target;
+      if (onHoverStart)
+        onHoverStart({
+          type: "hoverstart",
+          target,
+          pointerType
+        });
+      if (onHoverChange)
+        onHoverChange(true);
+      setHovered(true);
+    };
+    let triggerHoverEnd2 = (event, pointerType) => {
+      state.pointerType = "";
+      state.target = null;
+      if (pointerType === "touch" || !state.isHovered)
+        return;
+      state.isHovered = false;
+      let target = event.currentTarget;
+      if (onHoverEnd)
+        onHoverEnd({
+          type: "hoverend",
+          target,
+          pointerType
+        });
+      if (onHoverChange)
+        onHoverChange(false);
+      setHovered(false);
+    };
+    let hoverProps2 = {};
+    if (typeof PointerEvent !== "undefined") {
+      hoverProps2.onPointerEnter = (e) => {
+        if ($6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse")
+          return;
+        triggerHoverStart(e, e.pointerType);
+      };
+      hoverProps2.onPointerLeave = (e) => {
+        if (!isDisabled && e.currentTarget.contains(e.target))
+          triggerHoverEnd2(e, e.pointerType);
+      };
+    } else {
+      hoverProps2.onTouchStart = () => {
+        state.ignoreEmulatedMouseEvents = true;
+      };
+      hoverProps2.onMouseEnter = (e) => {
+        if (!state.ignoreEmulatedMouseEvents && !$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents)
+          triggerHoverStart(e, "mouse");
+        state.ignoreEmulatedMouseEvents = false;
+      };
+      hoverProps2.onMouseLeave = (e) => {
+        if (!isDisabled && e.currentTarget.contains(e.target))
+          triggerHoverEnd2(e, "mouse");
+      };
+    }
+    return {
+      hoverProps: hoverProps2,
+      triggerHoverEnd: triggerHoverEnd2
+    };
+  }, [
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd,
+    isDisabled,
+    state
+  ]);
+  (0, import_react2.useEffect)(() => {
+    if (isDisabled)
+      triggerHoverEnd({
+        currentTarget: state.target
+      }, state.pointerType);
+  }, [
+    isDisabled
+  ]);
+  return {
+    hoverProps,
+    isHovered
+  };
+}
+
+// src/components/Button/Button.tsx
+var import_react4 = require("react");
+var import_classnames = __toESM(require("classnames"));
+
+// src/utils/useForwardedRef.ts
+var import_react3 = require("react");
+function useForwardedRef(ref) {
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!ref)
+      return;
+    if (typeof ref === "function") {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react4.forwardRef)(
+  function Button2(_a, forwardedRef) {
+    var _b = _a, {
+      children,
+      variant = "primary",
+      size = "medium",
+      blank = false,
+      fullWidth = false,
+      form
+    } = _b, otherProps = __objRest(_b, [
+      "children",
+      "variant",
+      "size",
+      "blank",
+      "fullWidth",
+      "form"
+    ]);
+    const ref = useForwardedRef(forwardedRef);
+    const { buttonProps, isPressed } = (0, import_react_aria.useButton)(otherProps, ref);
+    const { isFocused, isFocusVisible, focusProps } = (0, import_react_aria.useFocusRing)();
+    const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+      isDisabled: buttonProps.disabled
+    });
+    const variantStyle = {
+      primary: (0, import_classnames.default)("text-white border-transparent", {
+        "bg-blue-700": !isHovered && !isPressed,
+        "bg-blue-800": isHovered && !isPressed,
+        "bg-blue-900": isPressed,
+        "outline-blue-1000": isFocusVisible
+      }),
+      secondary: (0, import_classnames.default)("text-blue-700 border-transparent", {
+        "bg-gray-50": !blank && !isHovered && !isPressed,
+        "bg-blue-100": isHovered && !isPressed,
+        "bg-blue-200": isPressed,
+        "outline-blue-700": isFocusVisible
+      }),
+      tertiary: (0, import_classnames.default)("text-gray-1000 border-gray-600", {
+        "bg-transparent": !isHovered && !isPressed,
+        "bg-gray-50": isHovered && !isPressed,
+        "bg-gray-200": isPressed,
+        "outline-gray-1000": isFocusVisible
+      }),
+      dark: (0, import_classnames.default)("text-white border-transparent", {
+        "bg-gray-1000": !isHovered && !isPressed,
+        "bg-gray-800": isHovered && !isPressed,
+        "bg-gray-900": isPressed,
+        "outline-gray-600": isFocusVisible
+      }),
+      gray: (0, import_classnames.default)("text-gray-1000 border-transparent", {
+        "bg-gray-50": !isHovered && !isPressed,
+        "bg-gray-300": isHovered && !isPressed,
+        "bg-gray-500": isPressed,
+        "outline-gray-1000": isFocusVisible
+      }),
+      red: (0, import_classnames.default)("text-red-700 border-transparent", {
+        "bg-gray-50": !blank && !isHovered && !isPressed,
+        "bg-red-100": isHovered && !isPressed,
+        "bg-red-200": isPressed,
+        "outline-red-700": isFocusVisible
+      })
+    };
+    const sizeStyle = {
+      large: "py-2.5 px-5 text-md rounded-lg gap-2",
+      medium: "py-1.5 px-3.5 text-md rounded-lg gap-2",
+      small: "py-[5px] px-3 text-sm rounded-md gap-2",
+      extraSmall: "py-1 px-2.5 text-sm rounded gap-[5px]"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+        className: (0, import_classnames.default)(
+          sizeStyle[size],
+          variantStyle[variant],
+          "flex items-center justify-center font-medium border",
+          "transition-colors ease-in-out",
+          {
+            "outline-none": isFocused && !isFocusVisible,
+            "outline outline-2 outline-offset-0": isFocusVisible,
+            "cursor-not-allowed opacity-50": buttonProps.disabled,
+            "w-full": fullWidth
+          }
+        )
+      }, buttonProps), focusProps), hoverProps), {
+        form,
+        ref,
+        children
+      })
+    );
+  }
+);
+
+// src/components/Badge/Badge.tsx
+var import_classnames2 = __toESM(require("classnames"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Badge = ({
+  children,
+  variant = "primary",
+  capitalize = true
+}) => {
+  const colorStyle = {
+    info: "bg-[#F0F7FF] text-cta",
+    success: "bg-[#F1FFF1] text-[#53AB53]",
+    warning: "bg-[#FFF5DC] text-[#FFB800]",
+    danger: "bg-[#FFF3F1] text-[#E42525]",
+    primary: "bg-primary text-graySelected",
+    secondary: "bg-graySelected text-primaryLight",
+    basic: "bg-transparent text-primaryLight border border-primaryLight"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: (0, import_classnames2.default)("px-2 py-[2px] text-xs rounded-md whitespace-nowrap", colorStyle[variant], {
+        capitalize
+      }),
+      children
+    }
+  );
+};
+
+// src/components/Drawer/Drawer.tsx
+var import_react5 = require("react");
+var import_react_aria2 = require("react-aria");
+var import_react_stately = require("react-stately");
+var import_react_transition_group = require("react-transition-group");
+var import_classnames3 = __toESM(require("classnames"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var placementsStyle = {
+  top: {
+    container: " items-start justify-center",
+    transition: {
+      appear: "-translate-y-full",
+      appearDone: "translate-y-0",
+      exit: "-translate-y-full"
+    }
+  },
+  right: {
+    container: "justify-end",
+    transition: {
+      appear: "translate-x-full",
+      appearDone: "translate-x-0",
+      exit: "translate-x-full"
+    }
+  },
+  bottom: {
+    container: " items-end justify-center",
+    transition: {
+      appear: "translate-y-full",
+      appearDone: "translate-y-0",
+      exit: "translate-y-full"
+    }
+  },
+  left: {
+    container: "justify-start",
+    transition: {
+      appear: "-translate-x-full",
+      appearDone: "translate-x-0",
+      exit: "-translate-x-full"
+    }
+  }
+};
+var Drawer = (_a) => {
+  var _b = _a, {
+    state,
+    placement = "left",
+    container,
+    children
+  } = _b, props = __objRest(_b, [
+    "state",
+    "placement",
+    "container",
+    "children"
+  ]);
+  const ref = (0, import_react5.useRef)(null);
+  const [exited, setExited] = (0, import_react5.useState)(!state.isOpen);
+  const { modalProps, underlayProps } = (0, import_react_aria2.useModalOverlay)(
+    __spreadValues({
+      isDismissable: true
+    }, props),
+    state,
+    ref
+  );
+  if (!(state.isOpen || !exited)) {
+    return null;
+  }
+  const placementStyle = placementsStyle[placement];
+  const position = container ? "absolute" : "fixed";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_aria2.Overlay, { portalContainer: container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_transition_group.CSSTransition,
+      {
+        in: state.isOpen,
+        appear: true,
+        onEntered: () => setExited(false),
+        onExited: () => setExited(true),
+        timeout: { enter: 0, exit: 300 },
+        classNames: {
+          appear: "opacity-0",
+          appearDone: "opacity-1",
+          exit: "opacity-0"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: (0, import_classnames3.default)(
+              "z-50 inset-0 bg-black/50 transition-opacity duration-300",
+              position
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        className: (0, import_classnames3.default)("z-50 inset-0 flex", position, placementStyle.container)
+      }, underlayProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_transition_group.CSSTransition,
+          {
+            in: state.isOpen,
+            appear: true,
+            nodeRef: ref,
+            timeout: { enter: 0, exit: 300 },
+            classNames: placementStyle.transition,
+            children: (0, import_react5.cloneElement)(
+              typeof children === "function" ? children(state.close) : children,
+              __spreadValues({
+                ref,
+                style: {
+                  transitionProperty: "transform",
+                  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                  transitionDuration: "300ms"
+                }
+              }, modalProps)
+            )
+          }
+        )
+      })
+    )
+  ] });
+};
+var useDrawerState = import_react_stately.useOverlayTriggerState;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Drawer,
+  useDrawerState
+});