@ngrok/mantle 0.66.0 → 0.66.2

package/dist/select.d.ts

@@ -1,263 +1,2 @@
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import * as react from 'react';
-import { ReactNode, FocusEvent, SelectHTMLAttributes } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { W as WithValidation } from './types-DehRoXC5.js';
-
-type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
-/**
- * Displays a list of options for the user to pick from—triggered by a button.
- *
- * @see https://mantle.ngrok.com/components/select
- *
- * @example
- * ```tsx
- * <Select.Root>
- *   <Select.Trigger>
- *     <Select.Value placeholder="Select a fruit" />
- *   </Select.Trigger>
- *   <Select.Content>
- *     <Select.Group>
- *       <Select.Label>Fruits</Select.Label>
- *       <Select.Item value="apple">Apple</Select.Item>
- *       <Select.Item value="banana">Banana</Select.Item>
- *       <Select.Item value="cherry">Cherry</Select.Item>
- *     </Select.Group>
- *     <Select.Separator />
- *     <Select.Group>
- *       <Select.Label>Veggies</Select.Label>
- *       <Select.Item value="carrot">Carrot</Select.Item>
- *       <Select.Item value="cucumber">Cucumber</Select.Item>
- *     </Select.Group>
- *   </Select.Content>
- * </Select.Root>
- * ```
- */
-declare const Select: {
-    /**
-     * Displays a list of options for the user to pick from—triggered by a button.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectroot
-     *
-     * @example
-     * ```tsx
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Group>
-     *       <Select.Label>Fruits</Select.Label>
-     *       <Select.Item value="apple">Apple</Select.Item>
-     *       <Select.Item value="banana">Banana</Select.Item>
-     *       <Select.Item value="cherry">Cherry</Select.Item>
-     *     </Select.Group>
-     *     <Select.Separator />
-     *     <Select.Group>
-     *       <Select.Label>Veggies</Select.Label>
-     *       <Select.Item value="carrot">Carrot</Select.Item>
-     *       <Select.Item value="cucumber">Cucumber</Select.Item>
-     *     </Select.Group>
-     *   </Select.Content>
-     * </Select.Root>
-     * ```
-     */
-    readonly Root: react.ForwardRefExoticComponent<{
-        children?: ReactNode | undefined;
-    } & {
-        autoComplete?: string;
-        defaultOpen?: boolean;
-        defaultValue?: string;
-        dir?: "ltr" | "rtl";
-        disabled?: boolean;
-        form?: string;
-        id?: string;
-        name?: string;
-        /**
-         * Event handler called when Select blurs.
-         * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur
-         */
-        onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
-        /**
-         * Event handler called when the value changes.
-         * @deprecated Use `onValueChange` instead.
-         */
-        onChange?: (value: string) => void;
-        onOpenChange?(open: boolean): void;
-        onValueChange?(value: string): void;
-        open?: boolean;
-        required?: boolean;
-        value?: string;
-    } & WithValidation & WithAriaInvalid & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * The component that pops out when the select is open as a portal adjacent to the trigger button.
-     * It contains a scrolling viewport of the select items.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectcontent
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Item value="apple">Apple</Select.Item>
-     *     <Select.Item value="banana">Banana</Select.Item>
-     *     <Select.Item value="cherry">Cherry</Select.Item>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Content: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-        /**
-         * The width of the content. Defaults to the width of the trigger.
-         * If set to "content", the content will use the intrinsic content width; it will be the width of the longest/widest item.
-         * @default "trigger"
-         */
-        width?: "trigger" | "content";
-    } & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * A group of related options within a select menu. Similar to an html `<optgroup>` element.
-     * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectgroup
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Group>
-     *       <Select.Label>Fruits</Select.Label>
-     *       <Select.Item value="apple">Apple</Select.Item>
-     *       <Select.Item value="banana">Banana</Select.Item>
-     *       <Select.Item value="cherry">Cherry</Select.Item>
-     *     </Select.Group>
-     *     <Select.Group>
-     *       <Select.Label>Veggies</Select.Label>
-     *       <Select.Item value="carrot">Carrot</Select.Item>
-     *       <Select.Item value="cucumber">Cucumber</Select.Item>
-     *     </Select.Group>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Group: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * An option within a select menu. Similar to an html `<option>` element.
-     * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
-     * Displays the children as the option's text.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectitem
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Item value="apple">Apple</Select.Item>
-     *     <Select.Item value="banana">Banana</Select.Item>
-     *     <Select.Item value="cherry">Cherry</Select.Item>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Item: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-        icon?: ReactNode;
-    } & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Used to render the label of a group. It won't be focusable using arrow keys.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectlabel
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Group>
-     *       <Select.Label>Fruits</Select.Label>
-     *       <Select.Item value="apple">Apple</Select.Item>
-     *       <Select.Item value="banana">Banana</Select.Item>
-     *       <Select.Item value="cherry">Cherry</Select.Item>
-     *     </Select.Group>
-     *     <Select.Group>
-     *       <Select.Label>Veggies</Select.Label>
-     *       <Select.Item value="carrot">Carrot</Select.Item>
-     *       <Select.Item value="cucumber">Cucumber</Select.Item>
-     *     </Select.Group>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Label: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Used to visually separate items or groups of items in the select content.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectseparator
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Group>
-     *       <Select.Label>Fruits</Select.Label>
-     *       <Select.Item value="apple">Apple</Select.Item>
-     *       <Select.Item value="banana">Banana</Select.Item>
-     *       <Select.Item value="cherry">Cherry</Select.Item>
-     *     </Select.Group>
-     *     <Select.Separator />
-     *     <Select.Group>
-     *       <Select.Label>Veggies</Select.Label>
-     *       <Select.Item value="carrot">Carrot</Select.Item>
-     *       <Select.Item value="cucumber">Cucumber</Select.Item>
-     *     </Select.Group>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
-        orientation?: "horizontal" | "vertical";
-        semantic?: boolean;
-    }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
-     *
-     * @see https://mantle.ngrok.com/components/select#selecttrigger
-     *
-     * @example
-     * ```tsx
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Item value="apple">Apple</Select.Item>
-     *     <Select.Item value="banana">Banana</Select.Item>
-     *     <Select.Item value="cherry">Cherry</Select.Item>
-     *   </Select.Content>
-     * </Select.Root>
-     * ```
-     */
-    readonly Trigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
-     *
-     * @see https://mantle.ngrok.com/components/select#selectvalue
-     *
-     * @example
-     * <Select.Root>
-     *   <Select.Trigger>
-     *     <Select.Value placeholder="Select a fruit" />
-     *   </Select.Trigger>
-     *   <Select.Content>
-     *     <Select.Item value="apple">Apple</Select.Item>
-     *     <Select.Item value="banana">Banana</Select.Item>
-     *     <Select.Item value="cherry">Cherry</Select.Item>
-     *   </Select.Content>
-     * </Select.Root>
-     */
-    readonly Value: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
-};
-
-export { Select };
+import { t as Select } from "./select-39Jfc1Cb.js";
+export { Select };

package/dist/select.js

@@ -1,2 +1 @@
-import{a as e}from"./chunk-YPAUKPCE.js";import"./chunk-MLXONRJD.js";import"./chunk-HKSO72E5.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{e as Select};
-//# sourceMappingURL=select.js.map
+import{t as e}from"./select-DZ2ztBkI.js";export{e as Select};

package/dist/separator-BcCNbHBg.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./slot-DdnjeV2n.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c=({className:n,children:r,asChild:i,...o})=>{let c=i?t:`div`;return a(s.Provider,{value:{orientation:`horizontal`},children:a(c,{"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0`,n),...o,children:r})})};c.displayName=`HorizontalSeparatorGroup`;const l=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...d},f)=>{let p=n?t:`div`,m=i(s).orientation??(u(c)?c:`horizontal`),h=m===`vertical`?m:void 0,g=l?{"aria-orientation":h,role:`separator`}:{role:`none`};return a(p,{className:e(`separator`,`dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...g,ref:f,...n?{children:r}:{},...d})});l.displayName=`Separator`;function u(e){return typeof e==`string`&&o.includes(e)}export{l as n,c as t};
+//# sourceMappingURL=separator-BcCNbHBg.js.map

package/dist/separator-BcCNbHBg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator-BcCNbHBg.js","names":[],"sources":["../src/components/separator/separator.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst orientations = [\"horizontal\", \"vertical\"] as const;\ntype Orientation = (typeof orientations)[number];\n\ntype SeparatorGroupContextShape = {\n\torientation?: Orientation;\n};\n\nconst SeparatorGroupContext = createContext<SeparatorGroupContextShape>({});\n\n/**\n * A container to layout a group of horizontal separators and other children.\n * Overrides all children `Separator`s to be `orientation=\"horizontal\"`.\n *\n * @see https://mantle.ngrok.com/components/separator\n *\n * @example\n * ```tsx\n * <HorizontalSeparatorGroup>\n *   <Separator />\n *   <h3>ngrok mantle</h3>\n *   <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n *   <h3>ngrok mantle</h3>\n *   <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n *   <Separator />\n *   <h3>ngrok mantle</h3>\n * </HorizontalSeparatorGroup>\n * ```\n */\nconst HorizontalSeparatorGroup = ({\n\tclassName,\n\tchildren,\n\tasChild,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<SeparatorGroupContext.Provider value={{ orientation: \"horizontal\" }}>\n\t\t\t<Comp\n\t\t\t\tdata-horizontal-separator-group\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</SeparatorGroupContext.Provider>\n\t);\n};\nHorizontalSeparatorGroup.displayName = \"HorizontalSeparatorGroup\";\n\ntype SeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Either `horizontal` or `vertical`.\n\t\t *\n\t\t * @default \"horizontal\"\n\t\t */\n\t\torientation?: Orientation;\n\t\t/**\n\t\t * If `true`, the separator will be rendered with all accessibility-related attributes and role=\"separator\".\n\t\t * If `false`, the separator is purely decorative and all accessibility-related attributes\n\t\t * are updated so that that the rendered element is removed from the accessibility tree.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * Visually or semantically separates content.\n *\n * @see https://mantle.ngrok.com/components/separator\n *\n * @example\n * ```tsx\n * <Separator className=\"my-4\" />\n *\n * <Separator className=\"my-4\" semantic />\n *\n * <div className=\"flex h-5 items-center gap-4 text-sm\">\n *   Blog\n *   <Separator orientation=\"vertical\" />\n *   Docs\n *   <Separator orientation=\"vertical\" />\n *   Source\n * </div>\n * ```\n */\nconst Separator = forwardRef<ComponentRef<\"div\">, SeparatorProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\torientation: propOrientation,\n\t\t\tsemantic = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst ctx = useContext(SeparatorGroupContext);\n\t\t// Prefer the orientation from the context if it's set, else fallback to the prop and then to \"horizontal\".\n\t\tconst orientation =\n\t\t\tctx.orientation ?? (isOrientation(propOrientation) ? propOrientation : \"horizontal\");\n\t\t// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n\t\tconst ariaOrientation = orientation === \"vertical\" ? orientation : undefined;\n\t\tconst semanticProps = semantic\n\t\t\t? { \"aria-orientation\": ariaOrientation, role: \"separator\" }\n\t\t\t: { role: \"none\" };\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"separator\",\n\t\t\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"h-px w-full group-data-horizontal-separator-group:flex-1\"\n\t\t\t\t\t\t: \"h-full w-px\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tdata-separator\n\t\t\t\t{...semanticProps}\n\t\t\t\tref={ref}\n\t\t\t\t{...(asChild ? { children } : {})} // only pass children if asChild is true\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nSeparator.displayName = \"Separator\";\n\nexport {\n\t//,\n\tHorizontalSeparatorGroup,\n\tSeparator,\n};\n\nfunction isOrientation(value: unknown): value is Orientation {\n\treturn typeof value === \"string\" && orientations.includes(value as Orientation);\n}\n"],"mappings":"qLAMA,MAAM,EAAe,CAAC,aAAc,WAAW,CAOzC,EAAwB,EAA0C,EAAE,CAAC,CA2BrE,GAA4B,CACjC,YACA,WACA,UACA,GAAG,KACgD,CACnD,IAAM,EAAO,EAAU,EAAO,MAE9B,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,YAAa,aAAc,UACnE,EAAC,EAAD,CACC,kCAAA,GACA,UAAW,EACV,qEACA,EACA,CACD,GAAI,EAEH,WACK,CAAA,CACyB,CAAA,EAGnC,EAAyB,YAAc,2BAwCvC,MAAM,EAAY,GAEhB,CACC,UAAU,GACV,WACA,YACA,YAAa,EACb,WAAW,GACX,GAAG,GAEJ,IACI,CACJ,IAAM,EAAY,EAAU,EAAO,MAG7B,EAFM,EAAW,EAAsB,CAGxC,cAAgB,EAAc,EAAgB,CAAG,EAAkB,cAElE,EAAkB,IAAgB,WAAa,EAAc,IAAA,GAC7D,EAAgB,EACnB,CAAE,mBAAoB,EAAiB,KAAM,YAAa,CAC1D,CAAE,KAAM,OAAQ,CAEnB,OACC,EAAC,EAAD,CACC,UAAW,EACV,YACA,wFACA,IAAgB,aACb,2DACA,cACH,EACA,CACD,mBAAkB,EAClB,iBAAA,GACA,GAAI,EACC,MACL,GAAK,EAAU,CAAE,WAAU,CAAG,EAAE,CAChC,GAAI,EACH,CAAA,EAGJ,CACD,EAAU,YAAc,YAQxB,SAAS,EAAc,EAAsC,CAC5D,OAAO,OAAO,GAAU,UAAY,EAAa,SAAS,EAAqB"}

package/dist/separator.d.ts

@@ -1,8 +1,9 @@
-import * as react from 'react';
-import { HTMLAttributes, ComponentProps } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/components/separator/separator.d.ts
 declare const orientations: readonly ["horizontal", "vertical"];
 type Orientation = (typeof orientations)[number];
 /**
@@ -31,24 +32,29 @@ type Orientation = (typeof orientations)[number];
  * ```
  */
 declare const HorizontalSeparatorGroup: {
-    ({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild): react_jsx_runtime.JSX.Element;
-    displayName: string;
+  ({
+    className,
+    children,
+    asChild,
+    ...props
+  }: HTMLAttributes<HTMLDivElement> & WithAsChild): react_jsx_runtime0.JSX.Element;
+  displayName: string;
 };
 type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
-    /**
-     * Either `horizontal` or `vertical`.
-     *
-     * @default "horizontal"
-     */
-    orientation?: Orientation;
-    /**
-     * If `true`, the separator will be rendered with all accessibility-related attributes and role="separator".
-     * If `false`, the separator is purely decorative and all accessibility-related attributes
-     * are updated so that that the rendered element is removed from the accessibility tree.
-     *
-     * @default false
-     */
-    semantic?: boolean;
+  /**
+   * Either `horizontal` or `vertical`.
+   *
+   * @default "horizontal"
+   */
+  orientation?: Orientation;
+  /**
+   * If `true`, the separator will be rendered with all accessibility-related attributes and role="separator".
+   * If `false`, the separator is purely decorative and all accessibility-related attributes
+   * are updated so that that the rendered element is removed from the accessibility tree.
+   *
+   * @default false
+   */
+  semantic?: boolean;
 };
 /**
  * Visually or semantically separates content.
@@ -71,5 +77,6 @@ type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
  * ```
  */
 declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
+//#endregion
 export { HorizontalSeparatorGroup, Separator };
+//# sourceMappingURL=separator.d.ts.map

package/dist/separator.js

@@ -1,2 +1 @@
-import{a as r,b as o}from"./chunk-MLXONRJD.js";import"./chunk-ADF5DAYG.js";import"./chunk-PFXFESEN.js";export{r as HorizontalSeparatorGroup,o as Separator};
-//# sourceMappingURL=separator.js.map
+import{n as e,t}from"./separator-BcCNbHBg.js";export{t as HorizontalSeparatorGroup,e as Separator};