@ngrok/mantle 0.0.1-alpha.13 → 0.0.1-alpha.14

package/dist/assets/mantle.css

@@ -706,6 +706,22 @@
 	--popover-foreground: 210 40% 98%;
 }
 
+@layer base {
+	/**
+ * provide an a11y escape hatch for those that prefer less motion
+ */
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
+	}
+}
+
 /**
 	* prism.js default theme for JavaScript, CSS and HTML
 	* Based on dabblet (http://dabblet.com)

package/dist/dts/anchor/index.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes } from "react";
+import { WithAsChild } from "../types/as-child";
+declare const anchorClassNames: (className: string | undefined) => string;
+declare const Anchor: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & import("react").RefAttributes<HTMLAnchorElement>>;
+export { Anchor, anchorClassNames };

package/dist/dts/drawer/index.d.ts

@@ -0,0 +1,22 @@
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+import { HTMLAttributes } from "react";
+declare const Drawer: import("react").FC<DrawerPrimitive.DialogProps>;
+declare const DrawerTrigger: import("react").ForwardRefExoticComponent<DrawerPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: import("react").ForwardRefExoticComponent<DrawerPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: import("react").FC<DrawerPrimitive.DialogPortalProps>;
+declare const DrawerOverlay: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/dts/index.d.ts

@@ -1,9 +1,12 @@
+export { Anchor, anchorClassNames } from "./anchor";
 export { Button } from "./button";
 export { Card, CardBody, CardFooter, CardHeader, CardTitle } from "./card";
 export { cx } from "./cx";
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, } from "./drawer";
 export { Input } from "./input";
 export { MediaObject, MediaObjectMedia, MediaObjectContent } from "./media-object";
 export { Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export { Skeleton } from "./skeleton";
 export { ThemeProvider, PreventWrongThemeFlash, isTheme, useTheme } from "./theme-provider";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
 export type { ButtonProps } from "./button";

package/dist/dts/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from "react";
+type Props = Exclude<HTMLAttributes<HTMLDivElement>, "children">;
+declare function Skeleton({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/dts/tailwind.preset.d.ts

@@ -28,6 +28,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 red: {
                     50: string;
@@ -41,6 +42,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 orange: {
                     50: string;
@@ -54,6 +56,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 amber: {
                     50: string;
@@ -67,6 +70,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 yellow: {
                     50: string;
@@ -80,6 +84,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 lime: {
                     50: string;
@@ -93,6 +98,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 green: {
                     50: string;
@@ -106,6 +112,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 teal: {
                     50: string;
@@ -119,6 +126,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 cyan: {
                     50: string;
@@ -132,6 +140,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 sky: {
                     50: string;
@@ -145,6 +154,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 blue: {
                     50: string;
@@ -158,6 +168,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 indigo: {
                     50: string;
@@ -171,6 +182,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 violet: {
                     50: string;
@@ -184,6 +196,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 purple: {
                     50: string;
@@ -197,6 +210,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 fuchsia: {
                     50: string;
@@ -210,6 +224,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 pink: {
                     50: string;
@@ -223,6 +238,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 rose: {
                     50: string;
@@ -236,6 +252,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 button: string;
                 border: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /**
- * @ngrok/mantle v0.0.1-alpha.13
+ * @ngrok/mantle v0.0.1-alpha.14
  *
  * Copyright (c) ngrok.
  *
@@ -10,22 +10,16 @@
  * @license MIT
  */
 import * as react from 'react';
-import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, PropsWithChildren, CSSProperties } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, PropsWithChildren, CSSProperties } from 'react';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps as VariantProps$1 } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
-import * as _radix_ui_react_select from '@radix-ui/react-select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DrawerPrimitive from '@radix-ui/react-dialog';
+import * as _radix_ui_react_select from '@radix-ui/react-select';
 import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
 
-/**
- * Makes all properties in an object non-nullable, recursively.
- */
-type DeepNonNullable<Type> = {
-    [Property in keyof Type]-?: Type[Property] & {};
-};
-
 /**
  * Utility type for adding the `asChild` boolean prop to a component.
  */
@@ -47,6 +41,16 @@ type WithAsChild = {
     asChild?: boolean;
 };
 
+declare const anchorClassNames: (className: string | undefined) => string;
+declare const Anchor: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * Makes all properties in an object non-nullable, recursively.
+ */
+type DeepNonNullable<Type> = {
+    [Property in keyof Type]-?: Type[Property] & {};
+};
+
 /**
  * Variant props that are optional and cannot be `null`.
  *
@@ -109,6 +113,25 @@ declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHead
  */
 declare function cx(...inputs: ClassValue[]): string;
 
+declare const Drawer: react.FC<DrawerPrimitive.DialogProps>;
+declare const DrawerTrigger: react.ForwardRefExoticComponent<DrawerPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: react.ForwardRefExoticComponent<DrawerPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: react.FC<DrawerPrimitive.DialogPortalProps>;
+declare const DrawerOverlay: react.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: react.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps$1<(props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: react.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: react.ForwardRefExoticComponent<Omit<DrawerPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+
 /**
  * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
  * if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls
@@ -185,6 +208,9 @@ declare const SelectLabel: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
 declare const SelectOption: react.ForwardRefExoticComponent<Omit<_radix_ui_react_select.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: react.ForwardRefExoticComponent<Omit<_radix_ui_react_select.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+type Props = Exclude<HTMLAttributes<HTMLDivElement>, "children">;
+declare function Skeleton({ className, ...props }: Props): react_jsx_runtime.JSX.Element;
+
 /**
  * themes is a tuple of valid themes.
  */
@@ -253,4 +279,4 @@ type WithStyleProps = {
     style?: CSSProperties;
 };
 
-export { type AutoComplete, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps, Input, type InputProps, type InputType, MediaObject, MediaObjectContent, MediaObjectMedia, PreventWrongThemeFlash, Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, type Theme, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type WithAsChild, type WithStyleProps, cx, isTheme, useTheme };
+export { Anchor, type AutoComplete, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Input, type InputProps, type InputType, MediaObject, MediaObjectContent, MediaObjectMedia, PreventWrongThemeFlash, Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, Skeleton, type Theme, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type WithAsChild, type WithStyleProps, anchorClassNames, cx, isTheme, useTheme };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @ngrok/mantle v0.0.1-alpha.13
+ * @ngrok/mantle v0.0.1-alpha.14
  *
  * Copyright (c) ngrok.
  *
@@ -9,12 +9,13 @@
  * @license MIT
  */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, useMemo, useContext, createContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
+import { forwardRef, useState, useEffect, useMemo, useContext, createContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import * as DrawerPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon, CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
 import { Trigger, Content, Label, Item, Separator, Root, Group, Value, Icon, Portal, Viewport, ItemIndicator, ItemText } from '@radix-ui/react-select';
 import invariant from 'tiny-invariant';
 import { Content as Content$1, Provider, Root as Root$1, Trigger as Trigger$1 } from '@radix-ui/react-tooltip';
@@ -58,7 +59,23 @@ function cx() {
   return twMerge(clsx(inputs));
 }
 
-var _excluded$4 = ["className", "priority", "size", "state", "asChild"];
+var _excluded$7 = ["asChild", "className"];
+var anchorClassNames = function anchorClassNames(className) {
+  return cx("text-blue-500 hover:text-blue-400 focus:text-blue-400 focus-visible:ring-blue-400/40 cursor-pointer rounded bg-transparent focus:outline-none focus-visible:ring focus:underline hover:underline visited:text-purple-600", className);
+};
+var Anchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var asChild = _ref.asChild,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var Component = asChild ? Slot : "a";
+  return jsx(Component, _extends({
+    className: anchorClassNames(className),
+    ref: ref
+  }, props));
+});
+Anchor.displayName = "Anchor";
+
+var _excluded$6 = ["className", "priority", "size", "state", "asChild"];
 var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium border transition-colors focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50", {
   variants: {
     priority: {
@@ -112,7 +129,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     state = _ref$state === void 0 ? "default" : _ref$state,
     _ref$asChild = _ref.asChild,
     asChild = _ref$asChild === void 0 ? false : _ref$asChild,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var Comp = asChild ? Slot : "button";
   return jsx(Comp, _extends({
     className: cx(buttonVariants({
@@ -126,11 +143,11 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Button.displayName = "Button";
 
-var _excluded$3 = ["className", "children"],
-  _excluded2$1 = ["className", "children"],
-  _excluded3$1 = ["className", "children"],
-  _excluded4$1 = ["className", "children"],
-  _excluded5$1 = ["className", "asChild"];
+var _excluded$5 = ["className", "children"],
+  _excluded2$2 = ["className", "children"],
+  _excluded3$2 = ["className", "children"],
+  _excluded4$2 = ["className", "children"],
+  _excluded5$2 = ["className", "asChild"];
 /**
  * A container that can be used to display content in a box resembling a playing
  * card.
@@ -138,7 +155,7 @@ var _excluded$3 = ["className", "children"],
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return jsx("div", _extends({
     ref: ref,
     className: cx("relative rounded border bg-white", className)
@@ -153,7 +170,7 @@ Card.displayName = "Card";
 var CardBody = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     children = _ref2.children,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   return jsx("div", _extends({
     ref: ref,
     className: cx("p-6", className)
@@ -168,7 +185,7 @@ CardBody.displayName = "CardBody";
 var CardFooter = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var className = _ref3.className,
     children = _ref3.children,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
   return jsx("div", _extends({
     ref: ref,
     className: cx("border-t px-6 py-3", className)
@@ -183,7 +200,7 @@ CardFooter.displayName = "CardFooter";
 var CardHeader = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var className = _ref4.className,
     children = _ref4.children,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+    rest = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
   return jsx("div", _extends({
     ref: ref,
     className: cx("border-b px-6 py-3", className)
@@ -198,7 +215,7 @@ CardHeader.displayName = "CardHeader";
 var CardTitle = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
     asChild = _ref5.asChild,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$2);
   var Comp = asChild ? Slot : "h3";
   return jsx(Comp, _extends({
     ref: ref,
@@ -207,7 +224,101 @@ var CardTitle = /*#__PURE__*/forwardRef(function (_ref5, ref) {
 });
 CardTitle.displayName = "CardTitle";
 
-var _excluded$2 = ["className", "state", "type"];
+var _excluded$4 = ["className"],
+  _excluded2$1 = ["side", "className", "children"],
+  _excluded3$1 = ["className"],
+  _excluded4$1 = ["className"],
+  _excluded5$1 = ["className"],
+  _excluded6 = ["className"];
+var Drawer = DrawerPrimitive.Root;
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerPortal = DrawerPrimitive.Portal;
+var DrawerOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return jsx(DrawerPrimitive.Overlay, _extends({
+    className: cx("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)
+  }, props, {
+    ref: ref
+  }));
+});
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+var drawerVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
+  variants: {
+    side: {
+      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 h-full w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+      right: "inset-y-0 right-0 h-full w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+var DrawerContent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$side = _ref2.side,
+    side = _ref2$side === void 0 ? "right" : _ref2$side,
+    className = _ref2.className,
+    children = _ref2.children,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  return jsxs(DrawerPortal, {
+    children: [jsx(DrawerOverlay, {}), jsxs(DrawerPrimitive.Content, _extends({
+      ref: ref,
+      className: cx(drawerVariants({
+        side: side
+      }), className)
+    }, props, {
+      children: [children, jsxs(DrawerPrimitive.Close, {
+        className: "absolute right-4 top-4 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 data-[state=open]:bg-secondary",
+        children: [jsx(Cross2Icon, {
+          className: "h-4 w-4"
+        }), jsx("span", {
+          className: "sr-only",
+          children: "Close"
+        })]
+      })]
+    }))]
+  });
+});
+DrawerContent.displayName = DrawerPrimitive.Content.displayName;
+var DrawerHeader = function DrawerHeader(_ref3) {
+  var className = _ref3.className,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+  return jsx("div", _extends({
+    className: cx("flex flex-col space-y-2 text-center sm:text-left", className)
+  }, props));
+};
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = function DrawerFooter(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+  return jsx("div", _extends({
+    className: cx("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)
+  }, props));
+};
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+  return jsx(DrawerPrimitive.Title, _extends({
+    ref: ref,
+    className: cx("text-lg font-semibold text-gray-900", className)
+  }, props));
+});
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+var DrawerDescription = /*#__PURE__*/forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return jsx(DrawerPrimitive.Description, _extends({
+    ref: ref,
+    className: cx("text-sm text-gray-600", className)
+  }, props));
+});
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+var _excluded$3 = ["className", "state", "type"];
 var inputVariants = cva("flex h-10 w-full rounded-md border bg-white px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-4 disabled:cursor-not-allowed disabled:opacity-50", {
   variants: {
     state: {
@@ -229,7 +340,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     state = _ref$state === void 0 ? "default" : _ref$state,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return jsx("input", _extends({
     className: cx(inputVariants({
       state: state
@@ -295,7 +406,7 @@ var MediaObjectContent = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 MediaObjectContent.displayName = "MediaObjectContent";
 
-var _excluded$1 = ["className", "children", "hideIcon"],
+var _excluded$2 = ["className", "children", "hideIcon"],
   _excluded2 = ["className", "children", "position"],
   _excluded3 = ["className"],
   _excluded4 = ["className", "children"],
@@ -309,7 +420,7 @@ var SelectTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$hideIcon = _ref.hideIcon,
     hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return jsxs(Trigger, _extends({
     ref: ref,
     className: cx("flex h-10 w-full items-center justify-between rounded-md border border-gray-500 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50", className)
@@ -383,6 +494,15 @@ var SelectSeparator = /*#__PURE__*/forwardRef(function (_ref5, ref) {
 });
 SelectSeparator.displayName = Separator.displayName;
 
+var _excluded$1 = ["className"];
+function Skeleton(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return jsx("div", _extends({
+    className: cx("animate-pulse rounded-md bg-gray-200", className)
+  }, props));
+}
+
 /**
  * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.
  */
@@ -543,4 +663,4 @@ var TooltipContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 TooltipContent.displayName = Content$1.displayName;
 
-export { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Input, MediaObject, MediaObjectContent, MediaObjectMedia, PreventWrongThemeFlash, Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cx, isTheme, useTheme };
+export { Anchor, Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Input, MediaObject, MediaObjectContent, MediaObjectMedia, PreventWrongThemeFlash, Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, Skeleton, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, anchorClassNames, cx, isTheme, useTheme };

package/dist/tailwind.preset.d.ts

@@ -28,6 +28,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 red: {
                     50: string;
@@ -41,6 +42,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 orange: {
                     50: string;
@@ -54,6 +56,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 amber: {
                     50: string;
@@ -67,6 +70,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 yellow: {
                     50: string;
@@ -80,6 +84,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 lime: {
                     50: string;
@@ -93,6 +98,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 green: {
                     50: string;
@@ -106,6 +112,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 teal: {
                     50: string;
@@ -119,6 +126,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 cyan: {
                     50: string;
@@ -132,6 +140,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 sky: {
                     50: string;
@@ -145,6 +154,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 blue: {
                     50: string;
@@ -158,6 +168,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 indigo: {
                     50: string;
@@ -171,6 +182,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 violet: {
                     50: string;
@@ -184,6 +196,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 purple: {
                     50: string;
@@ -197,6 +210,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 fuchsia: {
                     50: string;
@@ -210,6 +224,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 pink: {
                     50: string;
@@ -223,6 +238,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 rose: {
                     50: string;
@@ -236,6 +252,7 @@ declare const preset: {
                     800: string;
                     900: string;
                     950: string;
+                    DEFAULT: string;
                 };
                 button: string;
                 border: string;

package/dist/tailwind.preset.js

@@ -1,5 +1,5 @@
 /**
- * @ngrok/mantle v0.0.1-alpha.13
+ * @ngrok/mantle v0.0.1-alpha.14
  *
  * Copyright (c) ngrok.
  *
@@ -8,8 +8,8 @@
  *
  * @license MIT
  */
-import defaultTheme from 'tailwindcss/defaultTheme';
 import tailwindCssAnimatePlugin from 'tailwindcss-animate';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 var preset = {
   content: [],
@@ -40,7 +40,8 @@ var preset = {
           700: "hsl(var(--gray-700) / <alpha-value>)",
           800: "hsl(var(--gray-800) / <alpha-value>)",
           900: "hsl(var(--gray-900) / <alpha-value>)",
-          950: "hsl(var(--gray-950) / <alpha-value>)"
+          950: "hsl(var(--gray-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--gray-500) / <alpha-value>)"
         },
         red: {
           50: "hsl(var(--red-050) / <alpha-value>)",
@@ -53,7 +54,8 @@ var preset = {
           700: "hsl(var(--red-700) / <alpha-value>)",
           800: "hsl(var(--red-800) / <alpha-value>)",
           900: "hsl(var(--red-900) / <alpha-value>)",
-          950: "hsl(var(--red-950) / <alpha-value>)"
+          950: "hsl(var(--red-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--red-500) / <alpha-value>)"
         },
         orange: {
           50: "hsl(var(--orange-050) / <alpha-value>)",
@@ -66,7 +68,8 @@ var preset = {
           700: "hsl(var(--orange-700) / <alpha-value>)",
           800: "hsl(var(--orange-800) / <alpha-value>)",
           900: "hsl(var(--orange-900) / <alpha-value>)",
-          950: "hsl(var(--orange-950) / <alpha-value>)"
+          950: "hsl(var(--orange-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--orange-500) / <alpha-value>)"
         },
         amber: {
           50: "hsl(var(--amber-050) / <alpha-value>)",
@@ -79,7 +82,8 @@ var preset = {
           700: "hsl(var(--amber-700) / <alpha-value>)",
           800: "hsl(var(--amber-800) / <alpha-value>)",
           900: "hsl(var(--amber-900) / <alpha-value>)",
-          950: "hsl(var(--amber-950) / <alpha-value>)"
+          950: "hsl(var(--amber-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--amber-500) / <alpha-value>)"
         },
         yellow: {
           50: "hsl(var(--yellow-050) / <alpha-value>)",
@@ -92,7 +96,8 @@ var preset = {
           700: "hsl(var(--yellow-700) / <alpha-value>)",
           800: "hsl(var(--yellow-800) / <alpha-value>)",
           900: "hsl(var(--yellow-900) / <alpha-value>)",
-          950: "hsl(var(--yellow-950) / <alpha-value>)"
+          950: "hsl(var(--yellow-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--yellow-500) / <alpha-value>)"
         },
         lime: {
           50: "hsl(var(--lime-050) / <alpha-value>)",
@@ -105,7 +110,8 @@ var preset = {
           700: "hsl(var(--lime-700) / <alpha-value>)",
           800: "hsl(var(--lime-800) / <alpha-value>)",
           900: "hsl(var(--lime-900) / <alpha-value>)",
-          950: "hsl(var(--lime-950) / <alpha-value>)"
+          950: "hsl(var(--lime-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--lime-500) / <alpha-value>)"
         },
         green: {
           50: "hsl(var(--green-050) / <alpha-value>)",
@@ -118,7 +124,8 @@ var preset = {
           700: "hsl(var(--green-700) / <alpha-value>)",
           800: "hsl(var(--green-800) / <alpha-value>)",
           900: "hsl(var(--green-900) / <alpha-value>)",
-          950: "hsl(var(--green-950) / <alpha-value>)"
+          950: "hsl(var(--green-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--green-500) / <alpha-value>)"
         },
         teal: {
           50: "hsl(var(--teal-050) / <alpha-value>)",
@@ -131,7 +138,8 @@ var preset = {
           700: "hsl(var(--teal-700) / <alpha-value>)",
           800: "hsl(var(--teal-800) / <alpha-value>)",
           900: "hsl(var(--teal-900) / <alpha-value>)",
-          950: "hsl(var(--teal-950) / <alpha-value>)"
+          950: "hsl(var(--teal-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--teal-500) / <alpha-value>)"
         },
         cyan: {
           50: "hsl(var(--cyan-050) / <alpha-value>)",
@@ -144,7 +152,8 @@ var preset = {
           700: "hsl(var(--cyan-700) / <alpha-value>)",
           800: "hsl(var(--cyan-800) / <alpha-value>)",
           900: "hsl(var(--cyan-900) / <alpha-value>)",
-          950: "hsl(var(--cyan-950) / <alpha-value>)"
+          950: "hsl(var(--cyan-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--cyan-500) / <alpha-value>)"
         },
         sky: {
           50: "hsl(var(--sky-050) / <alpha-value>)",
@@ -157,7 +166,8 @@ var preset = {
           700: "hsl(var(--sky-700) / <alpha-value>)",
           800: "hsl(var(--sky-800) / <alpha-value>)",
           900: "hsl(var(--sky-900) / <alpha-value>)",
-          950: "hsl(var(--sky-950) / <alpha-value>)"
+          950: "hsl(var(--sky-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--sky-500) / <alpha-value>)"
         },
         blue: {
           50: "hsl(var(--blue-050) / <alpha-value>)",
@@ -170,7 +180,8 @@ var preset = {
           700: "hsl(var(--blue-700) / <alpha-value>)",
           800: "hsl(var(--blue-800) / <alpha-value>)",
           900: "hsl(var(--blue-900) / <alpha-value>)",
-          950: "hsl(var(--blue-950) / <alpha-value>)"
+          950: "hsl(var(--blue-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--blue-500) / <alpha-value>)"
         },
         indigo: {
           50: "hsl(var(--indigo-050) / <alpha-value>)",
@@ -183,7 +194,8 @@ var preset = {
           700: "hsl(var(--indigo-700) / <alpha-value>)",
           800: "hsl(var(--indigo-800) / <alpha-value>)",
           900: "hsl(var(--indigo-900) / <alpha-value>)",
-          950: "hsl(var(--indigo-950) / <alpha-value>)"
+          950: "hsl(var(--indigo-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--indigo-500) / <alpha-value>)"
         },
         violet: {
           50: "hsl(var(--violet-050) / <alpha-value>)",
@@ -196,7 +208,8 @@ var preset = {
           700: "hsl(var(--violet-700) / <alpha-value>)",
           800: "hsl(var(--violet-800) / <alpha-value>)",
           900: "hsl(var(--violet-900) / <alpha-value>)",
-          950: "hsl(var(--violet-950) / <alpha-value>)"
+          950: "hsl(var(--violet-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--violet-500) / <alpha-value>)"
         },
         purple: {
           50: "hsl(var(--purple-050) / <alpha-value>)",
@@ -209,7 +222,8 @@ var preset = {
           700: "hsl(var(--purple-700) / <alpha-value>)",
           800: "hsl(var(--purple-800) / <alpha-value>)",
           900: "hsl(var(--purple-900) / <alpha-value>)",
-          950: "hsl(var(--purple-950) / <alpha-value>)"
+          950: "hsl(var(--purple-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--purple-500) / <alpha-value>)"
         },
         fuchsia: {
           50: "hsl(var(--fuchsia-050) / <alpha-value>)",
@@ -222,7 +236,8 @@ var preset = {
           700: "hsl(var(--fuchsia-700) / <alpha-value>)",
           800: "hsl(var(--fuchsia-800) / <alpha-value>)",
           900: "hsl(var(--fuchsia-900) / <alpha-value>)",
-          950: "hsl(var(--fuchsia-950) / <alpha-value>)"
+          950: "hsl(var(--fuchsia-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--fuchsia-500) / <alpha-value>)"
         },
         pink: {
           50: "hsl(var(--pink-050) / <alpha-value>)",
@@ -235,7 +250,8 @@ var preset = {
           700: "hsl(var(--pink-700) / <alpha-value>)",
           800: "hsl(var(--pink-800) / <alpha-value>)",
           900: "hsl(var(--pink-900) / <alpha-value>)",
-          950: "hsl(var(--pink-950) / <alpha-value>)"
+          950: "hsl(var(--pink-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--pink-500) / <alpha-value>)"
         },
         rose: {
           50: "hsl(var(--rose-050) / <alpha-value>)",
@@ -248,7 +264,8 @@ var preset = {
           700: "hsl(var(--rose-700) / <alpha-value>)",
           800: "hsl(var(--rose-800) / <alpha-value>)",
           900: "hsl(var(--rose-900) / <alpha-value>)",
-          950: "hsl(var(--rose-950) / <alpha-value>)"
+          950: "hsl(var(--rose-950) / <alpha-value>)",
+          DEFAULT: "hsl(var(--rose-500) / <alpha-value>)"
         },
         button: "hsl(var(--button))",
         border: "hsl(var(--border))",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.14",
   "sideEffects": false,
   "type": "module",
   "browserslist": [
@@ -23,6 +23,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-select": "2.0.0",
@@ -37,9 +38,7 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "isbot": "3.7.1",
-    "lucide-react": "0.292.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "lucide-react": "0.293.0",
     "react-syntax-highlighter": "15.5.0",
     "tailwind-merge": "2.0.0",
     "tailwindcss": "3.3.5",
@@ -51,6 +50,7 @@
     "@babel/preset-env": "7.23.3",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@remix-run/dev": "2.3.1",
     "@remix-run/eslint-config": "2.3.1",
     "@rollup/plugin-babel": "6.0.4",
@@ -67,12 +67,12 @@
     "@storybook/testing-library": "0.2.2",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
-    "@types/node": "20.9.4",
-    "@types/react": "18.2.38",
+    "@types/node": "20.10.0",
+    "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "@types/react-syntax-highlighter": "15.5.10",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
+    "@typescript-eslint/eslint-plugin": "6.13.0",
+    "@typescript-eslint/parser": "6.13.0",
     "@vitejs/plugin-react-swc": "3.5.0",
     "@vitest/ui": "0.34.6",
     "autoprefixer": "10.4.16",
@@ -88,7 +88,9 @@
     "postcss": "8.4.31",
     "prettier": "3.1.0",
     "prettier-plugin-tailwindcss": "0.5.7",
-    "rollup": "4.5.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "4.6.0",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-extensions": "0.1.0",
@@ -99,6 +101,12 @@
     "vitest": "0.34.6",
     "vitest-dom": "0.1.1"
   },
+  "peerDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
+    "react-dom": "^18"
+  },
   "scripts": {
     "build-storybook": "pnpm run cmd:storybook build",
     "build": "remix build",