bundling fixes

package.json

@@ -11,7 +11,8 @@
       "import": "./dist/fxtrot-ui.es.js",
       "require": "./dist/fxtrot-ui.umd.js",
       "types": "./dist/types/index.d.ts"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "sideEffects": false,
   "repository": {
@@ -64,13 +65,15 @@
     "@mdx-js/mdx": "^2.1.3",
     "@mdx-js/react": "^2.1.3",
     "@next/mdx": "^13.0.6",
+    "@stitches/react": "^1.2.8",
     "@types/glob": "^8.0.0",
     "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.11.13",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.29.0",
     "eslint-config-next": "^13.0.6",
@@ -89,7 +92,7 @@
     "next": "^13.0.6",
     "next-seo": "^5.15.0",
     "pinst": "^3.0.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
     "postcss-preset-env": "^7.8.3",
     "prettier": "^2.8.1",
     "prettier-eslint": "^15.0.1",
@@ -107,10 +110,11 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
     "typescript-plugin-css-modules": "^4.1.1",
-    "vite": "^3.2.5"
+    "vite": "^4.0.1"
   },
   "peerDependencies": {
     "@heroicons/react": "^2.0.0",
+    "@stitches/react": "^1.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/lib/form-field/label.tsx

@@ -7,7 +7,7 @@ import { flexCss, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-interface Props extends FlexVariants {
+export interface Props extends FlexVariants {
   label: ReactNode;
   secondary?: ReactNode;
   disabled?: boolean;

src/pages-helpers/CopyButton.tsx

@@ -7,8 +7,13 @@ type Props = { text: string; color: React.ComponentProps<typeof Icon>['color'];
 export const CopyButton = ({ text, color, label = 'Copy code' }: Props) => {
   const [copied, copy] = useCopyToClipboard();
   return (
-    <Button label={label} onClick={() => copy(text)} variant="flat" size="sm">
-      <Icon className={`text-${color}`} size="sm" as={copied ? CheckIcon : ClipboardIcon} />
-    </Button>
+    <Button
+      label={label}
+      style={{ color }}
+      icon={copied ? CheckIcon : ClipboardIcon}
+      onClick={() => copy(text)}
+      variant="flat"
+      size="sm"
+    />
   );
 };

src/pages-helpers/MdxProvider.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { BsTypeBold, BsTypeItalic, BsTypeUnderline } from 'react-icons/bs';
 import * as Icons from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import * as FxtrotUI from '@fxtrot/ui';
 
 import { Heading, Text, TextLink } from '@fxtrot/ui';

src/pages-helpers/MultilineCode.tsx

@@ -13,13 +13,13 @@ export const MultilineCode = ({ code, language }: Props) => {
     <Highlight {...defaultProps} theme={theme} code={code} language={language as Language}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <section className="group/code-wrapper relative">
-          <pre className={clsx('my-[1em] overflow-scroll rounded-sm p-4 text-start', className)} style={style}>
+          <pre className={clsx('overflow-scroll rounded-sm p-4 text-start my-1', className)} style={style}>
             {tokens.map((line, i) => {
               const lineProps = getLineProps({ line, key: i });
               return (
-                <line {...lineProps} className={clsx('table-row', lineProps.className)} key={i}>
-                  <span className="pr-[1em] table-cell select-none text-end opacity-50">{i + 1}</span>
-                  <span className="table-cell text-sm">
+                <line {...lineProps} className={clsx('table-row text-sm', lineProps.className)} key={i}>
+                  <span className="table-cell select-none text-end opacity-50 pr-4">{i + 1}</span>
+                  <span className="table-cell">
                     {line.map((token, key) => (
                       <span key={key} {...getTokenProps({ token, key })} />
                     ))}
@@ -28,7 +28,7 @@ export const MultilineCode = ({ code, language }: Props) => {
               );
             })}
           </pre>
-          <div className="absolute top-2 right-1 opacity-0 transition-opacity delay-500 duration-240 group-hover/code-wrapper:opacity-100 group-hover/code-wrapper:delay-[0]">
+          <div className="absolute top-2 right-2 opacity-0 transition-opacity delay-500 duration-240 group-hover/code-wrapper:opacity-100 group-hover/code-wrapper:delay-[0s]">
             <CopyButton text={code} color="#fff" />
           </div>
         </section>

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import './globals.css';
+import '@fxtrot/ui/dist/style.css';
 
 import { NextSeo } from 'next-seo';
 import { ThemeProvider } from '@fxtrot/ui';

src/pages/components/Icon.mdx

@@ -2,6 +2,10 @@
 title: Icon
 ---
 
+## Icon
+
+Icons used in this project are <TextLink external="icon" href="https://heroicons.com/">Heroicons</TextLink> where you can find more, including their usage.
+
 import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 
 ```tsx
@@ -12,5 +16,3 @@ import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 ```tsx preview
 <Icon as={EllipsisVerticalIcon} size="xl" aria-label="See more" />
 ```
-
-Icons used in this project are <TextLink external="icon" href="https://heroicons.com/">Heroicons</TextLink> where you can find more, including their usage.

src/pages/index.tsx

@@ -27,7 +27,7 @@ const App = () => {
         <div className="grid h-full place-items-center p-8">
           <Column className="gap-16" cross="center">
             <Column className="gap-14" cross="center">
-              <Heading as="h1" level="4">
+              <Heading as="h1" level="3">
                 React component library for Fxtrot project
               </Heading>
               <Link href="/installation" passHref legacyBehavior>

src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

tsconfig.json

@@ -21,10 +21,19 @@
     "baseUrl": ".",
     "isolatedModules": true,
     "paths": {
-      "@fxtrot/ui": ["src/lib"]
+      "@fxtrot/ui": ["./"]
     },
     "incremental": true,
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "postcssOptions": {
+            "useConfig": true
+          }
+        }
+      }
+    ]
   },
   "include": ["docs", "src", "public"],
   "exclude": ["node_modules"]

tsconfig.lib.json

@@ -2,12 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "module": "esnext",
-    "target": "esnext",
     "declaration": true,
     "outDir": "dist/types",
     "emitDeclarationOnly": true
   },
-  "include": ["src/lib"],
+  "include": ["src/lib", "src/types"],
   "exclude": ["node_modules"]
 }

vite.config.js

@@ -1,9 +1,12 @@
 const path = require('path');
 const { defineConfig } = require('vite');
+const react = require('@vitejs/plugin-react');
 const pkg = require('./package.json');
 
+/** @type {import('vite').UserConfig} */
 module.exports = defineConfig({
   publicDir: false,
+  plugins: [react()],
   esbuild: {
     target: ['chrome105', 'safari16'],
   },