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

package/cjs/pagination/pagination.styles.js

@@ -0,0 +1,361 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledPaginationItemContent = exports.StyledPaginationItem = exports.StyledPaginationIcon = exports.StyledPaginationHighlight = exports.StyledPaginationEllipsis = exports.StyledPagination = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+var _color = require("./../utils/color");
+
+var _theme$colors, _theme$colors$accents;
+
+const paginationAnimation = (0, _stitches.keyframes)({
+  '0%': {
+    transform: 'scale(1)'
+  },
+  '60%': {
+    transform: 'scale($$paginationScaleTransform)'
+  },
+  '100%': {
+    transform: 'scale(1)'
+  }
+});
+const StyledPaginationEllipsis = (0, _stitches.styled)('svg', {
+  color: 'currentColor',
+  stroke: 'currentColor',
+  variants: {
+    isEllipsis: {
+      true: {
+        transform: '0deg'
+      }
+    },
+    isBefore: {
+      true: {}
+    }
+  },
+  compoundVariants: [{
+    // isEllipsis && isBefore
+    isEllipsis: true,
+    isBefore: true,
+    css: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
+exports.StyledPaginationEllipsis = StyledPaginationEllipsis;
+const StyledPaginationIcon = (0, _stitches.styled)('svg', {
+  transform: 'rotate(180deg)',
+  variants: {
+    isPrev: {
+      true: {
+        transform: 'rotate(0deg)'
+      }
+    }
+  }
+});
+exports.StyledPaginationIcon = StyledPaginationIcon;
+const StyledPaginationItemContent = (0, _stitches.styled)('span', {
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  top: 0,
+  left: 0,
+  zIndex: '$2'
+});
+exports.StyledPaginationItemContent = StyledPaginationItemContent;
+const StyledPaginationItem = (0, _stitches.styled)('button', {
+  border: 'none',
+  position: 'relative',
+  display: 'inline-flex',
+  margin: '0 $$paginationItemMargin',
+  ai: 'center',
+  jc: 'center',
+  padding: 0,
+  boxSizing: 'border-box',
+  tt: 'capitalize',
+  us: 'none',
+  whiteSpace: 'nowrap',
+  ta: 'center',
+  verticalAlign: 'middle',
+  bs: 'none',
+  outline: 'none',
+  height: '$$paginationSize',
+  minWidth: '$$paginationSize',
+  fs: 'inherit',
+  cursor: 'pointer',
+  br: '$$paginationItemRadius',
+  color: '$text',
+  bg: '$accents1',
+  '@motion': {
+    transition: 'none'
+  },
+  '&:hover': {
+    bg: (0, _color.addColorAlpha)((_theme$colors = _stitches.theme.colors) == null ? void 0 : (_theme$colors$accents = _theme$colors.accents3) == null ? void 0 : _theme$colors$accents.value, 0.3)
+  },
+  [`& ${StyledPaginationIcon}`]: {
+    size: '$$paginationFontSize'
+  },
+  [`& ${StyledPaginationEllipsis}`]: {
+    size: '$$paginationFontSize'
+  },
+  variants: {
+    active: {
+      true: {
+        fontWeight: '$bold',
+        cursor: 'default',
+        boxShadow: '$sm',
+        [`& ${StyledPaginationItemContent}`]: {
+          color: '$white'
+        }
+      }
+    },
+    disabled: {
+      true: {
+        color: '$accents4',
+        cursor: 'not-allowed'
+      }
+    },
+    bordered: {
+      true: {
+        bg: 'transparent',
+        border: '$$paginationItemBorderWeight solid $accents2'
+      }
+    },
+    onlyDots: {
+      true: {}
+    },
+    preserveContent: {
+      true: {}
+    },
+    animated: {
+      true: {
+        transition: 'transform 0.25s ease 0s, background 0.25s ease 0s, box-shadow 0.25s ease 0s'
+      },
+      false: {
+        transition: 'none'
+      }
+    }
+  },
+  compoundVariants: [// onlyDots && !preserveContent
+  {
+    onlyDots: true,
+    preserveContent: false,
+    css: {
+      [`& ${StyledPaginationItemContent}`]: {
+        display: 'none'
+      }
+    }
+  }, // animated && !disabled && !active
+  {
+    animated: true,
+    disabled: false,
+    active: false,
+    css: {
+      '&:active': {
+        transform: 'scale($$paginationScaleTransform)',
+        fs: 'calc($$paginationFontSize * 0.9)'
+      }
+    }
+  }]
+}, _stitches.sharedFocus);
+exports.StyledPaginationItem = StyledPaginationItem;
+const StyledPaginationHighlight = (0, _stitches.styled)('div', {
+  position: 'absolute',
+  contain: 'strict',
+  top: '0px',
+  zIndex: '$1',
+  bg: '$$paginationColor',
+  br: '$$paginationItemRadius',
+  height: '$$paginationSize',
+  minWidth: '$$paginationSize',
+  animationName: `${paginationAnimation}`,
+  animationDirection: 'normal',
+  '@motion': {
+    transition: 'none'
+  },
+  variants: {
+    animated: {
+      true: {
+        animationDuration: '350ms',
+        animationTimingFunction: 'ease',
+        transition: 'left 350ms ease'
+      },
+      false: {
+        animationDuration: 'none',
+        animationTimingFunction: 'none',
+        transition: 'none'
+      }
+    },
+    noMargin: {
+      true: {
+        br: '$squared'
+      }
+    },
+    rounded: {
+      true: {}
+    },
+    shadow: {
+      true: {
+        normalShadowVar: '$$paginationShadowColor'
+      }
+    }
+  },
+  compoundVariants: [{
+    // rounded && noMargin
+    rounded: true,
+    noMargin: true,
+    css: {
+      br: '$pill'
+    }
+  }]
+});
+exports.StyledPaginationHighlight = StyledPaginationHighlight;
+const StyledPagination = (0, _stitches.styled)('nav', {
+  m: 0,
+  p: 0,
+  d: 'inline-flex',
+  position: 'relative',
+  fontVariant: 'tabular-nums',
+  fontFeatureSettings: 'tnum',
+  variants: {
+    color: {
+      default: {
+        $$paginationColor: '$colors$primary',
+        $$paginationShadowColor: '$colors$primaryLight'
+      },
+      primary: {
+        $$paginationColor: '$colors$primary',
+        $$paginationShadowColor: '$colors$primaryLight'
+      },
+      secondary: {
+        $$paginationColor: '$colors$secondary',
+        $$paginationShadowColor: '$colors$secondaryLight'
+      },
+      success: {
+        $$paginationColor: '$colors$success',
+        $$paginationShadowColor: '$colors$successLight'
+      },
+      warning: {
+        $$paginationColor: '$colors$warning',
+        $$paginationShadowColor: '$colors$warningLight'
+      },
+      error: {
+        $$paginationColor: '$colors$error',
+        $$paginationShadowColor: '$colors$errorLight'
+      },
+      gradient: {
+        $$paginationColor: '$colors$gradient',
+        $$paginationShadowColor: '$colors$gradientLight'
+      }
+    },
+    size: {
+      xs: {
+        $$paginationWidth: '$space$9',
+        $$paginationFontSize: '$space$5',
+        fs: ' $$paginationFontSize'
+      },
+      sm: {
+        $$paginationWidth: '$space$11',
+        $$paginationFontSize: '$space$6',
+        fs: '$$paginationFontSize'
+      },
+      md: {
+        $$paginationWidth: '$space$12',
+        $$paginationFontSize: '$space$7',
+        fs: '$$paginationFontSize'
+      },
+      lg: {
+        $$paginationWidth: '$space$14',
+        $$paginationFontSize: '$space$8',
+        fs: '$$paginationFontSize'
+      },
+      xl: {
+        $$paginationWidth: '$space$15',
+        $$paginationFontSize: '$space$9',
+        fs: '$$paginationFontSize'
+      }
+    },
+    borderWeight: {
+      light: {
+        $$paginationItemBorderWeight: '$borderWeights$light'
+      },
+      normal: {
+        $$paginationItemBorderWeight: '$borderWeights$normal'
+      },
+      bold: {
+        $$paginationItemBorderWeight: '$borderWeights$bold'
+      },
+      extrabold: {
+        $$paginationItemBorderWeight: '$borderWeights$extrabold'
+      },
+      black: {
+        $$paginationItemBorderWeight: '$borderWeights$black'
+      }
+    },
+    bordered: {
+      true: {}
+    },
+    onlyDots: {
+      true: {
+        $$paginationSize: 'calc($$paginationWidth / 2)',
+        $$paginationItemRadius: '$radii$pill',
+        $$paginationScaleTransform: 0.8
+      },
+      false: {
+        $$paginationSize: '$$paginationWidth',
+        $$paginationScaleTransform: 0.9
+      }
+    },
+    rounded: {
+      true: {
+        $$paginationItemRadius: '$radii$pill'
+      },
+      false: {
+        $$paginationItemRadius: '$radii$squared'
+      }
+    },
+    noMargin: {
+      true: {
+        $$paginationItemRadius: '0px',
+        $$paginationItemMargin: '0',
+        [`& ${StyledPaginationItem}:first-of-type`]: {
+          btlr: '$squared',
+          bblr: '$squared'
+        },
+        [`& ${StyledPaginationItem}:last-of-type`]: {
+          btrr: '$squared',
+          bbrr: '$squared'
+        }
+      },
+      false: {
+        $$paginationItemMargin: '$space$1'
+      }
+    }
+  },
+  compoundVariants: [{
+    // bordered && noMargin
+    bordered: true,
+    noMargin: true,
+    css: {
+      [`& ${StyledPaginationItem}:not(:last-child)`]: {
+        borderRight: 0
+      }
+    }
+  }, {
+    // noMargin && rounded
+    noMargin: true,
+    rounded: true,
+    css: {
+      $$paginationItemRadius: '0px'
+    }
+  }],
+  defaultVariants: {
+    color: 'default',
+    size: 'md',
+    borderWeight: 'normal',
+    onlyDots: false,
+    noMargin: false,
+    rounded: false
+  }
+});
+exports.StyledPagination = StyledPagination;

package/cjs/progress/index.d.ts

@@ -0,0 +1,5 @@
+import Progress from './progress';
+export type { ProgressProps } from './progress';
+export { StyledProgress, StyledProgressBar } from './progress.styles';
+export type { ProgressVariantsProps } from './progress.styles';
+export default Progress;

package/cjs/progress/index.js

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

package/cjs/progress/progress.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { ProgressVariantsProps } from './progress.styles';
+interface Props {
+    value: number;
+    striped?: boolean;
+    animated?: boolean;
+    indeterminated?: boolean;
+    shadow?: boolean;
+    max?: number;
+    min?: number;
+    css?: CSS;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    striped: boolean;
+    animated: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+};
+declare type NativeAttrs = Omit<Partial<React.ProgressHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>, keyof Props>;
+export declare type ProgressProps = Props & typeof defaultProps & NativeAttrs & ProgressVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    striped: boolean;
+    animated: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+}> & Omit<Props & {
+    striped: boolean;
+    animated: boolean;
+    shadow: boolean;
+    indeterminated: boolean;
+    value: number;
+    min: number;
+    max: number;
+} & NativeAttrs & import("@stitches/react/types/styled-component").TransformProps<{
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "defuault" | undefined;
+    status?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    indeterminated?: boolean | "true" | undefined;
+    squared?: boolean | "true" | undefined;
+}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xsMax: string;
+    smMax: string;
+    mdMax: string;
+    lgMax: string;
+    xlMax: string;
+    motion: string;
+    safari: string;
+    hover: string;
+    dark: string;
+    light: string;
+}>, "max" | "value" | "animated" | "min" | "shadow" | "indeterminated" | "striped">>;
+export default _default;

package/cjs/progress/progress.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _numbers = require("../utils/numbers");
+
+var _progress = require("./progress.styles");
+
+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 = {
+  striped: false,
+  animated: true,
+  shadow: false,
+  indeterminated: false,
+  value: 0,
+  min: 0,
+  max: 100
+};
+const preClass = 'nextui-progress';
+
+const Progress = ({
+  value: valueProp,
+  max,
+  min,
+  striped,
+  animated,
+  shadow,
+  indeterminated,
+  css,
+  ...props
+}) => {
+  const value = (0, _react.useMemo)(() => valueProp > max ? max : valueProp < min ? min : valueProp, [valueProp, min, max]);
+  const percent = (0, _react.useMemo)(() => (0, _numbers.valueToPercent)(value, min, max), [value, min, max]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.StyledProgress, {
+    role: "progressbar",
+    indeterminated: indeterminated,
+    css: {
+      'nextui-progress-wrapper-enter': {
+        opacity: 0
+      },
+      '.nextui-progress-wrapper-enter-active': {
+        opacity: 1,
+        width: `${percent}%`
+      },
+      ...css
+    },
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+      visible: true,
+      name: `${preClass}-wrapper`,
+      enterTime: 10,
+      leaveTime: 20,
+      clearTime: 300,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.StyledProgressBar, {
+        className: (0, _clsx.default)(`${preClass}-bar`, {
+          [`${preClass}-striped`]: striped,
+          [`${preClass}-indeterminated`]: indeterminated
+        }),
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        striped: striped,
+        animated: animated,
+        shadow: shadow,
+        indeterminated: indeterminated,
+        ...props
+      })
+    })
+  });
+};
+
+if (_assertion.__DEV__) {
+  Progress.displayName = 'NextUI - Progress';
+}
+
+Progress.toString = () => '.nextui-progress';
+
+const MemoProgress = /*#__PURE__*/_react.default.memo(Progress);
+
+var _default = (0, _withDefaults.default)(MemoProgress, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;