@ngrok/mantle 0.1.53 → 0.1.55
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/dist/label.js +1 -1
- package/dist/label.js.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/package.json +8 -8
package/dist/label.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"./chunk-A5H52ODC.js";import{forwardRef as p}from"react";import{jsx as b}from"react/jsx-runtime";var
|
|
1
|
+
import{a as t}from"./chunk-A5H52ODC.js";import{forwardRef as p}from"react";import{jsx as b}from"react/jsx-runtime";var a=p(({"aria-disabled":r,children:o,className:l,disabled:s,onMouseDown:d,...i},f)=>b("label",{"aria-disabled":s??r,className:t("cursor-pointer text-sm text-strong peer-disabled:cursor-default has-[:disabled]:cursor-default aria-disabled:cursor-default",l),onMouseDown:e=>{e.target.closest("button, input, select, textarea")||(d?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:f,...i,children:o}));a.displayName="Label";export{a as Label};
|
|
2
2
|
//# sourceMappingURL=label.js.map
|
package/dist/label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/label/src/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\tdisabled?: boolean;\n};\n\nconst Label = forwardRef<ElementRef<\"label\">, LabelProps>(\n\t({ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props }, ref) => (\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"cursor-pointer peer-disabled:cursor-default has-[:disabled]:cursor-default aria-disabled:cursor-default\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../packages/label/src/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\tdisabled?: boolean;\n};\n\nconst Label = forwardRef<ElementRef<\"label\">, LabelProps>(\n\t({ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props }, ref) => (\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"cursor-pointer text-sm text-strong peer-disabled:cursor-default has-[:disabled]:cursor-default aria-disabled:cursor-default\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAUzB,cAAAC,MAAA,oBAFF,IAAMC,EAAQC,EACb,CAAC,CAAE,gBAAiBC,EAAe,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,GAAGC,CAAM,EAAGC,IAC1FT,EAAC,SACA,gBAAeM,GAAYH,EAC3B,UAAWO,EACV,8HACAL,CACD,EACA,YAAcM,GAAU,CAERA,EAAM,OACV,QAAQ,iCAAiC,IAIpDJ,IAAcI,CAAK,EAGf,CAACA,EAAM,kBAAoBA,EAAM,OAAS,GAC7CA,EAAM,eAAe,EAEvB,EACA,IAAKF,EACJ,GAAGD,EAEH,SAAAJ,EACF,CAEF,EACAH,EAAM,YAAc","names":["forwardRef","jsx","Label","forwardRef","_ariaDisabled","children","className","disabled","onMouseDown","props","ref","cx","event"]}
|
package/dist/radio-group.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as y}from"./chunk-5OMWN3DC.js";import"./chunk-NREABJ6Y.js";import{a as
|
|
1
|
+
import{d as y}from"./chunk-5OMWN3DC.js";import"./chunk-NREABJ6Y.js";import{a as l}from"./chunk-A5H52ODC.js";import{Radio as u,RadioGroup as G}from"@headlessui/react";import{Slot as H}from"@radix-ui/react-slot";import f from"clsx";import{Children as N,cloneElement as L,createContext as E,forwardRef as n,isValidElement as S,useContext as b,useRef as T}from"react";import{Fragment as R,jsx as a}from"react/jsx-runtime";var m=n((e,o)=>a(G,{...e,ref:o}));m.displayName="RadioGroup";var c=E({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),v=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));v.displayName="RadioItem";var z=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("flex size-4 items-center justify-center rounded-full border border-form",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-4 ring-focus-accent",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff]"})}),M=({children:e,className:o,...r})=>{let t=b(c);return a("div",{className:l("radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5",o),...r,children:e==null?a(z,{...t}):typeof e=="function"?e(t):e})},x=n(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));x.displayName="RadioGroupList";var P=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));P.displayName="RadioListItem";var g=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));g.displayName="RadioCard";var w=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(c);return a(e?H:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})},C=n(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));C.displayName="RadioButtonGroup";var I=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));I.displayName="RadioButton";var B=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=T(null),s=b(c),p=N.only(e),k=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let h=d.target;y(h)&&window.requestAnimationFrame(()=>{h.focus()}),o?.(d)},...t,children:S(p)?L(p,{disabled:s.disabled||p.props.disabled,tabIndex:k?-1:p.props.tabIndex}):null})};export{I as RadioButton,C as RadioButtonGroup,g as RadioCard,m as RadioGroup,x as RadioGroupList,M as RadioIndicator,B as RadioInputSandbox,v as RadioItem,w as RadioItemContent,P as RadioListItem};
|
|
2
2
|
//# sourceMappingURL=radio-group.js.map
|
package/dist/radio-group.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useRef } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { isInput } from \"../../input\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}
|
|
1
|
+
{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useRef } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { isInput } from \"../../input\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus-visible:ring-4 focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "mantle is ngrok's UI library and design system.",
|
|
4
4
|
"author": "ngrok",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.1.
|
|
6
|
+
"version": "0.1.55",
|
|
7
7
|
"homepage": "https://mantle.ngrok.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"node": "^20.0.0"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@headlessui/react": "2.1.
|
|
28
|
+
"@headlessui/react": "2.1.5",
|
|
29
29
|
"@radix-ui/react-dialog": "1.1.1",
|
|
30
30
|
"@radix-ui/react-dropdown-menu": "2.1.1",
|
|
31
31
|
"@radix-ui/react-popover": "1.1.1",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@testing-library/dom": "10.4.0",
|
|
58
58
|
"@testing-library/react": "16.0.1",
|
|
59
59
|
"@testing-library/user-event": "14.5.2",
|
|
60
|
-
"@types/node": "20.16.
|
|
60
|
+
"@types/node": "20.16.5",
|
|
61
61
|
"@types/prismjs": "1.26.4",
|
|
62
|
-
"@types/react": "18.3.
|
|
62
|
+
"@types/react": "18.3.5",
|
|
63
63
|
"@types/react-dom": "18.3.0",
|
|
64
64
|
"@vitejs/plugin-react": "4.3.1",
|
|
65
65
|
"@vitest/ui": "2.0.5",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"date-fns": "3.6.0",
|
|
71
71
|
"jsdom": "25.0.0",
|
|
72
72
|
"mini-svg-data-uri": "1.4.4",
|
|
73
|
-
"postcss": "8.4.
|
|
73
|
+
"postcss": "8.4.45",
|
|
74
74
|
"prettier": "3.3.3",
|
|
75
75
|
"prettier-plugin-tailwindcss": "0.6.6",
|
|
76
76
|
"react": "18.3.1",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"tsup": "8.2.4",
|
|
82
82
|
"tsx": "4.19.0",
|
|
83
83
|
"typescript": "5.5.4",
|
|
84
|
-
"vite": "5.4.
|
|
84
|
+
"vite": "5.4.3",
|
|
85
85
|
"vite-tsconfig-paths": "5.0.1",
|
|
86
86
|
"vitest": "2.0.5",
|
|
87
87
|
"vitest-dom": "0.1.1",
|
|
@@ -89,10 +89,10 @@
|
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
91
|
"@phosphor-icons/react": "2.1.7",
|
|
92
|
-
"@types/react": "^18.3.
|
|
92
|
+
"@types/react": "^18.3.5",
|
|
93
93
|
"@types/react-dom": "^18.3.0",
|
|
94
94
|
"date-fns": "^3.6.0",
|
|
95
|
-
"postcss": "^8.4.
|
|
95
|
+
"postcss": "^8.4.45",
|
|
96
96
|
"react": "^18.3.1",
|
|
97
97
|
"react-dom": "^18.3.1",
|
|
98
98
|
"tailwindcss": "^3.4.10",
|