Keep/Update-V1.2.0

.storybook/style.css

@@ -1056,30 +1056,6 @@ input[type='number'] {
   letter-spacing: -0.5px;
 }
 
-.description-1 {
-  font-size: 1.875rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-2 {
-  font-size: 1.75rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-3 {
-  font-size: 1.625rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.5px;
-}
-
-.description-4 {
-  font-size: 1.5rem;
-  line-height: 2.25rem;
-  letter-spacing: -0.5px;
-}
-
 .body-1 {
   font-size: 1.375rem;
   line-height: 1.875rem;

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "cSpell.words": ["embla", "Nuxt"]
 }

README.md

@@ -19,48 +19,54 @@ Keep React is an open-source component library built on Tailwind CSS and React.j
 
 ## Installation
 
-### Vite React Application
+## Vite React Application
 
-After creating a React application with Vite, follow these steps to
-install Keep React:
+Setting Up Keep React in Vite React Application
 
-`Step 1:` Install Tailwind CSS
+`Step 1:` Create a Vite React Application
+
+```console
+npm create vite@latest my-project -- --template react
+cd my-project
+```
+
+`Step 2:` Install Tailwind CSS
 
 ```console
 npm i autoprefixer postcss tailwindcss
 npx tailwindcss init -p
 ```
 
-`Step 2:` Install Keep React:
+`Step 3:` Install Keep React:
 
 ```console
-npm i keep-react
+npm i keep-react phosphor-react
 ```
 
 Or with Yarn
 
 ```console
-yarn add keep-react
+yarn add keep-react phosphor-react
 ```
 
 Or with Pnpm
 
 ```console
-pnpm add keep-react
+pnpm add keep-react phosphor-react
 ```
 
-`Step 3:` Go to the `tailwind.config.js` file and paste the
+`Step 4:` Go to the `tailwind.config.js` file and paste the
 following code:
 
 ```jsx
 import keepPreset from 'keep-react/preset'
 export default {
-  content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', 'node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
   presets: [keepPreset],
 }
 ```
 
-`Step 4:` Add Tailwind CSS to index.css File:
+`Step 5:` Add Tailwind CSS to index.css File:
 
 ```css
 @import 'keep-react/css';
@@ -69,49 +75,52 @@ export default {
 @tailwind utilities;
 ```
 
-### Next JS Application
+## Next JS Application
 
-You can easily integrate `keep-react` into your Next.js application. Starting from Next.js version 13.4, the app router automatically installs Tailwind CSS, eliminating the need for a separate Tailwind CSS installation. If you have already installed Tailwind CSS as part of the Next.js application setup, you can proceed with Step 2. Otherwise, start with Step 1.
+You can easily integrate `keep-react` into your Next.js application.
 
-After creating a Next JS application, follow these steps to
-install Keep React:
-
-`Step 1:` Install Tailwind CSS
+`Step 1:` Install Next Js Application
 
 ```console
-npm i autoprefixer postcss tailwindcss
-npx tailwindcss init -p
+npx create-next-app@latest
 ```
 
+Ensure that you select `tailwindcss` as a dependency for your application during the setup.
+
+`Would you like to use Tailwind CSS? -- Yes`
+
 `Step 2:` Install Keep React
 
 ```console
-npm i keep-react
+npm i keep-react phosphor-react
 ```
 
 Or with Yarn
 
 ```console
-yarn add keep-react
+yarn add keep-react phosphor-react
 ```
 
 Or with Pnpm
 
 ```console
-pnpm add keep-react
+pnpm add keep-react phosphor-react
 ```
 
 `Step 3:` Go to the `tailwind.config.js` file and paste the
 following code
 
 ```js
 module.exports = {
-  content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
+  content: [
+    // ... (existing content)
+    './node_modules/keep-react/**/*.{js,jsx,ts,tsx}',
+  ],
   presets: [require('keep-react/preset')],
 }
 ```
 
-`Step 4:` Add Tailwind CSS to globals.css File:
+`Step 4:` Add Tailwind CSS to `globals.css` File:
 
 ```css
 @import 'keep-react/css';
@@ -128,7 +137,7 @@ Congratulations! You have successfully installed the Keep React. Now you can imp
 'use client'
 import { Button } from 'keep-react'
 const App = () => {
-  return <Button size="md">Default</Button>
+  return <Button>Button</Button>
 }
 export default App
 ```

app/components/CodePreview.tsx

@@ -5,25 +5,27 @@ import { ReactNode, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '../../hooks/useCopy'
+import { cn } from '../src/helpers/cn'
 
 interface CodePreviewProps {
   children: ReactNode
   code: string
   github?: string
+  className?: string
 }
 
-const CodePreview = ({ children, code, github }: CodePreviewProps) => {
+const CodePreview = ({ children, code, github, className }: CodePreviewProps) => {
   const [active, setActive] = useState(0)
   const { copy, copyToClipboard } = useCopy()
   const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
 
   return (
-    <div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
+    <div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small">
       <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
         <button
           type="button"
           onClick={() => setActive(0)}
-          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
+          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium text-metal-400 first:ml-0 ${
             active === 0 ? '!border-b-white text-white' : ''
           }`}
           id="preview-btn">
@@ -32,7 +34,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           id="code-btn"
           onClick={() => setActive(1)}
-          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium  text-metal-400 first:ml-0 ${
+          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium  text-metal-400 first:ml-0 ${
             active === 1 ? '!border-b-metal-100 text-white' : ''
           }`}>
           Code
@@ -54,7 +56,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
                 className="flex h-8 w-8 items-center justify-center rounded-md border-2 border-metal-800 bg-metal-900 transition-all duration-300 hover:border-transparent hover:bg-metal-700 md:h-9 md:w-9"
                 onClick={() => copyToClipboard(code)}>
                 {copy ? (
-                  <span className="flex items-center text-body-6">
+                  <span className="flex items-center text-body-5">
                     <Check size={20} color="white" />
                   </span>
                 ) : (
@@ -81,7 +83,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
             </SyntaxHighlighter>
           </div>
         ) : (
-          <div className="flex w-full items-center justify-center bg-white px-2 py-3 md:p-6">
+          <div className={cn('flex w-full items-center justify-center bg-white px-2 py-3 md:p-6', className)}>
             <div className="h-full w-full overflow-auto">{children}</div>
           </div>
         )}