@ngrok/mantle 0.64.3 → 0.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/dist/alert.d.ts +7 -2
- package/dist/alert.js +1 -1
- package/dist/alert.js.map +1 -1
- package/dist/anchor.js +1 -1
- package/dist/anchor.js.map +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/chunk-COQIVAQH.js +2 -0
- package/dist/chunk-COQIVAQH.js.map +1 -0
- package/dist/hooks.d.ts +72 -2
- package/dist/hooks.js +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/in-view-aHeQHaUj.d.ts +78 -0
- package/dist/{sorting.d.ts → utils.d.ts} +2 -0
- package/dist/utils.js +2 -0
- package/dist/{sorting.js.map → utils.js.map} +1 -1
- package/package.json +8 -13
- package/dist/chunk-Q5QAMVGX.js +0 -1
- package/dist/chunk-Q5QAMVGX.js.map +0 -1
- package/dist/compose-refs.d.ts +0 -15
- package/dist/compose-refs.js +0 -2
- package/dist/compose-refs.js.map +0 -1
- package/dist/sorting.js +0 -2
package/README.md
CHANGED
|
@@ -38,6 +38,21 @@ Also install the required `devDependencies`:
|
|
|
38
38
|
|
|
39
39
|
Next, check out the [Overview & Setup](https://mantle.ngrok.com/) docs and start using mantle components in your application!
|
|
40
40
|
|
|
41
|
+
## Git Hooks
|
|
42
|
+
|
|
43
|
+
Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.
|
|
44
|
+
|
|
45
|
+
### Opting Out
|
|
46
|
+
|
|
47
|
+
If you need to skip the pre-commit hook locally (e.g., WIP commits, rebasing), set the `SKIP_HOOKS` env var:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
SKIP_HOOKS=1 git commit -m "wip"
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
> [!NOTE]
|
|
54
|
+
> This is a **local opt-out only**. CI will always run formatting and linting checks against your branch, so any issues will still be caught before merge.
|
|
55
|
+
|
|
41
56
|
## Contributing
|
|
42
57
|
|
|
43
58
|
Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md) and [conventions](https://github.com/ngrok-oss/mantle/blob/main/CONVENTIONS.md).
|
package/dist/alert.d.ts
CHANGED
|
@@ -35,7 +35,12 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
|
|
|
35
35
|
svg?: ReactNode;
|
|
36
36
|
};
|
|
37
37
|
type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
|
|
38
|
-
type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon"
|
|
38
|
+
type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
|
|
39
|
+
/**
|
|
40
|
+
* An optional icon to render inside the dismiss button. Defaults to an X icon.
|
|
41
|
+
*/
|
|
42
|
+
icon?: ReactNode;
|
|
43
|
+
};
|
|
39
44
|
/**
|
|
40
45
|
* Displays a callout for user attention.
|
|
41
46
|
*
|
|
@@ -125,7 +130,7 @@ declare const Alert: {
|
|
|
125
130
|
* ```
|
|
126
131
|
*/
|
|
127
132
|
readonly DismissIconButton: {
|
|
128
|
-
({ size, type, label, appearance, className, style, ...props }: AlertDismissIconButtonProps): react_jsx_runtime.JSX.Element;
|
|
133
|
+
({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): react_jsx_runtime.JSX.Element;
|
|
129
134
|
displayName: string;
|
|
130
135
|
};
|
|
131
136
|
/**
|
package/dist/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{c as f}from"./chunk-CBRSMQ26.js";import{a as d}from"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as m}from"./chunk-SBQHQ2SJ.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as I}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as
|
|
1
|
+
import{c as f}from"./chunk-CBRSMQ26.js";import{a as d}from"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as m}from"./chunk-SBQHQ2SJ.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as I}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as h}from"@phosphor-icons/react/Info";import{WarningIcon as T}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as R}from"@phosphor-icons/react/WarningDiamond";import{XIcon as w}from"@phosphor-icons/react/X";import{cva as D}from"class-variance-authority";import{createContext as B,forwardRef as c,useContext as H,useMemo as M}from"react";import V from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=B(null);function y(){let t=H(u);return V(t,"useAlertContext hook used outside of Alert parent!"),t}var W=D("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-info-500/50 bg-info-500/10 text-info-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),A=c(({appearance:t="default",className:r,priority:e,...s},n)=>{let a=M(()=>({priority:e}),[e]);return o(u.Provider,{value:a,children:o("div",{ref:n,className:i(W({appearance:t,priority:e}),r),...s})})});A.displayName="Alert";var L={danger:o(T,{}),info:o(h,{}),success:o(I,{}),warning:o(R,{})},g=c(({className:t,svg:r,...e},s)=>{let n=y(),a=L[n.priority];return o(m,{ref:s,className:i("size-5",t),svg:r??a,...e})});g.displayName="AlertIcon";var v=c(({className:t,...r},e)=>o("div",{ref:e,className:i("min-w-0 flex-1 has-data-alert-dismiss:pr-6",t),...r}));v.displayName="AlertContent";var C=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"h5",{ref:s,className:i("font-medium",r),...e}));C.displayName="AlertTitle";var x=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"div",{ref:s,className:i("text-sm",r),...e}));x.displayName="AlertDescription";var S=t=>`var(--color-${t}-700)`,$=t=>`var(--color-${t}-800)`,k=t=>`var(--color-${t}-900)`,P=({size:t="sm",type:r="button",label:e="Dismiss Alert",appearance:s="ghost",className:n,icon:a=o(w,{}),style:b,...N})=>{let p=y();return o(f,{appearance:s,icon:a,label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute","text-(--alert-dismiss-icon-color)","not-disabled:hover:text-(--alert-dismiss-icon-hover-color)","not-disabled:active:text-(--alert-dismiss-icon-active-color)",n),type:r,style:d({...b,"--alert-dismiss-icon-color":S(p.priority),"--alert-dismiss-icon-hover-color":$(p.priority),"--alert-dismiss-icon-active-color":k(p.priority)}),...N})};P.displayName="AlertDismissIconButton";var z={Root:A,Content:v,Description:x,DismissIconButton:P,Icon:g,Title:C};export{z as Alert};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
package/dist/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissActiveColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-900)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\t\"not-disabled:active:text-(--alert-dismiss-icon-active-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-active-color\": dismissActiveColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","appearance","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","dismissTextColor","dismissHoverColor","dismissActiveColor","DismissIconButton","size","type","label","style","IconButton","XIcon","$cssProperties","Alert"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissActiveColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-900)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\t\"not-disabled:active:text-(--alert-dismiss-icon-active-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-active-color\": dismissActiveColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","XIcon","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Root","forwardRef","appearance","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","WarningIcon","InfoIcon","CheckCircleIcon","WarningDiamondIcon","Icon","svg","ctx","defaultIcon","SvgOnly","Content","Title","asChild","Slot","Description","dismissTextColor","dismissHoverColor","dismissActiveColor","DismissIconButton","size","type","label","icon","XIcon","style","IconButton","$cssProperties","Alert"]}
|
package/dist/anchor.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:
|
|
1
|
+
import{a as n}from"./chunk-IVQ626TU.js";import{a as c}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{Children as C,cloneElement as v,forwardRef as N,isValidElement as b}from"react";import x from"tiny-invariant";import{Fragment as P,jsx as o,jsxs as d}from"react/jsx-runtime";var f=r=>m("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent",r),u=N(({asChild:r,children:s,className:a,rel:l,icon:e,iconPlacement:t="start",...g},R)=>{let y=h(l),p={className:f(a),ref:R,rel:y,...g};if(r){let i=C.only(s);x(b(i),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let A=i.props?.children;return o(c,{...p,children:v(i,{},d(P,{children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),A,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]}))})}return d("a",{...p,children:[e&&t==="start"&&o(n,{className:"inline-block mr-1.5",svg:e}),s,e&&t==="end"&&o(n,{className:"inline-block ml-1.5",svg:e})]})});u.displayName="Anchor";function h(r){return Array.isArray(r)?[...new Set(r)].map(l=>l?.trim()).filter(Boolean).toSorted().join(" ")||void 0:r?.trim()||void 0}export{u as Anchor,f as anchorClassNames,h as resolveRel};
|
|
2
2
|
//# sourceMappingURL=anchor.js.map
|
package/dist/anchor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n * ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.
|
|
1
|
+
{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n * ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"oJACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAmFhB,mBAAAC,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAzEN,IAAMC,EAAoBC,GACzBC,EACC,kJACAD,CACD,EA2CKE,EAASC,EACd,CACC,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAL,EAAW,IAAKM,EAAS,KAAAC,EAAM,cAAAC,EAAgB,QAAS,GAAGC,CAAM,EACtFC,IACI,CACJ,IAAMC,EAAMC,EAAWN,CAAO,EACxBO,EAAiB,CACtB,UAAWd,EAAiBC,CAAS,EACrC,IAAAU,EACA,IAAAC,EACA,GAAGF,CACJ,EAEA,GAAIL,EAAS,CACZ,IAAMU,EAAcC,EAAS,KAAKV,CAAQ,EAC1CW,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACCjB,EAACsB,EAAA,CAAM,GAAGN,EACR,SAAAO,EACAN,EACA,CAAC,EACDhB,EAAAF,EAAA,CACE,UAAAW,GAAQC,IAAkB,SAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EAEjDW,EACAX,GAAQC,IAAkB,OAC1BX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GAEnD,CACD,EACD,CAEF,CAEA,OACCT,EAAC,KAAG,GAAGe,EACL,UAAAN,GAAQC,IAAkB,SAAWX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,EACtFF,EACAE,GAAQC,IAAkB,OAASX,EAACwB,EAAA,CAAK,UAAU,sBAAsB,IAAKd,EAAM,GACtF,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,SAASU,EACRD,EACC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKW,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,SAAS,EACT,KAAK,GAAG,GACO,OAGXX,GAAK,KAAK,GAAK,MACvB","names":["Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","anchorClassNames","className","cx","Anchor","forwardRef","asChild","children","propRel","icon","iconPlacement","props","ref","rel","resolveRel","componentProps","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","Icon","item"]}
|
package/dist/checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{a as o}from"./chunk-HKSO72E5.js";import k from"clsx";import{forwardRef as C,useEffect as u,useRef as w,useState as R}from"react";import{jsx as x}from"react/jsx-runtime";var t=i=>i==="indeterminate",f=C(({"aria-invalid":i,className:l,checked:e,defaultChecked:b,defaultValue:p="on",onClick:m,readOnly:d,validation:r,...g},h)=>{let n=w(null),[a]=R(b),c=i!=null&&i!=="false"?"error":typeof r=="function"?r():r,v=i??c==="error";return u(()=>{n.current&&(n.current.indeterminate=t(e))},[e]),u(()=>{n.current&&(n.current.indeterminate=t(a))},[a]),x("input",{"aria-checked":t(e)?"mixed":e,"aria-invalid":v,className:k("border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50","bg-center bg-no-repeat focus:outline-hidden","focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4","checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon","indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon","data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger","where:block where:size-4 where:p-0",l),checked:t(e)?void 0:e,"data-validation":c||void 0,defaultChecked:t(a)?void 0:a,defaultValue:p,onClick:s=>{if(d){s.preventDefault();return}m?.(s)},readOnly:d,ref:o(n,h),type:"checkbox",...g})});f.displayName="Checkbox";export{f as Checkbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n * <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" id=\"terms\" />\n * Accept terms and conditions\n * </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" =>\n\tchecked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox\n *\n * @example\n * ```tsx\n * <form>\n * <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" id=\"terms\" />\n * Accept terms and conditions\n * </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"wCAEA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA4ErD,cAAAC,MAAA,oBArEH,IAAMC,EAAmBC,GACxBA,IAAY,gBA8BPC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,8CACA,oHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var V={some:0,all:1};function p(a,s,{root:l,margin:g,amount:t="some"}={}){let r=new WeakMap,c=u=>{u.forEach(e=>{let i=r.get(e.target);if(e.isIntersecting!==!!i)if(e.isIntersecting){let o=s(e.target,e);typeof o=="function"?r.set(e.target,o):n.unobserve(e.target)}else typeof i=="function"&&(i(e),r.delete(e.target))})},n=new IntersectionObserver(c,{root:l,rootMargin:g,threshold:typeof t=="number"?t:V[t]});return n.observe(a),()=>{n.unobserve(a),n.disconnect()}}export{p as a};
|
|
2
|
+
//# sourceMappingURL=chunk-COQIVAQH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/in-view.ts"],"sourcesContent":["type MarginValue = `${number}${\"px\" | \"%\"}`;\n\n/**\n * Margin string used to expand or contract the intersection root's bounding box.\n * Follows the same syntax as the CSS `margin` shorthand (1–4 values).\n *\n * @example \"10px\"\n * @example \"10% 20px\"\n * @example \"10px 20px 10px 20px\"\n */\ntype MarginType =\n\t| MarginValue\n\t| `${MarginValue} ${MarginValue}`\n\t| `${MarginValue} ${MarginValue} ${MarginValue}`\n\t| `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;\n\n/**\n * Options for the `inView` helper.\n */\ntype InViewOptions = {\n\t/**\n\t * The scrollable container element (or `Document`) to use as the intersection root.\n\t * Defaults to the browser viewport.\n\t */\n\troot?: Element | Document;\n\n\t/**\n\t * Expand or contract the detected area from each side of the root's bounding box.\n\t * Uses the same syntax as the CSS `margin` shorthand (e.g. `\"10px\"`, `\"10% 20px\"`).\n\t */\n\tmargin?: MarginType;\n\n\t/**\n\t * How much of the element must be visible before it is considered in view.\n\t * - `\"some\"` (default): Any part of the element is visible.\n\t * - `\"all\"`: The entire element is visible.\n\t * - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).\n\t */\n\tamount?: \"some\" | \"all\" | number;\n};\n\n/**\n * Callback invoked when an observed element leaves the viewport.\n * Receives the `IntersectionObserverEntry` for the departing element.\n */\ntype ViewChangeHandler = (entry: IntersectionObserverEntry) => void;\n\nconst thresholds = {\n\tsome: 0,\n\tall: 1,\n};\n\n/**\n * Observe when a DOM element enters or leaves the viewport (or a scrollable\n * container) using the `IntersectionObserver` API.\n *\n * When the element enters the viewport, `onStart` is called. If `onStart`\n * returns a function, that function is called when the element leaves the\n * viewport. If `onStart` returns nothing, the element is unobserved after\n * the first entry.\n *\n * @param element - The DOM element to observe.\n * @param onStart - Called when the element enters the viewport. Optionally\n * returns a cleanup function called when the element leaves.\n * @param options - Options for the intersection root, margin, and threshold.\n * @returns A cleanup function that disconnects the observer.\n *\n * @example\n * const stop = inView(element, (el) => {\n * el.classList.add(\"visible\");\n * return () => el.classList.remove(\"visible\");\n * });\n *\n * // Later, stop observing:\n * stop();\n */\nfunction inView(\n\telement: Element,\n\tonStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler,\n\t{ root, margin: rootMargin, amount = \"some\" }: InViewOptions = {},\n): VoidFunction {\n\tconst activeIntersections = new WeakMap<Element, ViewChangeHandler>();\n\n\tconst onIntersectionChange: IntersectionObserverCallback = (entries) => {\n\t\tentries.forEach((entry) => {\n\t\t\tconst onEnd = activeIntersections.get(entry.target);\n\n\t\t\t/**\n\t\t\t * If there's no change to the intersection, we don't need to\n\t\t\t * do anything here.\n\t\t\t */\n\t\t\tif (entry.isIntersecting === Boolean(onEnd)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tconst newOnEnd = onStart(entry.target, entry);\n\t\t\t\tif (typeof newOnEnd === \"function\") {\n\t\t\t\t\tactiveIntersections.set(entry.target, newOnEnd);\n\t\t\t\t} else {\n\t\t\t\t\tobserver.unobserve(entry.target);\n\t\t\t\t}\n\t\t\t} else if (typeof onEnd === \"function\") {\n\t\t\t\tonEnd(entry);\n\t\t\t\tactiveIntersections.delete(entry.target);\n\t\t\t}\n\t\t});\n\t};\n\n\tconst observer = new IntersectionObserver(onIntersectionChange, {\n\t\troot,\n\t\trootMargin,\n\t\tthreshold: typeof amount === \"number\" ? amount : thresholds[amount],\n\t});\n\n\tobserver.observe(element);\n\n\treturn () => {\n\t\tobserver.unobserve(element);\n\t\tobserver.disconnect();\n\t};\n}\n\nexport { inView };\nexport type { InViewOptions, MarginType, ViewChangeHandler };\n"],"mappings":"AA+CA,IAAMA,EAAa,CAClB,KAAM,EACN,IAAK,CACN,EA0BA,SAASC,EACRC,EACAC,EACA,CAAE,KAAAC,EAAM,OAAQC,EAAY,OAAAC,EAAS,MAAO,EAAmB,CAAC,EACjD,CACf,IAAMC,EAAsB,IAAI,QAE1BC,EAAsDC,GAAY,CACvEA,EAAQ,QAASC,GAAU,CAC1B,IAAMC,EAAQJ,EAAoB,IAAIG,EAAM,MAAM,EAMlD,GAAIA,EAAM,iBAAmB,EAAQC,EAIrC,GAAID,EAAM,eAAgB,CACzB,IAAME,EAAWT,EAAQO,EAAM,OAAQA,CAAK,EACxC,OAAOE,GAAa,WACvBL,EAAoB,IAAIG,EAAM,OAAQE,CAAQ,EAE9CC,EAAS,UAAUH,EAAM,MAAM,CAEjC,MAAW,OAAOC,GAAU,aAC3BA,EAAMD,CAAK,EACXH,EAAoB,OAAOG,EAAM,MAAM,EAEzC,CAAC,CACF,EAEMG,EAAW,IAAI,qBAAqBL,EAAsB,CAC/D,KAAAJ,EACA,WAAAC,EACA,UAAW,OAAOC,GAAW,SAAWA,EAASN,EAAWM,CAAM,CACnE,CAAC,EAED,OAAAO,EAAS,QAAQX,CAAO,EAEjB,IAAM,CACZW,EAAS,UAAUX,CAAO,EAC1BW,EAAS,WAAW,CACrB,CACD","names":["thresholds","inView","element","onStart","root","rootMargin","amount","activeIntersections","onIntersectionChange","entries","entry","onEnd","newOnEnd","observer"]}
|
package/dist/hooks.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
1
|
+
import { useEffect, RefObject } from 'react';
|
|
2
|
+
import { M as MarginType } from './in-view-aHeQHaUj.js';
|
|
3
|
+
export { u as useComposedRefs } from './in-view-aHeQHaUj.js';
|
|
2
4
|
|
|
3
5
|
/**
|
|
4
6
|
* Tailwind CSS breakpoints in descending order (largest → smallest).
|
|
@@ -252,4 +254,72 @@ type ScrollBehavior = "auto" | "smooth";
|
|
|
252
254
|
*/
|
|
253
255
|
declare function useScrollBehavior(): ScrollBehavior;
|
|
254
256
|
|
|
255
|
-
|
|
257
|
+
/**
|
|
258
|
+
* Options for the `useInView` hook.
|
|
259
|
+
*/
|
|
260
|
+
type UseInViewOptions = {
|
|
261
|
+
/**
|
|
262
|
+
* A ref to a scrollable container element to use as the intersection root.
|
|
263
|
+
* Defaults to the browser viewport.
|
|
264
|
+
*/
|
|
265
|
+
root?: RefObject<Element | null>;
|
|
266
|
+
/**
|
|
267
|
+
* Expand or contract the detected area from each side of the root's bounding box.
|
|
268
|
+
* Uses the same syntax as the CSS `margin` shorthand (e.g. `"10px"`, `"10% 20px"`).
|
|
269
|
+
*/
|
|
270
|
+
margin?: MarginType;
|
|
271
|
+
/**
|
|
272
|
+
* How much of the element must be visible before it is considered in view.
|
|
273
|
+
* - `"some"` (default): Any part of the element is visible.
|
|
274
|
+
* - `"all"`: The entire element is visible.
|
|
275
|
+
* - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).
|
|
276
|
+
*/
|
|
277
|
+
amount?: "some" | "all" | number;
|
|
278
|
+
/**
|
|
279
|
+
* If `true`, stop observing once the element enters the viewport for the
|
|
280
|
+
* first time. Useful for one-shot entrance animations.
|
|
281
|
+
* Defaults to `false`.
|
|
282
|
+
*/
|
|
283
|
+
once?: boolean;
|
|
284
|
+
/**
|
|
285
|
+
* The initial visibility state returned before the observer has attached.
|
|
286
|
+
* Defaults to `false`.
|
|
287
|
+
*/
|
|
288
|
+
initial?: boolean;
|
|
289
|
+
};
|
|
290
|
+
/**
|
|
291
|
+
* React hook that tracks whether a DOM element is visible within the viewport
|
|
292
|
+
* (or a scrollable container) using the `IntersectionObserver` API.
|
|
293
|
+
*
|
|
294
|
+
* @param ref - A ref attached to the element to observe.
|
|
295
|
+
* @param options - Options controlling the scroll root, margin, threshold,
|
|
296
|
+
* initial state, and one-time detection.
|
|
297
|
+
* @returns `true` if the element is currently in view, otherwise `false`.
|
|
298
|
+
*
|
|
299
|
+
* @example
|
|
300
|
+
* // Basic usage
|
|
301
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
302
|
+
* const isInView = useInView(ref);
|
|
303
|
+
*
|
|
304
|
+
* return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
|
|
305
|
+
*
|
|
306
|
+
* @example
|
|
307
|
+
* // Trigger once when the element first enters the viewport
|
|
308
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
309
|
+
* const isInView = useInView(ref, { once: true });
|
|
310
|
+
*
|
|
311
|
+
* return (
|
|
312
|
+
* <div
|
|
313
|
+
* ref={ref}
|
|
314
|
+
* style={{ opacity: isInView ? 1 : 0, transition: "opacity 0.5s" }}
|
|
315
|
+
* />
|
|
316
|
+
* );
|
|
317
|
+
*
|
|
318
|
+
* @example
|
|
319
|
+
* // Require 50% of the element to be visible
|
|
320
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
321
|
+
* const isInView = useInView(ref, { amount: 0.5 });
|
|
322
|
+
*/
|
|
323
|
+
declare function useInView(ref: RefObject<Element | null>, { root, margin, amount, once, initial }?: UseInViewOptions): boolean;
|
|
324
|
+
|
|
325
|
+
export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, breakpoints, useBreakpoint, useCallbackRef, useCopyToClipboard, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId, useScrollBehavior };
|
package/dist/hooks.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as M}from"./chunk-COQIVAQH.js";import{a as C}from"./chunk-PNL7JOXI.js";import{b as I}from"./chunk-HKSO72E5.js";import{a as E}from"./chunk-6J7D73WA.js";import{a as S}from"./chunk-KMNACVH6.js";import{useSyncExternalStore as g}from"react";var T=["2xl","xl","lg","md","sm","xs","2xs"],O=["default",...T];function V(){return g(q,W,()=>"default")}function j(e){return g(P(e),U(e),()=>!1)}var i={"2xl":"(min-width: 96rem)",xl:"(min-width: 80rem)",lg:"(min-width: 64rem)",md:"(min-width: 48rem)",sm:"(min-width: 40rem)",xs:"(min-width: 30rem)","2xs":"(min-width: 22.5rem)"},s={"2xl":"(max-width: 95.99rem)",xl:"(max-width: 79.99rem)",lg:"(max-width: 63.99rem)",md:"(max-width: 47.99rem)",sm:"(max-width: 39.99rem)",xs:"(max-width: 29.99rem)","2xs":"(max-width: 22.49rem)"},m=null,l=null;function f(){return m||(m={"2xl":window.matchMedia(i["2xl"]),xl:window.matchMedia(i.xl),lg:window.matchMedia(i.lg),md:window.matchMedia(i.md),sm:window.matchMedia(i.sm),xs:window.matchMedia(i.xs),"2xs":window.matchMedia(i["2xs"])}),m}function v(e){return l||(l={"2xl":window.matchMedia(s["2xl"]),xl:window.matchMedia(s.xl),lg:window.matchMedia(s.lg),md:window.matchMedia(s.md),sm:window.matchMedia(s.sm),xs:window.matchMedia(s.xs),"2xs":window.matchMedia(s["2xs"])}),l[e]}var c="default",d=new Set,u=!1;function R(){let e=f();for(let t of T)if(e[t].matches)return t;return"default"}var p=!1;function b(){p||(p=!0,requestAnimationFrame(()=>{p=!1;let e=R();if(e!==c){c=e;for(let t of d)t()}}))}function q(e){if(d.add(e),!u){u=!0;let t=f();c=R();for(let n of Object.values(t))n.addEventListener("change",b)}return e(),()=>{if(d.delete(e),d.size===0&&u){u=!1;let t=f();for(let n of Object.values(t))n.removeEventListener("change",b)}}}function W(){return c}var B=new Map;function P(e){let t=B.get(e);return t||(t=n=>{let o=v(e),r=!1,a=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,n()}))};return o.addEventListener("change",a),()=>{o.removeEventListener("change",a)}},B.set(e,t),t)}var y=new Map;function U(e){let t=y.get(e);return t||(t=()=>v(e).matches,y.set(e,t),t)}import{useEffect as A,useMemo as F,useRef as D}from"react";function w(e){let t=D(e);return A(()=>{t.current=e}),F(()=>((...n)=>t.current?.(...n)),[])}import{useCallback as _,useEffect as $,useRef as z}from"react";function G(e,t){let n=w(e),o=z(0);return $(()=>()=>window.clearTimeout(o.current),[]),_((...r)=>{window.clearTimeout(o.current),o.current=window.setTimeout(()=>n(...r),t.waitMs)},[n,t.waitMs])}import{useEffect as H,useLayoutEffect as J}from"react";var K=typeof window<"u"?J:H;import{useEffect as N,useState as X}from"react";var Y="(prefers-reduced-motion: no-preference)";function x(){let[e,t]=X(!0);return N(()=>{let n=window.matchMedia(Y);t(!n.matches);function o(r){t(!r.matches)}return n.addEventListener("change",o),()=>{n.removeEventListener("change",o)}},[]),e}import{useMemo as Z}from"react";var ee=(e="mantle")=>Z(()=>te(e),[e]);function te(e="mantle"){return[e.trim()||"mantle",ne()].join("-")}function ne(){return Math.random().toString(36).substring(2,9)}import{useMemo as oe}from"react";function re(){let e=x();return oe(()=>e?"auto":"smooth",[e])}import{useEffect as ie,useState as se}from"react";function ae(e,{root:t,margin:n,amount:o,once:r=!1,initial:a=!1}={}){let[h,k]=se(a);return ie(()=>{if(!e.current||r&&h)return;function L(){return k(!0),r?void 0:()=>k(!1)}let Q={root:t&&t.current||void 0,margin:n,amount:o};return M(e.current,L,Q)},[t,e,n,r,o]),h}export{O as breakpoints,V as useBreakpoint,w as useCallbackRef,I as useComposedRefs,C as useCopyToClipboard,G as useDebouncedCallback,ae as useInView,j as useIsBelowBreakpoint,S as useIsHydrated,K as useIsomorphicLayoutEffect,E as useMatchesMediaQuery,x as usePrefersReducedMotion,ee as useRandomStableId,re as useScrollBehavior};
|
|
2
2
|
//# sourceMappingURL=hooks.js.map
|
package/dist/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx","../src/hooks/use-scroll-behavior.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\", \"2xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n * // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n\t\"2xs\": \"(min-width: 22.5rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 30 - 0.01\n\t\"2xs\": \"(max-width: 22.49rem)\" as const, // 22.5 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(breakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(belowBreakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Cached `subscribe` functions keyed by breakpoint.\n *\n * Without caching, `useSyncExternalStore` receives a new function reference on\n * every render, causing it to tear down and re-attach the MQL listener each\n * time — the primary source of resize sluggishness.\n *\n * @private\n */\nconst belowBreakpointSubscribeCache = new Map<\n\tTailwindBreakpoint,\n\t(callback: () => void) => () => void\n>();\n\n/**\n * Get (or create and cache) a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSubscribeCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n\n\tbelowBreakpointSubscribeCache.set(breakpoint, cached);\n\treturn cached;\n}\n\n/**\n * Cached `getSnapshot` functions keyed by breakpoint.\n *\n * Ensures `useSyncExternalStore` receives a referentially stable function,\n * preventing unnecessary subscription churn.\n *\n * @private\n */\nconst belowBreakpointSnapshotCache = new Map<TailwindBreakpoint, () => boolean>();\n\n/**\n * Get (or create and cache) a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSnapshotCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n\n\tbelowBreakpointSnapshotCache.set(breakpoint, cached);\n\treturn cached;\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n * This keeps the “default” mental model explicit: if the system hasn’t opted out,\n * animations are allowed.\n * - Defaults to `true` on the server to avoid animating before hydration. The initial\n * client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n","import { useMemo } from \"react\";\nimport { usePrefersReducedMotion } from \"./use-prefers-reduced-motion.js\";\n\n/**\n * `scroll-behavior` values:\n *\n * - `\"auto\"` — scrolling happens instantly (no animation).\n * - `\"smooth\"` — scrolling animates smoothly using a user-agent–defined easing and duration.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#values\n */\ntype ScrollBehavior = \"auto\" | \"smooth\";\n\n/**\n * Returns a `ScrollBehavior` that respects the user's motion preference via `usePrefersReducedMotion`.\n *\n * - When `usePrefersReducedMotion()` is `true`, returns `\"auto\"` (no animated scroll).\n * - Otherwise returns `\"smooth\"`.\n *\n * Use this with `window.scrollTo`, `Element.scrollIntoView`, etc. It prevents\n * smooth-scrolling for users who opt out of motion and avoids SSR “first paint”\n * animations thanks to the hook’s conservative server default.\n *\n * @example\n * // Scroll to top\n * const behavior = useScrollBehavior();\n * window.scrollTo({ top: 0, behavior });\n *\n * @example\n * // Bring a section into view\n * const behavior = useScrollBehavior();\n * sectionRef.current?.scrollIntoView({ behavior, block: \"start\" });\n *\n * @see {@link usePrefersReducedMotion}\n * @see CSS `scroll-behavior` property (values: `\"auto\"`, `\"smooth\"`).\n */\nexport function useScrollBehavior(): ScrollBehavior {\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\treturn useMemo(() => (prefersReducedMotion ? \"auto\" : \"smooth\"), [prefersReducedMotion]);\n}\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","belowBreakpointSubscribeCache","createBelowBreakpointSubscribe","cached","mediaQuery","pending","onChange","belowBreakpointSnapshotCache","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix","useMemo","useScrollBehavior","prefersReducedMotion","usePrefersReducedMotion","useMemo"]}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx","../src/hooks/use-scroll-behavior.tsx","../src/hooks/use-in-view.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\", \"2xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n * // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n\t\"2xs\": \"(min-width: 22.5rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 30 - 0.01\n\t\"2xs\": \"(max-width: 22.49rem)\" as const, // 22.5 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(breakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(belowBreakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Cached `subscribe` functions keyed by breakpoint.\n *\n * Without caching, `useSyncExternalStore` receives a new function reference on\n * every render, causing it to tear down and re-attach the MQL listener each\n * time — the primary source of resize sluggishness.\n *\n * @private\n */\nconst belowBreakpointSubscribeCache = new Map<\n\tTailwindBreakpoint,\n\t(callback: () => void) => () => void\n>();\n\n/**\n * Get (or create and cache) a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSubscribeCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n\n\tbelowBreakpointSubscribeCache.set(breakpoint, cached);\n\treturn cached;\n}\n\n/**\n * Cached `getSnapshot` functions keyed by breakpoint.\n *\n * Ensures `useSyncExternalStore` receives a referentially stable function,\n * preventing unnecessary subscription churn.\n *\n * @private\n */\nconst belowBreakpointSnapshotCache = new Map<TailwindBreakpoint, () => boolean>();\n\n/**\n * Get (or create and cache) a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A stable function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\tlet cached = belowBreakpointSnapshotCache.get(breakpoint);\n\tif (cached) {\n\t\treturn cached;\n\t}\n\n\tcached = () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n\n\tbelowBreakpointSnapshotCache.set(breakpoint, cached);\n\treturn cached;\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n * This keeps the “default” mental model explicit: if the system hasn’t opted out,\n * animations are allowed.\n * - Defaults to `true` on the server to avoid animating before hydration. The initial\n * client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(!mediaQueryList.matches);\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n","import { useMemo } from \"react\";\nimport { usePrefersReducedMotion } from \"./use-prefers-reduced-motion.js\";\n\n/**\n * `scroll-behavior` values:\n *\n * - `\"auto\"` — scrolling happens instantly (no animation).\n * - `\"smooth\"` — scrolling animates smoothly using a user-agent–defined easing and duration.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#values\n */\ntype ScrollBehavior = \"auto\" | \"smooth\";\n\n/**\n * Returns a `ScrollBehavior` that respects the user's motion preference via `usePrefersReducedMotion`.\n *\n * - When `usePrefersReducedMotion()` is `true`, returns `\"auto\"` (no animated scroll).\n * - Otherwise returns `\"smooth\"`.\n *\n * Use this with `window.scrollTo`, `Element.scrollIntoView`, etc. It prevents\n * smooth-scrolling for users who opt out of motion and avoids SSR “first paint”\n * animations thanks to the hook’s conservative server default.\n *\n * @example\n * // Scroll to top\n * const behavior = useScrollBehavior();\n * window.scrollTo({ top: 0, behavior });\n *\n * @example\n * // Bring a section into view\n * const behavior = useScrollBehavior();\n * sectionRef.current?.scrollIntoView({ behavior, block: \"start\" });\n *\n * @see {@link usePrefersReducedMotion}\n * @see CSS `scroll-behavior` property (values: `\"auto\"`, `\"smooth\"`).\n */\nexport function useScrollBehavior(): ScrollBehavior {\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\treturn useMemo(() => (prefersReducedMotion ? \"auto\" : \"smooth\"), [prefersReducedMotion]);\n}\n","\"use client\";\n\nimport { type RefObject, useEffect, useState } from \"react\";\nimport type { InViewOptions, MarginType } from \"../utils/in-view.js\";\nimport { inView } from \"../utils/in-view.js\";\n\n/**\n * Options for the `useInView` hook.\n */\ntype UseInViewOptions = {\n\t/**\n\t * A ref to a scrollable container element to use as the intersection root.\n\t * Defaults to the browser viewport.\n\t */\n\troot?: RefObject<Element | null>;\n\n\t/**\n\t * Expand or contract the detected area from each side of the root's bounding box.\n\t * Uses the same syntax as the CSS `margin` shorthand (e.g. `\"10px\"`, `\"10% 20px\"`).\n\t */\n\tmargin?: MarginType;\n\n\t/**\n\t * How much of the element must be visible before it is considered in view.\n\t * - `\"some\"` (default): Any part of the element is visible.\n\t * - `\"all\"`: The entire element is visible.\n\t * - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).\n\t */\n\tamount?: \"some\" | \"all\" | number;\n\n\t/**\n\t * If `true`, stop observing once the element enters the viewport for the\n\t * first time. Useful for one-shot entrance animations.\n\t * Defaults to `false`.\n\t */\n\tonce?: boolean;\n\n\t/**\n\t * The initial visibility state returned before the observer has attached.\n\t * Defaults to `false`.\n\t */\n\tinitial?: boolean;\n};\n\n/**\n * React hook that tracks whether a DOM element is visible within the viewport\n * (or a scrollable container) using the `IntersectionObserver` API.\n *\n * @param ref - A ref attached to the element to observe.\n * @param options - Options controlling the scroll root, margin, threshold,\n * initial state, and one-time detection.\n * @returns `true` if the element is currently in view, otherwise `false`.\n *\n * @example\n * // Basic usage\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref);\n *\n * return <div ref={ref}>{isInView ? \"Visible!\" : \"Hidden\"}</div>;\n *\n * @example\n * // Trigger once when the element first enters the viewport\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { once: true });\n *\n * return (\n * <div\n * ref={ref}\n * style={{ opacity: isInView ? 1 : 0, transition: \"opacity 0.5s\" }}\n * />\n * );\n *\n * @example\n * // Require 50% of the element to be visible\n * const ref = useRef<HTMLDivElement>(null);\n * const isInView = useInView(ref, { amount: 0.5 });\n */\nfunction useInView(\n\tref: RefObject<Element | null>,\n\t{ root, margin, amount, once = false, initial = false }: UseInViewOptions = {},\n): boolean {\n\tconst [isInView, setInView] = useState(initial);\n\n\tuseEffect(() => {\n\t\tif (!ref.current || (once && isInView)) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction onEnter() {\n\t\t\tsetInView(true);\n\t\t\treturn once ? undefined : () => setInView(false);\n\t\t}\n\n\t\tconst options: InViewOptions = {\n\t\t\troot: (root && root.current) || undefined,\n\t\t\tmargin,\n\t\t\tamount,\n\t\t};\n\n\t\treturn inView(ref.current, onEnter, options);\n\t\t/**\n\t\t * Intentionally omit `isInView` from deps. The effect must only re-run\n\t\t * when the observation parameters change, not when visibility changes.\n\t\t * Including `isInView` would restart the observer (disconnect + reconnect)\n\t\t * on every enter/leave event, causing wasteful churn for the common\n\t\t * `once=false` case.\n\t\t */\n\t\t// oxlint-disable-next-line react-hooks/exhaustive-deps\n\t}, [root, ref, margin, once, amount]);\n\n\treturn isInView;\n}\n\nexport { useInView };\nexport type { UseInViewOptions };\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","belowBreakpointSubscribeCache","createBelowBreakpointSubscribe","cached","mediaQuery","pending","onChange","belowBreakpointSnapshotCache","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix","useMemo","useScrollBehavior","prefersReducedMotion","usePrefersReducedMotion","useMemo","useEffect","useState","useInView","ref","root","margin","amount","once","initial","isInView","setInView","useState","useEffect","onEnter","options","inView"]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Ref } from 'react';
|
|
2
|
+
|
|
3
|
+
type PossibleRef<T> = Ref<T> | undefined;
|
|
4
|
+
/**
|
|
5
|
+
* A utility to compose multiple refs together
|
|
6
|
+
* Accepts callback refs and RefObject(s)
|
|
7
|
+
*/
|
|
8
|
+
declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
|
|
9
|
+
/**
|
|
10
|
+
* A custom hook that composes multiple refs
|
|
11
|
+
* Accepts callback refs and RefObject(s)
|
|
12
|
+
*/
|
|
13
|
+
declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): () => (node: T) => void;
|
|
14
|
+
|
|
15
|
+
type MarginValue = `${number}${"px" | "%"}`;
|
|
16
|
+
/**
|
|
17
|
+
* Margin string used to expand or contract the intersection root's bounding box.
|
|
18
|
+
* Follows the same syntax as the CSS `margin` shorthand (1–4 values).
|
|
19
|
+
*
|
|
20
|
+
* @example "10px"
|
|
21
|
+
* @example "10% 20px"
|
|
22
|
+
* @example "10px 20px 10px 20px"
|
|
23
|
+
*/
|
|
24
|
+
type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
|
|
25
|
+
/**
|
|
26
|
+
* Options for the `inView` helper.
|
|
27
|
+
*/
|
|
28
|
+
type InViewOptions = {
|
|
29
|
+
/**
|
|
30
|
+
* The scrollable container element (or `Document`) to use as the intersection root.
|
|
31
|
+
* Defaults to the browser viewport.
|
|
32
|
+
*/
|
|
33
|
+
root?: Element | Document;
|
|
34
|
+
/**
|
|
35
|
+
* Expand or contract the detected area from each side of the root's bounding box.
|
|
36
|
+
* Uses the same syntax as the CSS `margin` shorthand (e.g. `"10px"`, `"10% 20px"`).
|
|
37
|
+
*/
|
|
38
|
+
margin?: MarginType;
|
|
39
|
+
/**
|
|
40
|
+
* How much of the element must be visible before it is considered in view.
|
|
41
|
+
* - `"some"` (default): Any part of the element is visible.
|
|
42
|
+
* - `"all"`: The entire element is visible.
|
|
43
|
+
* - `number`: An intersection ratio between `0` and `1` (e.g. `0.5` for 50%).
|
|
44
|
+
*/
|
|
45
|
+
amount?: "some" | "all" | number;
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Callback invoked when an observed element leaves the viewport.
|
|
49
|
+
* Receives the `IntersectionObserverEntry` for the departing element.
|
|
50
|
+
*/
|
|
51
|
+
type ViewChangeHandler = (entry: IntersectionObserverEntry) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Observe when a DOM element enters or leaves the viewport (or a scrollable
|
|
54
|
+
* container) using the `IntersectionObserver` API.
|
|
55
|
+
*
|
|
56
|
+
* When the element enters the viewport, `onStart` is called. If `onStart`
|
|
57
|
+
* returns a function, that function is called when the element leaves the
|
|
58
|
+
* viewport. If `onStart` returns nothing, the element is unobserved after
|
|
59
|
+
* the first entry.
|
|
60
|
+
*
|
|
61
|
+
* @param element - The DOM element to observe.
|
|
62
|
+
* @param onStart - Called when the element enters the viewport. Optionally
|
|
63
|
+
* returns a cleanup function called when the element leaves.
|
|
64
|
+
* @param options - Options for the intersection root, margin, and threshold.
|
|
65
|
+
* @returns A cleanup function that disconnects the observer.
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* const stop = inView(element, (el) => {
|
|
69
|
+
* el.classList.add("visible");
|
|
70
|
+
* return () => el.classList.remove("visible");
|
|
71
|
+
* });
|
|
72
|
+
*
|
|
73
|
+
* // Later, stop observing:
|
|
74
|
+
* stop();
|
|
75
|
+
*/
|
|
76
|
+
declare function inView(element: Element, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
|
|
77
|
+
|
|
78
|
+
export { type InViewOptions as I, type MarginType as M, type ViewChangeHandler as V, composeRefs as c, inView as i, useComposedRefs as u };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
export { I as InViewOptions, M as MarginType, V as ViewChangeHandler, c as composeRefs, i as inView } from './in-view-aHeQHaUj.js';
|
|
1
2
|
export { $ as $alphanumericSortingDirection, a as $sortingDirection, b as $sortingMode, c as $timeSortingDirection, A as AlphanumericSortingDirection, S as SortingDirection, d as SortingMode, T as TimeSortingDirection, e as alphanumericSortingDirections, i as isAlphanumericSortingDirection, f as isSortingDirection, g as isSortingMode, h as isTimeSortingDirection, s as sortingDirections, j as sortingModes, t as timeSortingByDirection, k as timeSortingDirections } from './direction-DHheuUag.js';
|
|
3
|
+
import 'react';
|
|
2
4
|
|
|
3
5
|
/**
|
|
4
6
|
* Compare dates in newest-to-oldest (descending) order.
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as u}from"./chunk-COQIVAQH.js";import{a as o,b as r,c as n,d as s,e as g,f as m,g as c,h as a,i as D,j as p,k as S,l as T,m as d}from"./chunk-7MJQGBE4.js";import{a as t}from"./chunk-HKSO72E5.js";function f(e,i){return Math.sign(i.getTime()-e.getTime())}function l(e,i){return Math.sign(e.getTime()-i.getTime())}export{D as $alphanumericSortingDirection,m as $sortingDirection,n as $sortingMode,d as $timeSortingDirection,c as alphanumericSortingDirections,f as compareDatesNewestToOldest,l as compareDatesOldestToNewest,t as composeRefs,u as inView,a as isAlphanumericSortingDirection,g as isSortingDirection,r as isSortingMode,S as isTimeSortingDirection,s as sortingDirections,o as sortingModes,T as timeSortingByDirection,p as timeSortingDirections};
|
|
2
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/sorting/compare.ts"],"sourcesContent":["/**\n * Compare dates in newest-to-oldest (descending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `b` comes earlier in time than `a`; positive if `b` comes later in time than `a`; 0 if they are equivalent.\n */\nfunction compareDatesNewestToOldest(a: Date, b: Date): number {\n\treturn Math.sign(b.getTime() - a.getTime());\n}\n\n/**\n * Compare dates in oldest-to-newest (ascending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `a` comes earlier in time than `b`; positive if `a` comes later in time than `b`; 0 if they are equivalent.\n */\nfunction compareDatesOldestToNewest(a: Date, b: Date): number {\n\treturn Math.sign(a.getTime() - b.getTime());\n}\n\nexport {\n\t//,\n\tcompareDatesNewestToOldest,\n\tcompareDatesOldestToNewest,\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/utils/sorting/compare.ts"],"sourcesContent":["/**\n * Compare dates in newest-to-oldest (descending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `b` comes earlier in time than `a`; positive if `b` comes later in time than `a`; 0 if they are equivalent.\n */\nfunction compareDatesNewestToOldest(a: Date, b: Date): number {\n\treturn Math.sign(b.getTime() - a.getTime());\n}\n\n/**\n * Compare dates in oldest-to-newest (ascending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `a` comes earlier in time than `b`; positive if `a` comes later in time than `b`; 0 if they are equivalent.\n */\nfunction compareDatesOldestToNewest(a: Date, b: Date): number {\n\treturn Math.sign(a.getTime() - b.getTime());\n}\n\nexport {\n\t//,\n\tcompareDatesNewestToOldest,\n\tcompareDatesOldestToNewest,\n};\n"],"mappings":"4MAMA,SAASA,EAA2BC,EAASC,EAAiB,CAC7D,OAAO,KAAK,KAAKA,EAAE,QAAQ,EAAID,EAAE,QAAQ,CAAC,CAC3C,CAQA,SAASE,EAA2BF,EAASC,EAAiB,CAC7D,OAAO,KAAK,KAAKD,EAAE,QAAQ,EAAIC,EAAE,QAAQ,CAAC,CAC3C","names":["compareDatesNewestToOldest","a","b","compareDatesOldestToNewest"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.65.0",
|
|
4
4
|
"description": "mantle is ngrok's UI library and design system.",
|
|
5
5
|
"homepage": "https://mantle.ngrok.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -100,11 +100,6 @@
|
|
|
100
100
|
"types": "./dist/command.d.ts",
|
|
101
101
|
"import": "./dist/command.js"
|
|
102
102
|
},
|
|
103
|
-
"./compose-refs": {
|
|
104
|
-
"@ngrok/src-live-types": "./src/utils/compose-refs/index.ts",
|
|
105
|
-
"types": "./dist/compose-refs.d.ts",
|
|
106
|
-
"import": "./dist/compose-refs.js"
|
|
107
|
-
},
|
|
108
103
|
"./cx": {
|
|
109
104
|
"@ngrok/src-live-types": "./src/utils/cx/index.ts",
|
|
110
105
|
"types": "./dist/cx.d.ts",
|
|
@@ -276,10 +271,10 @@
|
|
|
276
271
|
"types": "./dist/types.d.ts",
|
|
277
272
|
"import": "./dist/types.js"
|
|
278
273
|
},
|
|
279
|
-
"./utils
|
|
280
|
-
"@ngrok/src-live-types": "./src/utils/
|
|
281
|
-
"types": "./dist/
|
|
282
|
-
"import": "./dist/
|
|
274
|
+
"./utils": {
|
|
275
|
+
"@ngrok/src-live-types": "./src/utils/index.ts",
|
|
276
|
+
"types": "./dist/utils.d.ts",
|
|
277
|
+
"import": "./dist/utils.js"
|
|
283
278
|
}
|
|
284
279
|
},
|
|
285
280
|
"dependencies": {
|
|
@@ -320,10 +315,10 @@
|
|
|
320
315
|
"@types/react-dom": "19.2.3",
|
|
321
316
|
"browserslist": "4.28.1",
|
|
322
317
|
"date-fns": "4.1.0",
|
|
323
|
-
"happy-dom": "20.
|
|
318
|
+
"happy-dom": "20.7.0",
|
|
324
319
|
"react": "19.2.4",
|
|
325
320
|
"react-dom": "19.2.4",
|
|
326
|
-
"tailwindcss": "4.2.
|
|
321
|
+
"tailwindcss": "4.2.1",
|
|
327
322
|
"tsup": "8.5.1",
|
|
328
323
|
"typescript": "5.9.3",
|
|
329
324
|
"@cfg/tsconfig": "1.0.0"
|
|
@@ -347,6 +342,6 @@
|
|
|
347
342
|
"prebuild": "pnpm run clean",
|
|
348
343
|
"test:watch": "TZ=UTC vitest watch",
|
|
349
344
|
"test": "TZ=UTC vitest run",
|
|
350
|
-
"typecheck": "
|
|
345
|
+
"typecheck": "tsgo"
|
|
351
346
|
}
|
|
352
347
|
}
|
package/dist/chunk-Q5QAMVGX.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-Q5QAMVGX.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/compose-refs.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Ref } from 'react';
|
|
2
|
-
|
|
3
|
-
type PossibleRef<T> = Ref<T> | undefined;
|
|
4
|
-
/**
|
|
5
|
-
* A utility to compose multiple refs together
|
|
6
|
-
* Accepts callback refs and RefObject(s)
|
|
7
|
-
*/
|
|
8
|
-
declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
|
|
9
|
-
/**
|
|
10
|
-
* A custom hook that composes multiple refs
|
|
11
|
-
* Accepts callback refs and RefObject(s)
|
|
12
|
-
*/
|
|
13
|
-
declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): () => (node: T) => void;
|
|
14
|
-
|
|
15
|
-
export { composeRefs, useComposedRefs };
|
package/dist/compose-refs.js
DELETED
package/dist/compose-refs.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/sorting.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{a as t,b as o,c as r,d as n,e as s,f as c,g,h as m,i as D,j as a,k as p,l as S,m as u}from"./chunk-7MJQGBE4.js";function T(e,i){return Math.sign(i.getTime()-e.getTime())}function d(e,i){return Math.sign(e.getTime()-i.getTime())}export{D as $alphanumericSortingDirection,c as $sortingDirection,r as $sortingMode,u as $timeSortingDirection,g as alphanumericSortingDirections,T as compareDatesNewestToOldest,d as compareDatesOldestToNewest,m as isAlphanumericSortingDirection,s as isSortingDirection,o as isSortingMode,p as isTimeSortingDirection,n as sortingDirections,t as sortingModes,S as timeSortingByDirection,a as timeSortingDirections};
|
|
2
|
-
//# sourceMappingURL=sorting.js.map
|