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

package/esm/utils/collections.js

@@ -46,4 +46,25 @@ export const isBrowser = () => {
 export const isMac = () => {
   if (!isBrowser()) return false;
   return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+};
+export const setChildrenIndex = (children, targetComponents = []) => {
+  if (React.Children.count(children) === 0) return [];
+  const allowAll = targetComponents.length === 0;
+
+  const clone = (child, props = {}) => /*#__PURE__*/React.cloneElement(child, props);
+
+  let index = 0;
+  return React.Children.map(children, item => {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    index = index + 1;
+    if (allowAll) return clone(item, {
+      index
+    });
+    const isAllowed = targetComponents.find(child => child === item.type);
+    if (isAllowed) return clone(item, {
+      index
+    });
+    index = index - 1;
+    return item;
+  });
 };

package/esm/utils/css-transition.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import withDefaults from './with-defaults';
+import withDefaults from '../utils/with-defaults';
 const defaultProps = {
   visible: false,
   enterTime: 60,

package/esm/{button/button.drip.d.ts → utils/drip.d.ts}

@@ -1,20 +1,24 @@
 import React from 'react';
 interface Props {
+    visible: boolean;
     x: number;
     y: number;
     onCompleted: () => void;
     color?: string;
 }
 declare const defaultProps: {
+    visible: boolean;
     x: number;
     y: number;
 };
-export declare type ButtonDripProps = Props & typeof defaultProps;
+export declare type DripProps = Props & typeof defaultProps;
 declare const _default: React.ComponentType<Partial<{
+    visible: boolean;
     x: number;
     y: number;
 }> & Omit<Props & {
+    visible: boolean;
     x: number;
     y: number;
-}, "x" | "y">>;
+}, "visible" | "x" | "y">>;
 export default _default;

package/esm/{button/button.drip.js → utils/drip.js}

@@ -4,11 +4,13 @@ import withDefaults from '../utils/with-defaults';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
+  visible: false,
   x: 0,
   y: 0
 };
 
-const ButtonDrip = ({
+const Drip = ({
+  visible,
   x,
   y,
   color,
@@ -26,10 +28,11 @@ const ButtonDrip = ({
       dripRef.current.removeEventListener('animationend', onCompleted);
     };
   });
+  if (!visible) return null;
   return /*#__PURE__*/_jsxs("div", {
     ref: dripRef,
     ...props,
-    className: "jsx-3620568258" + " " + (props && props.className != null && props.className || "drip"),
+    className: "jsx-1771680452" + " " + (props && props.className != null && props.className || "drip"),
     children: [/*#__PURE__*/_jsx("svg", {
       width: "20",
       height: "20",
@@ -38,30 +41,30 @@ const ButtonDrip = ({
         top,
         left
       },
-      className: "jsx-3620568258",
+      className: "jsx-1771680452",
       children: /*#__PURE__*/_jsx("g", {
         stroke: "none",
         strokeWidth: "1",
         fill: "none",
         fillRule: "evenodd",
-        className: "jsx-3620568258",
+        className: "jsx-1771680452",
         children: /*#__PURE__*/_jsx("g", {
           fill: color,
-          className: "jsx-3620568258",
+          className: "jsx-1771680452",
           children: /*#__PURE__*/_jsx("rect", {
             width: "100%",
             height: "100%",
             rx: "10",
-            className: "jsx-3620568258"
+            className: "jsx-1771680452"
           })
         })
       })
     }), /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "3620568258",
-      children: ".drip.jsx-3620568258{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3620568258{position:absolute;-webkit-animation:300ms ease-in expand-jsx-3620568258;animation:300ms ease-in expand-jsx-3620568258;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3620568258{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3620568258{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
+      id: "1771680452",
+      children: ".drip.jsx-1771680452{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-1771680452{position:absolute;-webkit-animation:350ms linear expand-jsx-1771680452;animation:350ms linear expand-jsx-1771680452;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-1771680452{0%{opacity:0;-webkit-transform:scale(0.25);-ms-transform:scale(0.25);transform:scale(0.25);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-1771680452{0%{opacity:0;-webkit-transform:scale(0.25);-ms-transform:scale(0.25);transform:scale(0.25);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
     })]
   });
 };
 
-const MemoButtonDrip = /*#__PURE__*/React.memo(ButtonDrip);
-export default withDefaults(MemoButtonDrip, defaultProps);
+const MemoDrip = /*#__PURE__*/React.memo(Drip);
+export default withDefaults(MemoDrip, defaultProps);

package/esm/utils/expand.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface Props {
+    isExpanded?: boolean;
+    animated?: boolean;
+    delay?: number;
+}
+declare const defaultProps: {
+    isExpanded: boolean;
+    animated: boolean;
+    delay: number;
+};
+export declare type ExpandProps = Props & typeof defaultProps;
+declare const _default: React.ComponentType<Partial<{
+    isExpanded: boolean;
+    animated: boolean;
+    delay: number;
+}> & Omit<React.PropsWithChildren<ExpandProps>, "animated" | "isExpanded" | "delay">>;
+export default _default;

package/esm/utils/expand.js

@@ -0,0 +1,78 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useRef, useState } from 'react';
+import withDefaults from '../utils/with-defaults';
+import useRealShape from '../use-real-shape';
+import clsx from './clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultProps = {
+  isExpanded: false,
+  animated: true,
+  delay: 200
+};
+
+const Expand = ({
+  isExpanded,
+  delay,
+  animated,
+  children
+}) => {
+  const [height, setHeight] = useState(isExpanded ? 'auto' : '0');
+  const [selfExpanded, setSelfExpanded] = useState(isExpanded);
+  const contentRef = useRef(null);
+  const entryTimer = useRef();
+  const leaveTimer = useRef();
+  const resetTimer = useRef();
+  const [state, updateShape] = useRealShape(contentRef);
+  useEffect(() => setHeight(`${state.height}px`), [state.height]);
+  useEffect(() => {
+    if (isExpanded === selfExpanded) return; // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+
+    if (!isExpanded) {
+      updateShape();
+      setHeight(`${state.height}px`);
+    } // show expand animation
+
+
+    entryTimer.current = window.setTimeout(() => {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30); // Reset height after animation
+
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(() => {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(() => {
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+
+    return () => {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: _JSXStyle.dynamic([["2028774268", [delay, delay * 1.5, height]]]) + " " + (clsx('container', {
+      expanded: selfExpanded,
+      animated
+    }) || ""),
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: contentRef,
+      className: _JSXStyle.dynamic([["2028774268", [delay, delay * 1.5, height]]]) + " " + "content",
+      children: children
+    }), /*#__PURE__*/_jsx(_JSXStyle, {
+      id: "2028774268",
+      dynamic: [delay, delay * 1.5, height],
+      children: `.container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;opacity:0;overflow:hidden;}.animated.__jsx-style-dynamic-selector{-webkit-transition:height ${delay}ms ease 0ms, opacity ${delay * 1.5}ms ease 0ms;transition:height ${delay}ms ease 0ms, opacity ${delay * 1.5}ms ease 0ms;}.expanded.__jsx-style-dynamic-selector{height:${height};opacity:1;}`
+    })]
+  });
+};
+
+export default withDefaults(Expand, defaultProps);

package/esm/utils/icons.js

@@ -380,4 +380,56 @@ export const Activity = ({
       })]
     })
   });
+};
+export const Plus = ({
+  theme,
+  fill,
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size || width || 24,
+    height: size || height || 24,
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      stroke: fill || theme.palette.accents_3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M6 12h12"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 18V6"
+      })]
+    })
+  });
+};
+export const Minus = ({
+  theme,
+  fill,
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size || width || 24,
+    height: size || height || 24,
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 12h12",
+      fill: "none",
+      stroke: fill || theme.palette.accents_3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    })
+  });
 };

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/esm/utils/prop-types.d.ts

@@ -8,10 +8,13 @@ export declare const extraColors: ["default", "primary", "secondary", "success",
 export declare const normalLoaders: ["default", "points", "points-opacity", "gradient", "spinner"];
 export declare const normalWeights: ["light", "normal", "bold"];
 export declare const textWeights: ["normal", "bold", "lighter", "bolder", "inherit", "initial", "revert", "unset"];
+export declare const textTransforms: ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana", "inherit", "initial", "revert", "unset"];
 declare const themeTypes: ["dark", "light"];
 declare const copyTypes: ["default", "slient", "prevent"];
 declare const triggerTypes: ["hover", "click"];
-declare const position: ["top", "topStart", "topEnd", "left", "leftStart", "leftEnd", "bottom", "bottomStart", "bottomEnd", "right", "rightStart", "rightEnd"];
+declare const placement: ["top", "topStart", "topEnd", "left", "leftStart", "leftEnd", "bottom", "bottomStart", "bottomEnd", "right", "rightStart", "rightEnd"];
+declare const position: ["static", "relative", "absolute", "fixed", "sticky", "inherit", "initial", "revert", "unset"];
+declare const objectFit: ["contain", "cover", "fill", "none", "scale-down", "inherit", "initial", "revert", "unset"];
 declare const dividerAlign: ["start", "center", "end", "left", "right"];
 declare const justify: ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
 declare const alignItems: ["flex-start", "flex-end", "center", "stretch", "baseline"];
@@ -30,15 +33,17 @@ export declare type Wrap = typeof wrap[number];
 export declare type NormalSizes = typeof normalSizes[number];
 export declare type NormalWeights = typeof normalWeights[number];
 export declare type TextWeights = typeof textWeights[number] | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export declare type TextTransforms = typeof textTransforms[number];
 export declare type NormalColors = typeof normalColors[number];
 export declare type SimpleColors = typeof simpleColors[number];
 export declare type TooltipColors = typeof extendedColors[number];
 export declare type NormalLoaders = typeof normalLoaders[number];
 export declare type ThemeTypes = typeof themeTypes[number];
 export declare type SnippetTypes = typeof extendedColors[number];
-export declare type CardColors = typeof extraColors[number];
 export declare type CopyTypes = typeof copyTypes[number];
+export declare type ObjectFit = typeof objectFit[number];
 export declare type TriggerTypes = typeof triggerTypes[number];
+export declare type Placement = typeof placement[number];
 export declare type Position = typeof position[number];
 export declare type DividerAlign = typeof dividerAlign[number];
 export declare type ContentPosition = typeof contentPosition[number];

package/esm/utils/prop-types.js

@@ -13,10 +13,21 @@ export const textWeights = tuple(
 'lighter', 'bolder',
 /* Global values */
 'inherit', 'initial', 'revert', 'unset');
+export const textTransforms = tuple(
+/* Keyword values */
+'none', 'capitalize', 'uppercase', 'lowercase', 'full-width', 'full-size-kana',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
 const themeTypes = tuple('dark', 'light');
 const copyTypes = tuple('default', 'slient', 'prevent');
 const triggerTypes = tuple('hover', 'click');
-const position = tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+const placement = tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+const position = tuple('static', 'relative', 'absolute', 'fixed', 'sticky',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
+const objectFit = tuple('contain', 'cover', 'fill', 'none', 'scale-down',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
 const dividerAlign = tuple('start', 'center', 'end', 'left', 'right');
 const justify = tuple('flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly');
 const alignItems = tuple('flex-start', 'flex-end', 'center', 'stretch', 'baseline');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "1.0.1-alpha.52",
+  "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"
+}