feat: nextui themes improved to work with plain React

.env.example

@@ -0,0 +1,7 @@
+SKIP_PREFLIGHT_CHECK=true
+## Algolia client app id
+ALGOLIA_APP_ID=
+## Algolia client search only api key
+ALGOLIA_SEARCH_API_KEY=
+## Algolia admin api key
+ALGOLIA_ADMIN_API_KEY=

.gitignore

@@ -18,7 +18,12 @@
 
 # misc
 .DS_Store
-.env*
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env.production
 
 # debug
 npm-debug.log*

packages/docs/.env.example

@@ -0,0 +1,6 @@
+## use cache for Github requests like "tags"
+USE_CACHE=true/false
+## Algolia client app id
+NEXT_PUBLIC_ALGOLIA_APP_ID=
+## Algolia client search only api key
+NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=

packages/docs/.gitignore

@@ -18,7 +18,12 @@
 
 # misc
 .DS_Store
-.env*
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env.production
 
 # debug
 npm-debug.log*

packages/docs/content/docs/components/card.mdx

@@ -18,7 +18,7 @@ import { Card } from '@nextui-org/react';
   title="Default"
   desc="NextUI will wrap your content in a `Card.Body` component."
   code={` 
-<Card css={{ w: "400px" }}>
+<Card css={{ mw: "400px" }}>
   <p>A basic card.</p>
 </Card>`}
 />
@@ -27,7 +27,7 @@ import { Card } from '@nextui-org/react';
   title="Bordered"
   desc="You can change the full style towards a bodered `Card` with the `bordered` property."
   code={` 
-<Card bordered shadow={false} css={{ w: "400px" }}>
+<Card bordered shadow={false} css={{ mw: "400px" }}>
   <p>A bordered card.</p>
 </Card>`}
 />
@@ -36,7 +36,7 @@ import { Card } from '@nextui-org/react';
   title="Hoverable"
   desc="You can apply a fancy hover animation with the `hoverable` property."
   code={` 
-<Card bordered shadow={false} hoverable css={{ w: "400px" }}>
+<Card bordered shadow={false} hoverable css={{ mw: "400px" }}>
   <p>A hoverable card.</p>
 </Card>`}
 />
@@ -46,7 +46,7 @@ import { Card } from '@nextui-org/react';
   desc="You can use the `clickable` property to allow users to interact with the entirety of its surface 
   to trigger its main action, be it an expansion, a link to another screen or some other behavior."
   code={` 
-<Card clickable bordered css={{ w: "400px" }}>
+<Card clickable bordered css={{ mw: "400px" }}>
   <p>A clickable card.</p>
 </Card>`}
 />
@@ -69,10 +69,10 @@ return (
     {colors.map((color) => (
       <Grid xs={12} md={4} key={color}>
         <Card color={color}>
-          <Text h5 transform="capitalize">
+          <Text css={{ fontWeight: '$bold', color: '$white' }} transform="capitalize">
             {color}
           </Text>
-          <Text span>{color}</Text>
+          <Text css={{ fontWeight: '$bold', color: '$white' }} span>{color}</Text>
         </Card>
       </Grid>
     ))}
@@ -284,7 +284,7 @@ return (
             <Col>
               <Row justify="flex-end">
                 <Button flat auto rounded color="secondary">
-                  <Text size={12} weight="bold" transform="uppercase">
+                  <Text css={{ color: 'inherit' }} size={12} weight="bold" transform="uppercase">
                     Notify Me
                   </Text>
                 </Button>
@@ -324,7 +324,7 @@ return (
           css={{
             position: 'absolute',
             bgBlur: '#0f1114',
-            borderTop: '$borderWeights$light solid $gray500',
+            borderTop: '$borderWeights$light solid $gray700',
             bottom: 0,
             zIndex: 1
           }}
@@ -354,7 +354,7 @@ return (
             <Col>
               <Row justify="flex-end">
                 <Button flat auto rounded css={{ color: '#94f9f0', bg: '#94f9f026' }}>
-                  <Text size={12} weight="bold" transform="uppercase">
+                  <Text css={{ color: 'inherit' }} size={12} weight="bold" transform="uppercase">
                     Get App
                   </Text>
                 </Button>

packages/docs/content/docs/components/pagination.mdx

@@ -117,7 +117,7 @@ return(
   code={`
 () => {
 const [selectedColor, setSelectedColor] = React.useState('primary');
-const colors = ['primary', 'secondary', 'success', 'warning', 'error', 'gradient']
+const colors = ['primary', 'secondary', 'success', 'warning', 'error']
 const capitalize = (str) => {
   const lower = str.toLowerCase();
   return str.charAt(0).toUpperCase() + lower.slice(1);

packages/docs/next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/docs/src/components/sidebar/post.tsx

@@ -47,8 +47,7 @@ const Post: React.FC<React.PropsWithChildren<PostProps>> = ({
 
   const linkColor = useMemo(() => {
     if (route.selected) return;
-    if (isDark) return theme?.colors?.accents6?.value;
-    return theme?.colors?.accents4?.value;
+    return theme?.colors?.accents6?.value;
   }, [isDark, route.selected]);
 
   return (

packages/nextui/src/avatar/avatar-group.styles.ts

@@ -9,7 +9,7 @@ export const StyledAvatarGroupCount = styled('span', {
   color: '$text'
 });
 
-const StyledAvatarGroup = styled('div', {
+export const StyledAvatarGroup = styled('div', {
   dflex: 'center',
   height: 'auto',
   width: 'max-content',

packages/nextui/src/avatar/avatar-group.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CSS } from '../theme/stitches.config';
 import StyledAvatarGroup, {
   StyledAvatarGroupCount,
   AvatarGroupVariants
@@ -9,9 +10,11 @@ interface Props {
   as?: keyof JSX.IntrinsicElements;
 }
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type AvatarGroupProps = Props & NativeAttrs & AvatarGroupVariants;
+export type AvatarGroupProps = Props &
+  NativeAttrs &
+  AvatarGroupVariants & { css?: CSS };
 
 const AvatarGroup: React.FC<React.PropsWithChildren<AvatarGroupProps>> = ({
   count,
@@ -30,4 +33,6 @@ const AvatarGroup: React.FC<React.PropsWithChildren<AvatarGroupProps>> = ({
   );
 };
 
+AvatarGroup.toString = () => '.nextui-avatar-group';
+
 export default AvatarGroup;

packages/nextui/src/avatar/avatar.styles.ts

@@ -1,6 +1,6 @@
 import { styled, VariantProps } from '../theme/stitches.config';
 
-const StyledAvatar = styled('span', {
+export const StyledAvatar = styled('span', {
   dflex: 'center',
   position: 'relative',
   zIndex: '$1',

packages/nextui/src/avatar/avatar.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import AvatarGroup from './avatar-group';
+import { CSS } from '../theme/stitches.config';
 import StyledAvatar, { AvatarVariantsProps } from './avatar.styles';
 import clsx from '../utils/clsx';
 
@@ -14,10 +15,12 @@ interface Props {
 
 type NativeAttrs = Omit<
   Partial<React.ImgHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>,
-  keyof Props | 'css' | 'sizes'
+  keyof Props | 'sizes'
 >;
 
-export type AvatarProps = Props & AvatarVariantsProps & NativeAttrs;
+export type AvatarProps = Props &
+  AvatarVariantsProps &
+  NativeAttrs & { css?: CSS };
 
 const safeText = (text: string): string => {
   if (text?.length <= 4) return text;
@@ -81,4 +84,6 @@ type AvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
   Group: typeof AvatarGroup;
 };
 
+Avatar.toString = () => '.nextui-avatar';
+
 export default Avatar as AvatarComponent<AvatarProps>;

packages/nextui/src/avatar/index.ts

@@ -4,6 +4,10 @@ import AvatarGroup from './avatar-group';
 export type { AvatarProps } from './avatar';
 export type { AvatarGroupProps } from './avatar-group';
 
+export { StyledAvatar } from './avatar.styles';
+export { StyledAvatarGroup } from './avatar-group.styles';
+export { StyledAvatarGroupCount } from './avatar-group.styles';
+
 Avatar.Group = AvatarGroup;
 
 export default Avatar;

packages/nextui/src/backdrop/backdrop.tsx

@@ -38,7 +38,7 @@ const defaultProps = {
   className: ''
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type BackdropProps = Props &
   typeof defaultProps &
@@ -160,4 +160,6 @@ if (__DEV__) {
   Backdrop.displayName = 'NextUI - Backdrop';
 }
 
+Backdrop.toString = () => '.nextui-backdrop';
+
 export default withDefaults(Backdrop, defaultProps);

packages/nextui/src/backdrop/index.ts

@@ -1,6 +1,11 @@
 import Backdrop from './backdrop';
 
 export type { BackdropProps } from './backdrop';
-export * from './backdrop.styles';
+export {
+  StyledBackdropContent,
+  StyledBackdropLayer,
+  StyledBackdrop
+} from './backdrop.styles';
+export type { BackdropVariantsProps } from './backdrop.styles';
 
 export default Backdrop;

packages/nextui/src/button/button-group.styles.ts

@@ -1,7 +1,7 @@
 import { styled, VariantProps } from '../theme/stitches.config';
 import StyledButton from './button.styles';
 
-const StyledButtonGroup = styled('div', {
+export const StyledButtonGroup = styled('div', {
   display: 'inline-flex',
   margin: '$3',
   backgroundColor: 'transparent',
@@ -19,7 +19,6 @@ const StyledButtonGroup = styled('div', {
           '&:not(:first-child)': {
             btlr: 0, // top-left
             btrr: 0 // top-right
-            // border-top: ${borderWidth} solid ${borderColor}; bordered variant
           },
           '&:not(:last-child)': {
             bblr: 0,
@@ -33,7 +32,6 @@ const StyledButtonGroup = styled('div', {
           '&:not(:first-child)': {
             btlr: 0, // top-left
             bblr: 0 // bottom-left
-            //borderLeft: ${borderWidth} solid ${borderColor}, bordered variant
           },
           '&:not(:last-child)': {
             btrr: 0, // top-right

packages/nextui/src/button/button-group.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import withDefaults from '../utils/with-defaults';
+import { CSS } from '../theme/stitches.config';
 import { NormalSizes, NormalColors, NormalWeights } from '../utils/prop-types';
 import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context';
 import StyledButtonGroup, {
@@ -28,7 +29,12 @@ const defaultProps = {
   color: 'default' as NormalColors
 };
 
-export type ButtonGroupProps = Props & ButtonGroupVariantsProps;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+
+export type ButtonGroupProps = Props &
+  ButtonGroupVariantsProps &
+  NativeAttrs &
+  typeof defaultProps & { css?: CSS };
 
 const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (
   groupProps
@@ -96,6 +102,8 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (
   );
 };
 
+ButtonGroup.toString = () => '.nextui-button-group';
+
 const MemoButtonGroup = React.memo(ButtonGroup);
 
 export default withDefaults(MemoButtonGroup, defaultProps);

packages/nextui/src/button/button-icon.tsx

@@ -60,6 +60,8 @@ const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({
   );
 };
 
+ButtonIcon.toString = () => '.nextui-button-icon';
+
 const MemoButtonIcon = React.memo(ButtonIcon);
 
 export default withDefaults(MemoButtonIcon, defaultProps);

packages/nextui/src/button/button.styles.ts

@@ -8,7 +8,7 @@ import { StyledDrip } from '../utils/drip';
 
 import { addColorAlpha } from '../utils/color';
 
-const StyledButton = styled(
+export const StyledButton = styled(
   'button',
   {
     dflex: 'center',

packages/nextui/src/button/button.tsx

@@ -155,6 +155,8 @@ if (__DEV__) {
   Button.displayName = 'NextUI - Button';
 }
 
+Button.toString = () => '.nextui-button';
+
 export default withDefaults(Button, defaultProps) as ButtonComponent<
   HTMLButtonElement,
   ButtonProps

packages/nextui/src/button/index.ts

@@ -3,6 +3,13 @@ import ButtonGroup from './button-group';
 
 export type { ButtonProps } from './button';
 export type { ButtonGroupProps } from './button-group';
+export type { ButtonIconProps } from './button-icon';
+
+export { StyledButton } from './button.styles';
+export type { ButtonVariantsProps } from './button.styles';
+export { StyledButtonGroup } from './button-group.styles';
+export type { ButtonGroupVariantsProps } from './button-group.styles';
+export { StyledButtonIcon } from './button-icon';
 
 Button.Group = ButtonGroup;
 

packages/nextui/src/card/card.styles.ts

@@ -51,10 +51,6 @@ export const StyledCard = styled('div', {
       default: {
         $$cardColor: '$colors$background',
         bg: '$$cardColor'
-        //   '@dark': { // TODO: do this when dark theme is ready
-        //     $$cardColor: '$colors$accents1',
-        //     bg: '$$cardColor'
-        //   }
       },
       primary: {
         $$cardColor: '$colors$primary',
@@ -167,20 +163,39 @@ export const StyledCard = styled('div', {
           bbrr: '0 !important'
         }
       }
+    },
+    isDark: {
+      true: {}
     }
   },
   compoundVariants: [
-    // color default && shadow
+    // 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'
-        //   '@dark': { // TODO: do this when dark theme is ready
-        //     $$cardColor: '$colors$accents1',
-        //     bg: '$$cardColor'
-        //   }
+      }
+    },
+    // color default && shadow && isDark
+    {
+      color: 'default',
+      shadow: true,
+      isDark: true,
+      css: {
+        $$cardColor: '$colors$accents1',
+        bg: '$$cardColor'
       }
     },
     // clickable && animated

packages/nextui/src/card/card.tsx

@@ -8,6 +8,8 @@ import React, {
 import Image from '../image';
 import Drip from '../utils/drip';
 import useDrip from '../use-drip';
+import useTheme from '../use-theme';
+import { CSS } from '../theme/stitches.config';
 import { hasChild, pickChild } from '../utils/collections';
 import useKeyboard, { KeyCode } from '../use-keyboard';
 import {
@@ -25,28 +27,40 @@ interface Props {
   ripple?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   as?: keyof JSX.IntrinsicElements;
+  preventDefault?: boolean;
 }
 
 const defaultProps = {
   animated: true,
   ripple: true,
-  cover: false
+  cover: false,
+  preventDefault: false
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type CardProps = Props & NativeAttrs & CardVariantsProps;
+export type CardProps = Props & NativeAttrs & CardVariantsProps & { css?: CSS };
 
 const Card = React.forwardRef<
   HTMLDivElement,
   React.PropsWithChildren<CardProps>
 >(({ ...cardProps }, ref: React.Ref<HTMLDivElement | null>) => {
-  const { children, cover, animated, ripple, clickable, onClick, ...props } =
-    cardProps;
+  const {
+    children,
+    cover,
+    animated,
+    ripple,
+    clickable,
+    onClick,
+    preventDefault,
+    ...props
+  } = cardProps;
 
   const cardRef = useRef<HTMLDivElement>(null);
   useImperativeHandle(ref, () => cardRef.current);
 
+  const { isDark } = useTheme();
+
   const { onClick: onDripClickHandler, ...dripBindings } = useDrip(
     false,
     cardRef
@@ -88,7 +102,7 @@ const Card = React.forwardRef<
     [KeyCode.Enter, KeyCode.Space],
     {
       disableGlobalEvent: true,
-      preventDefault: false
+      preventDefault
     }
   );
 
@@ -101,6 +115,7 @@ const Card = React.forwardRef<
       clickable={clickable}
       tabIndex={clickable ? 0 : -1}
       onClick={clickHandler}
+      isDark={isDark}
       {...props}
       {...bindings}
     >
@@ -136,6 +151,8 @@ if (__DEV__) {
   Card.displayName = 'NextUI - Card';
 }
 
+Card.toString = () => '.nextui-card';
+
 export default withDefaults(Card, defaultProps) as CardComponent<
   HTMLDivElement,
   CardProps

packages/nextui/src/card/index.ts

@@ -7,7 +7,14 @@ import {
 import CardImage from '../image';
 
 export type { CardProps } from './card';
-export * from './card.styles';
+
+export {
+  StyledCard,
+  StyledCardHeader,
+  StyledCardFooter,
+  StyledCardBody
+} from './card.styles';
+export type { CardFooterVariantsProps, CardVariantsProps } from './card.styles';
 
 Card.Header = CardHeader;
 Card.Body = CardBody;

packages/nextui/src/checkbox/checkbox-group.tsx

@@ -6,6 +6,7 @@ import {
   StyledCheckboxGroup,
   CheckboxGroupVariantsProps
 } from './checkbox.styles';
+import { CSS } from '../theme/stitches.config';
 import withDefaults from '../utils/with-defaults';
 import { __DEV__ } from '../utils/assertion';
 
@@ -25,11 +26,12 @@ const defaultProps = {
   size: 'md' as NormalSizes
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+
 export type CheckboxGroupProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  CheckboxGroupVariantsProps;
+  CheckboxGroupVariantsProps & { css?: CSS };
 
 const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   color,
@@ -81,4 +83,6 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   );
 };
 
+CheckboxGroup.toString = () => '.nextui-checkbox-group';
+
 export default withDefaults(CheckboxGroup, defaultProps);

packages/nextui/src/checkbox/checkbox.tsx

@@ -4,6 +4,7 @@ import CheckboxGroup from './checkbox-group';
 import useWarning from '../use-warning';
 import { NormalSizes, NormalColors, SimpleColors } from '../utils/prop-types';
 import useKeyboard, { KeyCode } from '../use-keyboard';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledCheckboxLabel,
   StyledCheckboxContainer,
@@ -63,14 +64,11 @@ const defaultProps = {
   className: ''
 };
 
-type NativeAttrs = Omit<
-  React.InputHTMLAttributes<unknown>,
-  keyof Props | 'css'
->;
+type NativeAttrs = Omit<React.InputHTMLAttributes<unknown>, keyof Props>;
 export type CheckboxProps = Props &
   typeof defaultProps &
   CheckboxVariantsProps &
-  NativeAttrs;
+  NativeAttrs & { css?: CSS };
 
 const Checkbox: React.FC<CheckboxProps> = ({
   checked,
@@ -176,6 +174,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
         `nextui-checkbox--${getState}`,
         className
       )}
+      css={props.css}
     >
       <StyledCheckboxContainer
         className="nextui-checkbox-container"
@@ -241,6 +240,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
 
 Checkbox.defaultProps = defaultProps;
 
+Checkbox.toString = () => '.nextui-checkbox';
+
 if (__DEV__) {
   Checkbox.displayName = 'NextUI - Checkbox';
 }
@@ -252,6 +253,6 @@ type CheckboxComponent<P = {}> = React.FC<P> & {
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
   NativeAttrs &
-  CheckboxVariantsProps;
+  CheckboxVariantsProps & { css?: CSS };
 
 export default Checkbox as CheckboxComponent<ComponentProps>;

packages/nextui/src/checkbox/index.ts

@@ -7,6 +7,27 @@ export type { CheckboxGroupProps } from './checkbox-group';
 Checkbox.Group = CheckboxGroup;
 
 // export styled components
-export * from './checkbox.styles';
+export {
+  StyledCheckboxLabel,
+  StyledCheckboxContainer,
+  StyledIconCheckFirstLine,
+  StyledIconCheckSecondLine,
+  StyledIconCheck,
+  StyledCheckboxMask,
+  StyledCheckboxText,
+  StyledCheckboxInput,
+  StyledCheckboxGroup
+} from './checkbox.styles';
+export type {
+  CheckboxVariantsProps,
+  CheckboxGroupVariantsProps,
+  CheckboxTextVariantsProps,
+  CheckboxMaskVariantsProps,
+  CheckboxIconCheckVariantsProps,
+  CheckboxIconCheckFirstLineVariantsProps,
+  CheckboxIconCheckSecondLineVariantsProps,
+  CheckboxLabelVariantsProps,
+  CheckboxContainerVariantsProps
+} from './checkbox.styles';
 
 export default Checkbox;

packages/nextui/src/code/code.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import withDefaults from '../utils/with-defaults';
+import { CSS } from '../theme/stitches.config';
 import { StyledCode, StyledPre, CodeVariantsProps } from './code.styles';
 
 interface Props {
@@ -11,8 +12,8 @@ const defaultProps = {
   block: false
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
-export type CodeProps = Props & NativeAttrs & CodeVariantsProps;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type CodeProps = Props & NativeAttrs & CodeVariantsProps & { css?: CSS };
 
 const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
   block,
@@ -27,6 +28,8 @@ const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
   );
 };
 
+Code.toString = () => '.nextui-code';
+
 const MemoCode = React.memo(Code);
 
 export default withDefaults(MemoCode, defaultProps);

packages/nextui/src/code/index.ts

@@ -1,6 +1,7 @@
 import Code from './code';
 export type { CodeProps } from './code';
 
-export * from './code.styles';
+export { StyledPre, StyledCode } from './code.styles';
+export type { CodeVariantsProps } from './code.styles';
 
 export default Code;

packages/nextui/src/col/col.styles.ts

@@ -1,6 +1,6 @@
 import { styled, VariantProps } from '../theme/stitches.config';
 
-const StyledCol = styled('div', {
+export const StyledCol = styled('div', {
   float: 'left',
   boxSizing: 'border-box',
   pl: 'calc($$rowGap / 2)',

packages/nextui/src/col/col.tsx

@@ -43,6 +43,8 @@ const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
   );
 };
 
+Col.toString = () => '.nextui-column';
+
 const MemoCol = React.memo(Col);
 
 export default withDefaults(MemoCol, defaultProps);

packages/nextui/src/col/index.ts

@@ -1,4 +1,7 @@
 import Col from './col';
 export type { ColProps } from './col';
 
+export { StyledCol } from './col.styles';
+export type { ColVariantsProps } from './col.styles';
+
 export default Col;

packages/nextui/src/collapse/collapse-group.tsx

@@ -3,6 +3,8 @@ import withDefaults from '../utils/with-defaults';
 import { CollapseContext, CollapseConfig } from './collapse-context';
 import useCurrentState from '../use-current-state';
 import { setChildrenIndex } from '../utils/collections';
+import { CSS } from '../theme/stitches.config';
+
 import {
   StyledCollapseGroup,
   CollapseGroupVariantsProps
@@ -21,11 +23,11 @@ const defaultProps = {
   accordion: true
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type CollapseGroupProps = Props &
   NativeAttrs &
-  CollapseGroupVariantsProps;
+  CollapseGroupVariantsProps & { css?: CSS };
 
 const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   children,
@@ -76,4 +78,6 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   );
 };
 
+CollapseGroup.toString = () => '.nextui-collapse-group';
+
 export default withDefaults(CollapseGroup, defaultProps);

packages/nextui/src/collapse/collapse-icon.tsx

@@ -27,6 +27,8 @@ const CollapseIcon: React.FC<CollapseIconVariantsProps> = ({ ...props }) => {
   );
 };
 
+CollapseIcon.toString = () => '.nextui-collapse-icon';
+
 const MemoCollapseIcon = React.memo(CollapseIcon);
 
 export default MemoCollapseIcon;

packages/nextui/src/collapse/collapse.tsx

@@ -6,6 +6,7 @@ import useCurrentState from '../use-current-state';
 import CollapseGroup from './collapse-group';
 import useWarning from '../use-warning';
 import { getId } from '../utils/collections';
+import { CSS } from '../theme/stitches.config';
 import useKeyboard, { KeyCode } from '../use-keyboard';
 import {
   StyledCollapse,
@@ -49,11 +50,12 @@ const defaultProps = {
   initialExpanded: false
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+
 export type CollapseProps = Props &
   typeof defaultProps &
   CollapseVariantsProps &
-  NativeAttrs;
+  NativeAttrs & { css?: CSS };
 
 const preClass = 'nextui-collapse';
 
@@ -199,6 +201,8 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   );
 };
 
+Collapse.toString = () => '.nextui-collapse';
+
 type CollapseComponent<P = {}> = React.FC<P> & {
   Group: typeof CollapseGroup;
 };

packages/nextui/src/collapse/index.ts

@@ -7,6 +7,19 @@ export type { CollapseGroupProps } from './collapse-group';
 Collapse.Group = CollapseGroup;
 
 // export styled components
-export * from './collapse.styles';
+export {
+  StyledCollapse,
+  StyledCollapseView,
+  StyledCollapseContent,
+  StyledCollapseIcon,
+  StyledCollapseGroup
+} from './collapse.styles';
+export type {
+  CollapseVariantsProps,
+  CollapseViewVariantsProps,
+  CollapseContentVariantsProps,
+  CollapseIconVariantsProps,
+  CollapseGroupVariantsProps
+} from './collapse.styles';
 
 export default Collapse;

packages/nextui/src/container/container.styles.ts

@@ -1,6 +1,6 @@
 import { styled, VariantProps } from '../theme/stitches.config';
 
-const StyledContainer = styled('div', {
+export const StyledContainer = styled('div', {
   w: '100%',
   mr: 'auto',
   ml: 'auto',

packages/nextui/src/container/container.tsx

@@ -102,6 +102,8 @@ const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
   );
 };
 
+Container.toString = () => '.nextui-container';
+
 type ComponentProps = Omit<Props, keyof typeof defaultProps> &
   Partial<typeof defaultProps> &
   NativeAttrs;

packages/nextui/src/container/index.ts

@@ -2,6 +2,7 @@ import Container from './container';
 
 export type { ContainerProps } from './container';
 
-export * from './container.styles';
+export { StyledContainer } from './container.styles';
+export type { ContainerVariantsProps } from './container.styles';
 
 export default Container;

packages/nextui/src/divider/divider.tsx

@@ -77,6 +77,8 @@ const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   );
 };
 
+Divider.toString = () => '.nextui-divider';
+
 const MemoDivider = React.memo(Divider);
 
 export default withDefaults(MemoDivider, defaultProps);

packages/nextui/src/divider/index.ts

@@ -2,6 +2,10 @@ import Divider from './divider';
 
 export type { DividerProps } from './divider';
 
-export * from './divider.styles';
+export { StyledDivider, StyledDividerText } from './divider.styles';
+export type {
+  DividerVariantsProps,
+  DividerTextVariantsProps
+} from './divider.styles';
 
 export default Divider;

packages/nextui/src/grid/grid-container.tsx

@@ -51,4 +51,6 @@ const GridContainer: React.FC<React.PropsWithChildren<GridContainerProps>> = ({
   );
 };
 
+GridContainer.toString = () => '.nextui-grid-container';
+
 export default withDefaults(GridContainer, defaultProps);

packages/nextui/src/grid/grid-item.tsx

@@ -138,4 +138,6 @@ const GridItem: React.FC<React.PropsWithChildren<GridItemProps>> = ({
   );
 };
 
+GridItem.toString = () => '.nextui-grid-item';
+
 export default withDefaults(GridItem, defaultProps);

packages/nextui/src/grid/index.ts

@@ -5,7 +5,11 @@ export type { GridItemProps } from './grid-item';
 export type { GridProps } from './grid';
 export type { GridContainerProps } from './grid-container';
 
-export * from './grid.styles';
+export { StyledGridContainer, StyledGridItem } from './grid.styles';
+export type {
+  GridContainerVariantProps,
+  GridItemVariantProps
+} from './grid.styles';
 
 Grid.Container = GridContainer;
 

packages/nextui/src/image/image.skeleton.tsx

@@ -5,16 +5,19 @@ import {
   StyledImageSkeleton,
   ImageSkeletonVariantsProps
 } from './image.styles';
+import clsx from '../utils/clsx';
 import { __DEV__ } from '../utils/assertion';
 
 interface Props {
   opacity: number;
   as?: keyof JSX.IntrinsicElements;
   css?: CSS;
+  className?: string;
 }
 
 const defaultProps = {
-  opacity: 0.5
+  opacity: 0.5,
+  className: ''
 };
 
 export type ImageSkeletonProps = Props &
@@ -22,11 +25,11 @@ export type ImageSkeletonProps = Props &
   ImageSkeletonVariantsProps;
 
 const ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(
-  ({ opacity, css, ...props }) => {
+  ({ opacity, css, className, ...props }) => {
     return (
       <StyledImageSkeleton
         css={{ opacity, ...(css as any) }}
-        className="nextui-image-skeleton"
+        className={clsx('nextui-image-skeleton', className)}
         {...props}
       />
     );
@@ -37,4 +40,6 @@ if (__DEV__) {
   ImageSkeleton.displayName = 'NextUI - ImageSkeleton';
 }
 
+ImageSkeleton.toString = () => '.nextui-image-skeleton';
+
 export default withDefaults(ImageSkeleton, defaultProps);

packages/nextui/src/image/image.tsx

@@ -155,6 +155,8 @@ const Image: React.FC<ImageProps> = ({
   );
 };
 
+Image.toString = () => '.nextui-image';
+
 type MemoImageComponent<P = {}> = React.NamedExoticComponent<P>;
 
 type ComponentProps = Partial<typeof defaultProps> &

packages/nextui/src/image/index.ts

@@ -1,6 +1,17 @@
 import Image from './image';
 
 export type { ImageProps } from './image';
-export * from './image.styles';
+
+export {
+  StyledImageContainer,
+  StyledImage,
+  StyledImageSkeleton
+} from './image.styles';
+
+export type {
+  ImageContainerVariantProps,
+  ImageVariantsProps,
+  ImageSkeletonVariantsProps
+} from './image.styles';
 
 export default Image;

packages/nextui/src/index.ts

@@ -35,6 +35,7 @@ export type {
   Theme,
   NextUITheme,
   ThemeType,
+  CreateTheme,
   NextUIThemeContext
 } from './theme/types';
 export {

packages/nextui/src/input/index.ts

@@ -7,7 +7,26 @@ export type { FormElement } from './input-props';
 export type { InputProps } from './input';
 export type { InputPasswordProps } from './input-password';
 
-export * from './input.styles';
+export {
+  StyledInputMainContainer,
+  StyledInputContainer,
+  StyledInputWrapper,
+  StyledHelperTextContainer,
+  StyledHelperText,
+  StyledInputPlaceholder,
+  StyledInputBlockLabel,
+  StyledInputLabel,
+  StyledInputContent,
+  StyledInputClearButton,
+  StyledInput
+} from './input.styles';
+
+export type {
+  InputVariantsProps,
+  InputBlockLabelVariantsProps,
+  InputLabelVariantsProps,
+  InputContentVariantsProps
+} from './input.styles';
 
 Input.Textarea = Textarea;
 Input.Password = InputPassword;

packages/nextui/src/input/input-password.tsx

@@ -1,12 +1,13 @@
 import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
 import withDefaults from '../utils/with-defaults';
 import { Props, defaultProps } from './input-props';
+import { CSS } from '../theme/stitches.config';
 import PasswordIcon from './password-icon';
 import Input from './input';
 import clsx from '../utils/clsx';
 import { __DEV__ } from '../utils/assertion';
 
-interface PasswordProps extends Omit<Props, 'css'> {
+interface PasswordProps extends Props {
   hideToggle?: boolean;
   visibleIcon?: React.ReactNode;
   hiddenIcon?: React.ReactNode;
@@ -19,13 +20,10 @@ const passwordDefaultProps = {
   hiddenIcon: <PasswordIcon visible={false} />
 };
 
-type NativeAttrs = Omit<
-  React.InputHTMLAttributes<any>,
-  keyof PasswordProps | 'css'
->;
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
 export type InputPasswordProps = PasswordProps &
   typeof passwordDefaultProps &
-  NativeAttrs;
+  NativeAttrs & { css?: CSS };
 
 const InputPassword = React.forwardRef<
   HTMLInputElement,
@@ -70,4 +68,6 @@ if (__DEV__) {
   InputPassword.displayName = 'NextUI - Input Password';
 }
 
+InputPassword.toString = () => '.nextui-input-password';
+
 export default withDefaults(InputPassword, passwordDefaultProps);

packages/nextui/src/input/input-props.ts

@@ -6,13 +6,12 @@ import {
   NormalWeights,
   AsProp
 } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
 
 export type FormElement = HTMLInputElement | HTMLTextAreaElement;
 
 export interface Props
   extends AsProp<'input' | 'textarea'>,
-    Omit<React.HTMLAttributes<FormElement>, 'css'> {
+    React.HTMLAttributes<FormElement> {
   value?: string;
   fullWidth?: boolean;
   initialValue?: string;
@@ -43,7 +42,6 @@ export interface Props
   width?: string;
   className?: string;
   clearable?: boolean;
-  css?: CSS;
   onChange?: (e: React.ChangeEvent<FormElement>) => void;
   onClearClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onFocus?: (e: React.FocusEvent<FormElement>) => void;

packages/nextui/src/input/input.tsx

@@ -8,6 +8,7 @@ import React, {
   useState
 } from 'react';
 import { ContentPosition } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
 import Textarea from '../textarea';
 import InputPassword from './input-password';
 import { getId } from '../utils/collections';
@@ -31,8 +32,10 @@ import ClearIcon from '../utils/clear-icon';
 import clsx from '../utils/clsx';
 import { __DEV__ } from '../utils/assertion';
 
-type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props | 'css'>;
-export type InputProps = Props & typeof defaultProps & NativeAttrs;
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type InputProps = Props &
+  typeof defaultProps &
+  NativeAttrs & { css?: CSS };
 
 const simulateChangeEvent = (
   el: FormElement,
@@ -411,8 +414,10 @@ type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<
 
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs;
+  NativeAttrs & { css?: CSS };
 
 Input.defaultProps = defaultProps;
 
+Input.toString = () => '.nextui-input';
+
 export default Input as InputComponent<FormElement, ComponentProps>;

packages/nextui/src/link/icon.tsx

@@ -22,4 +22,6 @@ export const LinkIcon: React.FC<{}> = () => {
   );
 };
 
+LinkIcon.toString = () => '.nextui-link-icon';
+
 export default React.memo(LinkIcon);

packages/nextui/src/link/link.styles.ts

@@ -50,7 +50,7 @@ export const StyledLink = styled('a', {
     },
     block: {
       true: {
-        padding: '$1 $2',
+        padding: '$2 $4',
         borderRadius: '$base'
       }
     },

packages/nextui/src/link/link.tsx

@@ -33,6 +33,9 @@ const Link = React.forwardRef<React.ElementRef<typeof StyledLink>, LinkProps>(
 if (__DEV__) {
   Link.displayName = 'NextUI - Link';
 }
+
+Link.toString = () => '.nextui-link';
+
 const MemoLink = React.memo(Link);
 
 export default withDefaults(MemoLink, defaultProps);

packages/nextui/src/loading/index.ts

@@ -4,6 +4,22 @@ export type { LoadingProps } from './loading';
 export type { SpinnerProps } from './spinner';
 
 // export styled components
-export * from './loading.styles';
+export {
+  StyledLoadingContainer,
+  StyledSpinnerContainer,
+  StyledSpinner,
+  StyledSpinnerSpan,
+  StyledLoading,
+  StyledLoadingLabel
+} from './loading.styles';
 
+export type {
+  LoadingContainerVariantsProps,
+  LoadingVariantsProps,
+  SpinnerVariantsProps,
+  SpinnerContainerVariantsProps,
+  LoadingLabelVariantsProps
+} from './loading.styles';
+
+export { default as Spinner } from './spinner';
 export default Loading;

packages/nextui/src/loading/loading.tsx

@@ -23,12 +23,12 @@ const defaultProps = {
   type: 'default' as NormalLoaders
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type LoadingProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  LoadingContainerVariantsProps;
+  LoadingContainerVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-loading';
 
@@ -77,6 +77,8 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   );
 };
 
+Loading.toString = () => '.nextui-loading';
+
 const MemoLoading = React.memo(Loading);
 
 export default withDefaults(MemoLoading, defaultProps);

packages/nextui/src/loading/spinner.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NormalSizes, SimpleColors } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledSpinner,
   StyledSpinnerContainer,
@@ -17,8 +18,10 @@ interface Props {
   as?: keyof JSX.IntrinsicElements;
 }
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
-export type SpinnerProps = Props & NativeAttrs & SpinnerVariantsProps;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type SpinnerProps = Props &
+  NativeAttrs &
+  SpinnerVariantsProps & { css?: CSS };
 
 const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
   children,
@@ -58,4 +61,6 @@ const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
   );
 };
 
+Spinner.toString = () => '.nextui-spinner';
+
 export default Spinner;

packages/nextui/src/modal/index.ts

@@ -12,6 +12,20 @@ export type { ModalHeaderProps } from './modal-header';
 export type { ModalBodyProps } from './modal-body';
 export type { ModalFooterProps } from './modal-footer';
 
-export * from './modal.styles';
+export {
+  StyledModalHideTab,
+  StyledModalCloseButton,
+  StyledModalHeader,
+  StyledModalBody,
+  StyledModalFooter,
+  StyledModal
+} from './modal.styles';
+export type {
+  ModalVariantsProps,
+  ModalCloseButtonVariantsProps,
+  ModalBodyVariantsProps,
+  ModalHeaderVariantsProps,
+  ModalFooterVariantsProps
+} from './modal.styles';
 
 export default Modal;

packages/nextui/src/modal/modal-body.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import withDefaults from '../utils/with-defaults';
 import { ModalContext } from './modal-context';
+import { CSS } from '../theme/stitches.config';
 import { StyledModalBody, ModalBodyVariantsProps } from './modal.styles';
 import cslx from '../utils/clsx';
 
@@ -15,12 +16,12 @@ const defaultProps = {
   autoMargin: true
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>;
 
 export type ModalBodyProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  ModalBodyVariantsProps;
+  ModalBodyVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-modal-body';
 
@@ -55,6 +56,8 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   );
 };
 
+ModalBody.toString = () => '.nextui-modal-body';
+
 const MemoModalBody = React.memo(ModalBody);
 
 export default withDefaults(MemoModalBody, defaultProps);

packages/nextui/src/modal/modal-close-button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ClearIcon from '../utils/clear-icon';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledModalCloseButton,
   ModalCloseButtonVariantsProps
@@ -10,7 +11,11 @@ interface Props {
   as?: keyof JSX.IntrinsicElements;
 }
 
-export type ModalCloseButtonProps = Props & ModalCloseButtonVariantsProps;
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
+
+export type ModalCloseButtonProps = Props &
+  NativeAttrs &
+  ModalCloseButtonVariantsProps & { css?: CSS };
 
 const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
   onClick,
@@ -42,6 +47,8 @@ const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
   );
 };
 
+ModalCloseButton.toString = () => '.nextui-modal-close-icon';
+
 const MemoModalCloseButton = React.memo(ModalCloseButton);
 
 export default MemoModalCloseButton;

packages/nextui/src/modal/modal-footer.tsx

@@ -65,6 +65,8 @@ const ModalFooter: React.FC<React.PropsWithChildren<ModalFooterProps>> = ({
   );
 };
 
+ModalFooter.toString = () => '.nextui-modal-footer';
+
 const MemoModalFooter = React.memo(ModalFooter);
 
 export default withDefaults(MemoModalFooter, defaultProps);

packages/nextui/src/modal/modal-header.tsx

@@ -66,6 +66,8 @@ const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> = ({
   );
 };
 
+ModalHeader.toString = () => '.nextui-modal-header';
+
 const MemoModalHeader = React.memo(ModalHeader);
 
 export default withDefaults(MemoModalHeader, defaultProps);

packages/nextui/src/modal/modal-wrapper.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useMemo, useState } from 'react';
 import withDefaults from '../utils/with-defaults';
 import CSSTransition from '../utils/css-transition';
 import { isChildElement } from '../utils/collections';
+import { CSS } from '../theme/stitches.config';
 import ModalCloseButton from './modal-close-button';
 import { KeyCode } from '../use-keyboard';
 import {
@@ -29,7 +30,11 @@ const defaultProps = {
   rebound: false
 };
 
-export type ModalWrapperProps = Props & ModalVariantsProps;
+type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
+
+export type ModalWrapperProps = Props &
+  NativeAttrs &
+  ModalVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-modal';
 
@@ -154,4 +159,6 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   );
 };
 
+ModalWrapper.toString = () => '.nextui-modal-wrapper';
+
 export default withDefaults(ModalWrapper, defaultProps);

packages/nextui/src/modal/modal.tsx

@@ -170,6 +170,8 @@ if (__DEV__) {
   Backdrop.displayName = 'NextUI - Modal';
 }
 
+Modal.toString = () => '.nextui-modal';
+
 Modal.defaultProps = defaultProps;
 
 export default Modal as ModalComponent<ComponentProps>;

packages/nextui/src/pagination/index.ts

@@ -4,6 +4,19 @@ export type { PaginationProps } from './pagination';
 export type { PaginationItemProps } from './pagination-item';
 export type { PaginationHighlightProps } from './pagination-highlight';
 
-export * from './pagination.styles';
+export {
+  StyledPaginationEllipsis,
+  StyledPaginationIcon,
+  StyledPaginationItemContent,
+  StyledPaginationItem,
+  StyledPaginationHighlight,
+  StyledPagination
+} from './pagination.styles';
+
+export type {
+  PaginationVariantsProps,
+  PaginationItemVariantsProps,
+  PaginationHighlightVariantsProps
+} from './pagination.styles';
 
 export default Pagination;

packages/nextui/src/pagination/pagination-highlight.tsx

@@ -54,4 +54,6 @@ const PaginationHighlight: React.FC<PaginationHighlightProps> = ({
   );
 };
 
+PaginationHighlight.toString = () => '.nextui-pagination-highlight';
+
 export default PaginationHighlight;

packages/nextui/src/pagination/pagination-icon.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PaginationItem from './pagination-item';
 import { StyledPaginationIcon } from './pagination.styles';
+import { CSS } from '../theme/stitches.config';
 
-export interface PaginationIconProps {
+interface Props {
   isPrev?: boolean;
   disabled?: boolean;
   onlyDots?: boolean;
@@ -11,6 +12,10 @@ export interface PaginationIconProps {
   onClick?: (e: React.MouseEvent) => void;
 }
 
+type NativeAttrs = Omit<React.SVGAttributes<unknown>, keyof Props>;
+
+export type PaginationIconProps = Props & NativeAttrs & { css?: CSS };
+
 const PaginationIcon: React.FC<PaginationIconProps> = ({
   isPrev,
   disabled,
@@ -52,6 +57,8 @@ const PaginationIcon: React.FC<PaginationIconProps> = ({
   );
 };
 
+PaginationIcon.toString = () => '.nextui-pagination-icon';
+
 const MemoPaginationIcon = React.memo(PaginationIcon);
 
 export default MemoPaginationIcon;

packages/nextui/src/pagination/pagination-item.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { DOTS } from '../use-pagination';
 import clsx from '../utils/clsx';
 import withDefaults from '../utils/with-defaults';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledPaginationItem,
   StyledPaginationItemContent,
@@ -42,14 +43,11 @@ const getItemAriaLabel = (page?: string | number) => {
   }
 };
 
-type NativeAttrs = Omit<
-  React.ButtonHTMLAttributes<unknown>,
-  keyof Props | 'css'
->;
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
 
 export type PaginationItemProps = Props &
   NativeAttrs &
-  PaginationItemVariantsProps;
+  PaginationItemVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-pagination-item';
 
@@ -105,4 +103,6 @@ const PaginationItem: React.FC<React.PropsWithChildren<PaginationItemProps>> =
     );
   };
 
+PaginationItem.toString = () => '.nextui-pagination-item';
+
 export default withDefaults(PaginationItem, defaultProps);

packages/nextui/src/pagination/pagination.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import usePagination, { DOTS, PaginationItemParam } from '../use-pagination';
+import { CSS } from '../theme/stitches.config';
 import PaginationItem from './pagination-item';
 import PaginationEllipsis from './pagination-ellipsis';
 import PaginationIcon from './pagination-icon';
@@ -43,11 +44,12 @@ const defaultProps = {
   rounded: false
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+
 export type PaginationProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  PaginationVariantsProps;
+  PaginationVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-pagination';
 
@@ -183,7 +185,7 @@ type MemoPaginationComponent<P = {}> = React.NamedExoticComponent<P>;
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
   NativeAttrs &
-  PaginationVariantsProps;
+  PaginationVariantsProps & { css?: CSS };
 
 Pagination.defaultProps = defaultProps;
 
@@ -191,6 +193,8 @@ if (__DEV__) {
   Pagination.displayName = 'NextUI - Pagination';
 }
 
+Pagination.toString = () => '.nextui-pagination';
+
 export default React.memo(
   Pagination
 ) as MemoPaginationComponent<ComponentProps>;

packages/nextui/src/progress/index.ts

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

packages/nextui/src/progress/progress.tsx

@@ -114,6 +114,8 @@ if (__DEV__) {
   Progress.displayName = 'NextUI - Progress';
 }
 
+Progress.toString = () => '.nextui-progress';
+
 const MemoProgress = React.memo(Progress);
 
 export default withDefaults(MemoProgress, defaultProps);

packages/nextui/src/radio/index.ts

@@ -6,6 +6,18 @@ Radio.Group = RadioGroup;
 Radio.Description = RadioDescription;
 Radio.Desc = RadioDescription;
 
-export * from './radio.styles';
+export {
+  StyledRadioInput,
+  StyledRadioLabel,
+  StyledRadioPoint,
+  StyledRadio,
+  StyledRadioGroup,
+  StyledRadioDescription
+} from './radio.styles';
+export type {
+  RadioVariantsProps,
+  RadioLabelVariantsProps,
+  RadioGroupVariantsProps
+} from './radio.styles';
 
 export default Radio;

packages/nextui/src/radio/radio-group.tsx

@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults';
 import { RadioContext } from './radio-context';
 import { NormalSizes, SimpleColors } from '../utils/prop-types';
 import { StyledRadioGroup, RadioGroupVariantsProps } from './radio.styles';
+import { CSS } from '../theme/stitches.config';
 
 interface Props {
   value?: string | number;
@@ -21,11 +22,11 @@ const defaultProps = {
   textColor: 'default' as SimpleColors
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type RadioGroupProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  RadioGroupVariantsProps;
+  RadioGroupVariantsProps & { css?: CSS };
 
 const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
   disabled,
@@ -73,4 +74,6 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
   );
 };
 
+RadioGroup.toString = () => '.nextui-radio-group';
+
 export default withDefaults(RadioGroup, defaultProps);

packages/nextui/src/radio/radio.tsx

@@ -5,6 +5,7 @@ import { pickChild } from '../utils/collections';
 import useWarning from '../use-warning';
 import useKeyboard, { KeyCode } from '../use-keyboard';
 import { SimpleColors, NormalSizes } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledRadio,
   StyledRadioLabel,
@@ -47,15 +48,12 @@ const defaultProps = {
   preventDefault: true
 };
 
-type NativeAttrs = Omit<
-  React.InputHTMLAttributes<unknown>,
-  keyof Props | 'css'
->;
+type NativeAttrs = Omit<React.InputHTMLAttributes<unknown>, keyof Props>;
 
 export type RadioProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  RadioVariantsProps;
+  RadioVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-radio';
 
@@ -194,7 +192,7 @@ type RadioComponent<P = {}> = React.FC<P> & {
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
   NativeAttrs &
-  RadioVariantsProps;
+  RadioVariantsProps & { css?: CSS };
 
 Radio.defaultProps = defaultProps;
 
@@ -202,6 +200,8 @@ if (__DEV__) {
   Radio.displayName = 'NextUI - Radio';
 }
 
+Radio.toString = () => '.nextui-radio';
+
 export default withDefaults(
   Radio,
   defaultProps

packages/nextui/src/row/index.ts

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

packages/nextui/src/row/row.styles.ts

@@ -1,6 +1,6 @@
 import { styled, VariantProps } from '../theme/stitches.config';
 
-const StyledRow = styled('div', {
+export const StyledRow = styled('div', {
   display: 'flex',
   position: 'relative',
   boxSizing: 'border-box',

packages/nextui/src/row/row.tsx

@@ -51,6 +51,8 @@ const Row: React.FC<React.PropsWithChildren<RowProps>> = ({
   );
 };
 
+Row.toString = () => '.nextui-row';
+
 const MemoRow = React.memo(Row);
 
 export default withDefaults(MemoRow, defaultProps);

packages/nextui/src/snippet/snippet-icon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import withDefaults from '../utils/with-defaults';
 import { StyledSnippetCopyButtonIcon } from './snippet.styles';
+import { CSS } from '../theme/stitches.config';
 
 interface Props {
   width?: number;
@@ -16,7 +17,9 @@ const defaultProps = {
 
 type NativeAttrs = Omit<React.SVGProps<SVGSVGElement>, keyof Props>;
 
-export type CategoryProps = Props & typeof defaultProps & NativeAttrs;
+export type CategoryProps = Props &
+  typeof defaultProps &
+  NativeAttrs & { css?: CSS };
 
 const Copy: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
   return (
@@ -35,6 +38,8 @@ const Copy: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
   );
 };
 
+Copy.toString = () => '.nextui-snippet-copy-icon';
+
 const MemoCopy = React.memo(Copy);
 
 export default withDefaults(MemoCopy, defaultProps);

packages/nextui/src/snippet/snippet.tsx

@@ -155,6 +155,8 @@ if (__DEV__) {
   Snippet.displayName = 'NextUI - Snippet';
 }
 
+Snippet.toString = () => '.nextui-snippet';
+
 const MemoSnippet = React.memo(Snippet);
 
 export default withDefaults(MemoSnippet, defaultProps);

packages/nextui/src/spacer/index.ts

@@ -1,4 +1,7 @@
 import Spacer from './spacer';
 export type { SpacerProps } from './spacer';
 
+export { StyledSpacer } from './spacer.styles';
+export type { SpacerVariantsProps } from './spacer.styles';
+
 export default Spacer;

packages/nextui/src/spacer/spacer.tsx

@@ -34,6 +34,8 @@ const Spacer: React.FC<SpacerProps> = ({ x, y, inline, css, ...props }) => {
   );
 };
 
+Spacer.toString = () => '.nextui-spacer';
+
 const MemoSpacer = React.memo(Spacer);
 
 export default withDefaults(MemoSpacer, defaultProps);

packages/nextui/src/switch/index.ts

@@ -1,6 +1,15 @@
 import Switch from './switch';
 
 export type { SwitchProps } from './switch';
-export * from './switch.styles';
+export {
+  StyledSwitchContainer,
+  StyledSwitchInput,
+  StyledSwitchCircle,
+  StyledSwitch
+} from './switch.styles';
+export type {
+  SwitchVariantsProps,
+  SwitchContainerVariantsProps
+} from './switch.styles';
 
 export default Switch;

packages/nextui/src/switch/switch.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Switch from './index';
 import { Moon, Sun, Lock, Notification } from '../utils/icons';
-import useTheme from '../use-theme';
 
 export default {
   title: 'Inputs/Switch',
@@ -89,22 +88,11 @@ export const Disabled = () => (
 );
 
 export const Icons = () => {
-  const theme = useTheme();
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Switch
-        size="xl"
-        icon={<Lock theme={theme} fill={theme.palette.secondary} />}
-      />
-      <Switch
-        size="xl"
-        icon={<Notification theme={theme} fill={theme.palette.primary} />}
-      />
-      <Switch
-        size="xl"
-        iconOn={<Sun theme={theme} fill={theme.palette.primary} />}
-        iconOff={<Moon theme={theme} />}
-      />
+      <Switch size="xl" icon={<Lock />} />
+      <Switch size="xl" icon={<Notification />} />
+      <Switch size="xl" iconOn={<Sun />} iconOff={<Moon />} />
     </div>
   );
 };

packages/nextui/src/switch/switch.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import withDefaults from '../utils/with-defaults';
 import useWarning from '../use-warning';
 import useKeyboard, { KeyCode } from '../use-keyboard';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledSwitch,
   StyledSwitchContainer,
@@ -49,14 +50,11 @@ const defaultProps = {
   initialChecked: false
 };
 
-type NativeAttrs = Omit<
-  React.LabelHTMLAttributes<unknown>,
-  keyof Props | 'css'
->;
+type NativeAttrs = Omit<React.LabelHTMLAttributes<unknown>, keyof Props>;
 export type SwitchProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  SwitchContainerVariantsProps;
+  SwitchContainerVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-switch';
 
@@ -171,6 +169,8 @@ const Switch: React.FC<SwitchProps> = ({
   );
 };
 
+Switch.toString = () => '.nextui-switch';
+
 const MemoSwitch = React.memo(Switch);
 
 export default withDefaults(MemoSwitch, defaultProps);

packages/nextui/src/text/child.tsx

@@ -79,6 +79,8 @@ const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = ({
   );
 };
 
+TextChild.toString = () => '.nextui-text-child';
+
 const MemoTextChild = React.memo(TextChild);
 
 export default withDefaults(MemoTextChild, defaultProps);

packages/nextui/src/text/index.ts

@@ -1,6 +1,6 @@
 import Text from './text';
 export type { TextProps } from './text';
 
-export * from './text.styles';
+export { StyledText } from './text.styles';
 
 export default Text;

packages/nextui/src/text/text.styles.ts

@@ -31,9 +31,6 @@ export const StyledText = styled('p', {
         fontWeight: '$black'
       }
     }
-  },
-  defaultVariants: {
-    weight: 'normal'
   }
 });
 

packages/nextui/src/text/text.tsx

@@ -132,6 +132,8 @@ const Text: React.FC<React.PropsWithChildren<TextProps>> = ({
   );
 };
 
+Text.toString = () => '.nextui-text';
+
 const MemoText = React.memo(Text);
 
 export default withDefaults(MemoText, defaultProps);

packages/nextui/src/textarea/textarea.tsx

@@ -25,7 +25,6 @@ interface Props {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  css?: CSS;
 }
 
 const defaultProps = {
@@ -37,7 +36,7 @@ const defaultProps = {
 
 type NativeAttrs = Omit<
   React.TextareaHTMLAttributes<any>,
-  keyof Props | keyof InputProps | 'css'
+  keyof Props | keyof InputProps
 >;
 
 type BaseAttrs = Omit<InputProps, ExcludedInputProps>;
@@ -45,7 +44,7 @@ type BaseAttrs = Omit<InputProps, ExcludedInputProps>;
 export type TextareaProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  BaseAttrs;
+  BaseAttrs & { css?: CSS };
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (textareaProps, ref: React.Ref<HTMLTextAreaElement | null>) => {
@@ -143,4 +142,6 @@ if (__DEV__) {
   Textarea.displayName = 'NextUI - Textarea';
 }
 
+Textarea.toString = () => '.nextui-textarea';
+
 export default withDefaults(Textarea, defaultProps);

packages/nextui/src/theme/dark-theme.ts

@@ -10,11 +10,16 @@ export default {
     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: '$gray500',
+    border: '$gray700',
     selection: '#ff4ecd'
   },
   shadows: {

packages/nextui/src/theme/theme-provider.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useState, useMemo, useEffect } from 'react';
 import CssBaseline from '../css-baseline';
 import ThemeContext, { defaultContext } from './theme-context';
 import withDefaults from '../utils/with-defaults';
-import { NextUIThemeContext, ThemeType } from './types';
+import { CreateTheme, NextUIThemeContext, ThemeType } from './types';
 import deepMerge from '../utils/deep-merge';
 import { copyObject } from '../utils/object';
 import { SsrProvider } from './ssr-provider';
@@ -10,6 +10,7 @@ import useSSR from '../use-ssr';
 import { getDocumentCSSTokens } from './utils';
 
 export interface Props {
+  theme?: CreateTheme;
   disableBaseline?: boolean;
 }
 
@@ -20,6 +21,7 @@ const defaultProps = {
 export type ThemeProviderProps = Props & typeof defaultProps;
 
 const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
+  theme: userTheme,
   disableBaseline,
   children
 }) => {
@@ -84,7 +86,13 @@ const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
     <SsrProvider>
       <ThemeContext.Provider value={providerValue}>
         {!disableBaseline && <CssBaseline />}
+        {userTheme ? (
+          <div id="__nextui" className={userTheme}>
             {children}
+          </div>
+        ) : (
+          children
+        )}
       </ThemeContext.Provider>
     </SsrProvider>
   );

packages/nextui/src/theme/types.ts

@@ -1,4 +1,4 @@
-import { StitchesTheme } from './stitches.config';
+import { StitchesTheme, createThemeBase } from './stitches.config';
 
 /** Configuration Interface */
 declare namespace ConfigType {
@@ -33,6 +33,7 @@ declare namespace ConfigType {
 export type BaseTheme = ConfigType.Theme;
 export type NextUITheme = StitchesTheme;
 export type ThemeType = 'dark' | 'light';
+export type CreateTheme = ReturnType<typeof createThemeBase>;
 
 export interface TokenValue {
   token: number | string;

packages/nextui/src/tooltip/index.ts

@@ -3,6 +3,16 @@ import Tooltip from './tooltip';
 export type { TooltipProps } from './tooltip';
 export type { TooltipContentProps } from './tooltip-content';
 
-export * from './tooltip.styles';
+export {
+  StyledTooltipTrigger,
+  StyledTooltipArrow,
+  StyledTooltipContent,
+  StyledTooltip
+} from './tooltip.styles';
+
+export type {
+  TooltipTriggerVariantsProps,
+  TooltipContentVariantsProps
+} from './tooltip.styles';
 
 export default Tooltip;

packages/nextui/src/tooltip/tooltip-content.tsx

@@ -154,4 +154,6 @@ const TooltipContent: React.FC<React.PropsWithChildren<TooltipContentProps>> =
     );
   };
 
+TooltipContent.toString = () => '.nextui-tooltip-content';
+
 export default withDefaults(TooltipContent, defaultProps);

packages/nextui/src/tooltip/tooltip.tsx

@@ -150,4 +150,6 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   );
 };
 
+Tooltip.toString = () => '.nextui-tooltip';
+
 export default withDefaults(Tooltip, defaultProps);

packages/nextui/src/user/index.ts

@@ -6,6 +6,19 @@ User.Link = UserLink;
 export type { UserProps } from './user';
 export type { UserLinkProps } from './user-link';
 
-export * from './user.styles';
+export {
+  StyledUser,
+  StyledUserInfo,
+  StyledUserName,
+  StyledUserSocial,
+  StyledUserLink
+} from './user.styles';
+export type {
+  UserVariantsProps,
+  UserInfoVariantsProps,
+  UserNameVariantsProps,
+  UserSocialVariantsProps,
+  UserLinkVariantsProps
+} from './user.styles';
 
 export default User;

packages/nextui/src/user/user-link.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import Link from '../link';
 import { StyledUserLink, UserLinkVariantsProps } from './user.styles';
+import { CSS } from '../theme/stitches.config';
 import { __DEV__ } from '../utils/assertion';
 
 interface Props {
   href?: string;
 }
-type NativeAttrs = Omit<
-  React.AnchorHTMLAttributes<unknown>,
-  keyof Props | 'css'
->;
-export type UserLinkProps = Props & NativeAttrs & UserLinkVariantsProps;
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<unknown>, keyof Props>;
+export type UserLinkProps = Props &
+  NativeAttrs &
+  UserLinkVariantsProps & { css?: CSS };
 
 const UserLink = React.forwardRef<
   HTMLAnchorElement,
@@ -40,6 +40,8 @@ if (__DEV__) {
   UserLink.displayName = 'NextUI - UserLink';
 }
 
+UserLink.toString = () => '.nextui-user-link';
+
 const MemoUserLink = React.memo(UserLink);
 
 export default MemoUserLink;

packages/nextui/src/user/user.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { Avatar } from '../index';
 import UserLink from './user-link';
 import { NormalColors, NormalSizes } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
 import {
   StyledUser,
   StyledUserInfo,
@@ -30,11 +31,11 @@ const defaultProps = {
   bordered: false
 };
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | 'css'>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type UserProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  UserVariantsProps;
+  UserVariantsProps & { css?: CSS };
 
 const preClass = 'nextui-user';
 
@@ -72,11 +73,13 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   );
 };
 
+User.toString = () => '.nextui-user';
+
 type MemoUserComponent<P = {}> = React.NamedExoticComponent<P> & {
   Link: typeof UserLink;
 };
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs;
+  NativeAttrs & { css?: CSS };
 
 export default React.memo(User) as MemoUserComponent<ComponentProps>;