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

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.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.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/{dts → core}/tailwind.preset.d.ts

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

package/dist/core/tailwind.preset.js

@@ -0,0 +1,299 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+import tailwindCssAnimatePlugin from "tailwindcss-animate";
+export default {
+    content: [],
+    darkMode: "class",
+    theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
+        extend: {
+            fontFamily: {
+                sans: ["EuclidSquare", ...defaultTheme.fontFamily.sans],
+                mono: ["IBMPlexMono", ...defaultTheme.fontFamily.mono],
+            },
+            colors: {
+                white: "hsl(var(--white) / <alpha-value>)",
+                gray: {
+                    50: "hsl(var(--gray-050) / <alpha-value>)",
+                    100: "hsl(var(--gray-100) / <alpha-value>)",
+                    200: "hsl(var(--gray-200) / <alpha-value>)",
+                    300: "hsl(var(--gray-300) / <alpha-value>)",
+                    400: "hsl(var(--gray-400) / <alpha-value>)",
+                    500: "hsl(var(--gray-500) / <alpha-value>)",
+                    600: "hsl(var(--gray-600) / <alpha-value>)",
+                    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>)",
+                },
+                red: {
+                    50: "hsl(var(--red-050) / <alpha-value>)",
+                    100: "hsl(var(--red-100) / <alpha-value>)",
+                    200: "hsl(var(--red-200) / <alpha-value>)",
+                    300: "hsl(var(--red-300) / <alpha-value>)",
+                    400: "hsl(var(--red-400) / <alpha-value>)",
+                    500: "hsl(var(--red-500) / <alpha-value>)",
+                    600: "hsl(var(--red-600) / <alpha-value>)",
+                    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>)",
+                },
+                orange: {
+                    50: "hsl(var(--orange-050) / <alpha-value>)",
+                    100: "hsl(var(--orange-100) / <alpha-value>)",
+                    200: "hsl(var(--orange-200) / <alpha-value>)",
+                    300: "hsl(var(--orange-300) / <alpha-value>)",
+                    400: "hsl(var(--orange-400) / <alpha-value>)",
+                    500: "hsl(var(--orange-500) / <alpha-value>)",
+                    600: "hsl(var(--orange-600) / <alpha-value>)",
+                    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>)",
+                },
+                amber: {
+                    50: "hsl(var(--amber-050) / <alpha-value>)",
+                    100: "hsl(var(--amber-100) / <alpha-value>)",
+                    200: "hsl(var(--amber-200) / <alpha-value>)",
+                    300: "hsl(var(--amber-300) / <alpha-value>)",
+                    400: "hsl(var(--amber-400) / <alpha-value>)",
+                    500: "hsl(var(--amber-500) / <alpha-value>)",
+                    600: "hsl(var(--amber-600) / <alpha-value>)",
+                    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>)",
+                },
+                yellow: {
+                    50: "hsl(var(--yellow-050) / <alpha-value>)",
+                    100: "hsl(var(--yellow-100) / <alpha-value>)",
+                    200: "hsl(var(--yellow-200) / <alpha-value>)",
+                    300: "hsl(var(--yellow-300) / <alpha-value>)",
+                    400: "hsl(var(--yellow-400) / <alpha-value>)",
+                    500: "hsl(var(--yellow-500) / <alpha-value>)",
+                    600: "hsl(var(--yellow-600) / <alpha-value>)",
+                    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>)",
+                },
+                lime: {
+                    50: "hsl(var(--lime-050) / <alpha-value>)",
+                    100: "hsl(var(--lime-100) / <alpha-value>)",
+                    200: "hsl(var(--lime-200) / <alpha-value>)",
+                    300: "hsl(var(--lime-300) / <alpha-value>)",
+                    400: "hsl(var(--lime-400) / <alpha-value>)",
+                    500: "hsl(var(--lime-500) / <alpha-value>)",
+                    600: "hsl(var(--lime-600) / <alpha-value>)",
+                    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>)",
+                },
+                green: {
+                    50: "hsl(var(--green-050) / <alpha-value>)",
+                    100: "hsl(var(--green-100) / <alpha-value>)",
+                    200: "hsl(var(--green-200) / <alpha-value>)",
+                    300: "hsl(var(--green-300) / <alpha-value>)",
+                    400: "hsl(var(--green-400) / <alpha-value>)",
+                    500: "hsl(var(--green-500) / <alpha-value>)",
+                    600: "hsl(var(--green-600) / <alpha-value>)",
+                    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>)",
+                },
+                teal: {
+                    50: "hsl(var(--teal-050) / <alpha-value>)",
+                    100: "hsl(var(--teal-100) / <alpha-value>)",
+                    200: "hsl(var(--teal-200) / <alpha-value>)",
+                    300: "hsl(var(--teal-300) / <alpha-value>)",
+                    400: "hsl(var(--teal-400) / <alpha-value>)",
+                    500: "hsl(var(--teal-500) / <alpha-value>)",
+                    600: "hsl(var(--teal-600) / <alpha-value>)",
+                    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>)",
+                },
+                cyan: {
+                    50: "hsl(var(--cyan-050) / <alpha-value>)",
+                    100: "hsl(var(--cyan-100) / <alpha-value>)",
+                    200: "hsl(var(--cyan-200) / <alpha-value>)",
+                    300: "hsl(var(--cyan-300) / <alpha-value>)",
+                    400: "hsl(var(--cyan-400) / <alpha-value>)",
+                    500: "hsl(var(--cyan-500) / <alpha-value>)",
+                    600: "hsl(var(--cyan-600) / <alpha-value>)",
+                    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>)",
+                },
+                sky: {
+                    50: "hsl(var(--sky-050) / <alpha-value>)",
+                    100: "hsl(var(--sky-100) / <alpha-value>)",
+                    200: "hsl(var(--sky-200) / <alpha-value>)",
+                    300: "hsl(var(--sky-300) / <alpha-value>)",
+                    400: "hsl(var(--sky-400) / <alpha-value>)",
+                    500: "hsl(var(--sky-500) / <alpha-value>)",
+                    600: "hsl(var(--sky-600) / <alpha-value>)",
+                    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>)",
+                },
+                blue: {
+                    50: "hsl(var(--blue-050) / <alpha-value>)",
+                    100: "hsl(var(--blue-100) / <alpha-value>)",
+                    200: "hsl(var(--blue-200) / <alpha-value>)",
+                    300: "hsl(var(--blue-300) / <alpha-value>)",
+                    400: "hsl(var(--blue-400) / <alpha-value>)",
+                    500: "hsl(var(--blue-500) / <alpha-value>)",
+                    600: "hsl(var(--blue-600) / <alpha-value>)",
+                    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>)",
+                },
+                indigo: {
+                    50: "hsl(var(--indigo-050) / <alpha-value>)",
+                    100: "hsl(var(--indigo-100) / <alpha-value>)",
+                    200: "hsl(var(--indigo-200) / <alpha-value>)",
+                    300: "hsl(var(--indigo-300) / <alpha-value>)",
+                    400: "hsl(var(--indigo-400) / <alpha-value>)",
+                    500: "hsl(var(--indigo-500) / <alpha-value>)",
+                    600: "hsl(var(--indigo-600) / <alpha-value>)",
+                    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>)",
+                },
+                violet: {
+                    50: "hsl(var(--violet-050) / <alpha-value>)",
+                    100: "hsl(var(--violet-100) / <alpha-value>)",
+                    200: "hsl(var(--violet-200) / <alpha-value>)",
+                    300: "hsl(var(--violet-300) / <alpha-value>)",
+                    400: "hsl(var(--violet-400) / <alpha-value>)",
+                    500: "hsl(var(--violet-500) / <alpha-value>)",
+                    600: "hsl(var(--violet-600) / <alpha-value>)",
+                    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>)",
+                },
+                purple: {
+                    50: "hsl(var(--purple-050) / <alpha-value>)",
+                    100: "hsl(var(--purple-100) / <alpha-value>)",
+                    200: "hsl(var(--purple-200) / <alpha-value>)",
+                    300: "hsl(var(--purple-300) / <alpha-value>)",
+                    400: "hsl(var(--purple-400) / <alpha-value>)",
+                    500: "hsl(var(--purple-500) / <alpha-value>)",
+                    600: "hsl(var(--purple-600) / <alpha-value>)",
+                    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>)",
+                },
+                fuchsia: {
+                    50: "hsl(var(--fuchsia-050) / <alpha-value>)",
+                    100: "hsl(var(--fuchsia-100) / <alpha-value>)",
+                    200: "hsl(var(--fuchsia-200) / <alpha-value>)",
+                    300: "hsl(var(--fuchsia-300) / <alpha-value>)",
+                    400: "hsl(var(--fuchsia-400) / <alpha-value>)",
+                    500: "hsl(var(--fuchsia-500) / <alpha-value>)",
+                    600: "hsl(var(--fuchsia-600) / <alpha-value>)",
+                    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>)",
+                },
+                pink: {
+                    50: "hsl(var(--pink-050) / <alpha-value>)",
+                    100: "hsl(var(--pink-100) / <alpha-value>)",
+                    200: "hsl(var(--pink-200) / <alpha-value>)",
+                    300: "hsl(var(--pink-300) / <alpha-value>)",
+                    400: "hsl(var(--pink-400) / <alpha-value>)",
+                    500: "hsl(var(--pink-500) / <alpha-value>)",
+                    600: "hsl(var(--pink-600) / <alpha-value>)",
+                    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>)",
+                },
+                rose: {
+                    50: "hsl(var(--rose-050) / <alpha-value>)",
+                    100: "hsl(var(--rose-100) / <alpha-value>)",
+                    200: "hsl(var(--rose-200) / <alpha-value>)",
+                    300: "hsl(var(--rose-300) / <alpha-value>)",
+                    400: "hsl(var(--rose-400) / <alpha-value>)",
+                    500: "hsl(var(--rose-500) / <alpha-value>)",
+                    600: "hsl(var(--rose-600) / <alpha-value>)",
+                    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>)",
+                },
+                button: "hsl(var(--button))",
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+        },
+    },
+    plugins: [tailwindCssAnimatePlugin],
+};

package/dist/cx/index.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Conditionally add Tailwind (and other) CSS classes.
+ *
+ * Allows for tailwind overrides in LTR-specificity-like order of applied classes.
+ */
+export function cx(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/dropdown-menu/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { forwardRef } from "react";
+import { cx } from "../cx";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cx("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cx("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cx("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cx("relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cx("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cx("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cx("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cx("-mx-1 my-1 h-px bg-muted", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return _jsx("span", { className: cx("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/hooks/use-matches-media-query.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+export function useMatchesMediaQuery(mediaQuery) {
+    const [matches, setMatches] = useState(() => mediaQuery.matches);
+    useEffect(() => {
+        function onChange() {
+            setMatches(mediaQuery.matches);
+        }
+        if (typeof mediaQuery.addEventListener === "undefined") {
+            // fix for Safari < 14.x
+            mediaQuery.addListener(onChange);
+            return () => {
+                mediaQuery.removeListener(onChange);
+            };
+        }
+        mediaQuery.addEventListener("change", onChange);
+        return () => {
+            mediaQuery.removeEventListener("change", onChange);
+        };
+    }, [mediaQuery]);
+    return matches;
+}

package/dist/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+/**
+ * no-preference is the default value for the prefers-reduced-motion media query.
+ * Users who have never fiddled with their a11y settings will still see animations
+ * (no explicit opt-in required from a user's perspective)
+ */
+const query = "(prefers-reduced-motion: no-preference)";
+/**
+ * usePrefersReducedMotion returns true if the user has opted out of animations
+ */
+export function usePrefersReducedMotion() {
+    // default to no animations, since we don't know what the user's preference is on the server
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+    useEffect(() => {
+        const mediaQueryList = window.matchMedia(query);
+        // set the _real_ initial value now that we're on the client
+        setPrefersReducedMotion(!mediaQueryList.matches);
+        // register for updates
+        function listener(event) {
+            setPrefersReducedMotion(!event.matches);
+        }
+        mediaQueryList.addEventListener("change", listener);
+        return () => {
+            mediaQueryList.removeEventListener("change", listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}

package/dist/{dts/input → 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";
+import type { AutoComplete, InputType } from "../types/input";
 declare const inputVariants: (props?: ({
     state?: "default" | "danger" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/input/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cx } from "../cx";
+const 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: {
+            default: "text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-500 focus-visible:ring-blue-600/25",
+            danger: "text-red-900 border-red-500 placeholder:text-red-400 focus:border-red-500 focus-visible:ring-red-600/25",
+            success: "text-green-900 border-green-500 placeholder:text-green-400 focus:border-green-500 focus-visible:ring-green-600/25",
+        },
+    },
+    defaultVariants: {
+        state: "default",
+    },
+});
+/**
+ * Used to create interactive controls for web-based forms in order to accept data from the user
+ */
+const Input = forwardRef(({ className, state = "default", type = "text", ...props }, ref) => {
+    return _jsx("input", { className: cx(inputVariants({ state }), className), ref: ref, type: type, ...props });
+});
+Input.displayName = "Input";
+export { Input };

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

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

package/dist/media-object/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "../cx";
+/**
+ * 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.
+ */
+export const MediaObject = forwardRef(({ className, children, style }, ref) => (_jsx("div", { ref: ref, className: cx("flex gap-4", className), style: style, children: children })));
+MediaObject.displayName = "MediaObject";
+/**
+ * The container for an image or icon to display in the media slot of the media object.
+ */
+export const MediaObjectMedia = forwardRef(({ className, children, style }, ref) => (_jsx("div", { ref: ref, className: cx("shrink-0 leading-none", className), style: style, children: children })));
+MediaObjectMedia.displayName = "MediaObjectMedia";
+/**
+ * The container for the content slot of a media object.
+ */
+export const MediaObjectContent = forwardRef(({ className, children, style }, ref) => (_jsx("div", { ref: ref, className: cx("min-w-0 flex-1", className), style: style, children: children })));
+MediaObjectContent.displayName = "MediaObjectContent";

package/dist/portal/index.js

@@ -0,0 +1,3 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+export const Portal = ({ children, container }) => _jsx(_Fragment, { children: container ? createPortal(children, container) : null });