@nextui-org/react 1.0.1-alpha.55 → 1.0.1-alpha.56

package/cjs/index.d.ts

@@ -49,3 +49,4 @@ export { default as Modal } from './modal';
 export { default as useModal } from './modal/use-modal';
 export { default as Backdrop } from './backdrop';
 export { default as Collapse } from './collapse';
+export { default as Progress } from './progress';

package/cjs/index.js

@@ -44,10 +44,11 @@ var _exportNames = {
   useModal: true,
   Backdrop: true,
   Collapse: true,
+  Progress: true,
   KeyMod: true,
   KeyCode: true
 };
-exports.KeyCode = exports.KeyMod = exports.Collapse = exports.Backdrop = exports.useModal = exports.Modal = exports.Textarea = exports.Input = exports.Tooltip = exports.Snippet = exports.Container = exports.Code = exports.Divider = exports.Col = exports.Row = exports.Image = exports.Card = exports.Grid = exports.Button = exports.Loading = exports.Link = exports.User = exports.Spacer = exports.Switch = exports.Radio = exports.Text = exports.Checkbox = exports.CssBaseline = exports.Avatar = exports.useKeyboard = exports.useInput = exports.useClickAnywhere = exports.useClipboard = exports.useClickAway = exports.useBodyScroll = exports.useSSR = exports.usePortal = exports.useTheme = exports.useResize = exports.useRealShape = exports.useCurrentState = exports.ThemeProvider = void 0;
+exports.KeyCode = exports.KeyMod = exports.Progress = exports.Collapse = exports.Backdrop = exports.useModal = exports.Modal = exports.Textarea = exports.Input = exports.Tooltip = exports.Snippet = exports.Container = exports.Code = exports.Divider = exports.Col = exports.Row = exports.Image = exports.Card = exports.Grid = exports.Button = exports.Loading = exports.Link = exports.User = exports.Spacer = exports.Switch = exports.Radio = exports.Text = exports.Checkbox = exports.CssBaseline = exports.Avatar = exports.useKeyboard = exports.useInput = exports.useClickAnywhere = exports.useClipboard = exports.useClickAway = exports.useBodyScroll = exports.useSSR = exports.usePortal = exports.useTheme = exports.useResize = exports.useRealShape = exports.useCurrentState = exports.ThemeProvider = void 0;
 
 var _types = require("./theme/types");
 
@@ -259,6 +260,10 @@ var _collapse = _interopRequireDefault(require("./collapse"));
 
 exports.Collapse = _collapse.default;
 
+var _progress = _interopRequireDefault(require("./progress"));
+
+exports.Progress = _progress.default;
+
 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; }

package/cjs/progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/cjs/progress/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _progress = _interopRequireDefault(require("./progress"));
+
+var _default = _progress.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/progress/progress.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { NormalColors, NormalSizes } from '../utils/prop-types';
+interface Props {
+    value: number;
+    striped?: boolean;
+    animated?: boolean;
+    squared?: boolean;
+    indeterminated?: boolean;
+    shadow?: boolean;
+    max?: number;
+    min?: number;
+    color?: NormalColors | string;
+    status?: NormalColors | string;
+    size?: NormalSizes;
+    className?: string;
+}
+declare const defaultProps: {
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+};
+declare type NativeAttrs = Omit<Partial<React.ProgressHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>, keyof Props>;
+export declare type ProgressBarProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+}> & Omit<Props & {
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+} & NativeAttrs, "value" | "className" | "animated" | "color" | "status" | "size" | "squared" | "max" | "min" | "shadow" | "striped" | "indeterminated">>;
+export default _default;

package/cjs/progress/progress.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _color = require("../utils/color");
+
+var _styles = require("./styles");
+
+var _numbers = require("../utils/numbers");
+
+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 = {
+  color: 'primary',
+  status: 'default',
+  size: 'medium',
+  striped: false,
+  animated: true,
+  squared: false,
+  shadow: false,
+  indeterminated: false,
+  value: 0,
+  min: 0,
+  max: 100,
+  className: ''
+};
+
+const ProgressBar = ({
+  color,
+  value: valueProp,
+  max,
+  min,
+  striped,
+  status,
+  animated,
+  shadow,
+  squared,
+  size,
+  indeterminated,
+  className,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const value = (0, _react.useMemo)(() => valueProp > max ? max : valueProp < min ? min : valueProp, [valueProp, min, max]);
+  const percent = (0, _react.useMemo)(() => (0, _numbers.valueToPercent)(valueProp, min, max), [valueProp, min, max]);
+  const fillerColor = (0, _react.useMemo)(() => (0, _color.getNormalColor)(color, theme.palette, theme.palette.primary), [color, theme.palette]);
+  const shadowColor = (0, _react.useMemo)(() => shadow ? (0, _styles.getShadowColor)(color, theme.palette) : 'none', [color, shadow, theme.palette]);
+  const {
+    height,
+    radius
+  } = (0, _react.useMemo)(() => (0, _styles.getSizes)(size, squared), [size, squared]);
+  const bgColor = (0, _react.useMemo)(() => {
+    if (status === 'default') {
+      return theme.palette.accents_2;
+    }
+
+    const normalColor = (0, _color.getNormalColor)(status, theme.palette, theme.palette.accents_2);
+    return (0, _color.addColorAlpha)(normalColor, 0.2);
+  }, [status, theme.palette]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["1976762788", [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('progress', className) || ""),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+      visible: true,
+      name: "progress-wrapper",
+      enterTime: 0,
+      leaveTime: 0,
+      clearTime: 300,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        ...props,
+        className: _style.default.dynamic([["1976762788", [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('filler', {
+          striped,
+          indeterminated
+        }) || "")
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1976762788",
+      dynamic: [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap],
+      children: `.progress.__jsx-style-dynamic-selector{margin:0;padding:0;width:100%;height:${height};position:relative;overflow:${shadow && !indeterminated ? 'visible' : 'hidden'};background:${bgColor};border-radius:${radius};}.filler.__jsx-style-dynamic-selector{margin:0;padding:0;width:0;opacity:0;height:100%;min-width:inherit;background:${fillerColor};border-radius:inherit;-webkit-transition:${animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};transition:${animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};box-shadow:${shadowColor};}.progress-wrapper-enter.__jsx-style-dynamic-selector{opacity:0;}.progress-wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;width:${percent}%;}.filler.striped.__jsx-style-dynamic-selector{background-image: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 );background-size:${theme.layout.gap} ${theme.layout.gap};}.filler.indeterminated.__jsx-style-dynamic-selector{position:absolute;width:0%;-webkit-transition-property:background-color,width,left,border-color, opacity,shadow,-webkit-transform;-webkit-transition-property:background-color,width,left,border-color, opacity,shadow,transform;transition-property:background-color,width,left,border-color, opacity,shadow,transform;-webkit-transition-duration:300ms;transition-duration:300ms;will-change:left;min-width:50%;-webkit-animation:1s ease 0s infinite normal none running indeterminate-animation-__jsx-style-dynamic-selector;animation:1s ease 0s infinite normal none running indeterminate-animation-__jsx-style-dynamic-selector;}@-webkit-keyframes indeterminate-animation-__jsx-style-dynamic-selector{0%{left:-40%;}100%{left:100%;}}@keyframes indeterminate-animation-__jsx-style-dynamic-selector{0%{left:-40%;}100%{left:100%;}}`
+    })]
+  });
+};
+
+ProgressBar.defaultProps = defaultProps;
+
+if (_assertion.__DEV__) {
+  ProgressBar.displayName = 'NextUI - Progress';
+}
+
+var _default = (0, _withDefaults.default)( /*#__PURE__*/_react.default.memo(ProgressBar), defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/progress/styles.d.ts

@@ -0,0 +1,8 @@
+import { NextUIThemesPalette } from '../theme';
+import { NormalColors, NormalSizes } from '../utils/prop-types';
+export declare type ProgessSize = {
+    height: string;
+    radius: string;
+};
+export declare const getShadowColor: (color: NormalColors | string, palette: NextUIThemesPalette) => string;
+export declare const getSizes: (size: NormalSizes, squared: boolean) => ProgessSize;

package/cjs/progress/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getSizes = exports.getShadowColor = void 0;
+
+var _color = require("../utils/color");
+
+const getShadowColor = (color, palette) => {
+  try {
+    const hexColor = color === 'gradient' ? (0, _color.hexFromString)(palette.gradient, palette.primary, true) : (0, _color.getNormalColor)(color, palette, palette.primary);
+    const [r, g, b] = (0, _color.hexToRgb)(hexColor);
+    return `1px 2px 10px 0px rgb(${r} ${g} ${b}/ 60%);`;
+  } catch (err) {
+    return 'none';
+  }
+};
+
+exports.getShadowColor = getShadowColor;
+
+const getSizes = (size, squared) => {
+  const sizes = {
+    mini: {
+      height: '0.25rem',
+      radius: squared ? '1px' : '0.25rem'
+    },
+    small: {
+      height: '0.5rem',
+      radius: squared ? '2px' : '0.5rem'
+    },
+    medium: {
+      height: '1rem',
+      radius: squared ? '3px' : '0.75rem'
+    },
+    large: {
+      height: '1.5rem',
+      radius: squared ? '4px' : '1rem'
+    },
+    xlarge: {
+      height: '1.75rem',
+      radius: squared ? '5px' : '1.5rem'
+    }
+  };
+  if (!size) return sizes.medium;
+  return sizes[size];
+};
+
+exports.getSizes = getSizes;

package/cjs/utils/numbers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Convert a value to percentage based on lower and upper bound values
+ *
+ * @param value the value in number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
+export declare function valueToPercent(value: number, min: number, max: number): number;

package/cjs/utils/numbers.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.valueToPercent = valueToPercent;
+
+/**
+ * Convert a value to percentage based on lower and upper bound values
+ *
+ * @param value the value in number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
+function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+}

package/esm/index.d.ts

@@ -49,3 +49,4 @@ export { default as Modal } from './modal';
 export { default as useModal } from './modal/use-modal';
 export { default as Backdrop } from './backdrop';
 export { default as Collapse } from './collapse';
+export { default as Progress } from './progress';

package/esm/index.js

@@ -46,4 +46,5 @@ export { default as Textarea } from './textarea';
 export { default as Modal } from './modal';
 export { default as useModal } from './modal/use-modal';
 export { default as Backdrop } from './backdrop';
-export { default as Collapse } from './collapse';
+export { default as Collapse } from './collapse';
+export { default as Progress } from './progress';

package/esm/progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/esm/progress/index.js

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/esm/progress/progress.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { NormalColors, NormalSizes } from '../utils/prop-types';
+interface Props {
+    value: number;
+    striped?: boolean;
+    animated?: boolean;
+    squared?: boolean;
+    indeterminated?: boolean;
+    shadow?: boolean;
+    max?: number;
+    min?: number;
+    color?: NormalColors | string;
+    status?: NormalColors | string;
+    size?: NormalSizes;
+    className?: string;
+}
+declare const defaultProps: {
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+};
+declare type NativeAttrs = Omit<Partial<React.ProgressHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>, keyof Props>;
+export declare type ProgressBarProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+}> & Omit<Props & {
+    color: string;
+    status: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    striped: boolean;
+    animated: boolean;
+    squared: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+    className: string;
+} & NativeAttrs, "value" | "className" | "animated" | "color" | "status" | "size" | "squared" | "max" | "min" | "shadow" | "striped" | "indeterminated">>;
+export default _default;

package/esm/progress/progress.js

@@ -0,0 +1,93 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import CSSTransition from '../utils/css-transition';
+import withDefaults from '../utils/with-defaults';
+import { addColorAlpha, getNormalColor } from '../utils/color';
+import { getShadowColor, getSizes } from './styles';
+import { valueToPercent } from '../utils/numbers';
+import clsx from '../utils/clsx';
+import { __DEV__ } from '../utils/assertion';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultProps = {
+  color: 'primary',
+  status: 'default',
+  size: 'medium',
+  striped: false,
+  animated: true,
+  squared: false,
+  shadow: false,
+  indeterminated: false,
+  value: 0,
+  min: 0,
+  max: 100,
+  className: ''
+};
+
+const ProgressBar = ({
+  color,
+  value: valueProp,
+  max,
+  min,
+  striped,
+  status,
+  animated,
+  shadow,
+  squared,
+  size,
+  indeterminated,
+  className,
+  ...props
+}) => {
+  const theme = useTheme();
+  const value = useMemo(() => valueProp > max ? max : valueProp < min ? min : valueProp, [valueProp, min, max]);
+  const percent = useMemo(() => valueToPercent(valueProp, min, max), [valueProp, min, max]);
+  const fillerColor = useMemo(() => getNormalColor(color, theme.palette, theme.palette.primary), [color, theme.palette]);
+  const shadowColor = useMemo(() => shadow ? getShadowColor(color, theme.palette) : 'none', [color, shadow, theme.palette]);
+  const {
+    height,
+    radius
+  } = useMemo(() => getSizes(size, squared), [size, squared]);
+  const bgColor = useMemo(() => {
+    if (status === 'default') {
+      return theme.palette.accents_2;
+    }
+
+    const normalColor = getNormalColor(status, theme.palette, theme.palette.accents_2);
+    return addColorAlpha(normalColor, 0.2);
+  }, [status, theme.palette]);
+  return /*#__PURE__*/_jsxs("div", { ...props,
+    className: _JSXStyle.dynamic([["1976762788", [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('progress', className) || ""),
+    children: [/*#__PURE__*/_jsx(CSSTransition, {
+      visible: true,
+      name: "progress-wrapper",
+      enterTime: 0,
+      leaveTime: 0,
+      clearTime: 300,
+      children: /*#__PURE__*/_jsx("div", {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        ...props,
+        className: _JSXStyle.dynamic([["1976762788", [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('filler', {
+          striped,
+          indeterminated
+        }) || "")
+      })
+    }), /*#__PURE__*/_jsx(_JSXStyle, {
+      id: "1976762788",
+      dynamic: [height, shadow && !indeterminated ? 'visible' : 'hidden', bgColor, radius, fillerColor, animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none', shadowColor, percent, theme.layout.gap, theme.layout.gap],
+      children: `.progress.__jsx-style-dynamic-selector{margin:0;padding:0;width:100%;height:${height};position:relative;overflow:${shadow && !indeterminated ? 'visible' : 'hidden'};background:${bgColor};border-radius:${radius};}.filler.__jsx-style-dynamic-selector{margin:0;padding:0;width:0;opacity:0;height:100%;min-width:inherit;background:${fillerColor};border-radius:inherit;-webkit-transition:${animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};transition:${animated ? 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};box-shadow:${shadowColor};}.progress-wrapper-enter.__jsx-style-dynamic-selector{opacity:0;}.progress-wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;width:${percent}%;}.filler.striped.__jsx-style-dynamic-selector{background-image: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 );background-size:${theme.layout.gap} ${theme.layout.gap};}.filler.indeterminated.__jsx-style-dynamic-selector{position:absolute;width:0%;-webkit-transition-property:background-color,width,left,border-color, opacity,shadow,-webkit-transform;-webkit-transition-property:background-color,width,left,border-color, opacity,shadow,transform;transition-property:background-color,width,left,border-color, opacity,shadow,transform;-webkit-transition-duration:300ms;transition-duration:300ms;will-change:left;min-width:50%;-webkit-animation:1s ease 0s infinite normal none running indeterminate-animation-__jsx-style-dynamic-selector;animation:1s ease 0s infinite normal none running indeterminate-animation-__jsx-style-dynamic-selector;}@-webkit-keyframes indeterminate-animation-__jsx-style-dynamic-selector{0%{left:-40%;}100%{left:100%;}}@keyframes indeterminate-animation-__jsx-style-dynamic-selector{0%{left:-40%;}100%{left:100%;}}`
+    })]
+  });
+};
+
+ProgressBar.defaultProps = defaultProps;
+
+if (__DEV__) {
+  ProgressBar.displayName = 'NextUI - Progress';
+}
+
+export default withDefaults( /*#__PURE__*/React.memo(ProgressBar), defaultProps);

package/esm/progress/styles.d.ts

@@ -0,0 +1,8 @@
+import { NextUIThemesPalette } from '../theme';
+import { NormalColors, NormalSizes } from '../utils/prop-types';
+export declare type ProgessSize = {
+    height: string;
+    radius: string;
+};
+export declare const getShadowColor: (color: NormalColors | string, palette: NextUIThemesPalette) => string;
+export declare const getSizes: (size: NormalSizes, squared: boolean) => ProgessSize;

package/esm/progress/styles.js

@@ -0,0 +1,36 @@
+import { hexFromString, getNormalColor, hexToRgb } from '../utils/color';
+export const getShadowColor = (color, palette) => {
+  try {
+    const hexColor = color === 'gradient' ? hexFromString(palette.gradient, palette.primary, true) : getNormalColor(color, palette, palette.primary);
+    const [r, g, b] = hexToRgb(hexColor);
+    return `1px 2px 10px 0px rgb(${r} ${g} ${b}/ 60%);`;
+  } catch (err) {
+    return 'none';
+  }
+};
+export const getSizes = (size, squared) => {
+  const sizes = {
+    mini: {
+      height: '0.25rem',
+      radius: squared ? '1px' : '0.25rem'
+    },
+    small: {
+      height: '0.5rem',
+      radius: squared ? '2px' : '0.5rem'
+    },
+    medium: {
+      height: '1rem',
+      radius: squared ? '3px' : '0.75rem'
+    },
+    large: {
+      height: '1.5rem',
+      radius: squared ? '4px' : '1rem'
+    },
+    xlarge: {
+      height: '1.75rem',
+      radius: squared ? '5px' : '1.5rem'
+    }
+  };
+  if (!size) return sizes.medium;
+  return sizes[size];
+};

package/esm/utils/numbers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Convert a value to percentage based on lower and upper bound values
+ *
+ * @param value the value in number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
+export declare function valueToPercent(value: number, min: number, max: number): number;

package/esm/utils/numbers.js

@@ -0,0 +1,10 @@
+/**
+ * Convert a value to percentage based on lower and upper bound values
+ *
+ * @param value the value in number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
+export function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "1.0.1-alpha.55",
+  "version": "1.0.1-alpha.56",
   "license": "MIT",
   "description": "🚀 Beautiful and modern React UI library.",
   "homepage": "https://nextui.org",

package/progress/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "../cjs/progress/index.js",
+  "module": "../esm/progress/index.js",
+  "types": "../esm/progress/index.d.ts"
+}