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

package/esm/theme/common.js

@@ -0,0 +1,490 @@
+"use strict";
+
+exports.__esModule = true;
+exports.defaultUtils = exports.defaultTokens = exports.defaultThemeMap = exports.defaultMedia = exports.defaultColors = exports.default = void 0;
+
+var _react = require("@stitches/react");
+
+const defaultTokens = {
+  fonts: {
+    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif;",
+    mono: "Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono','Courier New', monospace;"
+  },
+  fontSizes: {
+    tiny: '.75rem',
+    xs: '0.875rem',
+    base: '1rem',
+    sm: '1.25rem',
+    md: '1.5rem',
+    lg: '2.25rem',
+    xl: '3rem'
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  },
+  lineHeights: {
+    xs: 1,
+    sm: 1.25,
+    md: 1.5,
+    lg: 1.625,
+    xl: 1.75
+  },
+  letterSpacings: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em'
+  },
+  space: {
+    0: '0rem',
+    xs: '0.5rem',
+    sm: '0.75rem',
+    md: '1rem',
+    lg: '1.25rem',
+    xl: '2.25rem',
+    px: '1px',
+    1: '0.125rem',
+    2: '0.25rem',
+    3: '0.375rem',
+    4: '0.5rem',
+    5: '0.625rem',
+    6: '0.75rem',
+    7: '0.875rem',
+    8: '1rem',
+    9: '1.25rem',
+    10: '1.5rem',
+    11: '1.75rem',
+    12: '2rem',
+    13: '2.25rem',
+    14: '2.5rem',
+    15: '2.75rem',
+    16: '3rem',
+    17: '3.5rem',
+    18: '4rem',
+    20: '5rem',
+    24: '6rem',
+    28: '7rem',
+    32: '8rem',
+    36: '9rem',
+    40: '10rem',
+    44: '11rem',
+    48: '12rem',
+    52: '13rem',
+    56: '14rem',
+    60: '15rem',
+    64: '16rem',
+    72: '18rem',
+    80: '20rem',
+    96: '24rem'
+  },
+  radii: {
+    xs: '7px',
+    sm: '9px',
+    md: '12px',
+    base: '14px',
+    lg: '14px',
+    xl: '18px',
+    squared: '33%',
+    rounded: '50%',
+    pill: '9999px'
+  },
+  zIndices: {
+    1: '100',
+    2: '200',
+    3: '300',
+    4: '400',
+    5: '500',
+    10: '1000',
+    max: '9999'
+  },
+  borderWeights: {
+    light: '1px',
+    normal: '2px',
+    bold: '3px',
+    extrabold: '4px',
+    black: '5px'
+  },
+  transitions: {
+    default: 'all 250ms ease'
+  },
+  breakpoints: {
+    xs: '650px',
+    sm: '960px',
+    md: '1280px',
+    lg: '1400px',
+    xl: '1920px'
+  }
+};
+exports.defaultTokens = defaultTokens;
+const defaultColors = {
+  // generic colors
+  white: '#ffffff',
+  black: '#000000',
+  //semantic colors
+  blue100: '#CBECFE',
+  blue200: '#98D5FD',
+  blue300: '#64B8FB',
+  blue400: '#3D9CF7',
+  blue500: '#0070F3',
+  blue600: '#0056D0',
+  blue700: '#0040AE',
+  blue800: '#002D8C',
+  blue900: '#002074',
+  purple100: '#F0D3FC',
+  purple200: '#DDA9F9',
+  purple300: '#C17CEF',
+  purple400: '#A258DF',
+  purple500: '#7928ca',
+  purple600: '#5E1DAD',
+  purple700: '#461491',
+  purple800: '#310C75',
+  purple900: '#220760',
+  green100: '#CFFCD1',
+  green200: '#A1F9AC',
+  green300: '#6FEE8D',
+  green400: '#4ADE7B',
+  green500: '#17c964',
+  green600: '#10AC63',
+  green700: '#0B905F',
+  green800: '#077457',
+  green900: '#046050',
+  yellow100: '#FEF4D2',
+  yellow200: '#FEE7A6',
+  yellow300: '#FCD57A',
+  yellow400: '#F9C258',
+  yellow500: '#f5a623',
+  yellow600: '#D28519',
+  yellow700: '#B06811',
+  yellow800: '#8E4D0B',
+  yellow900: '#753A06',
+  red100: '#fdd7e3',
+  red200: '#FDA0A5',
+  red300: '#FB7085',
+  red400: '#F74C77',
+  red500: '#f21361',
+  red600: '#D00D65',
+  red700: '#AE0963',
+  red800: '#8C065C',
+  red900: '#740357',
+  cyan100: '#EEFFF4',
+  cyan200: '#DDFFED',
+  cyan300: '#CCFFE9',
+  cyan400: '#BFFFEA',
+  cyan500: '#AAFFEC',
+  cyan600: '#7CDBCF',
+  cyan700: '#55B7B4',
+  cyan800: '#368D93',
+  cyan900: '#206C7A',
+  pink100: '#FFDBE7',
+  pink200: '#FFB8D6',
+  pink300: '#FF94CC',
+  pink400: '#FF7ACC',
+  pink500: '#ff4ecd',
+  pink600: '#DB39BD',
+  pink700: '#B727AA',
+  pink800: '#921893',
+  pink900: '#6E0E7A',
+  gray100: '#F4F4F4',
+  gray200: '#EAEAEA',
+  gray300: '#C1C1C1',
+  gray400: '#999999',
+  gray500: '#888888',
+  gray600: '#666666',
+  gray700: '#444444',
+  gray800: '#333333',
+  gray900: '#111111',
+  // brand colors
+  primaryLight: '$blue200',
+  primary: '$blue500',
+  primaryDark: '$blue600',
+  secondaryLight: '$purple200',
+  secondary: '$purple500',
+  secondaryDark: '$purple600',
+  successLight: '$green200',
+  success: '$green500',
+  successDark: '$green600',
+  warningLight: '$yellow200',
+  warning: '$yellow500',
+  warningDark: '$yellow600',
+  errorLight: '$red200',
+  error: '$red500',
+  errorDark: '$red600',
+  gradient: 'linear-gradient(112deg, $cyan500 -63.59%, $pink500 -20.3%, $blue500 70.46%)',
+  link: '$blue500'
+};
+exports.defaultColors = defaultColors;
+const defaultMedia = {
+  xs: `(min-width: ${defaultTokens.breakpoints.xs})`,
+  sm: `(min-width: ${defaultTokens.breakpoints.sm})`,
+  md: `(min-width: ${defaultTokens.breakpoints.md})`,
+  lg: `(min-width: ${defaultTokens.breakpoints.lg})`,
+  xl: `(min-width: ${defaultTokens.breakpoints.xl})`,
+  xsMax: `(max-width: ${defaultTokens.breakpoints.xs})`,
+  smMax: `(max-width: ${defaultTokens.breakpoints.sm})`,
+  mdMax: `(max-width: ${defaultTokens.breakpoints.md})`,
+  lgMax: `(max-width: ${defaultTokens.breakpoints.lg})`,
+  xlMax: `(max-width: ${defaultTokens.breakpoints.xl})`,
+  motion: '(prefers-reduced-motion)',
+  safari: 'not all and (min-resolution:.001dpcm)',
+  hover: '(any-hover: hover)',
+  dark: '(prefers-color-scheme: dark)',
+  light: '(prefers-color-scheme: light)'
+};
+exports.defaultMedia = defaultMedia;
+const defaultUtils = {
+  p: value => ({
+    padding: value
+  }),
+  pt: value => ({
+    paddingTop: value
+  }),
+  pr: value => ({
+    paddingRight: value
+  }),
+  pb: value => ({
+    paddingBottom: value
+  }),
+  pl: value => ({
+    paddingLeft: value
+  }),
+  px: value => ({
+    paddingLeft: value,
+    paddingRight: value
+  }),
+  py: value => ({
+    paddingTop: value,
+    paddingBottom: value
+  }),
+  m: value => ({
+    margin: value
+  }),
+  mt: value => ({
+    marginTop: value
+  }),
+  mr: value => ({
+    marginRight: value
+  }),
+  mb: value => ({
+    marginBottom: value
+  }),
+  ml: value => ({
+    marginLeft: value
+  }),
+  mx: value => ({
+    marginLeft: value,
+    marginRight: value
+  }),
+  my: value => ({
+    marginTop: value,
+    marginBottom: value
+  }),
+  ta: value => ({
+    textAlign: value
+  }),
+  tt: value => ({
+    textTransform: value
+  }),
+  to: value => ({
+    textOverflow: value
+  }),
+  d: value => ({
+    display: value
+  }),
+  dflex: value => ({
+    display: 'flex',
+    alignItems: value,
+    justifyContent: value
+  }),
+  fd: value => ({
+    flexDirection: value
+  }),
+  fw: value => ({
+    flexWrap: value
+  }),
+  ai: value => ({
+    alignItems: value
+  }),
+  ac: value => ({
+    alignContent: value
+  }),
+  jc: value => ({
+    justifyContent: value
+  }),
+  as: value => ({
+    alignSelf: value
+  }),
+  fg: value => ({
+    flexGrow: value
+  }),
+  fs: value => ({
+    fontSize: value
+  }),
+  fb: value => ({
+    flexBasis: value
+  }),
+  bc: value => ({
+    backgroundColor: value
+  }),
+  bf: value => ({
+    backdropFilter: value
+  }),
+  bg: value => ({
+    background: value
+  }),
+  bgBlur: value => ({
+    bf: 'saturate(180%) blur(10px)',
+    bg: `${value}66`
+  }),
+  bgColor: value => ({
+    backgroundColor: value
+  }),
+  backgroundClip: value => ({
+    WebkitBackgroundClip: value,
+    backgroundClip: value
+  }),
+  bgClip: value => ({
+    WebkitBackgroundClip: value,
+    backgroundClip: value
+  }),
+  br: value => ({
+    borderRadius: value
+  }),
+  bw: value => ({
+    borderWidth: value
+  }),
+  btrr: value => ({
+    borderTopRightRadius: value
+  }),
+  bbrr: value => ({
+    borderBottomRightRadius: value
+  }),
+  bblr: value => ({
+    borderBottomLeftRadius: value
+  }),
+  btlr: value => ({
+    borderTopLeftRadius: value
+  }),
+  bs: value => ({
+    boxShadow: value
+  }),
+  normalShadow: value => ({
+    boxShadow: `0 4px 14px 0 $colors${value}`
+  }),
+  normalShadowVar: value => ({
+    boxShadow: `0 4px 14px 0 ${value}`
+  }),
+  lh: value => ({
+    lineHeight: value
+  }),
+  ov: value => ({
+    overflow: value
+  }),
+  ox: value => ({
+    overflowX: value
+  }),
+  oy: value => ({
+    overflowY: value
+  }),
+  pe: value => ({
+    pointerEvents: value
+  }),
+  events: value => ({
+    pointerEvents: value
+  }),
+  us: value => ({
+    WebkitUserSelect: value,
+    userSelect: value
+  }),
+  userSelect: value => ({
+    WebkitUserSelect: value,
+    userSelect: value
+  }),
+  w: value => ({
+    width: value
+  }),
+  h: value => ({
+    height: value
+  }),
+  mw: value => ({
+    maxWidth: value
+  }),
+  maxW: value => ({
+    maxWidth: value
+  }),
+  mh: value => ({
+    maxHeight: value
+  }),
+  maxH: value => ({
+    maxHeight: value
+  }),
+  size: value => ({
+    width: value,
+    height: value
+  }),
+  sizeMin: value => ({
+    minWidth: value,
+    minHeight: value,
+    width: value,
+    height: value
+  }),
+  sizeMax: value => ({
+    maxWidth: value,
+    maxHeight: value
+  }),
+  appearance: value => ({
+    WebkitAppearance: value,
+    appearance: value
+  }),
+  scale: value => ({
+    transform: `scale(${value})`
+  }),
+  linearGradient: value => ({
+    backgroundImage: `linear-gradient(${value})`
+  }),
+  textGradient: value => ({
+    backgroundImage: `linear-gradient(${value})`,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent'
+  })
+};
+exports.defaultUtils = defaultUtils;
+const defaultThemeMap = { ..._react.defaultThemeMap,
+  width: 'space',
+  height: 'space',
+  minWidth: 'space',
+  maxWidth: 'space',
+  minHeight: 'space',
+  maxHeight: 'space',
+  flexBasis: 'space',
+  gridTemplateColumns: 'space',
+  gridTemplateRows: 'space',
+  blockSize: 'space',
+  minBlockSize: 'space',
+  maxBlockSize: 'space',
+  inlineSize: 'space',
+  minInlineSize: 'space',
+  maxInlineSize: 'space',
+  borderWidth: 'borderWeights'
+};
+exports.defaultThemeMap = defaultThemeMap;
+var _default = {
+  prefix: 'nextui',
+  theme: { ...defaultTokens,
+    colors: defaultColors,
+    shadows: {}
+  },
+  media: defaultMedia,
+  utils: defaultUtils,
+  themeMap: defaultThemeMap
+};
+exports.default = _default;

package/esm/theme/dark-theme.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    colors: {
+        accents1: string;
+        accents2: string;
+        accents3: string;
+        accents4: string;
+        accents5: string;
+        accents6: string;
+        accents7: string;
+        accents8: string;
+        accents9: string;
+        text: string;
+        primaryLight: string;
+        secondaryLight: string;
+        successLight: string;
+        warningLight: string;
+        errorLight: string;
+        background: string;
+        foreground: string;
+        codeLight: string;
+        code: string;
+        border: string;
+        selection: string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export default _default;

package/esm/theme/dark-theme.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  colors: {
+    accents1: '$gray900',
+    accents2: '$gray800',
+    accents3: '$gray700',
+    accents4: '$gray600',
+    accents5: '$gray500',
+    accents6: '$gray400',
+    accents7: '$gray300',
+    accents8: '$gray200',
+    accents9: '$gray100',
+    text: '$white',
+    primaryLight: '$blue600',
+    secondaryLight: '$purple600',
+    successLight: '$green600',
+    warningLight: '$yellow600',
+    errorLight: '$red600',
+    background: '$black',
+    foreground: '$white',
+    codeLight: '#16272e',
+    code: '#6cc0e1',
+    border: '$gray700',
+    selection: '#ff4ecd'
+  },
+  shadows: {
+    xs: '-4px 0 15px rgb(0 0 0 / 50%)',
+    sm: '0 5px 20px -5px rgba(20, 20, 20, 0.1)',
+    md: '0 8px 30px rgba(20, 20, 20, 0.15)',
+    lg: '0 30px 60px rgba(20, 20, 20, 0.15)',
+    xl: '0 40px 80px rgba(20, 20, 20, 0.25)'
+  }
+};
+exports.default = _default;
+module.exports = exports.default;

package/esm/theme/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {
+  NextUIProvider: true
+};
+exports.NextUIProvider = void 0;
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  exports[key] = _types[key];
+});
+
+var _stitches = require("./stitches.config");
+
+Object.keys(_stitches).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _stitches[key]) return;
+  exports[key] = _stitches[key];
+});
+
+var _themeProvider = _interopRequireDefault(require("./theme-provider"));
+
+exports.NextUIProvider = _themeProvider.default;

package/esm/theme/light-theme.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    colors: {
+        accents1: string;
+        accents2: string;
+        accents3: string;
+        accents4: string;
+        accents5: string;
+        accents6: string;
+        accents7: string;
+        accents8: string;
+        accents9: string;
+        text: string;
+        background: string;
+        foreground: string;
+        codeLight: string;
+        code: string;
+        border: string;
+        selection: string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export default _default;

package/esm/theme/light-theme.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  colors: {
+    accents1: '$gray100',
+    accents2: '$gray200',
+    accents3: '$gray300',
+    accents4: '$gray400',
+    accents5: '$gray500',
+    accents6: '$gray600',
+    accents7: '$gray700',
+    accents8: '$gray800',
+    accents9: '$gray900',
+    text: '$gray800',
+    background: '$white',
+    foreground: '$black',
+    codeLight: '$pink100',
+    code: '$pink500',
+    border: '$gray200',
+    selection: '$blue200'
+  },
+  shadows: {
+    xs: '-4px 0 4px rgb(0 0 0 / 5%);',
+    sm: '0 5px 20px -5px rgba(0, 0, 0, 0.1)',
+    md: '0 8px 30px rgba(0, 0, 0, 0.15)',
+    lg: '0 30px 60px rgba(0, 0, 0, 0.15)',
+    xl: '0 40px 80px rgba(0, 0, 0, 0.25)'
+  }
+};
+exports.default = _default;
+module.exports = exports.default;

package/esm/theme/ssr-provider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const useUuid: (staticId?: string | undefined) => string;
+interface SsrProviderProps {
+    children: React.ReactNode;
+}
+export declare function SsrProvider({ children }: SsrProviderProps): JSX.Element;
+export {};

package/esm/theme/ssr-provider.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SsrProvider = SsrProvider;
+exports.useUuid = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+// Code based on the code from mantine SsrProvider https://github.dev/mantinedev/mantine
+function randomId() {
+  return `mantine-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+const UuidContext = /*#__PURE__*/(0, _react.createContext)(() => randomId());
+
+const useUuid = staticId => {
+  const generateId = (0, _react.useContext)(UuidContext);
+  const [uid, setUid] = (0, _react.useState)('');
+
+  const _useEffect = typeof window !== 'undefined' ? _react.default.useLayoutEffect : _react.default.useEffect;
+
+  _useEffect(() => {
+    setUid(generateId());
+  }, []);
+
+  return staticId || uid;
+};
+
+exports.useUuid = useUuid;
+
+function SsrProvider({
+  children
+}) {
+  let id = 0;
+
+  const generateId = () => {
+    id += 1;
+    return `nextui-${id}`;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(UuidContext.Provider, {
+    value: generateId,
+    children: children
+  });
+}