@mirohq/design-system-radio 0.1.0

package/dist/main.js

@@ -0,0 +1,180 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var reactRadioGroup = require('@radix-ui/react-radio-group');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemUseId = require('@mirohq/design-system-use-id');
+var designSystemUtils = require('@mirohq/design-system-utils');
+
+const StyledRadioGroup = designSystemStitches.styled(reactRadioGroup.Root, {
+  display: "flex",
+  gap: "$100",
+  "&[data-orientation=horizontal]": {
+    flexDirection: "row"
+  },
+  "&[data-orientation=vertical]": {
+    flexDirection: "column"
+  }
+});
+const StyledRadioItem = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "$100"
+});
+const StyledRadioLabel = designSystemStitches.styled("label", {
+  cursor: "pointer"
+});
+const StyledRadioControl = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  boxSizing: "border-box",
+  square: "$5",
+  borderRadius: "$round",
+  border: "1px solid $border-option",
+  display: "block",
+  position: "relative",
+  margin: "auto",
+  transition: "background-color 120ms ease, border-color 120ms ease",
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  }
+});
+const controlSelector = "& ".concat(StyledRadioControl);
+const StyledRadioIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  square: "$2",
+  borderRadius: "$round",
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  backgroundColor: "$background-interactive-primary",
+  opacity: 0,
+  transform: "translate(-50%, -50%) scale(0.5)",
+  transition: "opacity 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), background-color 120ms ease",
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  }
+});
+const dotSelector = "".concat(controlSelector, " ").concat(StyledRadioIndicator);
+const StyledRadio = designSystemStitches.styled(reactRadioGroup.Item, {
+  all: "unset",
+  square: "$6",
+  flexShrink: 0,
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&:focus-visible, &[data-focused]": {
+    [controlSelector]: {
+      boxShadow: "$focus",
+      "@media (forced-colors: active)": {
+        outline: "Highlight solid"
+      }
+    }
+  },
+  "&[data-state=checked]": {
+    [controlSelector]: {
+      borderColor: "$border-interactive-primary"
+    },
+    [dotSelector]: {
+      opacity: 1,
+      transform: "translate(-50%, -50%) scale(1)"
+    }
+  },
+  "&:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)": {
+    [controlSelector]: {
+      borderColor: "$border-interactive-primary-hover"
+    }
+  },
+  "&:hover[data-state=checked]:not([aria-disabled=true]):not(:disabled)": {
+    [controlSelector]: {
+      borderColor: "$background-interactive-primary-hover"
+    },
+    [dotSelector]: {
+      backgroundColor: "$background-interactive-primary-hover"
+    }
+  },
+  "&[aria-disabled=true], &:disabled": {
+    cursor: "default",
+    [controlSelector]: {
+      borderColor: "$border-disabled",
+      backgroundColor: "$background-disabled",
+      "@media (forced-colors: active)": {
+        borderColor: "GrayText"
+      }
+    },
+    [dotSelector]: {
+      backgroundColor: "$icon-on-disabled",
+      "@media (forced-colors: active)": {
+        backgroundColor: "GrayText"
+      }
+    }
+  },
+  variants: {
+    invalid: {
+      true: {
+        "&[data-state=unchecked], &:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)": {
+          [controlSelector]: {
+            borderColor: "$border-interactive-danger"
+          }
+        }
+      }
+    }
+  }
+});
+
+const RadioItemContext = React.createContext(
+  null
+);
+const useRadioItemContext = () => React.useContext(RadioItemContext);
+
+const RadioGroupItem = React.forwardRef(({ id: providedId, children, ...restProps }, forwardRef) => {
+  const id = designSystemUseId.useId(providedId);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadioItem, { ...restProps, ref: forwardRef, children }) });
+});
+
+const RadioGroupOption = React.forwardRef(
+  ({ "aria-disabled": ariaDisabled, onClick, id: providedId, ...restProps }, forwardRef) => {
+    var _a;
+    const itemContext = useRadioItemContext();
+    const generatedId = designSystemUseId.useId();
+    const id = (_a = providedId != null ? providedId : itemContext == null ? void 0 : itemContext.id) != null ? _a : generatedId;
+    const isAriaDisabled = designSystemUtils.booleanify(ariaDisabled != null ? ariaDisabled : false);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledRadio,
+      {
+        ...restProps,
+        id,
+        "aria-disabled": ariaDisabled,
+        "data-form-element": "radio",
+        onClick: (e) => {
+          if (isAriaDisabled) {
+            e.preventDefault();
+            return;
+          }
+          onClick == null ? void 0 : onClick(e);
+        },
+        ref: forwardRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadioControl, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadioIndicator, {}) })
+      }
+    );
+  }
+);
+
+const RadioGroupLabel = React.forwardRef(({ htmlFor: htmlForProp, ...restProps }, forwardRef) => {
+  const itemContext = useRadioItemContext();
+  const htmlFor = htmlForProp != null ? htmlForProp : itemContext == null ? void 0 : itemContext.id;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledRadioLabel, { ...restProps, htmlFor, ref: forwardRef });
+});
+
+const RadioGroupRoot = React.forwardRef(({ children, orientation = "vertical", ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledRadioGroup, { orientation, ...restProps, ref: forwardRef, children }));
+const RadioGroup = Object.assign(
+  RadioGroupRoot,
+  {
+    Item: RadioGroupItem,
+    Option: RadioGroupOption,
+    Label: RadioGroupLabel
+  }
+);
+
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/radio.styled.tsx","../src/radio-item-context.ts","../src/radio-item.tsx","../src/radio.tsx","../src/radio-label.tsx","../src/radio-group.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root, Item } from '@radix-ui/react-radio-group'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledRadioGroup = styled(Root, {\n  display: 'flex',\n  gap: '$100',\n  '&[data-orientation=horizontal]': {\n    flexDirection: 'row',\n  },\n  '&[data-orientation=vertical]': {\n    flexDirection: 'column',\n  },\n})\n\n/**\n * A single row: the control (`RadioGroup.Option`) next to its label\n * (`RadioGroup.Label`).\n */\nexport const StyledRadioItem = styled(Primitive.div, {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '$100',\n})\n\n/**\n * The label rendered next to the control. Associated with the control via\n * `htmlFor`, so clicking it toggles the selection.\n */\nexport const StyledRadioLabel = styled('label', {\n  cursor: 'pointer',\n})\n\n/**\n * The visible circle. Border/background reflect the item state; the indicator\n * dot is centered inside.\n */\nexport const StyledRadioControl = styled(Primitive.div, {\n  boxSizing: 'border-box',\n  square: '$5',\n  borderRadius: '$round',\n  border: '1px solid $border-option',\n  display: 'block',\n  position: 'relative',\n  margin: 'auto',\n  transition: 'background-color 120ms ease, border-color 120ms ease',\n  '@media (prefers-reduced-motion: reduce)': {\n    transition: 'none',\n  },\n})\n\nconst controlSelector = `& ${StyledRadioControl}`\n\n/**\n * The filled dot shown when the item is selected. Rendered as a styled div (not\n * an icon) since it is a plain circle. Absolutely centered inside the control\n * so its presence never affects layout (mirrors Checkbox marks). Visibility is\n * driven by the control's `data-state` rather than Radix's `Indicator`, so the\n * consumer never composes it directly.\n */\nexport const StyledRadioIndicator = styled(Primitive.div, {\n  square: '$2',\n  borderRadius: '$round',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  backgroundColor: '$background-interactive-primary',\n  opacity: 0,\n  transform: 'translate(-50%, -50%) scale(0.5)',\n  transition:\n    'opacity 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), background-color 120ms ease',\n  '@media (prefers-reduced-motion: reduce)': {\n    transition: 'none',\n  },\n})\n\nconst dotSelector = `${controlSelector} ${StyledRadioIndicator}`\n\nexport const StyledRadio = styled(Item, {\n  all: 'unset',\n  square: '$6',\n  flexShrink: 0,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  '&:focus-visible, &[data-focused]': {\n    [controlSelector]: {\n      boxShadow: '$focus',\n      '@media (forced-colors: active)': {\n        outline: 'Highlight solid',\n      },\n    },\n  },\n\n  '&[data-state=checked]': {\n    [controlSelector]: {\n      borderColor: '$border-interactive-primary',\n    },\n    [dotSelector]: {\n      opacity: 1,\n      transform: 'translate(-50%, -50%) scale(1)',\n    },\n  },\n  '&:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)': {\n    [controlSelector]: {\n      borderColor: '$border-interactive-primary-hover',\n    },\n  },\n  '&:hover[data-state=checked]:not([aria-disabled=true]):not(:disabled)': {\n    [controlSelector]: {\n      borderColor: '$background-interactive-primary-hover',\n    },\n    [dotSelector]: {\n      backgroundColor: '$background-interactive-primary-hover',\n    },\n  },\n\n  '&[aria-disabled=true], &:disabled': {\n    cursor: 'default',\n    [controlSelector]: {\n      borderColor: '$border-disabled',\n      backgroundColor: '$background-disabled',\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n      },\n    },\n    [dotSelector]: {\n      backgroundColor: '$icon-on-disabled',\n      '@media (forced-colors: active)': {\n        backgroundColor: 'GrayText',\n      },\n    },\n  },\n\n  variants: {\n    invalid: {\n      true: {\n        '&[data-state=unchecked], &:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)':\n          {\n            [controlSelector]: {\n              borderColor: '$border-interactive-danger',\n            },\n          },\n      },\n    },\n  },\n})\n\nexport type StyledRadioProps = StrictComponentProps<typeof StyledRadio>\nexport type StyledRadioGroupProps = StrictComponentProps<\n  typeof StyledRadioGroup\n>\nexport type StyledRadioItemProps = StrictComponentProps<typeof StyledRadioItem>\nexport type StyledRadioLabelProps = StrictComponentProps<\n  typeof StyledRadioLabel\n>\n","import { createContext, useContext } from 'react'\n\nexport interface RadioItemContextValue {\n  /**\n   * The id shared by the control (`RadioGroup.Option`) and its label\n   * (`RadioGroup.Label`) so the two stay associated via `htmlFor`.\n   */\n  id: string\n}\n\nexport const RadioItemContext = createContext<RadioItemContextValue | null>(\n  null\n)\n\n/**\n * Reads the enclosing `RadioGroup.Item` context, if any. Returns `null` when a\n * control or label is rendered standalone (outside an item).\n */\nexport const useRadioItemContext = (): RadioItemContextValue | null =>\n  useContext(RadioItemContext)\n","import React from 'react'\nimport { useId } from '@mirohq/design-system-use-id'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioItem } from './radio.styled'\nimport type { StyledRadioItemProps } from './radio.styled'\nimport { RadioItemContext } from './radio-item-context'\n\nexport interface ItemProps extends StyledRadioItemProps {\n  /**\n   * The id shared by the nested `RadioGroup.Option` and `RadioGroup.Label`.\n   * Generated automatically when omitted.\n   */\n  id?: string\n\n  /**\n   * The `RadioGroup.Option` and `RadioGroup.Label` that make up the row.\n   */\n  children: ReactNode\n}\n\n/**\n * A single row of a `RadioGroup`. Wraps a `RadioGroup.Option` (the control) and\n * a `RadioGroup.Label`, and owns the shared id that associates the two.\n */\nexport const RadioGroupItem = React.forwardRef<\n  ElementRef<typeof StyledRadioItem>,\n  ItemProps\n>(({ id: providedId, children, ...restProps }, forwardRef) => {\n  const id = useId(providedId)\n\n  return (\n    <RadioItemContext.Provider value={{ id }}>\n      <StyledRadioItem {...restProps} ref={forwardRef}>\n        {children}\n      </StyledRadioItem>\n    </RadioItemContext.Provider>\n  )\n})\n","import React from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useId } from '@mirohq/design-system-use-id'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n  StyledRadio,\n  StyledRadioControl,\n  StyledRadioIndicator,\n} from './radio.styled'\nimport type { StyledRadioProps } from './radio.styled'\nimport { useRadioItemContext } from './radio-item-context'\n\nexport interface OptionProps extends StyledRadioProps {\n  /**\n   * The value given as data when submitted with a name. Selecting this item\n   * sets its owning group's value to this.\n   */\n  value: string\n\n  /**\n   * When true, indicates that the user must select a value in the owning group\n   * before its form can be submitted.\n   */\n  required?: boolean\n\n  /**\n   * When true, prevents the user from interacting with the radio.\n   */\n  disabled?: boolean\n\n  /**\n   * When true, prevents the user from interacting with the radio but focus is\n   * still possible.\n   */\n  'aria-disabled'?: Booleanish\n\n  /**\n   * When true, displays the radio in an error state.\n   * @default false\n   */\n  invalid?: boolean\n}\n\n/**\n * The selectable radio control. Reads the shared id from its enclosing\n * `RadioGroup.Item` so its `RadioGroup.Label` can target it.\n */\nexport const RadioGroupOption = React.forwardRef<\n  ElementRef<typeof StyledRadio>,\n  OptionProps\n>(\n  (\n    { 'aria-disabled': ariaDisabled, onClick, id: providedId, ...restProps },\n    forwardRef\n  ) => {\n    const itemContext = useRadioItemContext()\n    const generatedId = useId()\n    const id = providedId ?? itemContext?.id ?? generatedId\n    const isAriaDisabled = booleanify(ariaDisabled ?? false)\n\n    return (\n      <StyledRadio\n        {...restProps}\n        id={id}\n        aria-disabled={ariaDisabled}\n        data-form-element='radio'\n        onClick={e => {\n          if (isAriaDisabled) {\n            e.preventDefault()\n            return\n          }\n          onClick?.(e)\n        }}\n        ref={forwardRef}\n      >\n        <StyledRadioControl>\n          <StyledRadioIndicator />\n        </StyledRadioControl>\n      </StyledRadio>\n    )\n  }\n)\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioLabel } from './radio.styled'\nimport type { StyledRadioLabelProps } from './radio.styled'\nimport { useRadioItemContext } from './radio-item-context'\n\nexport interface LabelProps extends StyledRadioLabelProps {\n  /**\n   * The control this label targets. Defaults to the id owned by the enclosing\n   * `RadioGroup.Item`.\n   */\n  htmlFor?: string\n\n  /**\n   * The label content.\n   */\n  children: ReactNode\n}\n\n/**\n * The label for a `RadioGroup.Option`. Associates itself with the control via\n * the shared id from its enclosing `RadioGroup.Item`.\n */\nexport const RadioGroupLabel = React.forwardRef<\n  ElementRef<typeof StyledRadioLabel>,\n  LabelProps\n>(({ htmlFor: htmlForProp, ...restProps }, forwardRef) => {\n  const itemContext = useRadioItemContext()\n  const htmlFor = htmlForProp ?? itemContext?.id\n\n  return <StyledRadioLabel {...restProps} htmlFor={htmlFor} ref={forwardRef} />\n})\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioGroup } from './radio.styled'\nimport type { StyledRadioGroupProps } from './radio.styled'\nimport { RadioGroupItem } from './radio-item'\nimport { RadioGroupOption } from './radio'\nimport { RadioGroupLabel } from './radio-label'\n\nexport interface RadioGroupProps extends StyledRadioGroupProps {\n  /**\n   * The controlled value of the selected item. Must be used in conjunction with\n   * onValueChange.\n   */\n  value?: string\n\n  /**\n   * The value of the item that should be selected when initially rendered. Use\n   * when you do not need to control the state of the items.\n   */\n  defaultValue?: string\n\n  /**\n   * Event handler called when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  /**\n   * The name of the group. Submitted with its owning form as part of a\n   * name/value pair.\n   */\n  name?: string\n\n  /**\n   * When true, prevents the user from interacting with any item in the group.\n   */\n  disabled?: boolean\n\n  /**\n   * When true, indicates that the user must select a value before the owning\n   * form can be submitted.\n   */\n  required?: boolean\n\n  /**\n   * The orientation of the group. Also sets the axis for arrow-key navigation.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n\n  /**\n   * The `Radio` items of the group.\n   */\n  children: ReactNode\n}\n\nexport interface Partials {\n  Item: typeof RadioGroupItem\n  Option: typeof RadioGroupOption\n  Label: typeof RadioGroupLabel\n}\n\n/**\n * Container for a set of mutually exclusive `RadioGroup.Item` rows.\n */\nconst RadioGroupRoot = React.forwardRef<\n  ElementRef<typeof StyledRadioGroup>,\n  RadioGroupProps\n>(({ children, orientation = 'vertical', ...restProps }, forwardRef) => (\n  <StyledRadioGroup orientation={orientation} {...restProps} ref={forwardRef}>\n    {children}\n  </StyledRadioGroup>\n))\n\nexport const RadioGroup: typeof RadioGroupRoot & Partials = Object.assign(\n  RadioGroupRoot,\n  {\n    Item: RadioGroupItem,\n    Option: RadioGroupOption,\n    Label: RadioGroupLabel,\n  }\n)\n"],"names":["styled","Root","Primitive","Item","createContext","useContext","useId","jsx","booleanify"],"mappings":"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"}

package/dist/module.js

@@ -0,0 +1,178 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useContext } from 'react';
+import { styled } from '@mirohq/design-system-stitches';
+import { Root, Item } from '@radix-ui/react-radio-group';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { useId } from '@mirohq/design-system-use-id';
+import { booleanify } from '@mirohq/design-system-utils';
+
+const StyledRadioGroup = styled(Root, {
+  display: "flex",
+  gap: "$100",
+  "&[data-orientation=horizontal]": {
+    flexDirection: "row"
+  },
+  "&[data-orientation=vertical]": {
+    flexDirection: "column"
+  }
+});
+const StyledRadioItem = styled(Primitive.div, {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "$100"
+});
+const StyledRadioLabel = styled("label", {
+  cursor: "pointer"
+});
+const StyledRadioControl = styled(Primitive.div, {
+  boxSizing: "border-box",
+  square: "$5",
+  borderRadius: "$round",
+  border: "1px solid $border-option",
+  display: "block",
+  position: "relative",
+  margin: "auto",
+  transition: "background-color 120ms ease, border-color 120ms ease",
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  }
+});
+const controlSelector = "& ".concat(StyledRadioControl);
+const StyledRadioIndicator = styled(Primitive.div, {
+  square: "$2",
+  borderRadius: "$round",
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  backgroundColor: "$background-interactive-primary",
+  opacity: 0,
+  transform: "translate(-50%, -50%) scale(0.5)",
+  transition: "opacity 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), background-color 120ms ease",
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  }
+});
+const dotSelector = "".concat(controlSelector, " ").concat(StyledRadioIndicator);
+const StyledRadio = styled(Item, {
+  all: "unset",
+  square: "$6",
+  flexShrink: 0,
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&:focus-visible, &[data-focused]": {
+    [controlSelector]: {
+      boxShadow: "$focus",
+      "@media (forced-colors: active)": {
+        outline: "Highlight solid"
+      }
+    }
+  },
+  "&[data-state=checked]": {
+    [controlSelector]: {
+      borderColor: "$border-interactive-primary"
+    },
+    [dotSelector]: {
+      opacity: 1,
+      transform: "translate(-50%, -50%) scale(1)"
+    }
+  },
+  "&:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)": {
+    [controlSelector]: {
+      borderColor: "$border-interactive-primary-hover"
+    }
+  },
+  "&:hover[data-state=checked]:not([aria-disabled=true]):not(:disabled)": {
+    [controlSelector]: {
+      borderColor: "$background-interactive-primary-hover"
+    },
+    [dotSelector]: {
+      backgroundColor: "$background-interactive-primary-hover"
+    }
+  },
+  "&[aria-disabled=true], &:disabled": {
+    cursor: "default",
+    [controlSelector]: {
+      borderColor: "$border-disabled",
+      backgroundColor: "$background-disabled",
+      "@media (forced-colors: active)": {
+        borderColor: "GrayText"
+      }
+    },
+    [dotSelector]: {
+      backgroundColor: "$icon-on-disabled",
+      "@media (forced-colors: active)": {
+        backgroundColor: "GrayText"
+      }
+    }
+  },
+  variants: {
+    invalid: {
+      true: {
+        "&[data-state=unchecked], &:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)": {
+          [controlSelector]: {
+            borderColor: "$border-interactive-danger"
+          }
+        }
+      }
+    }
+  }
+});
+
+const RadioItemContext = createContext(
+  null
+);
+const useRadioItemContext = () => useContext(RadioItemContext);
+
+const RadioGroupItem = React.forwardRef(({ id: providedId, children, ...restProps }, forwardRef) => {
+  const id = useId(providedId);
+  return /* @__PURE__ */ jsx(RadioItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(StyledRadioItem, { ...restProps, ref: forwardRef, children }) });
+});
+
+const RadioGroupOption = React.forwardRef(
+  ({ "aria-disabled": ariaDisabled, onClick, id: providedId, ...restProps }, forwardRef) => {
+    var _a;
+    const itemContext = useRadioItemContext();
+    const generatedId = useId();
+    const id = (_a = providedId != null ? providedId : itemContext == null ? void 0 : itemContext.id) != null ? _a : generatedId;
+    const isAriaDisabled = booleanify(ariaDisabled != null ? ariaDisabled : false);
+    return /* @__PURE__ */ jsx(
+      StyledRadio,
+      {
+        ...restProps,
+        id,
+        "aria-disabled": ariaDisabled,
+        "data-form-element": "radio",
+        onClick: (e) => {
+          if (isAriaDisabled) {
+            e.preventDefault();
+            return;
+          }
+          onClick == null ? void 0 : onClick(e);
+        },
+        ref: forwardRef,
+        children: /* @__PURE__ */ jsx(StyledRadioControl, { children: /* @__PURE__ */ jsx(StyledRadioIndicator, {}) })
+      }
+    );
+  }
+);
+
+const RadioGroupLabel = React.forwardRef(({ htmlFor: htmlForProp, ...restProps }, forwardRef) => {
+  const itemContext = useRadioItemContext();
+  const htmlFor = htmlForProp != null ? htmlForProp : itemContext == null ? void 0 : itemContext.id;
+  return /* @__PURE__ */ jsx(StyledRadioLabel, { ...restProps, htmlFor, ref: forwardRef });
+});
+
+const RadioGroupRoot = React.forwardRef(({ children, orientation = "vertical", ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledRadioGroup, { orientation, ...restProps, ref: forwardRef, children }));
+const RadioGroup = Object.assign(
+  RadioGroupRoot,
+  {
+    Item: RadioGroupItem,
+    Option: RadioGroupOption,
+    Label: RadioGroupLabel
+  }
+);
+
+export { RadioGroup };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/radio.styled.tsx","../src/radio-item-context.ts","../src/radio-item.tsx","../src/radio.tsx","../src/radio-label.tsx","../src/radio-group.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Root, Item } from '@radix-ui/react-radio-group'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledRadioGroup = styled(Root, {\n  display: 'flex',\n  gap: '$100',\n  '&[data-orientation=horizontal]': {\n    flexDirection: 'row',\n  },\n  '&[data-orientation=vertical]': {\n    flexDirection: 'column',\n  },\n})\n\n/**\n * A single row: the control (`RadioGroup.Option`) next to its label\n * (`RadioGroup.Label`).\n */\nexport const StyledRadioItem = styled(Primitive.div, {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '$100',\n})\n\n/**\n * The label rendered next to the control. Associated with the control via\n * `htmlFor`, so clicking it toggles the selection.\n */\nexport const StyledRadioLabel = styled('label', {\n  cursor: 'pointer',\n})\n\n/**\n * The visible circle. Border/background reflect the item state; the indicator\n * dot is centered inside.\n */\nexport const StyledRadioControl = styled(Primitive.div, {\n  boxSizing: 'border-box',\n  square: '$5',\n  borderRadius: '$round',\n  border: '1px solid $border-option',\n  display: 'block',\n  position: 'relative',\n  margin: 'auto',\n  transition: 'background-color 120ms ease, border-color 120ms ease',\n  '@media (prefers-reduced-motion: reduce)': {\n    transition: 'none',\n  },\n})\n\nconst controlSelector = `& ${StyledRadioControl}`\n\n/**\n * The filled dot shown when the item is selected. Rendered as a styled div (not\n * an icon) since it is a plain circle. Absolutely centered inside the control\n * so its presence never affects layout (mirrors Checkbox marks). Visibility is\n * driven by the control's `data-state` rather than Radix's `Indicator`, so the\n * consumer never composes it directly.\n */\nexport const StyledRadioIndicator = styled(Primitive.div, {\n  square: '$2',\n  borderRadius: '$round',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  backgroundColor: '$background-interactive-primary',\n  opacity: 0,\n  transform: 'translate(-50%, -50%) scale(0.5)',\n  transition:\n    'opacity 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9), background-color 120ms ease',\n  '@media (prefers-reduced-motion: reduce)': {\n    transition: 'none',\n  },\n})\n\nconst dotSelector = `${controlSelector} ${StyledRadioIndicator}`\n\nexport const StyledRadio = styled(Item, {\n  all: 'unset',\n  square: '$6',\n  flexShrink: 0,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  '&:focus-visible, &[data-focused]': {\n    [controlSelector]: {\n      boxShadow: '$focus',\n      '@media (forced-colors: active)': {\n        outline: 'Highlight solid',\n      },\n    },\n  },\n\n  '&[data-state=checked]': {\n    [controlSelector]: {\n      borderColor: '$border-interactive-primary',\n    },\n    [dotSelector]: {\n      opacity: 1,\n      transform: 'translate(-50%, -50%) scale(1)',\n    },\n  },\n  '&:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)': {\n    [controlSelector]: {\n      borderColor: '$border-interactive-primary-hover',\n    },\n  },\n  '&:hover[data-state=checked]:not([aria-disabled=true]):not(:disabled)': {\n    [controlSelector]: {\n      borderColor: '$background-interactive-primary-hover',\n    },\n    [dotSelector]: {\n      backgroundColor: '$background-interactive-primary-hover',\n    },\n  },\n\n  '&[aria-disabled=true], &:disabled': {\n    cursor: 'default',\n    [controlSelector]: {\n      borderColor: '$border-disabled',\n      backgroundColor: '$background-disabled',\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n      },\n    },\n    [dotSelector]: {\n      backgroundColor: '$icon-on-disabled',\n      '@media (forced-colors: active)': {\n        backgroundColor: 'GrayText',\n      },\n    },\n  },\n\n  variants: {\n    invalid: {\n      true: {\n        '&[data-state=unchecked], &:hover[data-state=unchecked]:not([aria-disabled=true]):not(:disabled)':\n          {\n            [controlSelector]: {\n              borderColor: '$border-interactive-danger',\n            },\n          },\n      },\n    },\n  },\n})\n\nexport type StyledRadioProps = StrictComponentProps<typeof StyledRadio>\nexport type StyledRadioGroupProps = StrictComponentProps<\n  typeof StyledRadioGroup\n>\nexport type StyledRadioItemProps = StrictComponentProps<typeof StyledRadioItem>\nexport type StyledRadioLabelProps = StrictComponentProps<\n  typeof StyledRadioLabel\n>\n","import { createContext, useContext } from 'react'\n\nexport interface RadioItemContextValue {\n  /**\n   * The id shared by the control (`RadioGroup.Option`) and its label\n   * (`RadioGroup.Label`) so the two stay associated via `htmlFor`.\n   */\n  id: string\n}\n\nexport const RadioItemContext = createContext<RadioItemContextValue | null>(\n  null\n)\n\n/**\n * Reads the enclosing `RadioGroup.Item` context, if any. Returns `null` when a\n * control or label is rendered standalone (outside an item).\n */\nexport const useRadioItemContext = (): RadioItemContextValue | null =>\n  useContext(RadioItemContext)\n","import React from 'react'\nimport { useId } from '@mirohq/design-system-use-id'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioItem } from './radio.styled'\nimport type { StyledRadioItemProps } from './radio.styled'\nimport { RadioItemContext } from './radio-item-context'\n\nexport interface ItemProps extends StyledRadioItemProps {\n  /**\n   * The id shared by the nested `RadioGroup.Option` and `RadioGroup.Label`.\n   * Generated automatically when omitted.\n   */\n  id?: string\n\n  /**\n   * The `RadioGroup.Option` and `RadioGroup.Label` that make up the row.\n   */\n  children: ReactNode\n}\n\n/**\n * A single row of a `RadioGroup`. Wraps a `RadioGroup.Option` (the control) and\n * a `RadioGroup.Label`, and owns the shared id that associates the two.\n */\nexport const RadioGroupItem = React.forwardRef<\n  ElementRef<typeof StyledRadioItem>,\n  ItemProps\n>(({ id: providedId, children, ...restProps }, forwardRef) => {\n  const id = useId(providedId)\n\n  return (\n    <RadioItemContext.Provider value={{ id }}>\n      <StyledRadioItem {...restProps} ref={forwardRef}>\n        {children}\n      </StyledRadioItem>\n    </RadioItemContext.Provider>\n  )\n})\n","import React from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useId } from '@mirohq/design-system-use-id'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n  StyledRadio,\n  StyledRadioControl,\n  StyledRadioIndicator,\n} from './radio.styled'\nimport type { StyledRadioProps } from './radio.styled'\nimport { useRadioItemContext } from './radio-item-context'\n\nexport interface OptionProps extends StyledRadioProps {\n  /**\n   * The value given as data when submitted with a name. Selecting this item\n   * sets its owning group's value to this.\n   */\n  value: string\n\n  /**\n   * When true, indicates that the user must select a value in the owning group\n   * before its form can be submitted.\n   */\n  required?: boolean\n\n  /**\n   * When true, prevents the user from interacting with the radio.\n   */\n  disabled?: boolean\n\n  /**\n   * When true, prevents the user from interacting with the radio but focus is\n   * still possible.\n   */\n  'aria-disabled'?: Booleanish\n\n  /**\n   * When true, displays the radio in an error state.\n   * @default false\n   */\n  invalid?: boolean\n}\n\n/**\n * The selectable radio control. Reads the shared id from its enclosing\n * `RadioGroup.Item` so its `RadioGroup.Label` can target it.\n */\nexport const RadioGroupOption = React.forwardRef<\n  ElementRef<typeof StyledRadio>,\n  OptionProps\n>(\n  (\n    { 'aria-disabled': ariaDisabled, onClick, id: providedId, ...restProps },\n    forwardRef\n  ) => {\n    const itemContext = useRadioItemContext()\n    const generatedId = useId()\n    const id = providedId ?? itemContext?.id ?? generatedId\n    const isAriaDisabled = booleanify(ariaDisabled ?? false)\n\n    return (\n      <StyledRadio\n        {...restProps}\n        id={id}\n        aria-disabled={ariaDisabled}\n        data-form-element='radio'\n        onClick={e => {\n          if (isAriaDisabled) {\n            e.preventDefault()\n            return\n          }\n          onClick?.(e)\n        }}\n        ref={forwardRef}\n      >\n        <StyledRadioControl>\n          <StyledRadioIndicator />\n        </StyledRadioControl>\n      </StyledRadio>\n    )\n  }\n)\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioLabel } from './radio.styled'\nimport type { StyledRadioLabelProps } from './radio.styled'\nimport { useRadioItemContext } from './radio-item-context'\n\nexport interface LabelProps extends StyledRadioLabelProps {\n  /**\n   * The control this label targets. Defaults to the id owned by the enclosing\n   * `RadioGroup.Item`.\n   */\n  htmlFor?: string\n\n  /**\n   * The label content.\n   */\n  children: ReactNode\n}\n\n/**\n * The label for a `RadioGroup.Option`. Associates itself with the control via\n * the shared id from its enclosing `RadioGroup.Item`.\n */\nexport const RadioGroupLabel = React.forwardRef<\n  ElementRef<typeof StyledRadioLabel>,\n  LabelProps\n>(({ htmlFor: htmlForProp, ...restProps }, forwardRef) => {\n  const itemContext = useRadioItemContext()\n  const htmlFor = htmlForProp ?? itemContext?.id\n\n  return <StyledRadioLabel {...restProps} htmlFor={htmlFor} ref={forwardRef} />\n})\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledRadioGroup } from './radio.styled'\nimport type { StyledRadioGroupProps } from './radio.styled'\nimport { RadioGroupItem } from './radio-item'\nimport { RadioGroupOption } from './radio'\nimport { RadioGroupLabel } from './radio-label'\n\nexport interface RadioGroupProps extends StyledRadioGroupProps {\n  /**\n   * The controlled value of the selected item. Must be used in conjunction with\n   * onValueChange.\n   */\n  value?: string\n\n  /**\n   * The value of the item that should be selected when initially rendered. Use\n   * when you do not need to control the state of the items.\n   */\n  defaultValue?: string\n\n  /**\n   * Event handler called when the selected value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  /**\n   * The name of the group. Submitted with its owning form as part of a\n   * name/value pair.\n   */\n  name?: string\n\n  /**\n   * When true, prevents the user from interacting with any item in the group.\n   */\n  disabled?: boolean\n\n  /**\n   * When true, indicates that the user must select a value before the owning\n   * form can be submitted.\n   */\n  required?: boolean\n\n  /**\n   * The orientation of the group. Also sets the axis for arrow-key navigation.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n\n  /**\n   * The `Radio` items of the group.\n   */\n  children: ReactNode\n}\n\nexport interface Partials {\n  Item: typeof RadioGroupItem\n  Option: typeof RadioGroupOption\n  Label: typeof RadioGroupLabel\n}\n\n/**\n * Container for a set of mutually exclusive `RadioGroup.Item` rows.\n */\nconst RadioGroupRoot = React.forwardRef<\n  ElementRef<typeof StyledRadioGroup>,\n  RadioGroupProps\n>(({ children, orientation = 'vertical', ...restProps }, forwardRef) => (\n  <StyledRadioGroup orientation={orientation} {...restProps} ref={forwardRef}>\n    {children}\n  </StyledRadioGroup>\n))\n\nexport const RadioGroup: typeof RadioGroupRoot & Partials = Object.assign(\n  RadioGroupRoot,\n  {\n    Item: RadioGroupItem,\n    Option: RadioGroupOption,\n    Label: RadioGroupLabel,\n  }\n)\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
+import * as _radix_ui_react_radio_group from '@radix-ui/react-radio-group';
+import { Booleanish } from '@mirohq/design-system-types';
+
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+declare const StyledRadioGroup: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_radio_group.RadioGroupProps & react.RefAttributes<HTMLDivElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_radio_group.RadioGroupProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+/**
+ * A single row: the control (`RadioGroup.Option`) next to its label
+ * (`RadioGroup.Label`).
+ */
+declare const StyledRadioItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+/**
+ * The label rendered next to the control. Associated with the control via
+ * `htmlFor`, so clicking it toggles the selection.
+ */
+declare const StyledRadioLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<"label">, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<"label", {}, {}>;
+declare const StyledRadio: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_radio_group.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>>>, "invalid"> & TransformProps<{
+    invalid?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_radio_group.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>>, {
+    invalid?: boolean | "true" | undefined;
+}, {}>;
+type StyledRadioProps = StrictComponentProps<typeof StyledRadio>;
+type StyledRadioGroupProps = StrictComponentProps<typeof StyledRadioGroup>;
+type StyledRadioItemProps = StrictComponentProps<typeof StyledRadioItem>;
+type StyledRadioLabelProps = StrictComponentProps<typeof StyledRadioLabel>;
+
+interface ItemProps extends StyledRadioItemProps {
+    /**
+     * The id shared by the nested `RadioGroup.Option` and `RadioGroup.Label`.
+     * Generated automatically when omitted.
+     */
+    id?: string;
+    /**
+     * The `RadioGroup.Option` and `RadioGroup.Label` that make up the row.
+     */
+    children: ReactNode;
+}
+/**
+ * A single row of a `RadioGroup`. Wraps a `RadioGroup.Option` (the control) and
+ * a `RadioGroup.Label`, and owns the shared id that associates the two.
+ */
+declare const RadioGroupItem: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+interface OptionProps extends StyledRadioProps {
+    /**
+     * The value given as data when submitted with a name. Selecting this item
+     * sets its owning group's value to this.
+     */
+    value: string;
+    /**
+     * When true, indicates that the user must select a value in the owning group
+     * before its form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * When true, prevents the user from interacting with the radio.
+     */
+    disabled?: boolean;
+    /**
+     * When true, prevents the user from interacting with the radio but focus is
+     * still possible.
+     */
+    'aria-disabled'?: Booleanish;
+    /**
+     * When true, displays the radio in an error state.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/**
+ * The selectable radio control. Reads the shared id from its enclosing
+ * `RadioGroup.Item` so its `RadioGroup.Label` can target it.
+ */
+declare const RadioGroupOption: react__default.ForwardRefExoticComponent<Omit<OptionProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+
+interface LabelProps extends StyledRadioLabelProps {
+    /**
+     * The control this label targets. Defaults to the id owned by the enclosing
+     * `RadioGroup.Item`.
+     */
+    htmlFor?: string;
+    /**
+     * The label content.
+     */
+    children: ReactNode;
+}
+/**
+ * The label for a `RadioGroup.Option`. Associates itself with the control via
+ * the shared id from its enclosing `RadioGroup.Item`.
+ */
+declare const RadioGroupLabel: react__default.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & react__default.RefAttributes<HTMLLabelElement>>;
+
+interface RadioGroupProps extends StyledRadioGroupProps {
+    /**
+     * The controlled value of the selected item. Must be used in conjunction with
+     * onValueChange.
+     */
+    value?: string;
+    /**
+     * The value of the item that should be selected when initially rendered. Use
+     * when you do not need to control the state of the items.
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The name of the group. Submitted with its owning form as part of a
+     * name/value pair.
+     */
+    name?: string;
+    /**
+     * When true, prevents the user from interacting with any item in the group.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must select a value before the owning
+     * form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The orientation of the group. Also sets the axis for arrow-key navigation.
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The `Radio` items of the group.
+     */
+    children: ReactNode;
+}
+interface Partials {
+    Item: typeof RadioGroupItem;
+    Option: typeof RadioGroupOption;
+    Label: typeof RadioGroupLabel;
+}
+/**
+ * Container for a set of mutually exclusive `RadioGroup.Item` rows.
+ */
+declare const RadioGroupRoot: react__default.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: typeof RadioGroupRoot & Partials;
+
+export { RadioGroup };
+export type { ItemProps as RadioGroupItemProps, LabelProps as RadioGroupLabelProps, OptionProps as RadioGroupOptionProps, RadioGroupProps };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mirohq/design-system-radio",
+  "version": "0.1.0",
+  "description": "Radio component for the Miro Design System",
+  "author": "Miro",
+  "source": "src/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/main.js",
+      "import": "./dist/module.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@stitches/react": "^1.2.8",
+    "react": "^16.14 || ^17 || ^18 || ^19"
+  },
+  "dependencies": {
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-stitches": "^3.3.30",
+    "@mirohq/design-system-utils": "^1.3.0",
+    "@mirohq/design-system-types": "^1.0.3",
+    "@mirohq/design-system-use-id": "^1.1.1"
+  },
+  "scripts": {
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}