@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/progress/progress.styles.js

@@ -0,0 +1,165 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledProgressBar = exports.StyledProgress = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+var _color = require("../utils/color");
+
+var _theme$colors, _theme$colors$primary, _theme$colors2, _theme$colors2$second, _theme$colors3, _theme$colors3$succes, _theme$colors4, _theme$colors4$warnin, _theme$colors5, _theme$colors5$error;
+
+const indeterminateAnimation = (0, _stitches.keyframes)({
+  '0%': {
+    left: '-40%'
+  },
+  '100%': {
+    left: '100%'
+  }
+});
+const StyledProgress = (0, _stitches.styled)('div', {
+  margin: 0,
+  padding: 0,
+  width: '100%',
+  position: 'relative',
+  overflow: 'visible',
+  variants: {
+    color: {
+      defuault: {
+        $$progressColor: '$colors$primary',
+        $$progressShadowColor: '$colors$primaryLight'
+      },
+      primary: {
+        $$progressColor: '$colors$primary',
+        $$progressShadowColor: '$colors$primaryLight'
+      },
+      secondary: {
+        $$progressColor: '$colors$secondary',
+        $$progressShadowColor: '$colors$secondaryLight'
+      },
+      success: {
+        $$progressColor: '$colors$success',
+        $$progressShadowColor: '$colors$successLight'
+      },
+      warning: {
+        $$progressColor: '$colors$warning',
+        $$progressShadowColor: '$colors$warningLight'
+      },
+      error: {
+        $$progressColor: '$colors$error',
+        $$progressShadowColor: '$colors$errorLight'
+      },
+      gradient: {
+        $$progressColor: '$colors$gradient',
+        $$progressShadowColor: '$colors$primaryLight'
+      }
+    },
+    status: {
+      default: {
+        bg: '$accents2'
+      },
+      primary: {
+        bg: (0, _color.addColorAlpha)((_theme$colors = _stitches.theme.colors) == null ? void 0 : (_theme$colors$primary = _theme$colors.primary) == null ? void 0 : _theme$colors$primary.value, 0.2)
+      },
+      secondary: {
+        bg: (0, _color.addColorAlpha)((_theme$colors2 = _stitches.theme.colors) == null ? void 0 : (_theme$colors2$second = _theme$colors2.secondary) == null ? void 0 : _theme$colors2$second.value, 0.2)
+      },
+      success: {
+        bg: (0, _color.addColorAlpha)((_theme$colors3 = _stitches.theme.colors) == null ? void 0 : (_theme$colors3$succes = _theme$colors3.success) == null ? void 0 : _theme$colors3$succes.value, 0.2)
+      },
+      warning: {
+        bg: (0, _color.addColorAlpha)((_theme$colors4 = _stitches.theme.colors) == null ? void 0 : (_theme$colors4$warnin = _theme$colors4.warning) == null ? void 0 : _theme$colors4$warnin.value, 0.2)
+      },
+      error: {
+        bg: (0, _color.addColorAlpha)((_theme$colors5 = _stitches.theme.colors) == null ? void 0 : (_theme$colors5$error = _theme$colors5.error) == null ? void 0 : _theme$colors5$error.value, 0.2)
+      }
+    },
+    size: {
+      xs: {
+        $$progressHeight: '$space$2',
+        height: '$$progressHeight',
+        br: '$$progressHeight'
+      },
+      sm: {
+        $$progressHeight: '$space$4',
+        height: '$$progressHeight',
+        br: '$$progressHeight'
+      },
+      md: {
+        $$progressHeight: '$space$8',
+        height: '$$progressHeight',
+        br: '$$progressHeight'
+      },
+      lg: {
+        $$progressHeight: '$space$10',
+        height: '$$progressHeight',
+        br: '$$progressHeight'
+      },
+      xl: {
+        $$progressHeight: '$space$11',
+        height: '$$progressHeight',
+        br: '$$progressHeight'
+      }
+    },
+    indeterminated: {
+      true: {
+        overflow: 'hidden'
+      }
+    },
+    squared: {
+      true: {
+        br: 'calc($$progressHeight * 0.25)'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'defuault',
+    status: 'default',
+    size: 'md'
+  }
+});
+exports.StyledProgress = StyledProgress;
+const StyledProgressBar = (0, _stitches.styled)('div', {
+  margin: 0,
+  padding: 0,
+  width: 0,
+  opacity: 0,
+  height: '100%',
+  minWidth: 'inherit',
+  bg: '$$progressColor',
+  br: 'inherit',
+  transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+  '@motion': {
+    transition: 'none'
+  },
+  variants: {
+    animated: {
+      false: {
+        transition: 'none'
+      }
+    },
+    shadow: {
+      true: {
+        normalShadowVar: '$$progressShadowColor'
+      }
+    },
+    striped: {
+      true: {
+        backgroundImage: 'linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)',
+        backgroundSize: '$space$lg $space$lg'
+      }
+    },
+    indeterminated: {
+      true: {
+        position: 'absolute',
+        width: '0%',
+        transitionProperty: 'background-color, width, left, border-color,opacity, shadow, transform',
+        transitionDuration: '300ms',
+        willChange: 'left',
+        minWidth: '50%',
+        animation: `1s ease 0s infinite normal none running ${indeterminateAnimation}`
+      }
+    }
+  }
+});
+exports.StyledProgressBar = StyledProgressBar;

package/esm/radio/index.d.ts

@@ -0,0 +1,4 @@
+import Radio from './radio';
+export { StyledRadioInput, StyledRadioLabel, StyledRadioPoint, StyledRadio, StyledRadioGroup, StyledRadioDescription } from './radio.styles';
+export type { RadioVariantsProps, RadioLabelVariantsProps, RadioGroupVariantsProps } from './radio.styles';
+export default Radio;

package/esm/radio/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledRadioPoint = exports.StyledRadioLabel = exports.StyledRadioInput = exports.StyledRadioGroup = exports.StyledRadioDescription = exports.StyledRadio = void 0;
+
+var _radio = _interopRequireDefault(require("./radio"));
+
+var _radioGroup = _interopRequireDefault(require("./radio-group"));
+
+var _radio2 = require("./radio.styles");
+
+exports.StyledRadioInput = _radio2.StyledRadioInput;
+exports.StyledRadioLabel = _radio2.StyledRadioLabel;
+exports.StyledRadioPoint = _radio2.StyledRadioPoint;
+exports.StyledRadio = _radio2.StyledRadio;
+exports.StyledRadioGroup = _radio2.StyledRadioGroup;
+exports.StyledRadioDescription = _radio2.StyledRadioDescription;
+_radio.default.Group = _radioGroup.default;
+_radio.default.Description = _radio2.StyledRadioDescription;
+_radio.default.Desc = _radio2.StyledRadioDescription;
+var _default = _radio.default;
+exports.default = _default;

package/esm/radio/radio-context.d.ts

@@ -0,0 +1,13 @@
+import { NormalColors, NormalSizes } from '../utils/prop-types';
+import React from 'react';
+export interface RadioConfig {
+    disabledAll: boolean;
+    size?: NormalSizes;
+    color?: NormalColors;
+    textColor?: NormalColors;
+    value?: string | number;
+    inGroup: boolean;
+    updateState?: (value: string | number) => void;
+}
+export declare const RadioContext: React.Context<RadioConfig>;
+export declare const useRadioContext: () => RadioConfig;

package/esm/radio/radio-context.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useRadioContext = exports.RadioContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  color: 'primary',
+  size: 'md',
+  textColor: 'default',
+  disabledAll: false,
+  inGroup: false
+};
+
+const RadioContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.RadioContext = RadioContext;
+
+const useRadioContext = () => _react.default.useContext(RadioContext);
+
+exports.useRadioContext = useRadioContext;

package/esm/radio/radio-group.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { NormalSizes, SimpleColors } from '../utils/prop-types';
+import { RadioGroupVariantsProps } from './radio.styles';
+import { CSS } from '../theme/stitches.config';
+interface Props {
+    value?: string | number;
+    initialValue?: string | number;
+    disabled?: boolean;
+    color?: SimpleColors;
+    textColor?: SimpleColors;
+    size?: NormalSizes;
+    onChange?: (value: string | number) => void;
+}
+declare const defaultProps: {
+    disabled: boolean;
+    size: number | "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type RadioGroupProps = Props & typeof defaultProps & NativeAttrs & RadioGroupVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    disabled: boolean;
+    size: number | "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+}> & Omit<React.PropsWithChildren<RadioGroupProps>, "color" | "size" | "textColor" | "disabled">>;
+export default _default;

package/esm/radio/radio-group.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _radioContext = require("./radio-context");
+
+var _radio = require("./radio.styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const defaultProps = {
+  disabled: false,
+  size: 'md',
+  color: 'default',
+  textColor: 'default'
+};
+
+const RadioGroup = ({
+  disabled,
+  onChange,
+  value,
+  size,
+  color,
+  textColor,
+  children,
+  initialValue,
+  ...props
+}) => {
+  const [selfVal, setSelfVal] = (0, _react.useState)(initialValue);
+
+  const updateState = nextValue => {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  };
+
+  const providerValue = (0, _react.useMemo)(() => {
+    return {
+      updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      size,
+      color,
+      textColor,
+      value: selfVal
+    };
+  }, [disabled, selfVal]);
+  (0, _react.useEffect)(() => {
+    if (value === undefined) return;
+    setSelfVal(value);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_radioContext.RadioContext.Provider, {
+    value: providerValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.StyledRadioGroup, {
+      role: "radiogroup",
+      size: size,
+      ...props,
+      children: children
+    })
+  });
+};
+
+RadioGroup.toString = () => '.nextui-radio-group';
+
+var _default = (0, _withDefaults.default)(RadioGroup, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/radio/radio.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import RadioGroup from './radio-group';
+import { SimpleColors, NormalSizes } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { StyledRadioDescription, RadioVariantsProps } from './radio.styles';
+interface RadioEventTarget {
+    checked: boolean;
+}
+export interface RadioEvent {
+    target: RadioEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    value?: string | number;
+    size?: NormalSizes;
+    color?: SimpleColors;
+    textColor?: SimpleColors;
+    disabled?: boolean;
+    preventDefault?: boolean;
+    onChange?: (e: RadioEvent) => void;
+}
+declare const defaultProps: {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    disabled: boolean;
+    preventDefault: boolean;
+};
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<unknown>, keyof Props>;
+export declare type RadioProps = Props & typeof defaultProps & NativeAttrs & RadioVariantsProps & {
+    css?: CSS;
+};
+declare type RadioComponent<P = {}> = React.FC<P> & {
+    Group: typeof RadioGroup;
+    Desc: typeof StyledRadioDescription;
+    Description: typeof StyledRadioDescription;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs & RadioVariantsProps & {
+    css?: CSS;
+};
+declare const _default: RadioComponent<ComponentProps>;
+export default _default;

package/esm/radio/radio.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _radioContext = require("./radio-context");
+
+var _collections = require("../utils/collections");
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _radio = require("./radio.styles");
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const defaultProps = {
+  size: 'md',
+  color: 'default',
+  textColor: 'default',
+  disabled: false,
+  preventDefault: true
+};
+const preClass = 'nextui-radio';
+
+const Radio = ({
+  checked,
+  onChange,
+  disabled,
+  color,
+  size,
+  textColor,
+  value: radioValue,
+  preventDefault,
+  children,
+  ...props
+}) => {
+  const [selfChecked, setSelfChecked] = (0, _react.useState)(!!checked);
+  const {
+    value: groupValue,
+    disabledAll,
+    inGroup,
+    color: groupColor,
+    size: groupSize,
+    textColor: textGroupColor,
+    updateState
+  } = (0, _radioContext.useRadioContext)();
+  const [withoutDescChildren, DescChildren] = (0, _collections.pickChild)(children, _radio.StyledRadioDescription);
+
+  if (inGroup && _assertion.__DEV__) {
+    if (checked !== undefined) {
+      (0, _useWarning.default)('Remove props "checked" if in the Radio.Group.', 'Radio');
+    }
+
+    if (radioValue === undefined) {
+      (0, _useWarning.default)('Props "value" must be deinfed if in the Radio.Group.', 'Radio');
+    }
+  }
+
+  (0, _react.useEffect)(() => {
+    setSelfChecked(groupValue === radioValue);
+  }, [groupValue, radioValue]);
+  const isDisabled = (0, _react.useMemo)(() => disabled || disabledAll, [disabled, disabledAll]);
+  const radioColor = color !== 'default' ? color : groupColor;
+  const radioSize = size !== 'md' ? size : groupSize;
+  const labelColor = textColor !== 'default' ? textColor : textGroupColor;
+
+  const changeHandler = event => {
+    if (isDisabled || inGroup && selfChecked) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: event.stopPropagation,
+      preventDefault: event.preventDefault,
+      nativeEvent: event
+    };
+    setSelfChecked(!selfChecked);
+
+    if (inGroup) {
+      updateState && updateState(radioValue);
+    }
+
+    onChange && onChange(selfEvent);
+  };
+
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(event => {
+    changeHandler(event);
+  }, [_useKeyboard.KeyCode.Enter, _useKeyboard.KeyCode.Space], {
+    disableGlobalEvent: true,
+    preventDefault
+  });
+  (0, _react.useEffect)(() => {
+    if (checked === undefined) return;
+    setSelfChecked(Boolean(checked));
+  }, [checked]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radio.StyledRadio, {
+    "aria-checked": selfChecked,
+    disabled: isDisabled,
+    active: selfChecked,
+    size: radioSize,
+    color: radioColor,
+    ...props,
+    ...bindings,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.StyledRadioInput, {
+      type: "radio",
+      tabIndex: -1,
+      value: radioValue,
+      checked: selfChecked,
+      onChange: changeHandler,
+      className: `${preClass}-input`,
+      ...props
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radio.StyledRadioLabel, {
+      color: labelColor,
+      disabled: isDisabled,
+      className: `${preClass}-name`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.StyledRadioPoint, {
+        tabIndex: isDisabled ? -1 : 0,
+        className: (0, _clsx.default)(`${preClass}-point`, {
+          [`${preClass}-active`]: selfChecked,
+          [`${preClass}-disabled`]: isDisabled
+        })
+      }), withoutDescChildren]
+    }), DescChildren && DescChildren]
+  });
+};
+
+Radio.defaultProps = defaultProps;
+
+if (_assertion.__DEV__) {
+  Radio.displayName = 'NextUI - Radio';
+}
+
+Radio.toString = () => '.nextui-radio';
+
+var _default = (0, _withDefaults.default)(Radio, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;