@ngrok/mantle 0.0.1-alpha.1 → 0.0.1-alpha.11

package/dist/dts/index.d.ts

@@ -0,0 +1,15 @@
+export { Button } from "./button";
+export { Card, CardBody, CardFooter, CardHeader, CardTitle } from "./card";
+export { cx } from "./cx";
+export { Input } from "./input";
+export { MediaObject, MediaObjectMedia, MediaObjectContent } from "./media-object";
+export { Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export { ThemeProvider, PreventWrongThemeFlash, isTheme, useTheme } from "./theme-provider";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export type { ButtonProps } from "./button";
+export type { CardProps, CardTitleProps } from "./card";
+export type { InputProps } from "./input";
+export type { AutoComplete, InputType } from "./input/types";
+export type { Theme, ThemeProviderProps } from "./theme-provider";
+export type { WithAsChild } from "./types/as-child";
+export type { WithStyleProps } from "./types/with-style-props";

package/dist/{input → dts/input}/index.d.ts

@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes } from "react";
 import type { VariantProps } from "../types/variant-props";
-import type { AutoComplete, InputType } from "../types/input";
+import type { AutoComplete, InputType } from "./types";
 declare const inputVariants: (props?: ({
     state?: "default" | "danger" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/{media-object → dts/media-object}/index.d.ts

@@ -1,5 +1,4 @@
 import type { HTMLAttributes } from "react";
-type Props = HTMLAttributes<HTMLDivElement>;
 /**
  * The media object is an image/icon (media) to the left, with descriptive
  * content (title and subtitle/description) to the right.
@@ -12,13 +11,13 @@ type Props = HTMLAttributes<HTMLDivElement>;
  * Compose the media object with the `MediaObjectMedia` and `MediaObjectContent`
  * components as direct children.
  */
-export declare const MediaObject: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+declare const MediaObject: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * The container for an image or icon to display in the media slot of the media object.
  */
-export declare const MediaObjectMedia: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+declare const MediaObjectMedia: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * The container for the content slot of a media object.
  */
-export declare const MediaObjectContent: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+declare const MediaObjectContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { MediaObject, MediaObjectMedia, MediaObjectContent };

package/dist/{core → dts}/tailwind.preset.d.ts

@@ -1,4 +1,4 @@
-declare const _default: {
+declare const preset: {
     content: never[];
     darkMode: "class";
     theme: {
@@ -305,4 +305,5 @@ declare const _default: {
         handler: () => void;
     }[];
 };
-export default _default;
+export type Preset = typeof preset;
+export default preset;

package/dist/{theme-provider → dts/theme-provider}/index.d.ts

@@ -6,33 +6,33 @@ declare const themes: readonly ["system", "light", "dark", "light-high-contrast"
 /**
  * Theme is a string literal type that represents a valid theme.
  */
-export type Theme = (typeof themes)[number];
+type Theme = (typeof themes)[number];
 /**
  * theme is a helper which translates the Theme type into a string literal type.
  */
-export declare const theme: (value: Theme) => "light" | "system" | "dark" | "light-high-contrast" | "dark-high-contrast";
+export declare const theme: (value: Theme) => "system" | "light" | "dark" | "light-high-contrast" | "dark-high-contrast";
 /**
  * Type predicate that checks if a value is a valid theme.
  */
-export declare function isTheme(value: unknown): value is Theme;
+declare function isTheme(value: unknown): value is Theme;
 /**
  * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.
  */
 type ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];
-type Props = PropsWithChildren & {
+type ThemeProviderProps = PropsWithChildren & {
     defaultTheme?: Theme;
     storageKey?: string;
 };
 /**
  * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
  */
-export declare function ThemeProvider({ children, defaultTheme, storageKey }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, storageKey }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * useTheme returns the current theme and a function to set the theme.
  *
  * @note This function will throw an error if used outside of a ThemeProvider context tree.
  */
-export declare function useTheme(): ThemeProviderState;
+declare function useTheme(): ThemeProviderState;
 /**
  * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
  */
@@ -44,8 +44,9 @@ export declare function determineThemeFromMediaQuery({ prefersDarkMode, prefersC
  * PreventWrongThemeFlash is a React component that prevents the wrong theme from flashing on initial page load.
  * Render as high as possible in the DOM, preferably in the <head> element.
  */
-export declare const PreventWrongThemeFlash: ({ defaultTheme, storageKey, }: {
-    defaultTheme?: "light" | "system" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
+declare const PreventWrongThemeFlash: ({ defaultTheme, storageKey, }: {
+    defaultTheme?: "system" | "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
     storageKey?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type { Theme, ThemeProviderProps };
+export { ThemeProvider, PreventWrongThemeFlash, isTheme, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,256 @@
+/// <reference types="react" />
+/**
+ * @ngrok/mantle v0.0.1-alpha.11
+ *
+ * Copyright (c) ngrok.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import * as react from 'react';
+import { 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 _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.
+ */
+type WithAsChild = {
+    /**
+     * Use the `asChild` prop to compose Radix's functionality onto alternative
+     * element types or your own React components.
+     *
+     * All Radix primitive parts that render a DOM element accept an `asChild`
+     * prop. When `asChild` is set to `true`, Radix will not render a default DOM
+     * element, instead cloning the part's child and passing it the props and
+     * behavior required to make it functional.
+     *
+     * asChild can be used as deeply as you need to. This means it is a great way
+     * to compose multiple primitive's behavior together.
+     *
+     * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+     */
+    asChild?: boolean;
+};
+
+/**
+ * Variant props that are optional and cannot be `null`.
+ *
+ * Using VariantProps directly from CVA produces that can be `null`, which is not what we want.
+ */
+type VariantProps<Variants extends (props?: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps$1<Variants>>>;
+
+declare const buttonVariants: (props?: ({
+    priority?: "default" | "primary" | "secondary" | null | undefined;
+    state?: "default" | "danger" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+/**
+ * The props for the `Button` component.
+ */
+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: react.ForwardRefExoticComponent<WithAsChild & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+    priority?: "default" | "primary" | "secondary" | null | undefined;
+    state?: "default" | "danger" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>>> & react.RefAttributes<HTMLButtonElement>>;
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * A container that can be used to display content in a box resembling a playing
+ * card.
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The main content of a card. Usually composed as a direct child of a `Card` component.
+ */
+declare const CardBody: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The footer container of a card. Usually composed as a direct child of a `Card` component.
+ */
+declare const CardFooter: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The header container of a card. Usually composed as a direct child of a `Card` component.
+ */
+declare const CardHeader: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
+/**
+ * The title of a card. Usually composed as a direct child of a `CardHeader` component.
+ */
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Conditionally add Tailwind (and other) CSS classes.
+ *
+ * Allows for tailwind overrides in LTR-specificity-like order of applied classes.
+ */
+declare function cx(...inputs: ClassValue[]): string;
+
+/**
+ * (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
+ * previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a
+ * browser could integrate with a device's contacts list to autocomplete email addresses in an email input field.
+ *
+ * The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local,
+ * number, range, color, and password. This attribute has no effect on input types that do not return numeric or text
+ * data, being valid for all input types except checkbox, radio, file, or any of the button types.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+ */
+type AutoComplete = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+/**
+ * A string specifying the type of control to render. For example, to create a checkbox, a value of `"checkbox"` is used.
+ * If omitted (or an unknown value is specified), the input type `"text"` is used, creating a plaintext input field.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */
+type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+
+declare const inputVariants: (props?: ({
+    state?: "default" | "danger" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariants = VariantProps<typeof inputVariants>;
+/**
+ * The props for the `Input` component.
+ */
+type InputProps = InputVariants & Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & {
+    autoComplete?: AutoComplete;
+    type?: InputType;
+};
+/**
+ * Used to create interactive controls for web-based forms in order to accept data from the user
+ */
+declare const Input: react.ForwardRefExoticComponent<Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+    state?: "default" | "danger" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>>> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & {
+    autoComplete?: AutoComplete | undefined;
+    type?: InputType | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * The media object is an image/icon (media) to the left, with descriptive
+ * content (title and subtitle/description) to the right.
+ *
+ * Change the spacing between the media and content by passing a `gap-*` class.
+ * The default gap is `gap-4`.
+ *
+ * Use flexbox utilities to change the alignment of the media and content.
+ *
+ * Compose the media object with the `MediaObjectMedia` and `MediaObjectContent`
+ * components as direct children.
+ */
+declare const MediaObject: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The container for an image or icon to display in the media slot of the media object.
+ */
+declare const MediaObjectMedia: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The container for the content slot of a media object.
+ */
+declare const MediaObjectContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Select: react.FC<_radix_ui_react_select.SelectProps>;
+declare const SelectGroup: react.ForwardRefExoticComponent<_radix_ui_react_select.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: react.ForwardRefExoticComponent<_radix_ui_react_select.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
+declare const SelectIcon: react.ForwardRefExoticComponent<_radix_ui_react_select.SelectIconProps & react.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    hideIcon?: boolean | undefined;
+} & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_select.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: react.ForwardRefExoticComponent<Omit<_radix_ui_react_select.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+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>>;
+
+/**
+ * themes is a tuple of valid themes.
+ */
+declare const themes: readonly ["system", "light", "dark", "light-high-contrast", "dark-high-contrast"];
+/**
+ * Theme is a string literal type that represents a valid theme.
+ */
+type Theme = (typeof themes)[number];
+/**
+ * Type predicate that checks if a value is a valid theme.
+ */
+declare function isTheme(value: unknown): value is Theme;
+/**
+ * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.
+ */
+type ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];
+type ThemeProviderProps = PropsWithChildren & {
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+/**
+ * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
+ */
+declare function ThemeProvider({ children, defaultTheme, storageKey }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useTheme returns the current theme and a function to set the theme.
+ *
+ * @note This function will throw an error if used outside of a ThemeProvider context tree.
+ */
+declare function useTheme(): ThemeProviderState;
+/**
+ * PreventWrongThemeFlash is a React component that prevents the wrong theme from flashing on initial page load.
+ * Render as high as possible in the DOM, preferably in the <head> element.
+ */
+declare const PreventWrongThemeFlash: ({ defaultTheme, storageKey, }: {
+    defaultTheme?: "system" | "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
+    storageKey?: string | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
+declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Helper type that includes an optional className and style prop for react
+ * components.
+ */
+type WithStyleProps = {
+    /**
+     * A string. Specifies the element’s CSS class name.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/className
+     */
+    className?: string;
+    /**
+     * An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`.
+     * Similarly to the DOM style property, the CSS property names need to be
+     * written as camelCase, for example fontWeight instead of font-weight.
+     * You can pass strings or numbers as values. If you pass a number, like
+     * `width: 100`, React will automatically append px (“pixels”) to the value
+     * unless it’s a unitless property.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
+     */
+    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 };