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

package/esm/radio/radio.styles.js

@@ -0,0 +1,240 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledRadioPoint = exports.StyledRadioLabel = exports.StyledRadioInput = exports.StyledRadioGroup = exports.StyledRadioDescription = exports.StyledRadio = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledRadioInput = (0, _stitches.styled)('input', {}, _stitches.sharedVisuallyHidden);
+exports.StyledRadioInput = StyledRadioInput;
+const StyledRadioLabel = (0, _stitches.styled)('span', {
+  fontSize: '$$radioSize',
+  us: 'none',
+  d: 'inline-flex',
+  ai: 'center',
+  variants: {
+    color: {
+      default: {
+        color: '$text'
+      },
+      primary: {
+        color: '$primary'
+      },
+      secondary: {
+        color: '$secondary'
+      },
+      success: {
+        color: '$success'
+      },
+      warning: {
+        color: '$warning'
+      },
+      error: {
+        color: '$error'
+      }
+    },
+    disabled: {
+      true: {
+        color: '$accents4'
+      }
+    }
+  }
+});
+exports.StyledRadioLabel = StyledRadioLabel;
+const StyledRadioPoint = (0, _stitches.styled)('span', {
+  size: '$$radioSize',
+  br: '$$radioRadii',
+  position: 'relative',
+  d: 'inline-block',
+  mr: 'calc($$radioSize * 0.375)',
+  '&:after': {
+    content: '',
+    d: 'block',
+    position: 'absolute',
+    size: '$$radioSize',
+    br: '$$radioRadii',
+    boxSizing: 'border-box',
+    border: '2px solid $border'
+  }
+}, _stitches.sharedFocus);
+exports.StyledRadioPoint = StyledRadioPoint;
+const StyledRadio = (0, _stitches.styled)('label', {
+  d: 'flex',
+  w: 'initial',
+  ai: 'flex-start',
+  position: 'relative',
+  fd: 'column',
+  jc: 'flex-start',
+  cursor: 'pointer',
+  '@motion': {
+    [`& ${StyledRadioPoint}`]: {
+      transition: 'none',
+      '&:after': {
+        transition: 'none'
+      }
+    }
+  },
+  variants: {
+    color: {
+      default: {
+        $$radioColor: '$colors$primary',
+        $$radioColorHover: '$colors$primaryDark'
+      },
+      primary: {
+        $$radioColor: '$colors$primary',
+        $$radioColorHover: '$colors$primaryDark'
+      },
+      secondary: {
+        $$radioColor: '$colors$secondary',
+        $$radioColorHover: '$colors$secondaryDark'
+      },
+      success: {
+        $$radioColor: '$colors$success',
+        $$radioColorHover: '$colors$successDark'
+      },
+      warning: {
+        $$radioColor: '$colors$warning',
+        $$radioColorHover: '$colors$warningDark'
+      },
+      error: {
+        $$radioColor: '$colors$error',
+        $$radioColorHover: '$colors$errorDark'
+      }
+    },
+    size: {
+      xs: {
+        $$radioSize: '$space$7'
+      },
+      sm: {
+        $$radioSize: '$space$8'
+      },
+      md: {
+        $$radioSize: '$space$9'
+      },
+      lg: {
+        $$radioSize: '$space$10'
+      },
+      xl: {
+        $$radioSize: '$space$11'
+      }
+    },
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        $$radioColor: '$colors$accents4'
+      }
+    },
+    squared: {
+      true: {
+        $$radioRadii: '$space$1'
+      },
+      false: {
+        $$radioRadii: '$radii$rounded'
+      }
+    },
+    active: {
+      true: {
+        [`& ${StyledRadioPoint}`]: {
+          '&:after': {
+            border: 'calc($$radioSize * 0.34) solid $$radioColor'
+          }
+        },
+        '&:hover': {
+          [`& ${StyledRadioPoint}`]: {
+            '&:after': {
+              border: 'calc($$radioSize * 0.34) solid $$radioColorHover'
+            }
+          }
+        }
+      }
+    },
+    animated: {
+      true: {
+        [`& ${StyledRadioPoint}`]: {
+          transition: '$default',
+          '&:after': {
+            transition: '$default'
+          }
+        }
+      },
+      false: {
+        [`& ${StyledRadioPoint}`]: {
+          transition: 'none',
+          '&:after': {
+            transition: 'none'
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    squared: false,
+    animated: true
+  },
+  compoundVariants: [{
+    // !active && !disabled
+    active: false,
+    disabled: false,
+    css: {
+      '&:hover': {
+        [`& ${StyledRadioPoint}`]: {
+          bg: '$border'
+        }
+      }
+    }
+  }]
+});
+exports.StyledRadio = StyledRadio;
+const StyledRadioGroup = (0, _stitches.styled)('div', {
+  border: 0,
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  fd: 'column',
+  variants: {
+    size: {
+      xs: {
+        $$radioGroupGap: '$space$7'
+      },
+      sm: {
+        $$radioGroupGap: '$space$8'
+      },
+      md: {
+        $$radioGroupGap: '$space$9'
+      },
+      lg: {
+        $$radioGroupGap: '$space$10'
+      },
+      xl: {
+        $$radioGroupGap: '$space$11'
+      }
+    },
+    row: {
+      true: {
+        fd: 'row',
+        [`& ${StyledRadio}`]: {
+          marginTop: 0,
+          marginRight: '$$radioGroupGap'
+        }
+      },
+      false: {
+        [`& ${StyledRadio}`]: {
+          marginTop: '$$radioGroupGap',
+          marginRight: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    row: false
+  }
+});
+exports.StyledRadioGroup = StyledRadioGroup;
+const StyledRadioDescription = (0, _stitches.styled)('span', {
+  color: '$accents4',
+  fontSize: 'calc($$radioSize * 0.85)',
+  paddingLeft: 'calc($$radioSize + $$radioSize * 0.375)'
+}); // types
+
+exports.StyledRadioDescription = StyledRadioDescription;

package/esm/row/index.d.ts

@@ -0,0 +1,5 @@
+import Row from './row';
+export type { RowProps } from './row';
+export { StyledRow } from './row.styles';
+export type { RowVariantsProps } from './row.styles';
+export default Row;

package/esm/row/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledRow = void 0;
+
+var _row = _interopRequireDefault(require("./row"));
+
+var _row2 = require("./row.styles");
+
+exports.StyledRow = _row2.StyledRow;
+var _default = _row.default;
+exports.default = _default;

package/esm/row/row.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { Justify, AlignItems, Wrap } from '../utils/prop-types';
+import { RowVariantsProps } from './row.styles';
+interface Props {
+    gap?: number;
+    wrap?: Wrap;
+    justify?: Justify;
+    align?: AlignItems;
+    css?: CSS;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type RowProps = Props & NativeAttrs & RowVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    gap: number;
+    wrap: "nowrap" | "wrap" | "wrap-reverse";
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    align: "center" | "flex-start" | "flex-end" | "stretch" | "baseline";
+}> & Omit<RowProps, "wrap" | "gap" | "justify" | "align">>;
+export default _default;

package/esm/row/row.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _row = _interopRequireDefault(require("./row.styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const defaultProps = {
+  gap: 0,
+  wrap: 'nowrap',
+  justify: 'flex-start',
+  align: 'flex-start'
+};
+
+const Row = ({
+  children,
+  gap,
+  justify,
+  align,
+  wrap,
+  css,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_row.default, {
+    css: {
+      flexWrap: wrap,
+      $$rowGap: `calc(${gap} * $space$lg)`,
+      marginLeft: `calc(${gap} * $space$lg / 2)`,
+      marginRight: `calc(${gap} * $space$lg / 2)`,
+      justifyContent: justify,
+      alignItems: align,
+      ...css
+    },
+    ...props,
+    children: children
+  });
+};
+
+Row.toString = () => '.nextui-row';
+
+const MemoRow = /*#__PURE__*/_react.default.memo(Row);
+
+var _default = (0, _withDefaults.default)(MemoRow, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;