glints-aries 4.0.183 → 4.0.184

package/es/@next/RadioButton/RadioButton.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+import React from 'react';
+import { LabelWrapper, RadioButtonInput, RadioButtonWrapper } from './RadioButtonStyle';
+import { Typography } from '../Typography';
+import { Colors } from '..';
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export var RadioButton = function RadioButton(_ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RadioButtonWrapper, null, /*#__PURE__*/React.createElement(RadioButtonInput, _extends({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/React.createElement(LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    as: "span",
+    color: Colors.Neutral.B18
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: Colors.Neutral.B40
+  }, helperText)));
+};

package/es/@next/RadioButton/RadioButton.stories.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { RadioButton } from './RadioButton';
+import { Typography } from '../Typography';
+RadioButton.displayName = 'RadioButton';
+export default {
+  title: '@next/RadioButton',
+  component: RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(RadioButton, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+export var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = useState('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};

package/es/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Breakpoints, Colors } from '..';
+import { space4, space8 } from '../utilities/spacing';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var RadioButtonWrapper = styled.label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], space8, space4);
+export var RadioButtonInput = styled.input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], Colors.Neutral.B68, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, space4, Colors.Neutral.B68, Colors.Neutral.B100, Colors.Blue.S54, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Blue.S99, Colors.Blue.S99, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Neutral.B85);
+export var LabelWrapper = styled.div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span{color:", ";}cursor:not-allowed;}"], space4, Colors.Neutral.B85);

package/es/@next/RadioButton/index.js

@@ -0,0 +1 @@
+export * from './RadioButton';

package/es/@next/index.js

@@ -16,6 +16,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/es/src/@next/RadioButton/RadioButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: ({ label, helperText, disabled, name, checked, value, onChange, ...props }: RadioButtonProps) => JSX.Element;

package/es/src/@next/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const ControlledRadioButton: () => JSX.Element;

package/es/src/@next/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const RadioButtonWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const RadioButtonInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/src/@next/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioButton';

package/es/src/@next/index.d.ts

@@ -15,6 +15,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/lib/@next/RadioButton/RadioButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _RadioButtonStyle = require("./RadioButtonStyle");
+var _Typography = require("../Typography");
+var _ = require("..");
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+var RadioButton = function RadioButton(_ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonInput, (0, _extends2["default"])({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    as: "span",
+    color: _.Colors.Neutral.B18
+  }, label), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: _.Colors.Neutral.B40
+  }, helperText)));
+};
+exports.RadioButton = RadioButton;

package/lib/@next/RadioButton/RadioButton.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Interactive = exports.ControlledRadioButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _RadioButton = require("./RadioButton");
+var _Typography = require("../Typography");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+_RadioButton.RadioButton.displayName = 'RadioButton';
+var _default = {
+  title: '@next/RadioButton',
+  component: _RadioButton.RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, args);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = (0, _react.useState)('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};
+exports.ControlledRadioButton = ControlledRadioButton;

package/lib/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButtonWrapper = exports.RadioButtonInput = exports.LabelWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _borderRadius = require("../utilities/borderRadius");
+var RadioButtonWrapper = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], _spacing.space8, _spacing.space4);
+exports.RadioButtonWrapper = RadioButtonWrapper;
+var RadioButtonInput = _styledComponents["default"].input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
+exports.RadioButtonInput = RadioButtonInput;
+var LabelWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span{color:", ";}cursor:not-allowed;}"], _spacing.space4, _.Colors.Neutral.B85);
+exports.LabelWrapper = LabelWrapper;

package/lib/@next/RadioButton/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _RadioButton = require("./RadioButton");
+Object.keys(_RadioButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadioButton[key]) return;
+  exports[key] = _RadioButton[key];
+});

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
+exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -57,6 +57,9 @@ exports.PaginationProps = _Pagination.PaginationProps;
 var _Popover = require("./Popover");
 exports.Popover = _Popover.Popover;
 exports.PopoverProps = _Popover.PopoverProps;
+var _RadioButton = require("./RadioButton");
+exports.RadioButton = _RadioButton.RadioButton;
+exports.RadioButtonProps = _RadioButton.RadioButtonProps;
 var _Tabs = require("./Tabs");
 exports.Tab = _Tabs.Tab;
 exports.TabModel = _Tabs.TabModel;

package/lib/src/@next/RadioButton/RadioButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: ({ label, helperText, disabled, name, checked, value, onChange, ...props }: RadioButtonProps) => JSX.Element;

package/lib/src/@next/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const ControlledRadioButton: () => JSX.Element;

package/lib/src/@next/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const RadioButtonWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const RadioButtonInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/src/@next/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioButton';

package/lib/src/@next/index.d.ts

@@ -15,6 +15,7 @@ export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
+export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.183",
+  "version": "4.0.184",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",