@ledgerhq/react-ui 0.7.5 → 0.7.6-nightly.0

package/lib/cjs/components/form/QuantityInput/index.js

@@ -0,0 +1,83 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => QuantityInput_default
+});
+var import_react = __toModule(require("react"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_styled_components = __toModule(require("styled-components"));
+const MaxButton = import_styled_components.default.button`
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
+  border-radius: 100px;
+  border-width: 0;
+  padding-left: 14px;
+  padding-right: 14px;
+  height: 100%;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
+    cursor: unset;
+  }
+`;
+const Legend = (0, import_styled_components.default)(import_Text.default)`
+  color: ${(p) => p.theme.colors.neutral.c70};
+
+  &[data-disabled="true"] {
+    color: ${(p) => p.theme.colors.neutral.c50};
+  }
+`;
+function QuantityInput({
+  onMaxClick,
+  price,
+  ...inputProps
+}, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_BaseInput.default, {
+    ref,
+    ...inputProps,
+    type: "number",
+    renderRight: /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+      alignItems: "center",
+      justifyContent: "center",
+      pr: "3px",
+      py: "3px"
+    }, price && /* @__PURE__ */ import_react.default.createElement(Legend, {
+      variant: "body",
+      pr: "12px",
+      "data-disabled": inputProps.disabled
+    }, price), /* @__PURE__ */ import_react.default.createElement(MaxButton, {
+      onClick: onMaxClick,
+      disabled: inputProps.disabled
+    }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+      variant: "tiny",
+      color: "currentColor"
+    }, "Max")))
+  });
+}
+var QuantityInput_default = import_react.default.forwardRef(QuantityInput);
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/QuantityInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/QuantityInput/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\nconst MaxButton = styled.button`\n  color: ${(p) => p.theme.colors.neutral.c00};\n  background-color: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: 100px;\n  border-width: 0;\n  padding-left: 14px;\n  padding-right: 14px;\n  height: 100%;\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n    color: ${(p) => p.theme.colors.neutral.c50};\n    cursor: unset;\n  }\n`;\n\nconst Legend = styled(Text)`\n  color: ${(p) => p.theme.colors.neutral.c70};\n\n  &[data-disabled=\"true\"] {\n    color: ${(p) => p.theme.colors.neutral.c50};\n  }\n`;\n\nfunction QuantityInput(\n  {\n    onMaxClick,\n    price,\n    ...inputProps\n  }: InputProps & {\n    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;\n    price?: string;\n  },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      type={\"number\"}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} pr={\"3px\"} py={\"3px\"}>\n          {price && (\n            <Legend variant=\"body\" pr={\"12px\"} data-disabled={inputProps.disabled}>\n              {price}\n            </Legend>\n          )}\n          <MaxButton onClick={onMaxClick} disabled={inputProps.disabled}>\n            <Text variant=\"tiny\" color=\"currentColor\">\n              Max\n            </Text>\n          </MaxButton>\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(QuantityInput);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,kBAAiB;AACjB,+BAAmB;AAEnB,MAAM,YAAY,iCAAO;AAAA,WACd,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK3C,MAAM,SAAS,sCAAO;AAAA,WACX,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAG5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,uBACE;AAAA,EACE;AAAA,EACA;AAAA,KACG;AAAA,GAKL,KACa;AACb,SACE,mDAAC,0BAAD;AAAA,IACE;AAAA,OACI;AAAA,IACJ,MAAM;AAAA,IACN,aACE,mDAAC,qBAAD;AAAA,MAAS,YAAY;AAAA,MAAU,gBAAgB;AAAA,MAAU,IAAI;AAAA,MAAO,IAAI;AAAA,OACrE,SACC,mDAAC,QAAD;AAAA,MAAQ,SAAQ;AAAA,MAAO,IAAI;AAAA,MAAQ,iBAAe,WAAW;AAAA,OAC1D,QAGL,mDAAC,WAAD;AAAA,MAAW,SAAS;AAAA,MAAY,UAAU,WAAW;AAAA,OACnD,mDAAC,qBAAD;AAAA,MAAM,SAAQ;AAAA,MAAO,OAAM;AAAA,OAAe;AAAA;AAAA;AAUtD,IAAO,wBAAQ,qBAAM,WAAW;",
+  "names": []
+}

package/lib/cjs/components/form/Radio/Radio.stories.js

@@ -0,0 +1,154 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  RadioGroup: () => RadioGroup,
+  RadioGroupList: () => RadioGroupList,
+  RadioGroupOutlined: () => RadioGroupOutlined,
+  default: () => Radio_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_index = __toModule(require("./index"));
+var Radio_stories_default = {
+  title: "Form/Radio",
+  argTypes: {
+    currentValue: {
+      type: "text",
+      description: "This is the current value. A RadioItem will be checked if its value matches this value.",
+      control: false
+    },
+    name: {
+      type: "text",
+      description: "The name property is used to link all RadioItems",
+      control: false
+    },
+    onChange: {
+      control: false,
+      description: "The callback receives the value of the pressed RadioItem as parameter",
+      action: "clicked"
+    }
+  }
+};
+const TemplateElement = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleChange = (value) => {
+    updateArgs({ currentValue: value });
+    currentArgs.onChange(value);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onChange: handleChange,
+    containerProps: { flexDirection: "column", rowGap: "1rem" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Blue squad",
+    value: "blue",
+    variant: "default"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Black squad",
+    value: "black",
+    variant: "main"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Yellow squad",
+    value: "yellow",
+    variant: "success"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Core squad",
+    value: "core",
+    variant: "error"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Orange squad",
+    value: "orange",
+    variant: "default",
+    disabled: true
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "Purple squad",
+    value: "purple",
+    variant: "default",
+    disabled: true
+  }));
+};
+const TemplateOutlinedElement = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleChange = (value) => {
+    updateArgs({ currentValue: value });
+    currentArgs.onChange(value);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onChange: handleChange,
+    containerProps: { flexDirection: "column", rowGap: "20px" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    outlined: true,
+    label: "Black squad",
+    value: "black",
+    variant: "main"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    outlined: true,
+    label: "Yellow squad",
+    value: "yellow",
+    variant: "success"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    outlined: true,
+    label: "Core squad",
+    value: "core",
+    variant: "error"
+  }));
+};
+const RadioGroup = TemplateElement.bind({
+  currentValue: "purple"
+});
+const RadioGroupOutlined = TemplateOutlinedElement.bind({});
+const TemplateListElement = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleChange = (value) => {
+    updateArgs({ currentValue: value });
+    currentArgs.onChange(value);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onChange: handleChange,
+    containerProps: { flexDirection: "column", rowGap: "1rem" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Ledger Verse",
+    value: "ledgerVerse",
+    disabled: true,
+    containerProps: { flex: 1 }
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Live Monad",
+    value: "liveMonad",
+    containerProps: { flex: 1 }
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Live Hub",
+    value: "liveHub",
+    containerProps: { flex: 1 }
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ListElement, {
+    label: "Live Meta",
+    value: "liveMeta",
+    containerProps: { flex: 1 }
+  }));
+};
+const RadioGroupList = TemplateListElement.bind({});
+RadioGroup.args = { currentValue: "purple" };
+RadioGroupList.args = { currentValue: "liveHub" };
+//# sourceMappingURL=Radio.stories.js.map

package/lib/cjs/components/form/Radio/Radio.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/Radio.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Radio from \"./index\";\nimport type { RadioProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n  title: \"Form/Radio\",\n  argTypes: {\n    currentValue: {\n      type: \"text\",\n      description:\n        \"This is the current value. A RadioItem will be checked if its value matches this value.\",\n      control: false,\n    },\n    name: {\n      type: \"text\",\n      description: \"The name property is used to link all RadioItems\",\n      control: false,\n    },\n    onChange: {\n      control: false,\n      description: \"The callback receives the value of the pressed RadioItem as parameter\",\n      action: \"clicked\",\n    },\n  },\n};\n\nconst TemplateElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.Element label=\"Blue squad\" value=\"blue\" variant=\"default\" />\n      <Radio.Element label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element label=\"Core squad\" value=\"core\" variant=\"error\" />\n      <Radio.Element label=\"Orange squad\" value=\"orange\" variant=\"default\" disabled />\n      <Radio.Element label=\"Purple squad\" value=\"purple\" variant=\"default\" disabled />\n    </Radio>\n  );\n};\n\nconst TemplateOutlinedElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"20px\" }}\n    >\n      <Radio.Element outlined label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element outlined label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element outlined label=\"Core squad\" value=\"core\" variant=\"error\" />\n    </Radio>\n  );\n};\n\nexport const RadioGroup: StoryTemplate<RadioProps> = TemplateElement.bind({\n  currentValue: \"purple\",\n});\n\nexport const RadioGroupOutlined: StoryTemplate<RadioProps> = TemplateOutlinedElement.bind({});\n\nconst TemplateListElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.ListElement\n        label=\"Ledger Verse\"\n        value=\"ledgerVerse\"\n        disabled\n        containerProps={{ flex: 1 }}\n      />\n      <Radio.ListElement label=\"Live Monad\" value=\"liveMonad\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Hub\" value=\"liveHub\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Meta\" value=\"liveMeta\" containerProps={{ flex: 1 }} />\n    </Radio>\n  );\n};\n\nexport const RadioGroupList: StoryTemplate<RadioProps> = TemplateListElement.bind({});\n\n// Set the disabled item to be checked on mount\nRadioGroup.args = { currentValue: \"purple\" };\nRadioGroupList.args = { currentValue: \"liveHub\" };\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/form/Radio/RadioElement.js

@@ -0,0 +1,214 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => RadioElement_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_helpers = __toModule(require("../../../styles/helpers"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_index = __toModule(require("./index"));
+const Label = (0, import_styled_components.default)(import_Text.default)`
+  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
+`;
+const Input = import_styled_components.default.input`
+  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
+  --ledger-ui-checkbox-size: 1.25rem;
+
+  position: relative;
+  appearance: none;
+  width: var(--ledger-ui-checkbox-size);
+  height: var(--ledger-ui-checkbox-size);
+  flex-shrink: 0;
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  border: 1px solid var(--ledger-ui-checkbox-color);
+  cursor: pointer;
+
+  &:checked::before {
+    position: absolute;
+    display: block;
+    content: " ";
+    background-color: var(--ledger-ui-checkbox-color);
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border-radius: 2px;
+    width: calc(var(--ledger-ui-checkbox-size) / 2);
+    height: calc(var(--ledger-ui-checkbox-size) / 2);
+  }
+
+  &[data-variant="default"] {
+    :hover {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};
+    }
+    :active {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};
+    }
+    :checked,
+    :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.48)};
+    }
+  }
+
+  &[data-variant="main"] {
+    :hover {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    :active,
+    :checked,
+    :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.neutral.c60, 0.48)};
+    }
+  }
+
+  &[data-variant="success"] {
+    :hover,
+    :checked:not([disabled]),
+    :checked:not([disabled]) + ${Label}, :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.success.c100, 0.48)};
+    }
+  }
+
+  &[data-variant="error"] {
+    :hover,
+    :checked:not([disabled]),
+    :checked:not([disabled]) + ${Label}, :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.error.c100, 0.48)};
+    }
+  }
+
+  &[data-variant]:disabled {
+    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};
+    cursor: unset;
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+  }
+`;
+const outlinedCSS = import_styled_components.css`
+  padding: 20px;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c50};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  &[data-variant="default"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.primary.c90};
+    }
+    &[data-checked] :active {
+      border-color: ${(p) => p.theme.colors.primary.c100};
+    }
+    :focus {
+      border-color: ${(p) => p.theme.colors.primary.c80};
+    }
+  }
+
+  &[data-variant="main"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    &[data-checked],
+    :active :focus {
+      border-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+  }
+
+  &[data-variant="success"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+  }
+
+  &[data-variant="error"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.error.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.error.c100};
+    }
+  }
+
+  &[data-variant]:disabled {
+    border-color: ${(p) => p.theme.colors.neutral.c40};
+    cursor: unset;
+  }
+`;
+const RadioElement = import_styled_components.default.label.attrs({ tabIndex: -1 })`
+  display: inline-flex;
+  column-gap: 0.75rem;
+  align-items: center;
+  cursor: pointer;
+  &[data-variant]:disabled {
+    cursor: unset;
+  }
+  ${(p) => p.outlined && outlinedCSS}
+`;
+const Element = ({
+  label,
+  value,
+  disabled,
+  outlined,
+  variant = "default",
+  ...props
+}) => {
+  const context = (0, import_react.useContext)(import_index.RadioContext);
+  if (context === void 0)
+    throw new Error("RadioElement must be used within a RadioProvider");
+  const isChecked = (0, import_react.useMemo)(() => context.currentValue === value, [context.currentValue]);
+  const handleChange = (event) => {
+    context.onChange(event.target.value);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(RadioElement, {
+    "data-variant": variant,
+    ...isChecked ? { "data-checked": true } : {},
+    outlined
+  }, /* @__PURE__ */ import_react.default.createElement(Input, {
+    type: "radio",
+    "data-variant": variant,
+    checked: isChecked,
+    disabled,
+    onChange: handleChange,
+    value,
+    name: context.name,
+    ...props
+  }), /* @__PURE__ */ import_react.default.createElement(Label, {
+    variant: "paragraph"
+  }, label));
+};
+Element.displayName = "Radio.Element";
+var RadioElement_default = Element;
+//# sourceMappingURL=RadioElement.js.map

package/lib/cjs/components/form/Radio/RadioElement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${(p) => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/form/Radio/RadioElement.stories.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  RadioElement: () => RadioElement,
+  default: () => RadioElement_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_index = __toModule(require("./index"));
+var RadioElement_stories_default = {
+  title: "Form/Radio"
+};
+const Template = () => {
+  const sections = [
+    { title: "default" },
+    { title: "success" },
+    { title: "error" }
+  ];
+  return sections.map(({ title }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    mb: "3rem",
+    rowGap: "1rem",
+    flexDirection: "column",
+    key: title
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "h2",
+    textTransform: "uppercase"
+  }, title), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    currentValue: "third",
+    onChange: () => {
+    },
+    name: title
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "unselected",
+    value: "first",
+    variant: title
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "selected",
+    value: "third",
+    variant: title
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "disabled",
+    value: "two",
+    variant: title,
+    disabled: true
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.Element, {
+    label: "selected and disabled",
+    value: "two",
+    variant: title,
+    disabled: true,
+    checked: true
+  }))));
+};
+const RadioElement = Template.bind({});
+//# sourceMappingURL=RadioElement.stories.js.map

package/lib/cjs/components/form/Radio/RadioElement.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Radio/RadioElement.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Radio from \"./index\";\nimport type { RadioElementProps } from \"./RadioElement\";\n\nexport default {\n  title: \"Form/Radio\",\n};\n\nconst Template = () => {\n  const sections: Array<{ title: NonNullable<RadioElementProps[\"variant\"]> }> = [\n    { title: \"default\" },\n    { title: \"success\" },\n    { title: \"error\" },\n  ];\n\n  return sections.map(({ title }) => (\n    <Flex mb=\"3rem\" rowGap=\"1rem\" flexDirection=\"column\" key={title}>\n      <Text variant=\"h2\" textTransform=\"uppercase\">\n        {title}\n      </Text>\n      <Radio currentValue=\"third\" onChange={() => {}} name={title}>\n        <Radio.Element label=\"unselected\" value=\"first\" variant={title} />\n        <Radio.Element label=\"selected\" value=\"third\" variant={title} />\n        <Radio.Element label=\"disabled\" value=\"two\" variant={title} disabled />\n        <Radio.Element label=\"selected and disabled\" value=\"two\" variant={title} disabled checked />\n      </Radio>\n    </Flex>\n  ));\n};\n\nexport const RadioElement = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAiB;AACjB,mBAAkB;AAGlB,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA;AAGT,MAAM,WAAW,MAAM;AACrB,QAAM,WAAwE;AAAA,IAC5E,EAAE,OAAO;AAAA,IACT,EAAE,OAAO;AAAA,IACT,EAAE,OAAO;AAAA;AAGX,SAAO,SAAS,IAAI,CAAC,EAAE,YACrB,mDAAC,qBAAD;AAAA,IAAM,IAAG;AAAA,IAAO,QAAO;AAAA,IAAO,eAAc;AAAA,IAAS,KAAK;AAAA,KACxD,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAK,eAAc;AAAA,KAC9B,QAEH,mDAAC,sBAAD;AAAA,IAAO,cAAa;AAAA,IAAQ,UAAU,MAAM;AAAA;AAAA,IAAI,MAAM;AAAA,KACpD,mDAAC,qBAAM,SAAP;AAAA,IAAe,OAAM;AAAA,IAAa,OAAM;AAAA,IAAQ,SAAS;AAAA,MACzD,mDAAC,qBAAM,SAAP;AAAA,IAAe,OAAM;AAAA,IAAW,OAAM;AAAA,IAAQ,SAAS;AAAA,MACvD,mDAAC,qBAAM,SAAP;AAAA,IAAe,OAAM;AAAA,IAAW,OAAM;AAAA,IAAM,SAAS;AAAA,IAAO,UAAQ;AAAA,MACpE,mDAAC,qBAAM,SAAP;AAAA,IAAe,OAAM;AAAA,IAAwB,OAAM;AAAA,IAAM,SAAS;AAAA,IAAO,UAAQ;AAAA,IAAC,SAAO;AAAA;AAAA;AAM1F,MAAM,eAAe,SAAS,KAAK;",
+  "names": []
+}