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

package/cjs/card/card.styles.js

@@ -0,0 +1,267 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardBody = exports.StyledCard = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+var _drip = require("../utils/drip");
+
+const StyledCardBody = (0, _stitches.styled)('div', {
+  d: 'flex',
+  w: '100%',
+  h: 'auto',
+  flex: '1 1 auto',
+  fd: 'column',
+  jc: 'inherit',
+  ai: 'inherit',
+  ac: 'inherit',
+  p: '$sm $lg',
+  oy: 'auto',
+  position: 'relative',
+  ta: 'left',
+  '*:first-child': {
+    mt: 0
+  },
+  '*:last-child': {
+    mb: 0
+  }
+});
+exports.StyledCardBody = StyledCardBody;
+const StyledCard = (0, _stitches.styled)('div', {
+  m: 0,
+  p: 0,
+  br: '$lg',
+  position: 'relative',
+  display: 'flex',
+  overflow: 'hidden',
+  fd: 'column',
+  width: '100%',
+  height: 'auto',
+  boxSizing: 'border-box',
+  '@motion': {
+    transition: 'none'
+  },
+  'img, .nextui-image': {
+    width: '100%'
+  },
+  [`& ${_drip.StyledDrip}`]: {
+    zIndex: '$1',
+    '.nextui-drip-filler': {
+      opacity: 0.25,
+      fill: '$accents6'
+    }
+  },
+  variants: {
+    color: {
+      default: {
+        $$cardColor: '$colors$background',
+        bg: '$$cardColor'
+      },
+      primary: {
+        $$cardColor: '$colors$primary',
+        color: '$white',
+        bg: '$$cardColor'
+      },
+      secondary: {
+        $$cardColor: '$colors$secondary',
+        color: '$white',
+        bg: '$$cardColor'
+      },
+      success: {
+        $$cardColor: '$colors$success',
+        color: '$white',
+        bg: '$$cardColor'
+      },
+      warning: {
+        $$cardColor: '$colors$warning',
+        color: '$white',
+        bg: '$$cardColor'
+      },
+      error: {
+        $$cardColor: '$colors$error',
+        color: '$white',
+        bg: '$$cardColor'
+      },
+      gradient: {
+        $$cardColor: '$colors$gradient',
+        color: '$white',
+        bg: '$$cardColor'
+      }
+    },
+    shadow: {
+      true: {
+        boxShadow: '$md'
+      }
+    },
+    bordered: {
+      true: {
+        borderStyle: 'solid',
+        borderColor: '$border'
+      },
+      false: {
+        bw: 0
+      }
+    },
+    borderWeight: {
+      light: {
+        bw: '$light'
+      },
+      normal: {
+        bw: '$normal'
+      },
+      bold: {
+        bw: '$bold'
+      },
+      extrabold: {
+        bw: '$extrabold'
+      },
+      black: {
+        bw: '$black'
+      }
+    },
+    animated: {
+      true: {
+        transition: '$default'
+      },
+      false: {
+        transition: 'none'
+      }
+    },
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        us: 'none',
+        WebkitTapHighlightColor: 'transparent',
+        '&:focus:not(&:focus-visible)': {
+          boxShadow: 'none'
+        },
+        '&:focus': {
+          outline: 'none',
+          boxShadow: '0 0 0 2px $colors$background, 0 0 0 4px $colors$primary'
+        },
+        '@safari': {
+          WebkitTapHighlightColor: 'transparent',
+          outline: 'none'
+        }
+      }
+    },
+    hoverable: {
+      true: {
+        '&:hover': {
+          transform: 'translateY(-2px)',
+          boxShadow: '$lg'
+        }
+      }
+    },
+    cover: {
+      true: {
+        'img, .nextui-image': {
+          objectFit: 'cover !important' // TODO: remove important when image be styled
+
+        },
+        [`& ${StyledCardBody}`]: {
+          p: 0
+        }
+      },
+      false: {
+        'img, .nextui-image, .nextui-image-container': {
+          bblr: '0 !important',
+          // TODO: remove important when image be styled
+          bbrr: '0 !important'
+        }
+      }
+    },
+    isDark: {
+      true: {}
+    }
+  },
+  compoundVariants: [// isDark && color === 'default'
+  {
+    color: 'default',
+    isDark: true,
+    css: {
+      $$cardColor: '$colors$accents1'
+    }
+  }, // color default && shadow && !isDark
+  {
+    color: 'default',
+    shadow: true,
+    isDark: false,
+    css: {
+      $$cardColor: '$colors$background',
+      bg: '$$cardColor'
+    }
+  }, // color default && shadow && isDark
+  {
+    color: 'default',
+    shadow: true,
+    isDark: true,
+    css: {
+      $$cardColor: '$colors$accents1',
+      bg: '$$cardColor'
+    }
+  }, // clickable && animated
+  {
+    clickable: true,
+    animated: true,
+    css: {
+      '&:active': {
+        scale: 0.97
+      }
+    }
+  }],
+  defaultVariants: {
+    color: 'default',
+    borderWeight: 'normal',
+    animated: true,
+    bordered: false,
+    shadow: true
+  }
+});
+exports.StyledCard = StyledCard;
+const StyledCardHeader = (0, _stitches.styled)('div', {
+  w: '100%',
+  display: 'flex',
+  flexShrink: 0,
+  zIndex: '$1',
+  jc: 'flex-start',
+  ai: 'center',
+  overflow: 'hidden',
+  color: 'inherit',
+  fontSize: '$xs',
+  p: '$sm',
+  '*:first-child': {
+    mt: 0
+  },
+  '*:last-child': {
+    mb: 0
+  }
+});
+exports.StyledCardHeader = StyledCardHeader;
+const StyledCardFooter = (0, _stitches.styled)('div', {
+  w: '100%',
+  h: 'auto',
+  p: '$sm $lg',
+  d: 'flex',
+  ai: 'center',
+  overflow: 'hidden',
+  color: 'inherit',
+  fontSize: '$xs',
+  bblr: '$lg',
+  bbrr: '$lg',
+  '*': {
+    mt: 0,
+    mb: 0
+  },
+  variants: {
+    blur: {
+      true: {
+        bf: 'saturate(180%) blur(10px)',
+        bg: '$$cardColor'
+      }
+    }
+  }
+}); // types
+
+exports.StyledCardFooter = StyledCardFooter;

package/cjs/card/index.d.ts

@@ -0,0 +1,5 @@
+import Card from './card';
+export type { CardProps } from './card';
+export { StyledCard, StyledCardHeader, StyledCardFooter, StyledCardBody } from './card.styles';
+export type { CardFooterVariantsProps, CardVariantsProps } from './card.styles';
+export default Card;

package/cjs/card/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardBody = exports.StyledCard = void 0;
+
+var _card = _interopRequireDefault(require("./card"));
+
+var _card2 = require("./card.styles");
+
+exports.StyledCard = _card2.StyledCard;
+exports.StyledCardHeader = _card2.StyledCardHeader;
+exports.StyledCardFooter = _card2.StyledCardFooter;
+exports.StyledCardBody = _card2.StyledCardBody;
+
+var _image = _interopRequireDefault(require("../image"));
+
+_card.default.Header = _card2.StyledCardHeader;
+_card.default.Body = _card2.StyledCardBody;
+_card.default.Footer = _card2.StyledCardFooter;
+_card.default.Image = _image.default;
+var _default = _card.default;
+exports.default = _default;

package/{dist/components → cjs}/checkbox/checkbox-context.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { NormalColors } from '../../utils/prop-types';
+import { NormalColors, NormalSizes, SimpleColors } from '../utils/prop-types';
 export interface CheckboxConfig {
     color: NormalColors;
-    textColor: NormalColors;
+    size: NormalSizes;
+    labelColor: SimpleColors;
     updateState?: (value: string, checked: boolean) => void;
     disabledAll: boolean;
     values: string[];

package/cjs/checkbox/checkbox-context.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCheckbox = exports.CheckboxContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  color: 'default',
+  labelColor: 'default',
+  size: 'md',
+  disabledAll: false,
+  inGroup: false,
+  values: []
+};
+
+const CheckboxContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.CheckboxContext = CheckboxContext;
+
+const useCheckbox = () => _react.default.useContext(CheckboxContext);
+
+exports.useCheckbox = useCheckbox;

package/cjs/checkbox/checkbox-group.d.ts

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

package/cjs/checkbox/checkbox-group.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _checkboxContext = require("./checkbox-context");
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _checkbox = require("./checkbox.styles");
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+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: 'default',
+  labelColor: 'default',
+  disabled: false,
+  size: 'md'
+};
+
+const CheckboxGroup = ({
+  color,
+  labelColor,
+  disabled,
+  onChange,
+  value,
+  size,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const [selfVal, setSelfVal] = (0, _react.useState)([]);
+
+  if (!value && _assertion.__DEV__) {
+    value = [];
+    (0, _useWarning.default)('Props "value" is required.', 'Checkbox Group');
+  }
+
+  const updateState = (val, checked) => {
+    const removed = selfVal.filter(v => v !== val);
+    const next = checked ? [...removed, val] : removed;
+    setSelfVal(next);
+    onChange && onChange(next);
+  };
+
+  const providerValue = (0, _react.useMemo)(() => {
+    return {
+      updateState,
+      color,
+      labelColor,
+      size,
+      disabledAll: disabled,
+      inGroup: true,
+      values: selfVal
+    };
+  }, [disabled, selfVal]);
+  (0, _react.useEffect)(() => {
+    setSelfVal(value);
+  }, [value.join(',')]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxContext.CheckboxContext.Provider, {
+    value: providerValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.StyledCheckboxGroup, {
+      role: "group",
+      size: size,
+      ...props,
+      children: children
+    })
+  });
+};
+
+CheckboxGroup.toString = () => '.nextui-checkbox-group';
+
+var _default = (0, _withDefaults.default)(CheckboxGroup, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/{dist/components → cjs}/checkbox/checkbox.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import CheckboxGroup from './checkbox-group';
-import { NormalSizes, NormalColors } from '../../utils/prop-types';
+import { NormalSizes, NormalColors, SimpleColors } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { CheckboxVariantsProps } from './checkbox.styles';
 interface CheckboxEventTarget {
     checked: boolean;
 }
@@ -11,37 +13,46 @@ export interface CheckboxEvent {
     nativeEvent: React.ChangeEvent;
 }
 export interface Props {
+    value?: string;
     color?: NormalColors;
-    textColor?: NormalColors;
+    size?: NormalSizes;
     label?: string;
+    labelColor?: SimpleColors;
     line?: boolean;
     indeterminate?: boolean;
+    animated?: boolean;
     rounded?: boolean;
     checked?: boolean;
     disabled?: boolean;
     initialChecked?: boolean;
+    preventDefault?: boolean;
     onChange?: (e: CheckboxEvent) => void;
-    size?: NormalSizes;
     className?: string;
-    value?: string;
-    style?: object;
+    as?: keyof JSX.IntrinsicElements;
 }
 declare const defaultProps: {
+    value: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
-    textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
+    labelColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
     disabled: boolean;
+    preventDefault: boolean;
     initialChecked: boolean;
     indeterminate: boolean;
     rounded: boolean;
-    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    line: boolean;
+    animated: boolean;
     className: string;
-    value: string;
 };
 declare type NativeAttrs = Omit<React.InputHTMLAttributes<unknown>, keyof Props>;
-export declare type CheckboxProps = Props & typeof defaultProps & NativeAttrs;
+export declare type CheckboxProps = Props & typeof defaultProps & CheckboxVariantsProps & NativeAttrs & {
+    css?: CSS;
+};
 declare type CheckboxComponent<P = {}> = React.FC<P> & {
     Group: typeof CheckboxGroup;
 };
-declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs & CheckboxVariantsProps & {
+    css?: CSS;
+};
 declare const _default: CheckboxComponent<ComponentProps>;
 export default _default;