@zag-js/radio-group 0.10.4 → 0.11.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.
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport type { UserDefinedContext as Context } from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"radioInput\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { InputProps, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const isGroupDisabled = state.context.disabled\n const isGroupReadOnly = state.context.readOnly\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isReadOnly: props.readOnly || isGroupReadOnly,\n isInvalid: props.invalid,\n isDisabled: props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !(radioState.isReadOnly || radioState.isDisabled),\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-checked\": dataAttr(radioState.isChecked),\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\n \"data-readonly\": dataAttr(radioState.isReadOnly),\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n /**\n * The current value of the radio group\n */\n value: state.context.value,\n /**\n * Function to set the value of the radio group\n */\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, manual: true })\n },\n /**\n * Function to clear the value of the radio group\n */\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, manual: true })\n },\n /**\n * Function to focus the radio group\n */\n focus,\n /**\n * Function to blur the currently focused radio input in the radio group\n */\n blur() {\n const focusedElement = dom.getActiveElement(state.context)\n const inputEls = dom.getInputEls(state.context)\n const radioInputIsFocused = inputEls.some((el) => el === focusedElement)\n if (radioInputIsFocused) focusedElement?.blur()\n },\n /**\n * Returns the state details of a radio input\n */\n getRadioState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioInputProps(props: InputProps) {\n const inputState = getRadioState(props)\n\n const isRequired = props.required\n const trulyDisabled = inputState.isDisabled && !props.focusable\n\n return normalize.input({\n ...parts.radioInput.attrs,\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (inputState.isReadOnly || inputState.isDisabled) {\n return\n }\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: trulyDisabled,\n required: isRequired,\n defaultChecked: inputState.isChecked,\n \"data-disabled\": dataAttr(inputState.isDisabled),\n \"aria-required\": ariaAttr(isRequired),\n \"aria-invalid\": ariaAttr(inputState.isInvalid),\n readOnly: inputState.isReadOnly,\n \"data-readonly\": dataAttr(inputState.isReadOnly),\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-checked\": ariaAttr(inputState.isChecked),\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getRadioInputEl: (ctx: Ctx, value: string) => dom.getById<HTMLInputElement>(ctx, dom.getRadioInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getRadioId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => {\n return {\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }\n },\n\n getRectById: (ctx: Ctx, id: string) => {\n const tab = dom.queryById(ctx, dom.getRadioId(ctx, id))\n return dom.resolveRect(dom.getOffsetRect(tab))\n },\n\n resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) {\n return {\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }\n },\n})\n","import { createMachine } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeId: null,\n focusedId: null,\n hoveredId: null,\n indicatorRect: {},\n canIndicatorTransition: false,\n ...ctx,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\n \"setIndicatorTransition\",\n // important to set this after `setIndicatorTransition`\n \"setPreviousValue\",\n \"invokeOnChange\",\n \"syncIndicatorRect\",\n \"syncInputElements\",\n ],\n },\n\n on: {\n SET_VALUE: {\n actions: [\"setValue\"],\n },\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabled() {\n ctx.disabled = true\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n ctx.value = evt.value\n },\n setHovered(ctx, evt) {\n ctx.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = evt.value\n },\n invokeOnChange(ctx, evt) {\n ctx.onChange?.({ value: evt.value })\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,aAAa,EAAE;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,IAAM,QAAQ,QAAQ,MAAM;;;ACXnC,IAAAA,oBAAmC;AAEnC,6BAAoC;;;ACFpC,uBAAsC;AAG/B,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,eAAe,IAAI;AAAA,EAC7D,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,eAAe,IAAI;AAAA,EAC/D,YAAY,CAAC,KAAU,UAAkB,IAAI,KAAK,QAAQ,KAAK,KAAK,eAAe,IAAI,YAAY;AAAA,EACnG,iBAAiB,CAAC,KAAU,UAC1B,IAAI,KAAK,aAAa,KAAK,KAAK,eAAe,IAAI,kBAAkB;AAAA,EACvE,mBAAmB,CAAC,KAAU,UAC5B,IAAI,KAAK,eAAe,KAAK,KAAK,eAAe,IAAI,oBAAoB;AAAA,EAC3E,iBAAiB,CAAC,KAAU,UAC1B,IAAI,KAAK,aAAa,KAAK,KAAK,eAAe,IAAI,kBAAkB;AAAA,EACvE,gBAAgB,CAAC,QAAa,IAAI,KAAK,aAAa,QAAQ,IAAI;AAAA,EAEhE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,iBAAiB,CAAC,KAAU,UAAkB,IAAI,QAA0B,KAAK,IAAI,gBAAgB,KAAK,KAAK,CAAC;AAAA,EAChH,gBAAgB,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,eAAe,GAAG,CAAC;AAAA,EAEtE,wBAAwB,CAAC,QAAa,IAAI,UAAU,GAAG,GAAG,cAAgC,sBAAsB;AAAA,EAChH,kCAAkC,CAAC,QACjC,IAAI,UAAU,GAAG,GAAG,cAAgC,8BAA8B;AAAA,EAEpF,aAAa,CAAC,QAAa;AACzB,UAAM,UAAU,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC;AAC7C,UAAM,WAAW,mCAAmC;AACpD,eAAO,2BAA2B,IAAI,UAAU,GAAG,GAAG,QAAQ;AAAA,EAChE;AAAA,EAEA,kBAAkB,CAAC,QAAa;AAC9B,QAAI,CAAC,IAAI;AAAO;AAChB,WAAO,IAAI,QAAQ,KAAK,IAAI,WAAW,KAAK,IAAI,KAAK,CAAC;AAAA,EACxD;AAAA,EAEA,eAAe,CAAC,OAAgC;AAC9C,WAAO;AAAA,MACL,MAAM,IAAI,cAAc;AAAA,MACxB,KAAK,IAAI,aAAa;AAAA,MACtB,OAAO,IAAI,eAAe;AAAA,MAC1B,QAAQ,IAAI,gBAAgB;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,aAAa,CAAC,KAAU,OAAe;AACrC,UAAM,MAAM,IAAI,UAAU,KAAK,IAAI,WAAW,KAAK,EAAE,CAAC;AACtD,WAAO,IAAI,YAAY,IAAI,cAAc,GAAG,CAAC;AAAA,EAC/C;AAAA,EAEA,YAAY,MAA2D;AACrE,WAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,KAAK;AAAA,MAChB,MAAM,GAAG,KAAK;AAAA,MACd,KAAK,GAAG,KAAK;AAAA,IACf;AAAA,EACF;AACF,CAAC;;;ADjDM,SAAS,QAA6B,OAAc,MAAY,WAA8B;AACnG,QAAM,kBAAkB,MAAM,QAAQ;AACtC,QAAM,kBAAkB,MAAM,QAAQ;AAEtC,WAAS,cAAoC,OAAU;AACrD,UAAM,aAAa;AAAA,MACjB,YAAY,MAAM,YAAY;AAAA,MAC9B,WAAW,MAAM;AAAA,MACjB,YAAY,MAAM,YAAY;AAAA,MAC9B,WAAW,MAAM,QAAQ,UAAU,MAAM;AAAA,MACzC,WAAW,MAAM,QAAQ,cAAc,MAAM;AAAA,MAC7C,WAAW,MAAM,QAAQ,cAAc,MAAM;AAAA,MAC7C,UAAU,MAAM,QAAQ,aAAa,MAAM;AAAA,IAC7C;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,eAAe,EAAE,WAAW,cAAc,WAAW;AAAA,IACvD;AAAA,EACF;AAEA,WAAS,kBAAwC,OAAU;AACzD,UAAM,aAAa,cAAc,KAAK;AACtC,WAAO;AAAA,MACL,kBAAc,4BAAS,WAAW,SAAS;AAAA,MAC3C,qBAAiB,4BAAS,WAAW,UAAU;AAAA,MAC/C,oBAAgB,4BAAS,WAAW,SAAS;AAAA,MAC7C,kBAAc,4BAAS,WAAW,SAAS;AAAA,MAC3C,oBAAgB,4BAAS,WAAW,SAAS;AAAA,MAC7C,qBAAiB,4BAAS,WAAW,UAAU;AAAA,IACjD;AAAA,EACF;AAEA,QAAM,QAAQ,MAAM;AAClB,UAAM,8BAA8B,IAAI,iCAAiC,MAAM,OAAO;AAEtF,QAAI,6BAA6B;AAC/B,kCAA4B,MAAM;AAClC;AAAA,IACF;AAEA,UAAM,oBAAoB,IAAI,uBAAuB,MAAM,OAAO;AAClE,uBAAmB,MAAM;AAAA,EAC3B;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIrB,SAAS,OAAe;AACtB,WAAK,EAAE,MAAM,aAAa,OAAO,QAAQ,KAAK,CAAC;AAAA,IACjD;AAAA;AAAA;AAAA;AAAA,IAIA,aAAa;AACX,WAAK,EAAE,MAAM,aAAa,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO;AACL,YAAM,iBAAiB,IAAI,iBAAiB,MAAM,OAAO;AACzD,YAAM,WAAW,IAAI,YAAY,MAAM,OAAO;AAC9C,YAAM,sBAAsB,SAAS,KAAK,CAAC,OAAO,OAAO,cAAc;AACvE,UAAI;AAAqB,wBAAgB,KAAK;AAAA,IAChD;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,GAAG,MAAM,KAAK;AAAA,MACd,MAAM;AAAA,MACN,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,mBAAmB,IAAI,WAAW,MAAM,OAAO;AAAA,MAC/C,oBAAoB,MAAM,QAAQ;AAAA,MAClC,oBAAoB,MAAM,QAAQ;AAAA,MAClC,KAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,IAED,YAAY,UAAU,QAAQ;AAAA,MAC5B,GAAG,MAAM,MAAM;AAAA,MACf,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAChC,SAAS;AAAA,IACX,CAAC;AAAA,IAED,cAAc,OAAmB;AAC/B,YAAM,YAAY,cAAc,KAAK;AAErC,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,MAAM;AAAA,QACf,IAAI,IAAI,WAAW,MAAM,SAAS,MAAM,KAAK;AAAA,QAC7C,SAAS,IAAI,gBAAgB,MAAM,SAAS,MAAM,KAAK;AAAA,QACvD,GAAG,kBAAkB,KAAK;AAAA,QAE1B,gBAAgB;AACd,cAAI,CAAC,UAAU;AAAe;AAC9B,eAAK,EAAE,MAAM,eAAe,OAAO,MAAM,OAAO,SAAS,KAAK,CAAC;AAAA,QACjE;AAAA,QACA,iBAAiB;AACf,cAAI,CAAC,UAAU;AAAe;AAC9B,eAAK,EAAE,MAAM,eAAe,OAAO,KAAK,CAAC;AAAA,QAC3C;AAAA,QACA,cAAc,OAAO;AACnB,cAAI,CAAC,UAAU;AAAe;AAG9B,cAAI,UAAU,aAAa,MAAM,gBAAgB,SAAS;AACxD,kBAAM,eAAe;AAAA,UACvB;AACA,eAAK,EAAE,MAAM,cAAc,OAAO,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,QAC/D;AAAA,QACA,cAAc;AACZ,cAAI,CAAC,UAAU;AAAe;AAC9B,eAAK,EAAE,MAAM,cAAc,OAAO,KAAK,CAAC;AAAA,QAC1C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,mBAAmB,OAAmB;AACpC,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,WAAW;AAAA,QACpB,IAAI,IAAI,gBAAgB,MAAM,SAAS,MAAM,KAAK;AAAA,QAClD,GAAG,kBAAkB,KAAK;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IAEA,qBAAqB,OAAmB;AACtC,YAAM,eAAe,cAAc,KAAK;AAExC,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,aAAa;AAAA,QACtB,IAAI,IAAI,kBAAkB,MAAM,SAAS,MAAM,KAAK;AAAA,QACpD,mBAAe,4BAAS,aAAa,QAAQ;AAAA,QAC7C,eAAe;AAAA,QACf,GAAG,kBAAkB,KAAK;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IAEA,mBAAmB,OAAmB;AACpC,YAAM,aAAa,cAAc,KAAK;AAEtC,YAAM,aAAa,MAAM;AACzB,YAAM,gBAAgB,WAAW,cAAc,CAAC,MAAM;AAEtD,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,WAAW;AAAA,QACpB,gBAAgB,IAAI,UAAU,MAAM,OAAO;AAAA,QAC3C,IAAI,IAAI,gBAAgB,MAAM,SAAS,MAAM,KAAK;AAAA,QAClD,MAAM;AAAA,QACN,MAAM,MAAM,QAAQ,QAAQ,MAAM,QAAQ;AAAA,QAC1C,MAAM,MAAM,QAAQ;AAAA,QACpB,OAAO,MAAM;AAAA,QACb,SAAS,OAAO;AACd,cAAI,WAAW,cAAc,WAAW,YAAY;AAClD;AAAA,UACF;AACA,cAAI,MAAM,OAAO,SAAS;AACxB,iBAAK,EAAE,MAAM,aAAa,OAAO,MAAM,MAAM,CAAC;AAAA,UAChD;AAAA,QACF;AAAA,QACA,SAAS;AACP,eAAK,EAAE,MAAM,eAAe,OAAO,KAAK,CAAC;AAAA,QAC3C;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,eAAe,OAAO,MAAM,OAAO,SAAS,KAAK,CAAC;AAAA,QACjE;AAAA,QACA,UAAU,OAAO;AACf,cAAI,MAAM,QAAQ,KAAK;AACrB,iBAAK,EAAE,MAAM,cAAc,OAAO,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,UAC/D;AAAA,QACF;AAAA,QACA,QAAQ,OAAO;AACb,cAAI,MAAM,QAAQ,KAAK;AACrB,iBAAK,EAAE,MAAM,cAAc,OAAO,KAAK,CAAC;AAAA,UAC1C;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,gBAAgB,WAAW;AAAA,QAC3B,qBAAiB,4BAAS,WAAW,UAAU;AAAA,QAC/C,qBAAiB,4BAAS,UAAU;AAAA,QACpC,oBAAgB,4BAAS,WAAW,SAAS;AAAA,QAC7C,UAAU,WAAW;AAAA,QACrB,qBAAiB,4BAAS,WAAW,UAAU;AAAA,QAC/C,qBAAiB,4BAAS,aAAa;AAAA,QACvC,oBAAgB,4BAAS,WAAW,SAAS;AAAA,QAC7C,OAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB,UAAU,QAAQ;AAAA,MAChC,IAAI,IAAI,eAAe,MAAM,OAAO;AAAA,MACpC,GAAG,MAAM,UAAU;AAAA,MACnB,oBAAoB,MAAM,QAAQ;AAAA,MAClC,OAAO;AAAA,QACL,yBAAyB;AAAA,QACzB,yBAAyB;AAAA,QACzB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,oBAAoB;AAAA,QACpB,oBAAoB,MAAM,QAAQ,yBAAyB,+BAA+B;AAAA,QAC1F,0BAA0B;AAAA,QAC1B,GAAG,MAAM,QAAQ;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH;AACF;;;AE/NA,kBAA8B;AAC9B,IAAAC,oBAAyB;AACzB,0BAAiC;AACjC,wBAAiC;AACjC,mBAAkC;AAI3B,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,sBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAe,CAAC;AAAA,QAChB,wBAAwB;AAAA,QACxB,GAAG;AAAA,MACL;AAAA,MAEA,OAAO,CAAC,mBAAmB;AAAA,MAE3B,MAAM,CAAC,iBAAiB;AAAA,MAExB,YAAY,CAAC,uBAAuB;AAAA,MAEpC,OAAO;AAAA,QACL,OAAO;AAAA,UACL;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MAEA,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS,CAAC,UAAU;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,UACX,SAAS;AAAA,QACX;AAAA,QACA,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,aAAa;AAAA,UACX,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,MAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,IAEA;AAAA,MACE,YAAY;AAAA,QACV,sBAAsBC,MAAK,MAAM,EAAE,MAAM,eAAe,GAAG;AACzD,qBAAO,oCAAiB,IAAI,UAAUA,IAAG,GAAG;AAAA,YAC1C,qBAAqB;AACnB,cAAAA,KAAI,WAAW;AAAA,YACjB;AAAA,YACA,cAAc;AACZ,mBAAK,EAAE,MAAM,aAAa,OAAO,eAAe,MAAM,CAAC;AAAA,YACzD;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MAEA,SAAS;AAAA,QACP,SAASA,MAAK,KAAK;AACjB,UAAAA,KAAI,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA,WAAWA,MAAK,KAAK;AACnB,UAAAA,KAAI,YAAY,IAAI;AAAA,QACtB;AAAA,QACA,UAAUA,MAAK,KAAK;AAClB,UAAAA,KAAI,WAAW,IAAI;AAAA,QACrB;AAAA,QACA,WAAWA,MAAK,KAAK;AACnB,UAAAA,KAAI,YAAY,IAAI;AAAA,QACtB;AAAA,QACA,eAAeA,MAAK,KAAK;AACvB,UAAAA,KAAI,WAAW,EAAE,OAAO,IAAI,MAAM,CAAC;AAAA,QACrC;AAAA,QACA,kBAAkBA,MAAK;AACrB,gBAAM,SAAS,IAAI,YAAYA,IAAG;AAClC,iBAAO,QAAQ,CAAC,UAAU;AACxB,kBAAM,UAAU,MAAM,UAAUA,KAAI;AAAA,UACtC,CAAC;AAAA,QACH;AAAA,QACA,uBAAuBA,MAAK;AAC1B,UAAAA,KAAI,6BAAyB,uBAASA,KAAI,KAAK;AAAA,QACjD;AAAA,QACA,gBAAgBA,MAAK;AACnB,UAAAA,KAAI,mBAAmB;AAAA,QACzB;AAAA,QACA,kBAAkBA,MAAK;AACrB,UAAAA,KAAI,mBAAmB;AAEvB,cAAI,CAAC,IAAI,eAAeA,IAAG;AAAG;AAE9B,gBAAM,QAAQA,KAAI;AAElB,cAAI,SAAS,MAAM;AACjB,YAAAA,KAAI,gBAAgB,CAAC;AACrB;AAAA,UACF;AAEA,gBAAM,UAAU,IAAI,iBAAiBA,IAAG;AACxC,cAAI,CAAC;AAAS;AAEd,UAAAA,KAAI,uBAAmB,sCAAiB,SAAS;AAAA,YAC/C,QAAQ,IAAI;AACV,qBAAO,IAAI,cAAc,EAAE;AAAA,YAC7B;AAAA,YACA,SAAS,MAAM;AACb,cAAAA,KAAI,gBAAgB,IAAI,YAAY,IAAI;AACxC,8CAAS,MAAM;AACb,gBAAAA,KAAI,yBAAyB;AAAA,cAC/B,CAAC;AAAA,YACH;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":["import_dom_query","import_dom_query","ctx"]}
package/dist/index.mjs CHANGED
@@ -1,3 +1,395 @@
1
- export { anatomy } from './radio-group.anatomy.mjs';
2
- export { connect } from './radio-group.connect.mjs';
3
- export { machine } from './radio-group.machine.mjs';
1
+ // src/radio-group.anatomy.ts
2
+ import { createAnatomy } from "@zag-js/anatomy";
3
+ var anatomy = createAnatomy("radio-group").parts(
4
+ "root",
5
+ "label",
6
+ "radio",
7
+ "radioLabel",
8
+ "radioControl",
9
+ "radioInput",
10
+ "indicator"
11
+ );
12
+ var parts = anatomy.build();
13
+
14
+ // src/radio-group.connect.ts
15
+ import { ariaAttr, dataAttr } from "@zag-js/dom-query";
16
+ import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
17
+
18
+ // src/radio-group.dom.ts
19
+ import { createScope, queryAll } from "@zag-js/dom-query";
20
+ var dom = createScope({
21
+ getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
22
+ getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
23
+ getRadioId: (ctx, value) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
24
+ getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
25
+ getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
26
+ getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
27
+ getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
28
+ getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
29
+ getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
30
+ getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
31
+ getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
32
+ getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
33
+ getInputEls: (ctx) => {
34
+ const ownerId = CSS.escape(dom.getRootId(ctx));
35
+ const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
36
+ return queryAll(dom.getRootEl(ctx), selector);
37
+ },
38
+ getActiveRadioEl: (ctx) => {
39
+ if (!ctx.value)
40
+ return;
41
+ return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
42
+ },
43
+ getOffsetRect: (el) => {
44
+ return {
45
+ left: el?.offsetLeft ?? 0,
46
+ top: el?.offsetTop ?? 0,
47
+ width: el?.offsetWidth ?? 0,
48
+ height: el?.offsetHeight ?? 0
49
+ };
50
+ },
51
+ getRectById: (ctx, id) => {
52
+ const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
53
+ return dom.resolveRect(dom.getOffsetRect(tab));
54
+ },
55
+ resolveRect(rect) {
56
+ return {
57
+ width: `${rect.width}px`,
58
+ height: `${rect.height}px`,
59
+ left: `${rect.left}px`,
60
+ top: `${rect.top}px`
61
+ };
62
+ }
63
+ });
64
+
65
+ // src/radio-group.connect.ts
66
+ function connect(state, send, normalize) {
67
+ const isGroupDisabled = state.context.disabled;
68
+ const isGroupReadOnly = state.context.readOnly;
69
+ function getRadioState(props) {
70
+ const radioState = {
71
+ isReadOnly: props.readOnly || isGroupReadOnly,
72
+ isInvalid: props.invalid,
73
+ isDisabled: props.disabled || isGroupDisabled,
74
+ isChecked: state.context.value === props.value,
75
+ isFocused: state.context.focusedId === props.value,
76
+ isHovered: state.context.hoveredId === props.value,
77
+ isActive: state.context.activeId === props.value
78
+ };
79
+ return {
80
+ ...radioState,
81
+ isInteractive: !(radioState.isReadOnly || radioState.isDisabled)
82
+ };
83
+ }
84
+ function getRadioDataAttrs(props) {
85
+ const radioState = getRadioState(props);
86
+ return {
87
+ "data-focus": dataAttr(radioState.isFocused),
88
+ "data-disabled": dataAttr(radioState.isDisabled),
89
+ "data-checked": dataAttr(radioState.isChecked),
90
+ "data-hover": dataAttr(radioState.isHovered),
91
+ "data-invalid": dataAttr(radioState.isInvalid),
92
+ "data-readonly": dataAttr(radioState.isReadOnly)
93
+ };
94
+ }
95
+ const focus = () => {
96
+ const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
97
+ if (firstEnabledAndCheckedInput) {
98
+ firstEnabledAndCheckedInput.focus();
99
+ return;
100
+ }
101
+ const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
102
+ firstEnabledInput?.focus();
103
+ };
104
+ return {
105
+ /**
106
+ * The current value of the radio group
107
+ */
108
+ value: state.context.value,
109
+ /**
110
+ * Function to set the value of the radio group
111
+ */
112
+ setValue(value) {
113
+ send({ type: "SET_VALUE", value, manual: true });
114
+ },
115
+ /**
116
+ * Function to clear the value of the radio group
117
+ */
118
+ clearValue() {
119
+ send({ type: "SET_VALUE", value: null, manual: true });
120
+ },
121
+ /**
122
+ * Function to focus the radio group
123
+ */
124
+ focus,
125
+ /**
126
+ * Function to blur the currently focused radio input in the radio group
127
+ */
128
+ blur() {
129
+ const focusedElement = dom.getActiveElement(state.context);
130
+ const inputEls = dom.getInputEls(state.context);
131
+ const radioInputIsFocused = inputEls.some((el) => el === focusedElement);
132
+ if (radioInputIsFocused)
133
+ focusedElement?.blur();
134
+ },
135
+ /**
136
+ * Returns the state details of a radio input
137
+ */
138
+ getRadioState,
139
+ rootProps: normalize.element({
140
+ ...parts.root.attrs,
141
+ role: "radiogroup",
142
+ id: dom.getRootId(state.context),
143
+ "aria-labelledby": dom.getLabelId(state.context),
144
+ "data-orientation": state.context.orientation,
145
+ "aria-orientation": state.context.orientation,
146
+ dir: state.context.dir
147
+ }),
148
+ labelProps: normalize.element({
149
+ ...parts.label.attrs,
150
+ id: dom.getLabelId(state.context),
151
+ onClick: focus
152
+ }),
153
+ getRadioProps(props) {
154
+ const rootState = getRadioState(props);
155
+ return normalize.label({
156
+ ...parts.radio.attrs,
157
+ id: dom.getRadioId(state.context, props.value),
158
+ htmlFor: dom.getRadioInputId(state.context, props.value),
159
+ ...getRadioDataAttrs(props),
160
+ onPointerMove() {
161
+ if (!rootState.isInteractive)
162
+ return;
163
+ send({ type: "SET_HOVERED", value: props.value, hovered: true });
164
+ },
165
+ onPointerLeave() {
166
+ if (!rootState.isInteractive)
167
+ return;
168
+ send({ type: "SET_HOVERED", value: null });
169
+ },
170
+ onPointerDown(event) {
171
+ if (!rootState.isInteractive)
172
+ return;
173
+ if (rootState.isFocused && event.pointerType === "mouse") {
174
+ event.preventDefault();
175
+ }
176
+ send({ type: "SET_ACTIVE", value: props.value, active: true });
177
+ },
178
+ onPointerUp() {
179
+ if (!rootState.isInteractive)
180
+ return;
181
+ send({ type: "SET_ACTIVE", value: null });
182
+ }
183
+ });
184
+ },
185
+ getRadioLabelProps(props) {
186
+ return normalize.element({
187
+ ...parts.radioLabel.attrs,
188
+ id: dom.getRadioLabelId(state.context, props.value),
189
+ ...getRadioDataAttrs(props)
190
+ });
191
+ },
192
+ getRadioControlProps(props) {
193
+ const controlState = getRadioState(props);
194
+ return normalize.element({
195
+ ...parts.radioControl.attrs,
196
+ id: dom.getRadioControlId(state.context, props.value),
197
+ "data-active": dataAttr(controlState.isActive),
198
+ "aria-hidden": true,
199
+ ...getRadioDataAttrs(props)
200
+ });
201
+ },
202
+ getRadioInputProps(props) {
203
+ const inputState = getRadioState(props);
204
+ const isRequired = props.required;
205
+ const trulyDisabled = inputState.isDisabled && !props.focusable;
206
+ return normalize.input({
207
+ ...parts.radioInput.attrs,
208
+ "data-ownedby": dom.getRootId(state.context),
209
+ id: dom.getRadioInputId(state.context, props.value),
210
+ type: "radio",
211
+ name: state.context.name || state.context.id,
212
+ form: state.context.form,
213
+ value: props.value,
214
+ onChange(event) {
215
+ if (inputState.isReadOnly || inputState.isDisabled) {
216
+ return;
217
+ }
218
+ if (event.target.checked) {
219
+ send({ type: "SET_VALUE", value: props.value });
220
+ }
221
+ },
222
+ onBlur() {
223
+ send({ type: "SET_FOCUSED", value: null });
224
+ },
225
+ onFocus() {
226
+ send({ type: "SET_FOCUSED", value: props.value, focused: true });
227
+ },
228
+ onKeyDown(event) {
229
+ if (event.key === " ") {
230
+ send({ type: "SET_ACTIVE", value: props.value, active: true });
231
+ }
232
+ },
233
+ onKeyUp(event) {
234
+ if (event.key === " ") {
235
+ send({ type: "SET_ACTIVE", value: null });
236
+ }
237
+ },
238
+ disabled: trulyDisabled,
239
+ required: isRequired,
240
+ defaultChecked: inputState.isChecked,
241
+ "data-disabled": dataAttr(inputState.isDisabled),
242
+ "aria-required": ariaAttr(isRequired),
243
+ "aria-invalid": ariaAttr(inputState.isInvalid),
244
+ readOnly: inputState.isReadOnly,
245
+ "data-readonly": dataAttr(inputState.isReadOnly),
246
+ "aria-disabled": ariaAttr(trulyDisabled),
247
+ "aria-checked": ariaAttr(inputState.isChecked),
248
+ style: visuallyHiddenStyle
249
+ });
250
+ },
251
+ indicatorProps: normalize.element({
252
+ id: dom.getIndicatorId(state.context),
253
+ ...parts.indicator.attrs,
254
+ "data-orientation": state.context.orientation,
255
+ style: {
256
+ "--transition-duration": "150ms",
257
+ "--transition-property": "left, top, width, height",
258
+ position: "absolute",
259
+ willChange: "var(--transition-property)",
260
+ transitionProperty: "var(--transition-property)",
261
+ transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
262
+ transitionTimingFunction: "var(--transition-timing-function)",
263
+ ...state.context.indicatorRect
264
+ }
265
+ })
266
+ };
267
+ }
268
+
269
+ // src/radio-group.machine.ts
270
+ import { createMachine } from "@zag-js/core";
271
+ import { nextTick } from "@zag-js/dom-query";
272
+ import { trackElementRect } from "@zag-js/element-rect";
273
+ import { trackFormControl } from "@zag-js/form-utils";
274
+ import { compact, isString } from "@zag-js/utils";
275
+ function machine(userContext) {
276
+ const ctx = compact(userContext);
277
+ return createMachine(
278
+ {
279
+ id: "radio",
280
+ initial: "idle",
281
+ context: {
282
+ value: null,
283
+ activeId: null,
284
+ focusedId: null,
285
+ hoveredId: null,
286
+ indicatorRect: {},
287
+ canIndicatorTransition: false,
288
+ ...ctx
289
+ },
290
+ entry: ["syncIndicatorRect"],
291
+ exit: ["cleanupObserver"],
292
+ activities: ["trackFormControlState"],
293
+ watch: {
294
+ value: [
295
+ "setIndicatorTransition",
296
+ // important to set this after `setIndicatorTransition`
297
+ "setPreviousValue",
298
+ "invokeOnChange",
299
+ "syncIndicatorRect",
300
+ "syncInputElements"
301
+ ]
302
+ },
303
+ on: {
304
+ SET_VALUE: {
305
+ actions: ["setValue"]
306
+ },
307
+ SET_HOVERED: {
308
+ actions: "setHovered"
309
+ },
310
+ SET_ACTIVE: {
311
+ actions: "setActive"
312
+ },
313
+ SET_FOCUSED: {
314
+ actions: "setFocused"
315
+ }
316
+ },
317
+ states: {
318
+ idle: {}
319
+ }
320
+ },
321
+ {
322
+ activities: {
323
+ trackFormControlState(ctx2, _evt, { send, initialContext }) {
324
+ return trackFormControl(dom.getRootEl(ctx2), {
325
+ onFieldsetDisabled() {
326
+ ctx2.disabled = true;
327
+ },
328
+ onFormReset() {
329
+ send({ type: "SET_VALUE", value: initialContext.value });
330
+ }
331
+ });
332
+ }
333
+ },
334
+ actions: {
335
+ setValue(ctx2, evt) {
336
+ ctx2.value = evt.value;
337
+ },
338
+ setHovered(ctx2, evt) {
339
+ ctx2.hoveredId = evt.value;
340
+ },
341
+ setActive(ctx2, evt) {
342
+ ctx2.activeId = evt.value;
343
+ },
344
+ setFocused(ctx2, evt) {
345
+ ctx2.focusedId = evt.value;
346
+ },
347
+ invokeOnChange(ctx2, evt) {
348
+ ctx2.onChange?.({ value: evt.value });
349
+ },
350
+ syncInputElements(ctx2) {
351
+ const inputs = dom.getInputEls(ctx2);
352
+ inputs.forEach((input) => {
353
+ input.checked = input.value === ctx2.value;
354
+ });
355
+ },
356
+ setIndicatorTransition(ctx2) {
357
+ ctx2.canIndicatorTransition = isString(ctx2.value);
358
+ },
359
+ cleanupObserver(ctx2) {
360
+ ctx2.indicatorCleanup?.();
361
+ },
362
+ syncIndicatorRect(ctx2) {
363
+ ctx2.indicatorCleanup?.();
364
+ if (!dom.getIndicatorEl(ctx2))
365
+ return;
366
+ const value = ctx2.value;
367
+ if (value == null) {
368
+ ctx2.indicatorRect = {};
369
+ return;
370
+ }
371
+ const radioEl = dom.getActiveRadioEl(ctx2);
372
+ if (!radioEl)
373
+ return;
374
+ ctx2.indicatorCleanup = trackElementRect(radioEl, {
375
+ getRect(el) {
376
+ return dom.getOffsetRect(el);
377
+ },
378
+ onChange(rect) {
379
+ ctx2.indicatorRect = dom.resolveRect(rect);
380
+ nextTick(() => {
381
+ ctx2.canIndicatorTransition = false;
382
+ });
383
+ }
384
+ });
385
+ }
386
+ }
387
+ }
388
+ );
389
+ }
390
+ export {
391
+ anatomy,
392
+ connect,
393
+ machine
394
+ };
395
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"radio\",\n \"radioLabel\",\n \"radioControl\",\n \"radioInput\",\n \"indicator\",\n)\nexport const parts = anatomy.build()\n","import { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { InputProps, RadioProps, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const isGroupDisabled = state.context.disabled\n const isGroupReadOnly = state.context.readOnly\n\n function getRadioState<T extends RadioProps>(props: T) {\n const radioState = {\n isReadOnly: props.readOnly || isGroupReadOnly,\n isInvalid: props.invalid,\n isDisabled: props.disabled || isGroupDisabled,\n isChecked: state.context.value === props.value,\n isFocused: state.context.focusedId === props.value,\n isHovered: state.context.hoveredId === props.value,\n isActive: state.context.activeId === props.value,\n }\n return {\n ...radioState,\n isInteractive: !(radioState.isReadOnly || radioState.isDisabled),\n }\n }\n\n function getRadioDataAttrs<T extends RadioProps>(props: T) {\n const radioState = getRadioState(props)\n return {\n \"data-focus\": dataAttr(radioState.isFocused),\n \"data-disabled\": dataAttr(radioState.isDisabled),\n \"data-checked\": dataAttr(radioState.isChecked),\n \"data-hover\": dataAttr(radioState.isHovered),\n \"data-invalid\": dataAttr(radioState.isInvalid),\n \"data-readonly\": dataAttr(radioState.isReadOnly),\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n /**\n * The current value of the radio group\n */\n value: state.context.value,\n /**\n * Function to set the value of the radio group\n */\n setValue(value: string) {\n send({ type: \"SET_VALUE\", value, manual: true })\n },\n /**\n * Function to clear the value of the radio group\n */\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, manual: true })\n },\n /**\n * Function to focus the radio group\n */\n focus,\n /**\n * Function to blur the currently focused radio input in the radio group\n */\n blur() {\n const focusedElement = dom.getActiveElement(state.context)\n const inputEls = dom.getInputEls(state.context)\n const radioInputIsFocused = inputEls.some((el) => el === focusedElement)\n if (radioInputIsFocused) focusedElement?.blur()\n },\n /**\n * Returns the state details of a radio input\n */\n getRadioState,\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n }),\n\n labelProps: normalize.element({\n ...parts.label.attrs,\n id: dom.getLabelId(state.context),\n onClick: focus,\n }),\n\n getRadioProps(props: RadioProps) {\n const rootState = getRadioState(props)\n\n return normalize.label({\n ...parts.radio.attrs,\n id: dom.getRadioId(state.context, props.value),\n htmlFor: dom.getRadioInputId(state.context, props.value),\n ...getRadioDataAttrs(props),\n\n onPointerMove() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (!rootState.isInteractive) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (rootState.isFocused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (!rootState.isInteractive) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getRadioLabelProps(props: RadioProps) {\n return normalize.element({\n ...parts.radioLabel.attrs,\n id: dom.getRadioLabelId(state.context, props.value),\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioControlProps(props: RadioProps) {\n const controlState = getRadioState(props)\n\n return normalize.element({\n ...parts.radioControl.attrs,\n id: dom.getRadioControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.isActive),\n \"aria-hidden\": true,\n ...getRadioDataAttrs(props),\n })\n },\n\n getRadioInputProps(props: InputProps) {\n const inputState = getRadioState(props)\n\n const isRequired = props.required\n const trulyDisabled = inputState.isDisabled && !props.focusable\n\n return normalize.input({\n ...parts.radioInput.attrs,\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getRadioInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onChange(event) {\n if (inputState.isReadOnly || inputState.isDisabled) {\n return\n }\n if (event.target.checked) {\n send({ type: \"SET_VALUE\", value: props.value })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null })\n },\n onFocus() {\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true })\n },\n onKeyDown(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: trulyDisabled,\n required: isRequired,\n defaultChecked: inputState.isChecked,\n \"data-disabled\": dataAttr(inputState.isDisabled),\n \"aria-required\": ariaAttr(isRequired),\n \"aria-invalid\": ariaAttr(inputState.isInvalid),\n readOnly: inputState.isReadOnly,\n \"data-readonly\": dataAttr(inputState.isReadOnly),\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-checked\": ariaAttr(inputState.isChecked),\n style: visuallyHiddenStyle,\n })\n },\n\n indicatorProps: normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-duration\": \"150ms\",\n \"--transition-property\": \"left, top, width, height\",\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n ...state.context.indicatorRect,\n },\n }),\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getRadioId: (ctx: Ctx, value: string) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getRadioInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getRadioControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getRadioLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getRadioInputEl: (ctx: Ctx, value: string) => dom.getById<HTMLInputElement>(ctx, dom.getRadioInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getRadioId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => {\n return {\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }\n },\n\n getRectById: (ctx: Ctx, id: string) => {\n const tab = dom.queryById(ctx, dom.getRadioId(ctx, id))\n return dom.resolveRect(dom.getOffsetRect(tab))\n },\n\n resolveRect(rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) {\n return {\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }\n },\n})\n","import { createMachine } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeId: null,\n focusedId: null,\n hoveredId: null,\n indicatorRect: {},\n canIndicatorTransition: false,\n ...ctx,\n },\n\n entry: [\"syncIndicatorRect\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\"],\n\n watch: {\n value: [\n \"setIndicatorTransition\",\n // important to set this after `setIndicatorTransition`\n \"setPreviousValue\",\n \"invokeOnChange\",\n \"syncIndicatorRect\",\n \"syncInputElements\",\n ],\n },\n\n on: {\n SET_VALUE: {\n actions: [\"setValue\"],\n },\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabled() {\n ctx.disabled = true\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n ctx.value = evt.value\n },\n setHovered(ctx, evt) {\n ctx.hoveredId = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeId = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedId = evt.value\n },\n invokeOnChange(ctx, evt) {\n ctx.onChange?.({ value: evt.value })\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n if (value == null) {\n ctx.indicatorRect = {}\n return\n }\n\n const radioEl = dom.getActiveRadioEl(ctx)\n if (!radioEl) return\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["ctx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/radio-group",
3
- "version": "0.10.4",
3
+ "version": "0.11.0",
4
4
  "description": "Core logic for the radio group widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -28,14 +28,14 @@
28
28
  "url": "https://github.com/chakra-ui/zag/issues"
29
29
  },
30
30
  "dependencies": {
31
- "@zag-js/anatomy": "0.10.4",
32
- "@zag-js/dom-query": "0.10.4",
33
- "@zag-js/element-rect": "0.10.4",
34
- "@zag-js/form-utils": "0.10.4",
35
- "@zag-js/visually-hidden": "0.10.4",
36
- "@zag-js/utils": "0.10.4",
37
- "@zag-js/core": "0.10.4",
38
- "@zag-js/types": "0.10.4"
31
+ "@zag-js/anatomy": "0.11.0",
32
+ "@zag-js/dom-query": "0.11.0",
33
+ "@zag-js/element-rect": "0.11.0",
34
+ "@zag-js/form-utils": "0.11.0",
35
+ "@zag-js/visually-hidden": "0.11.0",
36
+ "@zag-js/utils": "0.11.0",
37
+ "@zag-js/core": "0.11.0",
38
+ "@zag-js/types": "0.11.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "clean-package": "2.2.0"
@@ -53,7 +53,7 @@
53
53
  "./package.json": "./package.json"
54
54
  },
55
55
  "scripts": {
56
- "build": "vite build -c ../../../vite.config.ts",
56
+ "build": "tsup",
57
57
  "lint": "eslint src --ext .ts,.tsx",
58
58
  "typecheck": "tsc --noEmit"
59
59
  }
@@ -1,3 +0,0 @@
1
- import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
2
- export declare const anatomy: AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput" | "indicator">;
3
- export declare const parts: Record<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput" | "indicator", AnatomyPart>;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const anatomy$1 = require('@zag-js/anatomy');
6
-
7
- const anatomy = anatomy$1.createAnatomy("radio-group").parts(
8
- "root",
9
- "label",
10
- "radio",
11
- "radioLabel",
12
- "radioControl",
13
- "radioInput",
14
- "indicator"
15
- );
16
- const parts = anatomy.build();
17
-
18
- exports.anatomy = anatomy;
19
- exports.parts = parts;
@@ -1,14 +0,0 @@
1
- import { createAnatomy } from '@zag-js/anatomy';
2
-
3
- const anatomy = createAnatomy("radio-group").parts(
4
- "root",
5
- "label",
6
- "radio",
7
- "radioLabel",
8
- "radioControl",
9
- "radioInput",
10
- "indicator"
11
- );
12
- const parts = anatomy.build();
13
-
14
- export { anatomy, parts };
@@ -1,44 +0,0 @@
1
- import type { NormalizeProps, PropTypes } from "@zag-js/types";
2
- import type { InputProps, RadioProps, Send, State } from "./radio-group.types";
3
- export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
4
- /**
5
- * The current value of the radio group
6
- */
7
- value: string | null;
8
- /**
9
- * Function to set the value of the radio group
10
- */
11
- setValue(value: string): void;
12
- /**
13
- * Function to clear the value of the radio group
14
- */
15
- clearValue(): void;
16
- /**
17
- * Function to focus the radio group
18
- */
19
- focus: () => void;
20
- /**
21
- * Function to blur the currently focused radio input in the radio group
22
- */
23
- blur(): void;
24
- /**
25
- * Returns the state details of a radio input
26
- */
27
- getRadioState: <T_1 extends RadioProps>(props: T_1) => {
28
- isInteractive: boolean;
29
- isReadOnly: boolean | undefined;
30
- isInvalid: boolean | undefined;
31
- isDisabled: boolean | undefined;
32
- isChecked: boolean;
33
- isFocused: boolean;
34
- isHovered: boolean;
35
- isActive: boolean;
36
- };
37
- rootProps: T["element"];
38
- labelProps: T["element"];
39
- getRadioProps(props: RadioProps): T["label"];
40
- getRadioLabelProps(props: RadioProps): T["element"];
41
- getRadioControlProps(props: RadioProps): T["element"];
42
- getRadioInputProps(props: InputProps): T["input"];
43
- indicatorProps: T["element"];
44
- };