@ngrok/mantle 0.0.1-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ngrok
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# Mantle
+
+[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s based on [shadcn/ui](https://ui.shadcn.com) and [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) providing styling. It’s documented using [Remix](https://remix.run/docs).
+
+### Installation
+
+Mantle uses `pnpm` as its package manager. First, install the dependencies in the repo’s directory by running `pnpm install`.
+
+### Development and preview
+
+Run `pnpm dev` to run Remix's development mode, rebuilding assets on file changes.
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+## Deployment
+
+First, build the app for production:
+
+```sh
+pnpm run build
+```
+
+Then run the app in production mode:
+
+```sh
+pnpm start
+```
+
+We have chosen vercel to deploy to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`

package/dist/back-to-top-button/index.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from "react";
+type Props = {
+    className?: string;
+    showThresholdPx?: number;
+    style?: CSSProperties;
+};
+export declare const BackToTopButton: ({ className, showThresholdPx, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/back-to-top-button/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion";
+import { useWindowScroll } from "@uidotdev/usehooks";
+import { useRef, useEffect } from "react";
+import { Portal } from "../portal";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+import { ArrowUpToLine } from "lucide-react";
+import { cx } from "../cx";
+export const BackToTopButton = ({ className, showThresholdPx = 200, style }) => {
+    const [position = { y: 0 }, scrollTo] = useWindowScroll();
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const bodyRef = useRef(undefined);
+    useEffect(() => {
+        bodyRef.current = document.body;
+    }, []);
+    return (_jsx(Portal, { container: bodyRef.current, children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { className: cx("fixed bottom-4 right-4 z-50 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-gray-900 transition-all duration-150 ease-in-out hover:bg-white/90 hover:shadow-lg", (position.y ?? 0) >= showThresholdPx ? "visible opacity-100" : "invisible opacity-0", className), onClick: () => {
+                            scrollTo({
+                                top: 0,
+                                behavior: prefersReducedMotion ? "auto" : "smooth",
+                            });
+                        }, style: style, tabIndex: -1, children: [_jsx("span", { className: "sr-only", children: "Scroll back to top" }), _jsx(ArrowUpToLine, {})] }), _jsx(TooltipContent, { collisionPadding: 8, children: _jsx("p", { children: "Scroll back to top" }) })] }) }) }));
+};

package/dist/button/index.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes } from "react";
+import type { WithAsChild } from "../types/as-child";
+import type { VariantProps } from "../types/variant-props";
+declare const buttonVariants: (props?: ({
+    priority?: "default" | "primary" | "secondary" | null | undefined;
+    state?: "default" | "danger" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+/**
+ * The props for the `Button` component.
+ */
+export type ButtonProps = WithAsChild & ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants;
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+declare const Button: import("react").ForwardRefExoticComponent<WithAsChild & ButtonHTMLAttributes<HTMLButtonElement> & Partial<import("../types/deep-non-nullable").DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
+    priority?: "default" | "primary" | "secondary" | null | undefined;
+    state?: "default" | "danger" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/button/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cx } from "../cx";
+const 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: {
+            default: "border-blue-500 text-blue-500 bg-white hover:bg-blue-50 active:bg-blue-100 focus-visible:ring-blue-600/25",
+            primary: "bg-blue-500 text-button hover:bg-blue-600 active:bg-blue-700 focus-visible:ring-blue-600/25",
+            secondary: "bg-blue-50 border-blue-200 text-blue-900 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-600/25",
+        },
+        state: {
+            default: "",
+            danger: "",
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3 text-sm",
+            lg: "h-12 rounded-md px-6 text-lg",
+        },
+    },
+    defaultVariants: {
+        priority: "default",
+        size: "default",
+    },
+    compoundVariants: [
+        {
+            priority: "default",
+            state: "danger",
+            class: "border-red-500 text-red-500 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600/25",
+        },
+        {
+            priority: "primary",
+            state: "danger",
+            class: "bg-red-500 hover:bg-red-600 active:bg-red-700 focus-visible:ring-red-600/25",
+        },
+        {
+            priority: "secondary",
+            state: "danger",
+            class: "bg-red-50 border-red-200 text-red-900 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-600/25",
+        },
+    ],
+});
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+const Button = forwardRef(({ className, priority = "default", size = "default", state = "default", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return _jsx(Comp, { className: cx(buttonVariants({ priority, size, state, className })), ref: ref, ...props });
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

package/dist/card/index.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+import type { WithAsChild } from "../types/as-child";
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * A container that can be used to display content in a box resembling a playing
+ * card.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The main content of a card. Usually composed as a direct child of a `Card` component.
+ */
+export declare const CardBody: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The footer container of a card. Usually composed as a direct child of a `Card` component.
+ */
+export declare const CardFooter: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The header container of a card. Usually composed as a direct child of a `Card` component.
+ */
+export declare const CardHeader: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
+/**
+ * The title of a card. Usually composed as a direct child of a `CardHeader` component.
+ */
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/card/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cx } from "../cx";
+/**
+ * A container that can be used to display content in a box resembling a playing
+ * card.
+ */
+export const Card = forwardRef(({ className, children, ...rest }, ref) => (_jsx("div", { ref: ref, className: cx("relative rounded border bg-white", className), ...rest, children: children })));
+Card.displayName = "Card";
+/**
+ * The main content of a card. Usually composed as a direct child of a `Card` component.
+ */
+export const CardBody = forwardRef(({ className, children, ...rest }, ref) => (_jsx("div", { ref: ref, className: cx("p-6", className), ...rest, children: children })));
+CardBody.displayName = "CardBody";
+/**
+ * The footer container of a card. Usually composed as a direct child of a `Card` component.
+ */
+export const CardFooter = forwardRef(({ className, children, ...rest }, ref) => (_jsx("div", { ref: ref, className: cx("border-t px-6 py-3", className), ...rest, children: children })));
+CardFooter.displayName = "CardFooter";
+/**
+ * The header container of a card. Usually composed as a direct child of a `Card` component.
+ */
+export const CardHeader = forwardRef(({ className, children, ...rest }, ref) => (_jsx("div", { ref: ref, className: cx("border-b px-6 py-3", className), ...rest, children: children })));
+CardHeader.displayName = "CardHeader";
+/**
+ * The title of a card. Usually composed as a direct child of a `CardHeader` component.
+ */
+export const CardTitle = forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "h3";
+    return _jsx(Comp, { ref: ref, className: cx("font-semibold leading-none tracking-tight", className), ...props });
+});
+CardTitle.displayName = "CardTitle";

package/dist/core/fonts/fonts.css

@@ -0,0 +1,65 @@
+/* Euclid Square */
+@font-face {
+	font-family: EuclidSquare;
+	font-style: normal;
+	font-weight: normal;
+	src: url("./euclid-square/EuclidSquare-Regular-WebS.woff") format("woff");
+}
+
+@font-face {
+	font-family: EuclidSquare;
+	font-style: italic;
+	font-weight: normal;
+	src: url("./euclid-square/EuclidSquare-RegularItalic-WebS.woff") format("woff");
+}
+
+@font-face {
+	font-family: EuclidSquare;
+	font-style: normal;
+	font-weight: 500;
+	src: url("./euclid-square/EuclidSquare-Medium-WebS.woff") format("woff");
+}
+
+@font-face {
+	font-family: EuclidSquare;
+	font-style: normal;
+	font-weight: 600;
+	src: url("./euclid-square/EuclidSquare-Semibold-WebS.woff") format("woff");
+}
+
+@font-face {
+	font-family: EuclidSquare;
+	font-style: italic;
+	font-weight: 500;
+	src: url("./euclid-square/EuclidSquare-MediumItalic-WebS.woff") format("woff");
+}
+
+/* IBM Plex Mono */
+@font-face {
+	font-family: IBMPlexMono;
+	font-style: normal;
+	font-weight: normal;
+	src: url("./ibm-plex-mono/IBMPlexMono-Text.woff") format("woff");
+}
+
+@font-face {
+	font-family: IBMPlexMono;
+	font-style: italic;
+	font-weight: normal;
+	src: url("./ibm-plex-mono/IBMPlexMono-TextItalic.woff") format("woff");
+}
+
+/* semibold is actually 600, but mapping it to 500 works better */
+@font-face {
+	font-family: IBMPlexMono;
+	font-style: normal;
+	font-weight: 500;
+	src: url("./ibm-plex-mono/IBMPlexMono-SemiBold.woff") format("woff");
+}
+
+@font-face {
+	font-family: IBMPlexMono;
+	font-style: italic;
+	font-weight: 500;
+	src: url("./ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff") format("woff");
+}

package/dist/core/fonts/ibm-plex-mono/license.txt

@@ -0,0 +1,92 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.