mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): stitches removed globally, react 18 implemented, pnpm setup changed
This commit is contained in:
Junior Garcia
parent
564337bac6
commit
c45109c8f4
4
.npmrc
4
.npmrc
@ -1,5 +1,3 @@
|
||||
strict-peer-dependencies=false
|
||||
enable-pre-post-scripts=true
|
||||
public-hoist-pattern[]=*typescript*
|
||||
public-hoist-pattern[]=*@stitches/react*
|
||||
public-hoist-pattern[]=*@react-types/*
|
||||
public-hoist-pattern[]=*tailwind-variants*
|
||||
@ -16,7 +16,7 @@
|
||||
"@codesandbox/sandpack-react": "0.14.3",
|
||||
"@mapbox/rehype-prism": "^0.6.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@nextui-org/react": "1.0.0-beta.12",
|
||||
"@nextui-org/react": "workspace:*",
|
||||
"@types/lodash": "^4.14.170",
|
||||
"@vercel/analytics": "^0.1.6",
|
||||
"algoliasearch": "^4.10.3",
|
||||
@ -37,10 +37,10 @@
|
||||
"parse-numeric-range": "1.2.0",
|
||||
"prism-react-renderer": "^1.2.1",
|
||||
"querystring": "^0.2.1",
|
||||
"react": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-autosuggest": "^10.1.0",
|
||||
"react-device-detect": "^1.17.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-iconly": "^2.2.2",
|
||||
"react-instantsearch-dom": "^6.12.0",
|
||||
"react-intersection-observer": "8.32.2",
|
||||
|
||||
24
apps/vite-example/.gitignore
vendored
24
apps/vite-example/.gitignore
vendored
@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "@nextui-org/vite-example",
|
||||
"private": true,
|
||||
"version": "1.0.0-beta.12",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/link": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.21",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,53 +0,0 @@
|
||||
import {cva, linkVariants, type ExtendVariantProps, type VariantProps} from "@nextui-org/theme";
|
||||
import {Link, LinkProps} from "@nextui-org/link";
|
||||
const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
|
||||
|
||||
const customLink = cva(null, {
|
||||
variants: {
|
||||
color: {
|
||||
...linkVariants.color,
|
||||
teal: "text-teal-600",
|
||||
},
|
||||
link: {
|
||||
true: "before:content-['👉'] before:mr-1",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
type MyLinkProps = ExtendVariantProps<LinkProps, VariantProps<typeof customLink>>;
|
||||
|
||||
const MyLink = (props: MyLinkProps) => {
|
||||
const {link, color, ...otherProps} = props;
|
||||
|
||||
return <Link {...otherProps} className={customLink({color, link})} isExternal={!!link} />;
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="flex flex-col space-y-3">
|
||||
<Link color="primary" href="#" size="xs">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="secondary" href="#" size="sm">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="success" href="#" size="md">
|
||||
{text}
|
||||
</Link>
|
||||
<Link color="warning" href="#" size="xl">
|
||||
{text}
|
||||
</Link>
|
||||
<Link className="text-2xl" color="error" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<Link className="text-2xl text-pink-500" href="#">
|
||||
{text}
|
||||
</Link>
|
||||
<MyLink link color="teal" href="#">
|
||||
Visit out new Store
|
||||
</MyLink>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
1
apps/vite-example/src/vite-env.d.ts
vendored
1
apps/vite-example/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,12 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
"node_modules/@nextui-org/link/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@nextui-org/theme/plugin")],
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{"path": "./tsconfig.node.json"}]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import {defineConfig} from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
@ -7,8 +7,8 @@
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.0.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
"@remix-run/vercel": "^1.4.0",
|
||||
"@vercel/node": "^1.14.0",
|
||||
"add": "^2.0.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.0.0"
|
||||
"react": "^18.0.0",
|
||||
"use-dark-mode": "^2.3.1",
|
||||
"yarn": "^1.22.18"
|
||||
},
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/react": "2.0.0-beta.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react": "^18.0.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.33",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"@testing-library/react": "^13.1.1",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-dom": "^17.0.2,
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
|
||||
24
package.json
24
package.json
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "nextui",
|
||||
"private": true,
|
||||
"version": "2.0.0",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Junior Garcia",
|
||||
@ -29,9 +30,10 @@
|
||||
"lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
|
||||
"turbo:clean": "turbo clean && rimraf ./node_modules/.cache/turbo",
|
||||
"turbo:graph": "pnpm build --graph=dependency-graph.png",
|
||||
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm install",
|
||||
"clean": "pnpm turbo:clean && pnpm clean:node-modules && pnpm clean:lock && pnpm install",
|
||||
"clean:pn-types": "rimraf ./node_modules/.pnpm/csstype*",
|
||||
"clean:node-modules": "rimraf ./apps/**/node_modules && rimraf ./packages/**/**/node_modules && rm -rf ./node_modules",
|
||||
"clean:lock": "rm ./pnpm-lock.yaml",
|
||||
"create:cmp": "plop component",
|
||||
"create:pkg": "plop package",
|
||||
"create:hook": "plop hook",
|
||||
@ -39,7 +41,7 @@
|
||||
"version:dev": "changeset version --snapshot dev",
|
||||
"release": "changeset publish",
|
||||
"release:dev": "changeset publish --tag dev",
|
||||
"postinstall": "husky install && pnpm clean:pn-types && pnpm --filter @nextui-org/theme build"
|
||||
"postinstall": "husky install && pnpm --filter @nextui-org/theme build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.14.5",
|
||||
@ -59,19 +61,19 @@
|
||||
"@react-bootstrap/babel-preset": "^2.1.0",
|
||||
"@react-types/link": "^3.3.3",
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@storybook/react": "^6.5.12",
|
||||
"@storybook/react": "^6.5.16",
|
||||
"@swc-node/jest": "^1.5.2",
|
||||
"@swc/core": "^1.3.35",
|
||||
"@swc/jest": "^0.2.24",
|
||||
"@testing-library/dom": "^8.1.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/react-hooks": "^7.0.0",
|
||||
"@testing-library/user-event": "^13.2.0",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/react-hooks": "^8.0.1",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
"@types/jest": "^28.1.1",
|
||||
"@types/node": "^15.12.4",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react": "^18.0.1",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@types/shelljs": "^0.8.9",
|
||||
"@types/styled-jsx": "^2.2.8",
|
||||
"@types/testing-library__jest-dom": "5.14.5",
|
||||
@ -117,13 +119,13 @@
|
||||
"prettier": "^2.2.1",
|
||||
"prettier-eslint": "^12.0.0",
|
||||
"prettier-eslint-cli": "^5.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"tsup": "6.4.0",
|
||||
"turbo": "1.6.3",
|
||||
"typescript": "4.6.2",
|
||||
"typescript": "^4.7.4",
|
||||
"uuid": "^8.3.2",
|
||||
"webpack": "^5.53.0",
|
||||
"webpack-bundle-analyzer": "^4.4.2",
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -49,7 +49,7 @@
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/test-utils": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
|
||||
import {Badge} from "../src";
|
||||
|
||||
const content = <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />;
|
||||
|
||||
describe("Badge", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Badge>New</Badge>);
|
||||
@ -13,7 +16,7 @@ describe("Badge", () => {
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLSpanElement>();
|
||||
|
||||
render(<Badge ref={ref} />);
|
||||
render(<Badge ref={ref}>{content}</Badge>);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
@ -28,32 +31,6 @@ describe("Badge", () => {
|
||||
expect(wrapper.getByTestId("badge-children")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not render children if variant is dot", () => {
|
||||
const wrapper = render(
|
||||
<Badge variant="dot">
|
||||
<span data-testid="badge-children">new</span>
|
||||
</Badge>,
|
||||
);
|
||||
|
||||
expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("should not render children if variant is points", () => {
|
||||
const wrapper = render(
|
||||
<Badge variant="points">
|
||||
<span data-testid="badge-children">new</span>
|
||||
</Badge>,
|
||||
);
|
||||
|
||||
expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("should have 3 points if variant is points", () => {
|
||||
const wrapper = render(<Badge variant="points" />);
|
||||
|
||||
expect(wrapper.getAllByTestId("badge-point")).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("should be invisible if invisible is true", () => {
|
||||
const wrapper = render(
|
||||
<Badge isInvisible content={<span data-testid="badge-content" />} data-testid="badge-root">
|
||||
@ -61,6 +38,6 @@ describe("Badge", () => {
|
||||
</Badge>,
|
||||
);
|
||||
|
||||
expect(wrapper.getByTestId("badge-root")).toHaveClass("nextui-badge--is-invisible");
|
||||
expect(wrapper.getByTestId("badge-root")).toHaveAttribute("data-invisible", "true");
|
||||
});
|
||||
});
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -46,7 +46,7 @@
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,118 +0,0 @@
|
||||
import {keyframes} from "@nextui-org/system";
|
||||
|
||||
export const pointAnimation = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
},
|
||||
"50%": {
|
||||
opacity: "0.4",
|
||||
transform: "scale(0.5)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceInTopRight = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(50%, -50%)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: 0.75,
|
||||
transform: "scale(1.2) translate(50%, -50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(50%, -50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceOutTopRight = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(50%, -50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(50%, -50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceInTopLeft = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(-50%, -50%)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: 0.75,
|
||||
transform: "scale(1.2) translate(-50%, -50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(-50%, -50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceOutTopLeft = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(-50%, -50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(-50%, -50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceInBottomRight = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(50%, 50%)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: 0.75,
|
||||
transform: "scale(1.2) translate(50%, 50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(50%, 50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceOutBottomRight = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(50%, 50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(50%, 50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceInBottomLeft = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(-50%, 50%)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: 0.75,
|
||||
transform: "scale(1.2) translate(-50%, 50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(-50%, 50%)",
|
||||
},
|
||||
});
|
||||
|
||||
export const appearanceOutBottomLeft = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1) translate(-50%, 50%)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.2) translate(-50%, 50%)",
|
||||
},
|
||||
});
|
||||
@ -1,529 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
import {
|
||||
pointAnimation,
|
||||
appearanceInTopRight,
|
||||
appearanceOutTopRight,
|
||||
appearanceInTopLeft,
|
||||
appearanceOutTopLeft,
|
||||
appearanceInBottomRight,
|
||||
appearanceOutBottomRight,
|
||||
appearanceInBottomLeft,
|
||||
appearanceOutBottomLeft,
|
||||
} from "./badge.animations";
|
||||
|
||||
export const StyledBadgeRoot = styled("span", {
|
||||
d: "inline-flex",
|
||||
flexShrink: 0,
|
||||
verticalAlign: "middle",
|
||||
position: "relative",
|
||||
overflow: "visible",
|
||||
});
|
||||
|
||||
export const StyledBadge = styled("span", {
|
||||
$$badgePlacementHOffset: "0%",
|
||||
$$badgePlacementVOffset: "0%",
|
||||
lineHeight: 1,
|
||||
display: "flex",
|
||||
flexFlow: "row wrap",
|
||||
placeContent: "center",
|
||||
alignItems: "center",
|
||||
boxSizing: "border-box",
|
||||
whiteSpace: "nowrap",
|
||||
bg: "$$badgeBackgroundColor",
|
||||
color: "$$badgeTextColor",
|
||||
fontWeight: "$bold",
|
||||
fontSize: "$$badgeFontSize",
|
||||
p: "$$badgeVPadding $$badgeHPadding",
|
||||
"@motion": {
|
||||
animation: "none",
|
||||
transition: "none",
|
||||
"&.nextui-badge--is-invisible": {
|
||||
animation: "none",
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
xs: {
|
||||
$$badgeVPadding: "$space$2",
|
||||
$$badgeHPadding: "$space$2",
|
||||
$$badgeFontSize: "0.65rem",
|
||||
},
|
||||
sm: {
|
||||
$$badgeVPadding: "$space$2",
|
||||
$$badgeHPadding: "$space$3",
|
||||
$$badgeFontSize: "0.73rem",
|
||||
},
|
||||
md: {
|
||||
$$badgeVPadding: "$space$3",
|
||||
$$badgeHPadding: "$space$4",
|
||||
$$badgeFontSize: "$fontSizes$xs",
|
||||
},
|
||||
lg: {
|
||||
$$badgeVPadding: "$space$4",
|
||||
$$badgeHPadding: "$space$5",
|
||||
$$badgeFontSize: "$fontSizes$base",
|
||||
},
|
||||
xl: {
|
||||
$$badgeVPadding: "$space$5",
|
||||
$$badgeHPadding: "$space$6",
|
||||
$$badgeFontSize: "$fontSizes$xl",
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
circle: {},
|
||||
rectangle: {},
|
||||
},
|
||||
asChild: {
|
||||
true: {
|
||||
zIndex: "$2",
|
||||
position: "absolute",
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
},
|
||||
isOneChar: {
|
||||
true: {},
|
||||
},
|
||||
color: {
|
||||
default: {
|
||||
$$badgeBackgroundColor: "$colors$neutral",
|
||||
$$badgeTextColor: "$colors$neutralSolidContrast",
|
||||
$$badgeShadowColor: "$colors$neutralShadow",
|
||||
},
|
||||
primary: {
|
||||
$$badgeBackgroundColor: "$colors$primary",
|
||||
$$badgeTextColor: "$colors$primarySolidContrast",
|
||||
$$badgeShadowColor: "$colors$primaryShadow",
|
||||
},
|
||||
secondary: {
|
||||
$$badgeBackgroundColor: "$colors$secondary",
|
||||
$$badgeTextColor: "$colors$secondarySolidContrast",
|
||||
$$badgeShadowColor: "$colors$secondaryShadow",
|
||||
},
|
||||
success: {
|
||||
$$badgeBackgroundColor: "$colors$success",
|
||||
$$badgeTextColor: "$colors$successSolidContrast",
|
||||
$$badgeShadowColor: "$colors$successShadow",
|
||||
},
|
||||
warning: {
|
||||
$$badgeBackgroundColor: "$colors$warning",
|
||||
$$badgeTextColor: "$colors$warningSolidContrast",
|
||||
$$badgeShadowColor: "$colors$warningShadow",
|
||||
},
|
||||
error: {
|
||||
$$badgeBackgroundColor: "$colors$error",
|
||||
$$badgeTextColor: "$colors$errorSolidContrast",
|
||||
$$badgeShadowColor: "$colors$errorShadow",
|
||||
},
|
||||
},
|
||||
enableShadow: {
|
||||
true: {
|
||||
boxShadow: "0 2px 10px 0 $$badgeShadowColor",
|
||||
},
|
||||
},
|
||||
isSquared: {
|
||||
true: {
|
||||
borderRadius: "calc($$badgeFontSize * 0.45)",
|
||||
},
|
||||
false: {
|
||||
borderRadius: "$pill",
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
"top-right": {
|
||||
animation: `${appearanceInTopRight} 0.25s ease-out`,
|
||||
"&.nextui-badge--is-invisible": {
|
||||
opacity: 0,
|
||||
animation: `${appearanceOutTopRight} 0.2s ease-in`,
|
||||
},
|
||||
},
|
||||
"top-left": {
|
||||
animation: `${appearanceInTopLeft} 0.25s ease-out`,
|
||||
"&.nextui-badge--is-invisible": {
|
||||
opacity: 0,
|
||||
animation: `${appearanceOutTopLeft} 0.2s ease-in`,
|
||||
},
|
||||
},
|
||||
"bottom-right": {
|
||||
animation: `${appearanceInBottomRight} 0.25s ease-out`,
|
||||
"&.nextui-badge--is-invisible": {
|
||||
opacity: 0,
|
||||
animation: `${appearanceOutBottomRight} 0.2s ease-in`,
|
||||
},
|
||||
},
|
||||
"bottom-left": {
|
||||
animation: `${appearanceInBottomLeft} 0.25s ease-out`,
|
||||
"&.nextui-badge--is-invisible": {
|
||||
opacity: 0,
|
||||
animation: `${appearanceOutBottomLeft} 0.2s ease-in`,
|
||||
},
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
default: {},
|
||||
flat: {},
|
||||
dot: {
|
||||
p: 0,
|
||||
dflex: "center",
|
||||
minSize: "$$badgeFontSize",
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
points: {
|
||||
p: "calc($$badgeFontSize * 0.4)",
|
||||
boxSizing: "border-box",
|
||||
$$badgePlacementHOffset: "calc($$badgeFontSize * 0.8)",
|
||||
},
|
||||
bordered: {
|
||||
$$badgeBackgroundColor: "$colors$background",
|
||||
bg: "$background",
|
||||
bw: "$$badgeBorderWeight",
|
||||
borderStyle: "solid",
|
||||
borderColor: "$$badgeTextColor",
|
||||
},
|
||||
},
|
||||
borderWeight: {
|
||||
light: {
|
||||
$$badgeBorderWeight: "$borderWeights$light",
|
||||
},
|
||||
normal: {
|
||||
$$badgeBorderWeight: "$borderWeights$normal",
|
||||
},
|
||||
bold: {
|
||||
$$badgeBorderWeight: "$borderWeights$bold",
|
||||
},
|
||||
extrabold: {
|
||||
$$badgeBorderWeight: "$borderWeights$extrabold",
|
||||
},
|
||||
black: {
|
||||
$$badgeBorderWeight: "$borderWeights$black",
|
||||
},
|
||||
},
|
||||
disableOutline: {
|
||||
true: {
|
||||
border: "2px solid transparent",
|
||||
},
|
||||
false: {
|
||||
border: "2px solid $colors$background",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
animation: "none",
|
||||
transition: "none",
|
||||
"&.nextui-badge--is-invisible": {
|
||||
animation: "none",
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
/***
|
||||
* @variant flat
|
||||
* @color {default, primary, secondary, success, warning, error}
|
||||
*/
|
||||
// variant=flat && color=default
|
||||
{
|
||||
variant: "flat",
|
||||
color: "default",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$neutralLight",
|
||||
$$badgeTextColor: "$colors$neutralLightContrast",
|
||||
},
|
||||
},
|
||||
// variant=flat && color=primary
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$primaryLight",
|
||||
$$badgeTextColor: "$colors$primaryLightContrast",
|
||||
},
|
||||
},
|
||||
// variant=flat && color=secondary
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$secondaryLight",
|
||||
$$badgeTextColor: "$colors$secondaryLightContrast",
|
||||
},
|
||||
},
|
||||
// variant=flat && color=success
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$successLight",
|
||||
$$badgeTextColor: "$colors$successLightContrast",
|
||||
},
|
||||
},
|
||||
// variant=flat && color=warning
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$warningLight",
|
||||
$$badgeTextColor: "$colors$warningLightContrast",
|
||||
},
|
||||
},
|
||||
// variant=flat && color=error
|
||||
{
|
||||
variant: "flat",
|
||||
color: "error",
|
||||
css: {
|
||||
$$badgeBackgroundColor: "$colors$errorLight",
|
||||
$$badgeTextColor: "$colors$errorLightContrast",
|
||||
},
|
||||
},
|
||||
/***
|
||||
* @variant bordered
|
||||
* @color {default, primary, secondary, success, warning, error}
|
||||
*/
|
||||
// variant=bordered && color=default
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "default",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$neutral",
|
||||
},
|
||||
},
|
||||
// variant=bordered && color=primary
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$primary",
|
||||
},
|
||||
},
|
||||
// variant=bordered && color=secondary
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$secondary",
|
||||
},
|
||||
},
|
||||
// variant=bordered && color=success
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$success",
|
||||
},
|
||||
},
|
||||
// variant=bordered && color=warning
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$warning",
|
||||
},
|
||||
},
|
||||
// variant=bordered && color=error
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "error",
|
||||
css: {
|
||||
$$badgeTextColor: "$colors$error",
|
||||
},
|
||||
},
|
||||
/***
|
||||
* @asChild true
|
||||
* @shape {rectangle, circle}
|
||||
* @placement {top-right, top-left, bottom-right, bottom-left}
|
||||
*/
|
||||
// placement=top-right && shape=rectangle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "rectangle",
|
||||
placement: "top-right",
|
||||
css: {
|
||||
top: "calc(5% + $$badgePlacementVOffset)",
|
||||
right: "calc(5% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(50%, -50%)",
|
||||
transformOrigin: "100% 0%",
|
||||
},
|
||||
},
|
||||
// placement=top-left && shape=rectangle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "rectangle",
|
||||
placement: "top-left",
|
||||
css: {
|
||||
top: "calc(5% + $$badgePlacementVOffset)",
|
||||
left: "calc(5% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(-50%, -50%)",
|
||||
transformOrigin: "0% 0%",
|
||||
},
|
||||
},
|
||||
// placement=bottom-right && shape=rectangle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "rectangle",
|
||||
placement: "bottom-right",
|
||||
css: {
|
||||
bottom: "calc(5% + $$badgePlacementVOffset)",
|
||||
right: "calc(5% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(50%, 50%)",
|
||||
transformOrigin: "100% 100%",
|
||||
},
|
||||
},
|
||||
// placement=bottom-left && shape=rectangle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "rectangle",
|
||||
placement: "bottom-left",
|
||||
css: {
|
||||
bottom: "calc(5% + $$badgePlacementVOffset)",
|
||||
left: "calc(5% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(-50%, 50%)",
|
||||
transformOrigin: "0% 100%",
|
||||
},
|
||||
},
|
||||
// placement=top-right && shape=circle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "circle",
|
||||
placement: "top-right",
|
||||
css: {
|
||||
top: "calc(15% + $$badgePlacementVOffset)",
|
||||
right: "calc(15% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(50%, -50%)",
|
||||
transformOrigin: "100% 0%",
|
||||
},
|
||||
},
|
||||
// placement=top-left && shape=circle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "circle",
|
||||
placement: "top-left",
|
||||
css: {
|
||||
top: "calc(15% + $$badgePlacementVOffset)",
|
||||
left: "calc(15% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(-50%, -50%)",
|
||||
transformOrigin: "0% 0%",
|
||||
},
|
||||
},
|
||||
// placement=bottom-right && shape=circle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "circle",
|
||||
placement: "bottom-right",
|
||||
css: {
|
||||
bottom: "calc(15% + $$badgePlacementVOffset)",
|
||||
right: "calc(15% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(50%, 50%)",
|
||||
transformOrigin: "100% 100%",
|
||||
},
|
||||
},
|
||||
// placement=bottom-left && shape=circle
|
||||
{
|
||||
asChild: true,
|
||||
shape: "circle",
|
||||
placement: "bottom-left",
|
||||
css: {
|
||||
bottom: "calc(15% + $$badgePlacementVOffset)",
|
||||
left: "calc(15% + $$badgePlacementHOffset)",
|
||||
transform: "scale(1) translate(-50%, 50%)",
|
||||
transformOrigin: "0% 100%",
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @variant dot
|
||||
* @shape rectangle
|
||||
*/
|
||||
{
|
||||
variant: "dot",
|
||||
shape: "rectangle",
|
||||
css: {
|
||||
$$badgePlacementHOffset: "calc($$badgeFontSize * 0.2)",
|
||||
$$badgePlacementVOffset: "calc($$badgeFontSize * 0.1)",
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @isOneChar {true, false}
|
||||
* @asChild {true, false}
|
||||
*/
|
||||
{
|
||||
isOneChar: true,
|
||||
asChild: true,
|
||||
css: {
|
||||
p: 0,
|
||||
size: "calc($$badgeFontSize + $$badgeHPadding)",
|
||||
},
|
||||
},
|
||||
{
|
||||
isOneChar: false,
|
||||
asChild: true,
|
||||
css: {
|
||||
$$badgeVPadding: "0px",
|
||||
$$badgeHPadding: "$space$2",
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @isOneChar false
|
||||
* @asChild true
|
||||
* @size {md, lg, xl}
|
||||
*/
|
||||
// size = md
|
||||
{
|
||||
isOneChar: false,
|
||||
asChild: true,
|
||||
size: "md",
|
||||
css: {
|
||||
$$badgeHPadding: "$space$3",
|
||||
},
|
||||
},
|
||||
// size = lg
|
||||
{
|
||||
isOneChar: false,
|
||||
asChild: true,
|
||||
size: "lg",
|
||||
css: {
|
||||
$$badgeHPadding: "$space$4",
|
||||
},
|
||||
},
|
||||
// size = xl
|
||||
{
|
||||
isOneChar: false,
|
||||
asChild: true,
|
||||
size: "xl",
|
||||
css: {
|
||||
$$badgeHPadding: "$space$5",
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @disableOutline true
|
||||
* @variant bordered
|
||||
*/
|
||||
{
|
||||
disableOutline: true,
|
||||
variant: "bordered",
|
||||
css: {
|
||||
borderColor: "$$badgeTextColor",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const StyledBadgePoints = styled("div", {
|
||||
position: "relative",
|
||||
dflex: "center",
|
||||
"& .nextui-badge-point": {
|
||||
size: "calc($$badgeFontSize * 0.3)",
|
||||
background: "$$badgeTextColor",
|
||||
margin: "0 2px",
|
||||
borderRadius: "$pill",
|
||||
"&:nth-child(1)": {
|
||||
animation: `${pointAnimation} 1.2s ease infinite`,
|
||||
},
|
||||
"&:nth-child(2)": {
|
||||
animation: `${pointAnimation} 1.2s ease infinite 0.4s`,
|
||||
},
|
||||
"&:nth-child(3)": {
|
||||
animation: `${pointAnimation} 1.2s ease infinite 0.8s`,
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,9 +1,13 @@
|
||||
import type {ReactNode} from "react";
|
||||
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {UseBadgeProps, useBadge} from "./use-badge";
|
||||
|
||||
export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {}
|
||||
export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
|
||||
const {Component, children, content, slots, styles, getBadgeProps} = useBadge({ref, ...props});
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
// export types
|
||||
export type {BadgeProps} from "./badge";
|
||||
|
||||
// export hooks
|
||||
export {useBadge} from "./use-badge";
|
||||
|
||||
// export component
|
||||
export {default as Badge} from "./badge";
|
||||
|
||||
@ -1,603 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
// Row, Spacer, Grid, Avatar, Switch, Text
|
||||
import {Col} from "@nextui-org/col";
|
||||
import {Row} from "@nextui-org/row";
|
||||
import {Spacer} from "@nextui-org/spacer";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
// import {Switch} from "@nextui-org/switch"; TODO: create
|
||||
// import {Text} from "@nextui-org/text";
|
||||
import {Notification} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Badge} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Display/Badge",
|
||||
component: Badge,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Badge>Default</Badge>;
|
||||
|
||||
export const WithAvatar = () => (
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5}>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" shape="circle">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const WithIcon = () => (
|
||||
<Badge color="error" content={5} horizontalOffset={2} shape="circle">
|
||||
<Notification fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
);
|
||||
|
||||
export const WithContentIcon = () => (
|
||||
<Badge
|
||||
color="error"
|
||||
content={<Notification fill="currentColor" size={12} />}
|
||||
css={{p: "$2"}}
|
||||
horizontalOffset={2}
|
||||
shape="circle"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
);
|
||||
|
||||
// TODO: create switch
|
||||
// export const ToggleBadge = () => {
|
||||
// const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
// return (
|
||||
// <Grid.Container alignItems="center" gap={2}>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
|
||||
// <Notification fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
|
||||
// <CartIcon fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Row align="center">
|
||||
// <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
|
||||
// <Text css={{ml: "$3"}}>Show badge</Text>
|
||||
// </Row>
|
||||
// </Grid>
|
||||
// </Grid.Container>
|
||||
// );
|
||||
// };
|
||||
|
||||
export const WithContentPlacements = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5} size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge
|
||||
isInvisible
|
||||
color="primary"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
size="md"
|
||||
variant="points"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="success"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
shape="circle"
|
||||
size="md"
|
||||
variant="dot"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="success"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<Grid.Container>
|
||||
<Grid.Container alignItems="center" gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge size="xs">New (xs)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="sm">New (sm)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="md">New (md)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="lg">New (lg)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="xl">New (xl)</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="xs" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="sm" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="md" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="lg" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="xl" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={2} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const Squared = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs">
|
||||
New (xs)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="sm">
|
||||
New (sm)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="md">
|
||||
New (md)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="lg">
|
||||
New (lg)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="xl">
|
||||
New (xl)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const Colors = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge>Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success">Success</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error">Error</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const EnableShadow = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow>
|
||||
Neutral
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="primary">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="success">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="warning">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="error">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const FlatVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="flat">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="flat">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="flat">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="flat">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="flat">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="flat">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const BorderedVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="bordered">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="bordered">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="bordered">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="bordered">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="bordered">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="bordered">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const DotVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge size="xl" variant="dot">
|
||||
<span>new</span>
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" size="xl" variant="dot" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const PointsVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="primary" size="sm" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="secondary" size="md" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="success" size="lg" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="warning" size="xl" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="error" size="xl" variant="points" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
@ -1,3 +1,4 @@
|
||||
import React from "react";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {badge} from "@nextui-org/theme";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -54,7 +54,7 @@
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@react-types/button": "^3.6.2",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -52,7 +52,7 @@
|
||||
"@nextui-org/code": "workspace:*",
|
||||
"@nextui-org/link": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -53,7 +53,7 @@
|
||||
"@react-types/checkbox": "^3.4.2",
|
||||
"@react-types/shared": "^3.17.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
@ -50,7 +50,7 @@
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@react-types/checkbox": "^3.4.2",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import Chip from "./chip";
|
||||
|
||||
// export types
|
||||
export type {ChipProps} from "./chip";
|
||||
|
||||
@ -7,4 +5,4 @@ export type {ChipProps} from "./chip";
|
||||
export {useChip} from "./use-chip";
|
||||
|
||||
// export component
|
||||
export {Chip};
|
||||
export {default as Chip} from "./chip";
|
||||
|
||||
@ -101,6 +101,7 @@ export function useChip(originalProps: UseChipProps) {
|
||||
const getContentClone = (content: ReactNode) =>
|
||||
isValidElement(content)
|
||||
? cloneElement(content, {
|
||||
// @ts-ignore
|
||||
className: clsx("w-full h-4/5", content.props.className),
|
||||
})
|
||||
: null;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -44,7 +44,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -52,7 +52,7 @@
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@react-types/accordion": "3.0.0-alpha.12",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -44,7 +44,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
@ -48,7 +48,7 @@
|
||||
"devDependencies": {
|
||||
"@react-types/link": "^3.4.0",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
@ -53,7 +53,7 @@
|
||||
"@react-types/shared": "^3.15.0",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -48,7 +48,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
@ -54,7 +54,7 @@
|
||||
"@react-types/tooltip": "^3.3.0",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
@ -48,7 +48,7 @@
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"@nextui-org/link": "workspace:*",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -57,12 +57,10 @@
|
||||
"@nextui-org/user": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"@stitches/react": ">=1.2.8"
|
||||
"react": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "18.2.0",
|
||||
"@stitches/react": "1.2.8",
|
||||
"react": "^18.0.0",
|
||||
"clean-package": "2.2.0"
|
||||
},
|
||||
"tsup": {
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@stitches/react": ["../../../node_modules/@stitches/react"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
|
||||
@ -34,18 +34,13 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/use-ssr": "workspace:*",
|
||||
"@react-aria/ssr": "^3.5.0",
|
||||
"@react-aria/overlays": "^3.13.0"
|
||||
"@react-aria/ssr": "^3.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"@stitches/react": ">=1.2.8"
|
||||
"react": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"@stitches/react": "1.2.8",
|
||||
"react": "^18.0.0",
|
||||
"clean-package": "2.2.0"
|
||||
},
|
||||
"tsup": {
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
export const blue = {
|
||||
blue50: "#EDF5FF",
|
||||
blue100: "#E1EFFF",
|
||||
blue200: "#CEE4FE",
|
||||
blue300: "#B7D5F8",
|
||||
blue400: "#96C1F2",
|
||||
blue500: "#5EA2EF",
|
||||
blue600: "#0072F5",
|
||||
blue700: "#005FCC",
|
||||
blue800: "#004799",
|
||||
blue900: "#00254D",
|
||||
};
|
||||
|
||||
export const blueDark = {
|
||||
blue50: "#10253E",
|
||||
blue100: "#102C4C",
|
||||
blue200: "#0F3158",
|
||||
blue300: "#0D3868",
|
||||
blue400: "#0A4281",
|
||||
blue500: "#0952A5",
|
||||
blue600: "#0072F5",
|
||||
blue700: "#3694FF",
|
||||
blue800: "#3694FF",
|
||||
blue900: "#EAF4FF",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const cyan = {
|
||||
cyan50: "#F0FCFF",
|
||||
cyan100: "#E6FAFE",
|
||||
cyan200: "#D7F8FE",
|
||||
cyan300: "#C3F4FD",
|
||||
cyan400: "#A5EEFD",
|
||||
cyan500: "#7EE7FC",
|
||||
cyan600: "#06B7DB",
|
||||
cyan700: "#09AACD",
|
||||
cyan800: "#0E8AAA",
|
||||
cyan900: "#053B48",
|
||||
};
|
||||
|
||||
export const cyanDark = {
|
||||
cyan50: "#012A32",
|
||||
cyan100: "#023A46",
|
||||
cyan200: "#024B5A",
|
||||
cyan300: "#036072",
|
||||
cyan400: "#037086",
|
||||
cyan500: "#048EA9",
|
||||
cyan600: "#06B7DB",
|
||||
cyan700: "#33D9FA",
|
||||
cyan800: "#6FE4FB",
|
||||
cyan900: "#EBFBFE",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const gray = {
|
||||
gray50: "#F1F3F5",
|
||||
gray100: "#ECEEF0",
|
||||
gray200: "#E6E8EB",
|
||||
gray300: "#DFE3E6",
|
||||
gray400: "#D7DBDF",
|
||||
gray500: "#C1C8CD",
|
||||
gray600: "#889096",
|
||||
gray700: "#7E868C",
|
||||
gray800: "#687076",
|
||||
gray900: "#11181C",
|
||||
};
|
||||
|
||||
export const grayDark = {
|
||||
gray50: "#16181A",
|
||||
gray100: "#26292B",
|
||||
gray200: "#2B2F31",
|
||||
gray300: "#313538",
|
||||
gray400: "#3A3F42",
|
||||
gray500: "#4C5155",
|
||||
gray600: "#697177",
|
||||
gray700: "#787F85",
|
||||
gray800: "#9BA1A6",
|
||||
gray900: "#ECEDEE",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const green = {
|
||||
green50: "#F1FDF7",
|
||||
green100: "#E8FCF1",
|
||||
green200: "#DAFBE8",
|
||||
green300: "#C8F9DD",
|
||||
green400: "#ADF5CC",
|
||||
green500: "#88F1B6",
|
||||
green600: "#17C964",
|
||||
green700: "#13A452",
|
||||
green800: "#108944",
|
||||
green900: "#06371B",
|
||||
};
|
||||
|
||||
export const greenDark = {
|
||||
green50: "#042F14",
|
||||
green100: "#06381B",
|
||||
green200: "#074A24",
|
||||
green300: "#0A6130",
|
||||
green400: "#0B7439",
|
||||
green500: "#0F9549",
|
||||
green600: "#17C964",
|
||||
green700: "#41EC8B",
|
||||
green800: "#78F2AD",
|
||||
green900: "#ECFDF4",
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
export * from "./blue";
|
||||
export * from "./purple";
|
||||
export * from "./green";
|
||||
export * from "./yellow";
|
||||
export * from "./red";
|
||||
export * from "./cyan";
|
||||
export * from "./pink";
|
||||
export * from "./gray";
|
||||
@ -1,25 +0,0 @@
|
||||
export const pink = {
|
||||
pink50: "#FFF0FB",
|
||||
pink100: "#FFE5F8",
|
||||
pink200: "#FFD6F3",
|
||||
pink300: "#FFC2EE",
|
||||
pink400: "#FFA3E5",
|
||||
pink500: "#FF7AD9",
|
||||
pink600: "#FF4ECD",
|
||||
pink700: "#D6009A",
|
||||
pink800: "#B80084",
|
||||
pink900: "#4D0037",
|
||||
};
|
||||
|
||||
export const pinkDark = {
|
||||
pink50: "#330025",
|
||||
pink100: "#470033",
|
||||
pink200: "#5C0042",
|
||||
pink300: "#750054",
|
||||
pink400: "#8A0063",
|
||||
pink500: "#AD007C",
|
||||
pink600: "#FF4ECD",
|
||||
pink700: "#FF2EC4",
|
||||
pink800: "#FF6BD5",
|
||||
pink900: "#FFEBF9",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const purple = {
|
||||
purple50: "#F7F2FD",
|
||||
purple100: "#F1E8FB",
|
||||
purple200: "#EADCF8",
|
||||
purple300: "#E0CBF5",
|
||||
purple400: "#D1B1F0",
|
||||
purple500: "#BC8EE9",
|
||||
purple600: "#7828C8",
|
||||
purple700: "#6622AA",
|
||||
purple800: "#4D1980",
|
||||
purple900: "#290E44",
|
||||
};
|
||||
|
||||
export const purpleDark = {
|
||||
purple50: "#1F0A33",
|
||||
purple100: "#240C3C",
|
||||
purple200: "#2E0F4D",
|
||||
purple300: "#3B1362",
|
||||
purple400: "#451773",
|
||||
purple500: "#571D91",
|
||||
purple600: "#7828C8",
|
||||
purple700: "#9750DD",
|
||||
purple800: "#B583E7",
|
||||
purple900: "#F7ECFC",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const red = {
|
||||
red50: "#FEF0F5",
|
||||
red100: "#FEE7EF",
|
||||
red200: "#FDD8E5",
|
||||
red300: "#FCC5D8",
|
||||
red400: "#FAA8C5",
|
||||
red500: "#F881AB",
|
||||
red600: "#F31260",
|
||||
red700: "#B80A47",
|
||||
red800: "#910838",
|
||||
red900: "#4E041E",
|
||||
};
|
||||
|
||||
export const redDark = {
|
||||
red50: "#300313",
|
||||
red100: "#300313",
|
||||
red200: "#44041A",
|
||||
red300: "#5C0523",
|
||||
red400: "#6F062B",
|
||||
red500: "#910838",
|
||||
red600: "#F31260",
|
||||
red700: "#F4256D",
|
||||
red800: "#F75F94",
|
||||
red900: "#FDD8E5",
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
export const yellow = {
|
||||
yellow50: "#FEF9F0",
|
||||
yellow100: "#FEF5E7",
|
||||
yellow200: "#FDEFD8",
|
||||
yellow300: "#FCE7C5",
|
||||
yellow400: "#FBDBA7",
|
||||
yellow500: "#F9CB80",
|
||||
yellow600: "#F5A524",
|
||||
yellow700: "#B97509",
|
||||
yellow800: "#925D07",
|
||||
yellow900: "#4E3104",
|
||||
};
|
||||
|
||||
export const yellowDark = {
|
||||
yellow50: "#3A2503",
|
||||
yellow100: "#442B03",
|
||||
yellow200: "#583804",
|
||||
yellow300: "#704705",
|
||||
yellow400: "#845306",
|
||||
yellow500: "#A66908",
|
||||
yellow600: "#F5A524",
|
||||
yellow700: "#F6AD37",
|
||||
yellow800: "#F8C572",
|
||||
yellow900: "#FEF7EC",
|
||||
};
|
||||
@ -1,609 +0,0 @@
|
||||
import {PropertyValue, defaultThemeMap as defaultStitchesThemeMap} from "@stitches/react";
|
||||
|
||||
const spaces = {
|
||||
0: "0rem",
|
||||
xs: "0.5rem",
|
||||
sm: "0.75rem",
|
||||
md: "1rem",
|
||||
lg: "1.25rem",
|
||||
xl: "2.25rem",
|
||||
"2xl": "3rem",
|
||||
"3xl": "5rem",
|
||||
"4xl": "10rem",
|
||||
"5xl": "14rem",
|
||||
"6xl": "18rem",
|
||||
"7xl": "24rem",
|
||||
"8xl": "32rem",
|
||||
"9xl": "40rem",
|
||||
min: "min-content",
|
||||
max: "max-content",
|
||||
fit: "fit-content",
|
||||
screen: "100vw",
|
||||
full: "100%",
|
||||
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",
|
||||
};
|
||||
|
||||
export const defaultColors = {
|
||||
// generic colors
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
|
||||
// brand colors
|
||||
primaryLight: "$blue200",
|
||||
primaryLightHover: "$blue300",
|
||||
primaryLightActive: "$blue400",
|
||||
primaryLightContrast: "$blue600",
|
||||
primary: "$blue600",
|
||||
primaryBorder: "$blue500",
|
||||
primaryBorderHover: "$blue600",
|
||||
primarySolidHover: "$blue700",
|
||||
primarySolidContrast: "$white",
|
||||
primaryShadow: "$blue500",
|
||||
|
||||
secondaryLight: "$purple200",
|
||||
secondaryLightHover: "$purple300",
|
||||
secondaryLightActive: "$purple400",
|
||||
secondaryLightContrast: "$purple600",
|
||||
secondary: "$purple600",
|
||||
secondaryBorder: "$purple500",
|
||||
secondaryBorderHover: "$purple600",
|
||||
secondarySolidHover: "$purple700",
|
||||
secondarySolidContrast: "$white",
|
||||
secondaryShadow: "$purple500",
|
||||
|
||||
successLight: "$green200",
|
||||
successLightHover: "$green300",
|
||||
successLightActive: "$green400",
|
||||
successLightContrast: "$green700",
|
||||
success: "$green600",
|
||||
successBorder: "$green500",
|
||||
successBorderHover: "$green600",
|
||||
successSolidHover: "$green700",
|
||||
successSolidContrast: "$white",
|
||||
successShadow: "$green500",
|
||||
|
||||
warningLight: "$yellow200",
|
||||
warningLightHover: "$yellow300",
|
||||
warningLightActive: "$yellow400",
|
||||
warningLightContrast: "$yellow700",
|
||||
warning: "$yellow600",
|
||||
warningBorder: "$yellow500",
|
||||
warningBorderHover: "$yellow600",
|
||||
warningSolidHover: "$yellow700",
|
||||
warningSolidContrast: "$white",
|
||||
warningShadow: "$yellow500",
|
||||
|
||||
errorLight: "$red200",
|
||||
errorLightHover: "$red300",
|
||||
errorLightActive: "$red400",
|
||||
errorLightContrast: "$red600",
|
||||
error: "$red600",
|
||||
errorBorder: "$red500",
|
||||
errorBorderHover: "$red600",
|
||||
errorSolidHover: "$red700",
|
||||
errorSolidContrast: "$white",
|
||||
errorShadow: "$red500",
|
||||
|
||||
neutralLight: "$gray100",
|
||||
neutralLightHover: "$gray200",
|
||||
neutralLightActive: "$gray300",
|
||||
neutralLightContrast: "$gray800",
|
||||
neutral: "$gray600",
|
||||
neutralBorder: "$gray400",
|
||||
neutralBorderHover: "$gray500",
|
||||
neutralSolidHover: "$gray600",
|
||||
neutralSolidContrast: "$white",
|
||||
neutralShadow: "$gray400",
|
||||
|
||||
gradient: "linear-gradient(112deg, $cyan600 -63.59%, $pink600 -20.3%, $blue600 70.46%)",
|
||||
|
||||
// accents
|
||||
accents0: "$gray50",
|
||||
accents1: "$gray100",
|
||||
accents2: "$gray200",
|
||||
accents3: "$gray300",
|
||||
accents4: "$gray400",
|
||||
accents5: "$gray500",
|
||||
accents6: "$gray600",
|
||||
accents7: "$gray700",
|
||||
accents8: "$gray800",
|
||||
accents9: "$gray900",
|
||||
};
|
||||
|
||||
export 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: {
|
||||
xs: "0.75rem",
|
||||
sm: "0.875rem",
|
||||
base: "1rem",
|
||||
md: "1rem",
|
||||
lg: "1.125rem",
|
||||
xl: "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "3rem",
|
||||
"6xl": "3.75rem",
|
||||
"7xl": "4.5rem",
|
||||
"8xl": "6rem",
|
||||
"9xl": "8rem",
|
||||
},
|
||||
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,
|
||||
base: 1.5,
|
||||
md: 1.5,
|
||||
lg: 1.75,
|
||||
xl: 1.75,
|
||||
"2xl": 2,
|
||||
"3xl": 2.25,
|
||||
"4xl": 2.5,
|
||||
"5xl": 1,
|
||||
"6xl": 1,
|
||||
"7xl": 1,
|
||||
"8xl": 1,
|
||||
"9xl": 1,
|
||||
},
|
||||
letterSpacings: {
|
||||
tighter: "-0.05em",
|
||||
tight: "-0.025em",
|
||||
normal: "0",
|
||||
wide: "0.025em",
|
||||
wider: "0.05em",
|
||||
widest: "0.1em",
|
||||
},
|
||||
space: {
|
||||
...spaces,
|
||||
},
|
||||
sizes: {
|
||||
...spaces,
|
||||
auto: "auto",
|
||||
"1/2": "50%",
|
||||
"1/3": "33.333333%",
|
||||
"2/3": "66.666667%",
|
||||
"1/4": "25%",
|
||||
"2/4": "50%",
|
||||
"3/4": "75%",
|
||||
"1/5": "20%",
|
||||
"2/5": "40%",
|
||||
"3/5": "60%",
|
||||
"4/5": "80%",
|
||||
"1/6": "16.666667%",
|
||||
"2/6": "33.333333%",
|
||||
"3/6": "50%",
|
||||
"4/6": "66.666667%",
|
||||
"5/6": "83.333333%",
|
||||
"1/12": "8.333333%",
|
||||
"2/12": "16.666667%",
|
||||
"3/12": "25%",
|
||||
"4/12": "33.333333%",
|
||||
"5/12": "41.666667%",
|
||||
"6/12": "50%",
|
||||
"7/12": "58.333333%",
|
||||
"8/12": "66.666667%",
|
||||
"9/12": "75%",
|
||||
"10/12": "83.333333%",
|
||||
"11/12": "91.666667%",
|
||||
},
|
||||
radii: {
|
||||
xs: "7px",
|
||||
sm: "9px",
|
||||
md: "12px",
|
||||
base: "14px",
|
||||
lg: "14px",
|
||||
xl: "18px",
|
||||
"2xl": "24px",
|
||||
"3xl": "32px",
|
||||
squared: "33%",
|
||||
rounded: "50%",
|
||||
pill: "9999px",
|
||||
},
|
||||
zIndices: {
|
||||
1: "100",
|
||||
2: "200",
|
||||
3: "300",
|
||||
4: "400",
|
||||
5: "500",
|
||||
10: "1000",
|
||||
max: "9999",
|
||||
},
|
||||
borderWidths: {
|
||||
light: "1px",
|
||||
normal: "2px",
|
||||
bold: "3px",
|
||||
extrabold: "4px",
|
||||
black: "5px",
|
||||
},
|
||||
transitions: {
|
||||
default: "all 250ms ease",
|
||||
button:
|
||||
"background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, opacity 0.25s ease 0s",
|
||||
avatar: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
|
||||
card: "transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s",
|
||||
dropdownItem:
|
||||
"background 0.12s ease, transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease 0s",
|
||||
},
|
||||
borderStyles: {
|
||||
solid: "solid",
|
||||
dashed: "dashed",
|
||||
dotted: "dotted",
|
||||
double: "double",
|
||||
groove: "groove",
|
||||
ridge: "ridge",
|
||||
inset: "inset",
|
||||
outset: "outset",
|
||||
hidden: "hidden",
|
||||
none: "none",
|
||||
},
|
||||
colors: defaultColors,
|
||||
shadows: {},
|
||||
};
|
||||
|
||||
export const defaultMedia = {
|
||||
xs: "(min-width: 650px)",
|
||||
sm: "(min-width: 960px)",
|
||||
md: "(min-width: 1280px)",
|
||||
lg: "(min-width: 1400px)",
|
||||
xl: "(min-width: 1920px)",
|
||||
xsMin: "(min-width: 650px)",
|
||||
smMin: "(min-width: 960px)",
|
||||
mdMin: "(min-width: 1280px)",
|
||||
lgMin: "(min-width: 1400px)",
|
||||
xlMin: "(min-width: 1920px)",
|
||||
xsMax: "(max-width: 650px)",
|
||||
smMax: "(max-width: 960px)",
|
||||
mdMax: "(max-width: 1280px)",
|
||||
lgMax: "(max-width: 1400px)",
|
||||
xlMax: "(max-width: 1920px)",
|
||||
motion: "(prefers-reduced-motion: reduce)",
|
||||
safari: "not all and (min-resolution:.001dpcm)",
|
||||
hover: "(any-hover: hover)",
|
||||
dark: "(prefers-color-scheme: dark)",
|
||||
light: "(prefers-color-scheme: light)",
|
||||
};
|
||||
|
||||
export const defaultUtils = {
|
||||
p: (value: PropertyValue<"padding">) => ({
|
||||
padding: value,
|
||||
}),
|
||||
pt: (value: PropertyValue<"paddingTop">) => ({
|
||||
paddingTop: value,
|
||||
}),
|
||||
pr: (value: PropertyValue<"paddingRight">) => ({
|
||||
paddingRight: value,
|
||||
}),
|
||||
pb: (value: PropertyValue<"paddingBottom">) => ({
|
||||
paddingBottom: value,
|
||||
}),
|
||||
pl: (value: PropertyValue<"paddingLeft">) => ({
|
||||
paddingLeft: value,
|
||||
}),
|
||||
px: (value: PropertyValue<"paddingLeft">) => ({
|
||||
paddingLeft: value,
|
||||
paddingRight: value,
|
||||
}),
|
||||
py: (value: PropertyValue<"paddingTop">) => ({
|
||||
paddingTop: value,
|
||||
paddingBottom: value,
|
||||
}),
|
||||
m: (value: PropertyValue<"margin">) => ({
|
||||
margin: value,
|
||||
}),
|
||||
mt: (value: PropertyValue<"marginTop">) => ({
|
||||
marginTop: value,
|
||||
}),
|
||||
mr: (value: PropertyValue<"marginRight">) => ({
|
||||
marginRight: value,
|
||||
}),
|
||||
mb: (value: PropertyValue<"marginBottom">) => ({
|
||||
marginBottom: value,
|
||||
}),
|
||||
ml: (value: PropertyValue<"marginLeft">) => ({
|
||||
marginLeft: value,
|
||||
}),
|
||||
mx: (value: PropertyValue<"marginLeft">) => ({
|
||||
marginLeft: value,
|
||||
marginRight: value,
|
||||
}),
|
||||
my: (value: PropertyValue<"marginTop">) => ({
|
||||
marginTop: value,
|
||||
marginBottom: value,
|
||||
}),
|
||||
ta: (value: PropertyValue<"textAlign">) => ({
|
||||
textAlign: value,
|
||||
}),
|
||||
tt: (value: PropertyValue<"textTransform">) => ({
|
||||
textTransform: value,
|
||||
}),
|
||||
to: (value: PropertyValue<"textOverflow">) => ({
|
||||
textOverflow: value,
|
||||
}),
|
||||
d: (value: PropertyValue<"display">) => ({display: value}),
|
||||
dflex: (value: PropertyValue<"alignItems">) => ({
|
||||
display: "flex",
|
||||
alignItems: value,
|
||||
justifyContent: value,
|
||||
}),
|
||||
fd: (value: PropertyValue<"flexDirection">) => ({
|
||||
flexDirection: value,
|
||||
}),
|
||||
fw: (value: PropertyValue<"flexWrap">) => ({flexWrap: value}),
|
||||
ai: (value: PropertyValue<"alignItems">) => ({
|
||||
alignItems: value,
|
||||
}),
|
||||
ac: (value: PropertyValue<"alignContent">) => ({
|
||||
alignContent: value,
|
||||
}),
|
||||
jc: (value: PropertyValue<"justifyContent">) => ({
|
||||
justifyContent: value,
|
||||
}),
|
||||
as: (value: PropertyValue<"alignSelf">) => ({
|
||||
alignSelf: value,
|
||||
}),
|
||||
fg: (value: PropertyValue<"flexGrow">) => ({flexGrow: value}),
|
||||
fs: (value: PropertyValue<"fontSize">) => ({
|
||||
fontSize: value,
|
||||
}),
|
||||
fb: (value: PropertyValue<"flexBasis">) => ({
|
||||
flexBasis: value,
|
||||
}),
|
||||
bc: (value: PropertyValue<"backgroundColor">) => ({
|
||||
backgroundColor: value,
|
||||
}),
|
||||
bf: (value: PropertyValue<"backdropFilter">) => ({
|
||||
backdropFilter: value,
|
||||
}),
|
||||
bg: (value: PropertyValue<"backgroundColor">) => ({
|
||||
background: value,
|
||||
}),
|
||||
bgBlur: (value: PropertyValue<"backgroundColor">) => ({
|
||||
bf: "saturate(180%) blur(10px)",
|
||||
bg: value,
|
||||
}),
|
||||
bgColor: (value: PropertyValue<"backgroundColor">) => ({
|
||||
backgroundColor: value,
|
||||
}),
|
||||
backgroundClip: (value: PropertyValue<"backgroundClip">) => ({
|
||||
WebkitBackgroundClip: value,
|
||||
backgroundClip: value,
|
||||
}),
|
||||
bgClip: (value: PropertyValue<"backgroundClip">) => ({
|
||||
WebkitBackgroundClip: value,
|
||||
backgroundClip: value,
|
||||
}),
|
||||
br: (value: PropertyValue<"borderRadius">) => ({
|
||||
borderRadius: value,
|
||||
}),
|
||||
bw: (value: PropertyValue<"borderWidth">) => ({
|
||||
borderWidth: value,
|
||||
}),
|
||||
btrr: (value: PropertyValue<"borderTopRightRadius">) => ({
|
||||
borderTopRightRadius: value,
|
||||
}),
|
||||
bbrr: (value: PropertyValue<"borderBottomRightRadius">) => ({
|
||||
borderBottomRightRadius: value,
|
||||
}),
|
||||
bblr: (value: PropertyValue<"borderBottomLeftRadius">) => ({
|
||||
borderBottomLeftRadius: value,
|
||||
}),
|
||||
btlr: (value: PropertyValue<"borderTopLeftRadius">) => ({
|
||||
borderTopLeftRadius: value,
|
||||
}),
|
||||
bs: (value: PropertyValue<"boxShadow">) => ({
|
||||
boxShadow: value,
|
||||
}),
|
||||
ds: (value: PropertyValue<"boxShadow">) => ({
|
||||
dropShadow: value,
|
||||
}),
|
||||
shadow: (value: PropertyValue<"boxShadow">) => ({
|
||||
boxShadow: value,
|
||||
}),
|
||||
dshadow: (value: PropertyValue<"boxShadow">) => ({
|
||||
dropShadow: value,
|
||||
}),
|
||||
dropShadow: (value: PropertyValue<"boxShadow">) => ({
|
||||
filter: `$dropShadows${value}`,
|
||||
}),
|
||||
normalShadow: (value: PropertyValue<"backgroundColor">) => ({
|
||||
boxShadow: `0 4px 14px 0 $colors${value}`,
|
||||
}),
|
||||
normalShadowVar: (value: PropertyValue<"backgroundColor">) => ({
|
||||
boxShadow: `0 4px 14px 0 ${value}`,
|
||||
}),
|
||||
lh: (value: PropertyValue<"lineHeight">) => ({
|
||||
lineHeight: value,
|
||||
}),
|
||||
ov: (value: PropertyValue<"overflow">) => ({overflow: value}),
|
||||
ox: (value: PropertyValue<"overflowX">) => ({
|
||||
overflowX: value,
|
||||
}),
|
||||
oy: (value: PropertyValue<"overflowY">) => ({
|
||||
overflowY: value,
|
||||
}),
|
||||
pe: (value: PropertyValue<"pointerEvents">) => ({
|
||||
pointerEvents: value,
|
||||
}),
|
||||
events: (value: PropertyValue<"pointerEvents">) => ({
|
||||
pointerEvents: value,
|
||||
}),
|
||||
us: (value: PropertyValue<"userSelect">) => ({
|
||||
WebkitUserSelect: value,
|
||||
userSelect: value,
|
||||
}),
|
||||
userSelect: (value: PropertyValue<"userSelect">) => ({
|
||||
WebkitUserSelect: value,
|
||||
userSelect: value,
|
||||
}),
|
||||
w: (value: PropertyValue<"width">) => ({width: value}),
|
||||
h: (value: PropertyValue<"height">) => ({height: value}),
|
||||
mw: (value: PropertyValue<"maxWidth">) => ({maxWidth: value}),
|
||||
maxW: (value: PropertyValue<"maxWidth">) => ({
|
||||
maxWidth: value,
|
||||
}),
|
||||
mh: (value: PropertyValue<"maxHeight">) => ({
|
||||
maxHeight: value,
|
||||
}),
|
||||
maxH: (value: PropertyValue<"maxHeight">) => ({
|
||||
maxHeight: value,
|
||||
}),
|
||||
size: (value: PropertyValue<"width">) => ({
|
||||
width: value,
|
||||
height: value,
|
||||
}),
|
||||
minSize: (value: PropertyValue<"width">) => ({
|
||||
minWidth: value,
|
||||
minHeight: value,
|
||||
width: value,
|
||||
height: value,
|
||||
}),
|
||||
sizeMin: (value: PropertyValue<"width">) => ({
|
||||
minWidth: value,
|
||||
minHeight: value,
|
||||
width: value,
|
||||
height: value,
|
||||
}),
|
||||
maxSize: (value: PropertyValue<"width">) => ({
|
||||
maxWidth: value,
|
||||
maxHeight: value,
|
||||
}),
|
||||
sizeMax: (value: PropertyValue<"width">) => ({
|
||||
maxWidth: value,
|
||||
maxHeight: value,
|
||||
}),
|
||||
appearance: (value: PropertyValue<"appearance">) => ({
|
||||
WebkitAppearance: value,
|
||||
appearance: value,
|
||||
}),
|
||||
scale: (value: PropertyValue<"scale">) => ({
|
||||
transform: `scale(${value})`,
|
||||
}),
|
||||
linearGradient: (value: PropertyValue<"backgroundImage">) => ({
|
||||
backgroundImage: `linear-gradient(${value})`,
|
||||
}),
|
||||
tdl: (value: PropertyValue<"textDecorationLine">) => ({
|
||||
textDecorationLine: value,
|
||||
}),
|
||||
truncateText: (value: PropertyValue<"width">) => ({
|
||||
maxWidth: value,
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}),
|
||||
textGradient: (value: PropertyValue<"backgroundImage">) => ({
|
||||
backgroundImage: `linear-gradient(${value})`,
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
"&::selection": {
|
||||
WebkitTextFillColor: "$colors$text",
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export const defaultThemeMap = {
|
||||
...defaultStitchesThemeMap,
|
||||
};
|
||||
|
||||
export default {
|
||||
prefix: "nextui",
|
||||
theme: {
|
||||
...defaultTokens,
|
||||
shadows: {},
|
||||
dropShadows: {},
|
||||
},
|
||||
media: defaultMedia,
|
||||
utils: defaultUtils,
|
||||
themeMap: defaultThemeMap,
|
||||
};
|
||||
|
||||
/**
|
||||
* Common theme types
|
||||
*/
|
||||
|
||||
// defaultTokens
|
||||
export type Fonts = typeof defaultTokens.fonts;
|
||||
export type FontSizes = typeof defaultTokens.fontSizes;
|
||||
export type FontWeights = typeof defaultTokens.fontWeights;
|
||||
export type LineHeights = typeof defaultTokens.lineHeights;
|
||||
export type LetterSpacings = typeof defaultTokens.letterSpacings;
|
||||
export type Space = typeof defaultTokens.space;
|
||||
export type Sizes = typeof defaultTokens.sizes;
|
||||
export type Radii = typeof defaultTokens.radii;
|
||||
export type ZIndices = typeof defaultTokens.zIndices;
|
||||
export type BorderStyles = typeof defaultTokens.borderStyles;
|
||||
export type BorderWidths = typeof defaultTokens.borderWidths;
|
||||
export type Shadows = typeof defaultTokens.shadows;
|
||||
export type Transitions = typeof defaultTokens.transitions;
|
||||
export type Colors = typeof defaultColors;
|
||||
|
||||
export type TokensGroup = {
|
||||
fonts: Fonts;
|
||||
fontSizes: FontSizes;
|
||||
fontWeights: FontWeights;
|
||||
lineHeights: LineHeights;
|
||||
letterSpacings: LetterSpacings;
|
||||
space: Space;
|
||||
sizes: Sizes;
|
||||
radii: Radii;
|
||||
zIndices: ZIndices;
|
||||
borderWidths: BorderWidths;
|
||||
transitions: Transitions;
|
||||
colors: Colors;
|
||||
borderStyles: BorderStyles;
|
||||
shadows: Shadows;
|
||||
};
|
||||
|
||||
// defaultMedia
|
||||
export type Media = typeof defaultMedia;
|
||||
|
||||
// defaultUtils
|
||||
export type Utils = typeof defaultUtils;
|
||||
|
||||
// defaultThemeMap
|
||||
export type ThemeMap = typeof defaultThemeMap;
|
||||
@ -1,257 +0,0 @@
|
||||
import React, {ReactNode} from "react";
|
||||
|
||||
import {globalCss, getCssText} from "./stitches.config";
|
||||
|
||||
const globalStyles = globalCss({
|
||||
"*, *:before, *:after": {
|
||||
boxSizing: "border-box",
|
||||
textRendering: "geometricPrecision",
|
||||
WebkitTapHighlightColor: "transparent",
|
||||
},
|
||||
html: {
|
||||
fontSize: "$base",
|
||||
},
|
||||
body: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
minHeight: "100%",
|
||||
position: "relative",
|
||||
overflowX: "hidden",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
MozOsxFontSmoothing: "grayscale",
|
||||
textRendering: "optimizeLegibility",
|
||||
fontSize: "$base",
|
||||
lineHeight: "$md",
|
||||
fontFamily: "$sans",
|
||||
},
|
||||
"html, body": {
|
||||
backgroundColor: "$background",
|
||||
color: "$text",
|
||||
},
|
||||
"p, small": {
|
||||
color: "inherit",
|
||||
letterSpacing: "$tighter",
|
||||
fontWeight: "$normal",
|
||||
fontFamily: "$sans",
|
||||
},
|
||||
p: {
|
||||
fontSize: "$base",
|
||||
lineHeight: "$lg",
|
||||
},
|
||||
small: {
|
||||
margin: 0,
|
||||
lineHeight: "$xs",
|
||||
fontSize: "$xs",
|
||||
},
|
||||
b: {
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
span: {
|
||||
fontSize: "inherit",
|
||||
color: "inherit",
|
||||
fontWeight: "inherit",
|
||||
},
|
||||
img: {
|
||||
maxWidth: "100%",
|
||||
},
|
||||
a: {
|
||||
cursor: "pointer",
|
||||
fontSize: "inherit",
|
||||
WebkitTouchCallout: "none",
|
||||
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
|
||||
WebkitBoxAlign: "center",
|
||||
alignItems: "center",
|
||||
color: "$link",
|
||||
textDecoration: "none",
|
||||
},
|
||||
"a:hover": {
|
||||
textDecoration: "none",
|
||||
},
|
||||
"ul,ol": {
|
||||
padding: 0,
|
||||
listStyleType: "none",
|
||||
margin: "$sm $sm $sm $lg",
|
||||
color: "$foreground",
|
||||
},
|
||||
ol: {
|
||||
listStyleType: "decimal",
|
||||
},
|
||||
li: {
|
||||
marginBottom: "$5",
|
||||
fontSize: "$base",
|
||||
lineHeight: "$lg",
|
||||
},
|
||||
"h1,h2,h3,h4,h5,h6": {
|
||||
color: "inherit",
|
||||
margin: "0 0 $5 0",
|
||||
},
|
||||
h1: {
|
||||
letterSpacing: "$tighter",
|
||||
fontSize: "$5xl",
|
||||
lineHeight: "$md",
|
||||
fontWeight: "$bold",
|
||||
},
|
||||
h2: {
|
||||
letterSpacing: "$tighter",
|
||||
fontSize: "$4xl",
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
h3: {
|
||||
letterSpacing: "$tighter",
|
||||
fontSize: "$2xl",
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
h4: {
|
||||
letterSpacing: "$tighter",
|
||||
fontSize: "$xl",
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
h5: {
|
||||
letterSpacing: "$tight",
|
||||
fontSize: "$md",
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
h6: {
|
||||
letterSpacing: "$tight",
|
||||
fontSize: "$sm",
|
||||
fontWeight: "$semibold",
|
||||
},
|
||||
"button, input, select,textarea": {
|
||||
fontFamily: "inherit",
|
||||
fontSize: "inherit",
|
||||
lineHeight: "inherit",
|
||||
color: "inherit",
|
||||
margin: 0,
|
||||
},
|
||||
"button:focus, input:focus, select:focus, textarea:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
code: {
|
||||
color: "$code",
|
||||
padding: "$1 $2",
|
||||
borderRadius: "$xs",
|
||||
bg: "$codeLight",
|
||||
fontFamily: "$mono",
|
||||
fontSize: "$sm",
|
||||
whiteSpace: "pre-wrap",
|
||||
transition: "opacity 0.25s ease 0s",
|
||||
},
|
||||
"code:hover": {
|
||||
opacity: 0.8,
|
||||
},
|
||||
pre: {
|
||||
overflow: "auto",
|
||||
whiteSpace: "pre",
|
||||
textAlign: "left",
|
||||
fontSize: "$sm",
|
||||
borderRadius: "$lg",
|
||||
padding: "$md $lg",
|
||||
margin: "$lg 0",
|
||||
fontFamily: "$mono",
|
||||
lineHeight: "$md",
|
||||
webkitOverflowScrolling: "touch",
|
||||
},
|
||||
"pre code": {
|
||||
color: "$foreground",
|
||||
fontSize: "$sm",
|
||||
lineHeight: "$sm",
|
||||
whiteSpace: "pre",
|
||||
},
|
||||
"pre code:before,pre code:after": {
|
||||
display: "none",
|
||||
},
|
||||
"pre p": {
|
||||
margin: 0,
|
||||
},
|
||||
"pre::-webkit-scrollbar": {
|
||||
display: "none",
|
||||
width: 0,
|
||||
height: 0,
|
||||
background: "transparent",
|
||||
},
|
||||
hr: {
|
||||
background: "$border",
|
||||
borderColor: "transparent",
|
||||
borderWidth: "0px",
|
||||
borderStyle: "none",
|
||||
height: "1px",
|
||||
},
|
||||
details: {
|
||||
backgroundColor: "$accents1",
|
||||
border: "none",
|
||||
},
|
||||
"details:focus, details:hover, details:active": {
|
||||
outline: "none",
|
||||
},
|
||||
summary: {
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
listStyle: "none",
|
||||
outline: "none",
|
||||
},
|
||||
"summary::-webkit-details-marker, summary::before": {
|
||||
display: "none",
|
||||
},
|
||||
"summary::-moz-list-bullet": {
|
||||
fontSize: 0,
|
||||
},
|
||||
"summary:focus, summary:hover, summary:active": {
|
||||
outline: "none",
|
||||
listStyle: "none",
|
||||
},
|
||||
"::selection": {
|
||||
backgroundColor: "$selection",
|
||||
},
|
||||
blockquote: {
|
||||
padding: "$md $lg",
|
||||
color: "$accents7",
|
||||
backgroundColor: "$accents0",
|
||||
borderRadius: "$lg",
|
||||
margin: "$10 0",
|
||||
},
|
||||
"blockquote *:first-child": {
|
||||
marginTop: 0,
|
||||
},
|
||||
"blockquote *:last-child": {
|
||||
marginBottom: 0,
|
||||
},
|
||||
kbd: {
|
||||
width: "fit-content",
|
||||
textAlign: "center",
|
||||
display: "inline-block",
|
||||
color: "$accents8",
|
||||
bg: "$accents0",
|
||||
border: "1px solid $border",
|
||||
boxShadow: "0 0 1px 0 rgb(0 0 0 / 14%)",
|
||||
fontFamily: "$sans",
|
||||
borderRadius: "5px",
|
||||
padding: "$1 $3",
|
||||
mx: "$1",
|
||||
lineHeight: "$sm",
|
||||
fontSize: "$sm",
|
||||
},
|
||||
"kbd + kbd": {
|
||||
ml: "$2",
|
||||
},
|
||||
"dl, dd, hr, figure, p": {
|
||||
margin: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const flushCSS = () => <style dangerouslySetInnerHTML={{__html: getCssText()}} id="stitches" />;
|
||||
|
||||
const CssBaselineBase: React.FC<{children?: ReactNode}> = ({children}) => {
|
||||
globalStyles();
|
||||
|
||||
return <React.Fragment>{children}</React.Fragment>;
|
||||
};
|
||||
|
||||
type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
|
||||
flush: typeof flushCSS;
|
||||
};
|
||||
|
||||
export const CssBaseline = React.memo(CssBaselineBase) as MemoCssBaselineComponent<{
|
||||
children?: ReactNode;
|
||||
}>;
|
||||
|
||||
CssBaseline.flush = flushCSS;
|
||||
@ -1,86 +0,0 @@
|
||||
import {
|
||||
blueDark,
|
||||
greenDark,
|
||||
purpleDark,
|
||||
yellowDark,
|
||||
redDark,
|
||||
cyanDark,
|
||||
pinkDark,
|
||||
grayDark,
|
||||
} from "./colors";
|
||||
|
||||
export default {
|
||||
colors: {
|
||||
// background
|
||||
background: "$black",
|
||||
backgroundAlpha: "rgba(0, 0, 0, 0.6)",
|
||||
foreground: "$white",
|
||||
backgroundContrast: "$accents0",
|
||||
|
||||
//semantic colors
|
||||
...blueDark,
|
||||
...purpleDark,
|
||||
...greenDark,
|
||||
...yellowDark,
|
||||
...redDark,
|
||||
...cyanDark,
|
||||
...pinkDark,
|
||||
...grayDark,
|
||||
|
||||
// brand colors
|
||||
primaryLight: "$blue50",
|
||||
primaryLightHover: "$blue100",
|
||||
primaryLightActive: "$blue200",
|
||||
primaryLightContrast: "$blue600",
|
||||
|
||||
secondaryLight: "$purple50",
|
||||
secondaryLightHover: "$purple100",
|
||||
secondaryLightActive: "$purple200",
|
||||
secondaryLightContrast: "$purple800",
|
||||
secondary: "$purple700",
|
||||
secondaryBorder: "$purple500",
|
||||
secondaryBorderHover: "$purple600",
|
||||
secondarySolidHover: "$purple700",
|
||||
secondaryShadow: "$purple500",
|
||||
|
||||
successLight: "$green50",
|
||||
successLightHover: "$green100",
|
||||
successLightActive: "$green200",
|
||||
|
||||
warningLight: "$yellow50",
|
||||
warningLightHover: "$yellow100",
|
||||
warningLightActive: "$yellow200",
|
||||
|
||||
errorLight: "$red50",
|
||||
errorLightHover: "$red100",
|
||||
errorLightActive: "$red200",
|
||||
errorLightContrast: "$red700",
|
||||
|
||||
neutralLight: "$gray200",
|
||||
neutralLightHover: "$gray300",
|
||||
neutralLightActive: "$gray400",
|
||||
neutralSolidContrast: "$white",
|
||||
|
||||
// misc
|
||||
text: "$gray900",
|
||||
link: "$blue700",
|
||||
codeLight: "$cyan50",
|
||||
code: "$cyan600",
|
||||
selection: "$pink800",
|
||||
border: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
shadows: {
|
||||
xs: "0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)",
|
||||
sm: "0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)",
|
||||
md: "0 12px 20px 6px rgb(0 0 0 / 0.08)",
|
||||
lg: "0 12px 34px 6px rgb(0 0 0 / 0.18)",
|
||||
xl: "0 25px 65px 0px rgb(0 0 0 / 0.35)",
|
||||
},
|
||||
dropShadows: {
|
||||
xs: "drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))",
|
||||
sm: "drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))",
|
||||
md: "drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))",
|
||||
lg: "drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))",
|
||||
xl: "drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))",
|
||||
},
|
||||
};
|
||||
@ -1,10 +1,2 @@
|
||||
export * from "./root";
|
||||
export * from "./system";
|
||||
export * from "./colors";
|
||||
export * from "./utils";
|
||||
export * from "./css-baseline";
|
||||
export * from "./theme-provider";
|
||||
export * from "./stitches.config";
|
||||
export * from "./use-theme";
|
||||
export * from "./types";
|
||||
export * from "./variants";
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import {blue, purple, green, yellow, red, cyan, pink, gray} from "./colors";
|
||||
|
||||
export default {
|
||||
colors: {
|
||||
// background colors
|
||||
background: "$white",
|
||||
backgroundAlpha: "rgba(255, 255, 255, 0.8)",
|
||||
foreground: "$black",
|
||||
backgroundContrast: "$white",
|
||||
|
||||
//semantic colors
|
||||
...blue,
|
||||
...purple,
|
||||
...green,
|
||||
...yellow,
|
||||
...red,
|
||||
...cyan,
|
||||
...pink,
|
||||
...gray,
|
||||
|
||||
// misc
|
||||
text: "$gray900",
|
||||
link: "$blue600",
|
||||
codeLight: "$pink100",
|
||||
code: "$pink600",
|
||||
selection: "$blue200",
|
||||
border: "rgba(0, 0, 0, 0.15)",
|
||||
},
|
||||
shadows: {
|
||||
xs: "0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)",
|
||||
sm: "0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)",
|
||||
md: "0 12px 20px 6px rgb(104 112 118 / 0.08)",
|
||||
lg: "0 12px 34px 6px rgb(104 112 118 / 0.18)",
|
||||
xl: "0 25px 65px 0px rgb(104 112 118 / 0.35)",
|
||||
},
|
||||
dropShadows: {
|
||||
xs: "drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))",
|
||||
sm: "drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))",
|
||||
md: "drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))",
|
||||
lg: "drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))",
|
||||
xl: "drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))",
|
||||
},
|
||||
};
|
||||
@ -1,49 +0,0 @@
|
||||
/**
|
||||
* Part of this code is taken from @chakra-ui/system 🙏🏻
|
||||
*/
|
||||
import {
|
||||
As,
|
||||
rootStyled,
|
||||
DOMElements,
|
||||
CapitalizedDOMElements,
|
||||
NextUIComponent,
|
||||
HTMLNextUIComponents,
|
||||
} from "./system";
|
||||
|
||||
type NextUIRoot = {
|
||||
<T extends As, P = {}>(component: T): NextUIComponent<T, P>;
|
||||
};
|
||||
|
||||
function root() {
|
||||
const cache = new Map<DOMElements, NextUIComponent<DOMElements>>();
|
||||
|
||||
return new Proxy(rootStyled, {
|
||||
/**
|
||||
* @example
|
||||
* const Div = NextUI("div")
|
||||
* const StyledComponent = NextUI(AnotherComponent)
|
||||
*/
|
||||
apply(target, thisArg, argArray: [DOMElements]) {
|
||||
return rootStyled(...argArray);
|
||||
},
|
||||
/**
|
||||
* @example
|
||||
* <NextUI.Div />
|
||||
*/
|
||||
get(_, element: CapitalizedDOMElements) {
|
||||
const key = element.toLowerCase() as DOMElements;
|
||||
|
||||
if (!cache.has(key)) {
|
||||
cache.set(key, rootStyled(key));
|
||||
}
|
||||
|
||||
return cache.get(key);
|
||||
},
|
||||
}) as NextUIRoot & HTMLNextUIComponents;
|
||||
}
|
||||
/**
|
||||
* The NextUI root serves as an object of stitches styled components enabled JSX elements,
|
||||
* and also a function that can be used to enable custom component receive nextui's props.
|
||||
*
|
||||
*/
|
||||
export const NextUI = root();
|
||||
@ -1,92 +0,0 @@
|
||||
import {createStitches} from "@stitches/react";
|
||||
import {deepMerge} from "@nextui-org/shared-utils";
|
||||
|
||||
import commonTheme from "./common";
|
||||
import lightTheme from "./light-theme";
|
||||
import darkTheme from "./dark-theme";
|
||||
import {Theme, BaseTheme, ConfigType} from "./types";
|
||||
|
||||
export const getStitchesTheme = (targetTheme: BaseTheme): BaseTheme => {
|
||||
return deepMerge(targetTheme, commonTheme.theme);
|
||||
};
|
||||
|
||||
export const {
|
||||
styled,
|
||||
css,
|
||||
globalCss,
|
||||
keyframes,
|
||||
getCssText,
|
||||
theme,
|
||||
config,
|
||||
createTheme: createThemeBase,
|
||||
} = createStitches({
|
||||
...commonTheme,
|
||||
theme: {
|
||||
...commonTheme.theme,
|
||||
shadows: {
|
||||
...lightTheme.shadows,
|
||||
},
|
||||
dropShadows: {
|
||||
...lightTheme.dropShadows,
|
||||
},
|
||||
colors: {
|
||||
...commonTheme.theme.colors,
|
||||
...lightTheme.colors,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Mutators
|
||||
* @internal
|
||||
*/
|
||||
function setMedia<Media extends {} = {}>(media: ConfigType.Media<Media>): void {
|
||||
config.media = {
|
||||
...config.media,
|
||||
...media,
|
||||
};
|
||||
}
|
||||
|
||||
function setUtils<Utils extends {} = {}>(utils: ConfigType.Utils<Utils>): void {
|
||||
config.utils = {
|
||||
...config.utils,
|
||||
...utils,
|
||||
};
|
||||
}
|
||||
|
||||
function setThemeMap<ThemeMap extends {} = {}>(themeMap: ConfigType.ThemeMap<ThemeMap>): void {
|
||||
config.themeMap = {
|
||||
...config.themeMap,
|
||||
...themeMap,
|
||||
};
|
||||
}
|
||||
|
||||
export const createTheme = ({
|
||||
type,
|
||||
className,
|
||||
theme = {},
|
||||
media = {},
|
||||
utils = {},
|
||||
themeMap = {},
|
||||
}: Theme) => {
|
||||
if (!type) {
|
||||
throw new Error("Theme type is required");
|
||||
}
|
||||
|
||||
if (Object.keys(media).length > 0) {
|
||||
setMedia(media);
|
||||
}
|
||||
|
||||
if (Object.keys(utils).length > 0) {
|
||||
setUtils(utils);
|
||||
}
|
||||
|
||||
if (Object.keys(themeMap).length > 0) {
|
||||
setThemeMap(themeMap);
|
||||
}
|
||||
|
||||
return createThemeBase(
|
||||
className || `${type}-theme`,
|
||||
deepMerge(type === "dark" ? darkTheme : lightTheme, theme),
|
||||
);
|
||||
};
|
||||
@ -4,9 +4,6 @@
|
||||
|
||||
import {forwardRef as baseForwardRef} from "react";
|
||||
|
||||
import {styled} from "./stitches.config";
|
||||
import {CSS} from "./types";
|
||||
|
||||
export type As<Props = any> = React.ElementType<Props>;
|
||||
export type DOMElements = keyof JSX.IntrinsicElements;
|
||||
export type CapitalizedDOMElements = Capitalize<DOMElements>;
|
||||
@ -18,8 +15,9 @@ export interface NextUIProps {
|
||||
as?: As;
|
||||
/**
|
||||
* The stiches's css style object
|
||||
* TODO: remove this prop after migrating all components to TailwindCSS
|
||||
*/
|
||||
css?: CSS;
|
||||
css?: any;
|
||||
}
|
||||
|
||||
export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<
|
||||
@ -95,12 +93,6 @@ export type HTMLNextUIComponents = {
|
||||
[Tag in CapitalizedDOMElements]: NextUIComponent<Uncapitalize<Tag>, {}>;
|
||||
};
|
||||
|
||||
export function rootStyled<T extends As, P = {}>(component: T) {
|
||||
const Component = styled(component as React.ComponentType<any>, {});
|
||||
|
||||
return Component as NextUIComponent<T, P>;
|
||||
}
|
||||
|
||||
export const toIterator = (obj: any) => {
|
||||
return {
|
||||
...obj,
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import {theme} from "./stitches.config";
|
||||
import {NextUIThemeContext} from "./types";
|
||||
|
||||
export const defaultContext: NextUIThemeContext = {
|
||||
isDark: false,
|
||||
theme,
|
||||
type: "light",
|
||||
};
|
||||
|
||||
export const ThemeContext: React.Context<NextUIThemeContext> =
|
||||
React.createContext<NextUIThemeContext>(defaultContext);
|
||||
@ -1,96 +1,10 @@
|
||||
import React, {useState, useMemo, useEffect, ReactNode} from "react";
|
||||
import React, {ReactNode} from "react";
|
||||
import {SSRProvider} from "@react-aria/ssr";
|
||||
import {OverlayProvider} from "@react-aria/overlays";
|
||||
import {deepMerge, copyObject} from "@nextui-org/shared-utils";
|
||||
import {useSSR} from "@nextui-org/use-ssr";
|
||||
|
||||
import {changeTheme, getThemeName, getDocumentCSSTokens, getDocumentTheme} from "./utils";
|
||||
import {CreateTheme, NextUITheme, NextUIThemeContext, ThemeType} from "./types";
|
||||
import {ThemeContext, defaultContext} from "./theme-context";
|
||||
import {CssBaseline} from "./css-baseline";
|
||||
|
||||
export interface NextUIProviderProps {
|
||||
theme?: CreateTheme;
|
||||
children?: ReactNode;
|
||||
disableBaseline?: boolean;
|
||||
}
|
||||
|
||||
export const NextUIProvider: React.FC<NextUIProviderProps> = ({
|
||||
theme: userTheme,
|
||||
disableBaseline = false,
|
||||
children,
|
||||
}) => {
|
||||
const {isBrowser} = useSSR();
|
||||
|
||||
const [currentTheme, setCurrentTheme] = useState<ThemeType | string>(defaultContext.type);
|
||||
|
||||
const changeCurrentTheme = (type: ThemeType | string) => {
|
||||
setCurrentTheme((ct) => (ct !== type ? type : ct));
|
||||
};
|
||||
|
||||
const changeTypeBaseEl = (el: HTMLElement) => {
|
||||
const themeValue = getDocumentTheme(el);
|
||||
|
||||
themeValue && changeCurrentTheme(themeValue);
|
||||
};
|
||||
|
||||
const providerValue = useMemo<NextUIThemeContext>(() => {
|
||||
const themeTokens = isBrowser ? getDocumentCSSTokens() : {};
|
||||
const theme = deepMerge(copyObject(defaultContext.theme), themeTokens) as NextUITheme;
|
||||
const themeName = getThemeName(currentTheme);
|
||||
|
||||
return {
|
||||
theme,
|
||||
type: themeName,
|
||||
isDark: themeName === "dark",
|
||||
};
|
||||
}, [currentTheme, isBrowser]);
|
||||
|
||||
useEffect(() => {
|
||||
// initial set
|
||||
changeTypeBaseEl(document?.documentElement);
|
||||
|
||||
const observer = new MutationObserver((mutation) => {
|
||||
if (mutation && mutation.length > 0 && mutation[0]?.target.nodeName === "BODY") {
|
||||
const documentTheme = document?.body?.dataset?.theme;
|
||||
|
||||
documentTheme && changeCurrentTheme(documentTheme);
|
||||
} else {
|
||||
changeTypeBaseEl(document?.documentElement);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document?.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["data-theme", "style"],
|
||||
});
|
||||
|
||||
observer.observe(document?.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ["data-theme", "style"],
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isBrowser || !userTheme) {
|
||||
return;
|
||||
}
|
||||
if (userTheme?.className) {
|
||||
changeTheme(userTheme.className);
|
||||
changeCurrentTheme(getThemeName(userTheme.className));
|
||||
}
|
||||
}, [isBrowser, userTheme]);
|
||||
|
||||
return (
|
||||
<SSRProvider>
|
||||
<OverlayProvider>
|
||||
<ThemeContext.Provider value={providerValue}>
|
||||
{!disableBaseline && <CssBaseline />}
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
</OverlayProvider>
|
||||
</SSRProvider>
|
||||
);
|
||||
export const NextUIProvider: React.FC<NextUIProviderProps> = ({children}) => {
|
||||
return <SSRProvider>{children}</SSRProvider>;
|
||||
};
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
export type Globals = "inherit" | "initial" | "revert" | "unset";
|
||||
|
||||
export type Index = (number | string) & Record<never, never>;
|
||||
|
||||
export type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
|
||||
|
||||
export type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme
|
||||
? keyof Theme[ScaleName]
|
||||
: never;
|
||||
|
||||
export type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends keyof ThemeMap
|
||||
? TokenByScaleName<ThemeMap[PropertyName], Theme>
|
||||
: never;
|
||||
@ -1,126 +0,0 @@
|
||||
import type * as Stitches from "@stitches/react";
|
||||
import type {Globals, Index, TokenByPropertyName} from "./type-utils";
|
||||
|
||||
import {createThemeBase, config, theme, css} from "./stitches.config";
|
||||
import commonTheme from "./common";
|
||||
|
||||
/** Configuration Interface */
|
||||
export declare namespace ConfigType {
|
||||
/** Media interface. */
|
||||
export type Media<T = {}> = {
|
||||
[name in keyof T]: T[name] extends string ? T[name] : string;
|
||||
};
|
||||
|
||||
/** Theme interface. */
|
||||
export type Theme<T = {}> = {
|
||||
fonts?: {[token in number | string]: boolean | number | string};
|
||||
fontSizes?: {[token in number | string]: boolean | number | string};
|
||||
fontWeights?: {[token in number | string]: boolean | number | string};
|
||||
lineHeights?: {[token in number | string]: boolean | number | string};
|
||||
letterSpacings?: {[token in number | string]: boolean | number | string};
|
||||
space?: {[token in number | string]: boolean | number | string};
|
||||
radii?: {[token in number | string]: boolean | number | string};
|
||||
zIndices?: {[token in number | string]: boolean | number | string};
|
||||
borderWidths?: {[token in number | string]: boolean | number | string};
|
||||
colors?: {[token in number | string]: boolean | number | string};
|
||||
shadows?: {[token in number | string]: boolean | number | string};
|
||||
dropShadows?: {[token in number | string]: boolean | number | string};
|
||||
transitions?: {[token in number | string]: boolean | number | string};
|
||||
} & {
|
||||
[Scale in keyof T]: {
|
||||
[Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string
|
||||
? T[Scale][Token]
|
||||
: boolean | number | string;
|
||||
};
|
||||
};
|
||||
/** ThemeMap interface. */
|
||||
export type ThemeMap<T = {}> = {
|
||||
[Property in keyof T]: T[Property] extends string ? T[Property] : string;
|
||||
};
|
||||
|
||||
/** Utility interface. */
|
||||
export type Utils<T = {}> = {
|
||||
[Property in keyof T]: T[Property] extends (value: infer V) => {}
|
||||
?
|
||||
| T[Property]
|
||||
| ((value: V) => {
|
||||
[K in keyof Stitches.CSSProperties]?: Stitches.CSSProperties[K] | V;
|
||||
})
|
||||
: never;
|
||||
};
|
||||
}
|
||||
|
||||
// stitches types
|
||||
export type StitchesConfig = typeof config;
|
||||
export type VariantProps<T extends {[key: symbol | string]: any}> = Stitches.VariantProps<T>;
|
||||
export type PropertyValue<T extends keyof Stitches.CSSProperties> = Stitches.PropertyValue<T>;
|
||||
export type ScaleValue<T> = Stitches.ScaleValue<T>;
|
||||
export type CSSProperties = Stitches.CSSProperties;
|
||||
export type CSS = Stitches.CSS<StitchesConfig>;
|
||||
export type StitchesTheme = typeof theme;
|
||||
export type CSSComponent = typeof css;
|
||||
|
||||
// theme types
|
||||
export type BaseThemeMap = StitchesConfig["themeMap"];
|
||||
export type BaseTheme = ConfigType.Theme;
|
||||
export type NextUITheme = StitchesTheme;
|
||||
export type ThemeType = "dark" | "light";
|
||||
export type CreateTheme = ReturnType<typeof createThemeBase>;
|
||||
|
||||
export type Theme = {
|
||||
/**
|
||||
* The theme type.
|
||||
* @default "light"
|
||||
*/
|
||||
type?: ThemeType | string;
|
||||
/**
|
||||
* The stitches theme class name.
|
||||
* @see https://stitches.dev/docs/theming#add-a-new-theme
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The stitches theme tokens object.
|
||||
*/
|
||||
theme?: BaseTheme;
|
||||
/**
|
||||
* The stitches theme media object.
|
||||
* @see https://stitches.dev/docs/breakpoints
|
||||
*/
|
||||
media?: ConfigType.Media;
|
||||
/**
|
||||
* The theme utils object.
|
||||
* @see https://stitches.dev/docs/utils
|
||||
*/
|
||||
utils?: ConfigType.Utils;
|
||||
/**
|
||||
* The stitches theme themeMap object.
|
||||
* @see https://stitches.dev/docs/tokens#property-mapping
|
||||
*/
|
||||
themeMap?: ConfigType.ThemeMap;
|
||||
};
|
||||
|
||||
export type NextUIThemeContext = {
|
||||
type: ThemeType | string;
|
||||
theme?: NextUITheme;
|
||||
isDark?: boolean;
|
||||
};
|
||||
|
||||
// tokens types
|
||||
export type TokenKeyName = keyof (typeof commonTheme)["theme"];
|
||||
|
||||
export interface TokenValue {
|
||||
token: number | string;
|
||||
value: number | string;
|
||||
scale: string;
|
||||
prefix: string;
|
||||
}
|
||||
|
||||
// styles types
|
||||
|
||||
export type CSSProp = {
|
||||
[K in keyof CSSProperties]?:
|
||||
| TokenByPropertyName<K, NextUITheme, BaseThemeMap>
|
||||
| Globals
|
||||
| Index
|
||||
| undefined;
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
import {useContext} from "react";
|
||||
|
||||
import {ThemeContext} from "./theme-context";
|
||||
import {NextUIThemeContext} from "./types";
|
||||
|
||||
export function useTheme() {
|
||||
const theme = useContext(ThemeContext as unknown as React.Context<undefined>);
|
||||
|
||||
if (!theme) {
|
||||
throw Error(
|
||||
"useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`",
|
||||
);
|
||||
}
|
||||
|
||||
return theme as NextUIThemeContext;
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
import {clsx, rgbToRgba, hexToRGBA} from "@nextui-org/shared-utils";
|
||||
|
||||
import commonTheme from "./common";
|
||||
import defaultTheme from "./light-theme";
|
||||
import {ThemeType, TokenValue, TokenKeyName} from "./types";
|
||||
|
||||
export const getTokenValue = (token: TokenKeyName, tokenName: string, alpha = 1) => {
|
||||
if (typeof document === "undefined" || !token || !tokenName) return "";
|
||||
|
||||
const name = tokenName.includes("$") ? tokenName.replace("$", "") : tokenName;
|
||||
|
||||
let docStyle = getComputedStyle(document.documentElement);
|
||||
const tokenKey = `--${commonTheme.prefix}-${token}-${name}`;
|
||||
const tokenValue = docStyle.getPropertyValue(tokenKey);
|
||||
|
||||
if (tokenValue && tokenValue.includes("var")) {
|
||||
getTokenValue(token, tokenValue);
|
||||
}
|
||||
|
||||
if (tokenValue && alpha !== 1) {
|
||||
if (tokenValue.includes("rgb")) {
|
||||
return rgbToRgba(tokenValue, alpha);
|
||||
}
|
||||
if (tokenValue.includes("#")) {
|
||||
return hexToRGBA(tokenValue, alpha);
|
||||
}
|
||||
}
|
||||
|
||||
return tokenValue;
|
||||
};
|
||||
|
||||
export const getDocumentCSSTokens = () => {
|
||||
const colorKeys = [...Object.keys(commonTheme.theme.colors), ...Object.keys(defaultTheme.colors)];
|
||||
|
||||
const shadowKeys = Object.keys(defaultTheme.shadows);
|
||||
|
||||
/**
|
||||
* accents1: {
|
||||
* prefix: "nextui"
|
||||
* scale: "colors"
|
||||
* token: "accents1"
|
||||
* value: "var(--nextui-colors-gray100)"
|
||||
* }
|
||||
*/
|
||||
const colorTokens = colorKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
|
||||
const color = getTokenValue("colors", crr);
|
||||
|
||||
if (color) {
|
||||
acc[crr] = {
|
||||
prefix: commonTheme.prefix,
|
||||
scale: "colors",
|
||||
token: crr,
|
||||
value: color,
|
||||
};
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const shadowTokens = shadowKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
|
||||
const shadow = getTokenValue("shadows", crr);
|
||||
|
||||
if (shadow) {
|
||||
acc[crr] = {
|
||||
prefix: commonTheme.prefix,
|
||||
scale: "shadows",
|
||||
token: crr,
|
||||
value: shadow,
|
||||
};
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
colors: colorTokens,
|
||||
shadows: shadowTokens,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns active theme according to the given document
|
||||
*/
|
||||
export const getDocumentTheme = (el: HTMLElement) => {
|
||||
const styleAttrValues =
|
||||
el
|
||||
?.getAttribute("style")
|
||||
?.split(";")
|
||||
.map((el) => el.trim())
|
||||
.filter((el) => el.includes("color-scheme")) || [];
|
||||
|
||||
const colorScheme =
|
||||
styleAttrValues.length > 0
|
||||
? styleAttrValues[0].replace("color-scheme: ", "").replace(";", "")
|
||||
: "";
|
||||
|
||||
const documentTheme = el?.getAttribute("data-theme");
|
||||
|
||||
return documentTheme || colorScheme;
|
||||
};
|
||||
|
||||
export const getThemeName = (theme: ThemeType | string) => {
|
||||
if (typeof theme === "string") {
|
||||
return theme?.includes("-theme") ? theme?.replace("-theme", "") : theme;
|
||||
}
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
||||
export const changeTheme = (theme: ThemeType | string) => {
|
||||
if (!document) return;
|
||||
const el = document.documentElement;
|
||||
|
||||
const prevClasses =
|
||||
el
|
||||
?.getAttribute("class")
|
||||
?.split(" ")
|
||||
.filter((cls) => !cls.includes("theme") && !cls.includes("light") && !cls.includes("dark")) ||
|
||||
[];
|
||||
const prevStyles =
|
||||
el
|
||||
?.getAttribute("style")
|
||||
?.split(";")
|
||||
.filter((stl) => !stl.includes("color-scheme") && stl.length)
|
||||
.map((el) => `${el};`) || [];
|
||||
|
||||
el?.setAttribute("class", clsx(prevClasses, `${getThemeName(theme)}-theme`));
|
||||
el?.setAttribute("style", clsx(prevStyles, `color-scheme: ${theme};`));
|
||||
};
|
||||
@ -1,128 +0,0 @@
|
||||
import type * as Stitches from "@stitches/react";
|
||||
import type {TransformProps} from "@stitches/react/types/styled-component";
|
||||
|
||||
import {ThemeMap, Media, defaultTokens, defaultThemeMap} from "./common";
|
||||
import {theme} from "./stitches.config";
|
||||
import {Prefixed} from "./type-utils";
|
||||
|
||||
type Theme = typeof theme;
|
||||
type TokenKeys = keyof typeof defaultTokens;
|
||||
type CSSProperties = Stitches.CSSProperties;
|
||||
type VariantsToGenerate = {
|
||||
[K in string]: keyof ThemeMap;
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* This function returns the possible key/values for a given token scale. It allows to generate variant values
|
||||
* dynamically based on the tokens defined in the theme.
|
||||
*
|
||||
* @param tokensGroup The tokens group to use
|
||||
* @param tokenKey The token key to use
|
||||
*
|
||||
* @example
|
||||
* getVariants("fonts", "fontFamily")
|
||||
*
|
||||
* // returns
|
||||
* {
|
||||
* "sans": {
|
||||
* "fontFamily": "$sans"
|
||||
* },
|
||||
* "mono": {
|
||||
* "fontFamily": "$mono"
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
function getVariants<TK extends TokenKeys>(scale: TK, prop: keyof CSSProperties) {
|
||||
if (!theme[scale]) {
|
||||
return;
|
||||
}
|
||||
|
||||
return Object.keys(theme[scale]).reduce((acc, token) => {
|
||||
// @ts-ignore
|
||||
acc[token] = {
|
||||
// @ts-ignore
|
||||
[prop]: `${theme[scale][token]}`,
|
||||
};
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* This function generates variants based on the key & tokens defined in the theme.
|
||||
*
|
||||
* @param variants The variants to generate
|
||||
*
|
||||
* @example
|
||||
* generateVariants({
|
||||
* bgColor: "backgroundColor",
|
||||
* color: "colors",
|
||||
* })
|
||||
*
|
||||
* // returns
|
||||
*
|
||||
* variants: {
|
||||
* "bgColor": {
|
||||
* "primary": {
|
||||
* backgroundColor: "$blue600"
|
||||
* },
|
||||
* "secondary": {
|
||||
* backgroundColor: "$purple600"
|
||||
* },
|
||||
* "success": {},
|
||||
* .... all the colors defined in the theme
|
||||
* },
|
||||
* "color": {
|
||||
* "primary": {},
|
||||
* "secondary": {},
|
||||
* "success": {},
|
||||
* .... all the colors defined in the theme
|
||||
* },
|
||||
* ... all the variants to generate
|
||||
* }
|
||||
*/
|
||||
export function generateVariants<VG extends VariantsToGenerate>(vg: VG) {
|
||||
const variants = Object.keys(vg).reduce((acc, themeMapKey) => {
|
||||
const key = vg[themeMapKey];
|
||||
|
||||
if (!defaultThemeMap[key as keyof ThemeMap]) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
const mapKey = defaultThemeMap[key];
|
||||
|
||||
// @ts-ignore
|
||||
acc[themeMapKey] = getVariants(mapKey, key);
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return {variants} as unknown as {
|
||||
variants: {
|
||||
[K in keyof VG]: {
|
||||
[Q in keyof Theme[ThemeMap[VG[K]]]]: {
|
||||
[P in VG[K]]: Prefixed<"$", Q>;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
type ComponentVariants = {
|
||||
variants: {
|
||||
[Name in string]: {
|
||||
[Variant in string]: {};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
type TranformToVariants<V extends ComponentVariants> = {
|
||||
variants: {
|
||||
[K in keyof V["variants"]]?: keyof V["variants"][K];
|
||||
};
|
||||
};
|
||||
|
||||
export type GeneratedVariantsProps<V extends ComponentVariants> = V extends ComponentVariants
|
||||
? TransformProps<TranformToVariants<V>["variants"], Media>
|
||||
: never;
|
||||
@ -4,6 +4,7 @@ import {pink} from "./pink";
|
||||
import {purple} from "./purple";
|
||||
import {red} from "./red";
|
||||
import {yellow} from "./yellow";
|
||||
import {cyan} from "./cyan";
|
||||
|
||||
export const commonColors = {
|
||||
white: "#ffffff",
|
||||
@ -14,6 +15,7 @@ export const commonColors = {
|
||||
purple,
|
||||
red,
|
||||
yellow,
|
||||
cyan,
|
||||
};
|
||||
|
||||
export type CommonColors = typeof commonColors;
|
||||
|
||||
12
packages/core/theme/src/colors/cyan.ts
Normal file
12
packages/core/theme/src/colors/cyan.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const cyan = {
|
||||
50: "#F0FCFF",
|
||||
100: "#E6FAFE",
|
||||
200: "#D7F8FE",
|
||||
300: "#C3F4FD",
|
||||
400: "#A5EEFD",
|
||||
500: "#7EE7FC",
|
||||
600: "#06B7DB",
|
||||
700: "#09AACD",
|
||||
800: "#0E8AAA",
|
||||
900: "#053B48",
|
||||
};
|
||||
@ -18,6 +18,22 @@ const base: SemanticBaseColors = {
|
||||
border: {
|
||||
DEFAULT: "#00000026",
|
||||
},
|
||||
content1: {
|
||||
DEFAULT: twColors.zinc[50],
|
||||
contrastText: readableColor(twColors.zinc[50]),
|
||||
},
|
||||
content2: {
|
||||
DEFAULT: twColors.zinc[100],
|
||||
contrastText: readableColor(twColors.zinc[100]),
|
||||
},
|
||||
content3: {
|
||||
DEFAULT: twColors.zinc[200],
|
||||
contrastText: readableColor(twColors.zinc[200]),
|
||||
},
|
||||
content4: {
|
||||
DEFAULT: twColors.zinc[300],
|
||||
contrastText: readableColor(twColors.zinc[300]),
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
background: {
|
||||
@ -29,6 +45,22 @@ const base: SemanticBaseColors = {
|
||||
border: {
|
||||
DEFAULT: "#ffffff26",
|
||||
},
|
||||
content1: {
|
||||
DEFAULT: twColors.zinc[900],
|
||||
contrastText: readableColor(twColors.zinc[900]),
|
||||
},
|
||||
content2: {
|
||||
DEFAULT: twColors.zinc[700],
|
||||
contrastText: readableColor(twColors.zinc[700]),
|
||||
},
|
||||
content3: {
|
||||
DEFAULT: twColors.zinc[500],
|
||||
contrastText: readableColor(twColors.zinc[500]),
|
||||
},
|
||||
content4: {
|
||||
DEFAULT: twColors.zinc[400],
|
||||
contrastText: readableColor(twColors.zinc[400]),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -17,6 +17,10 @@ export type BaseColors = {
|
||||
background: ColorScale;
|
||||
foreground: ColorScale;
|
||||
border: ColorScale;
|
||||
content1: ColorScale;
|
||||
content2: ColorScale;
|
||||
content3: ColorScale;
|
||||
content4: ColorScale;
|
||||
};
|
||||
|
||||
export type SemanticColors = BaseColors & {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./components";
|
||||
export * from "./utils";
|
||||
export * from "tailwind-variants";
|
||||
export {tv} from "tailwind-variants";
|
||||
export type {VariantProps} from "tailwind-variants";
|
||||
|
||||
@ -174,7 +174,7 @@ const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const theme = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
export const nextui = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
const userLightColors = get(config, "light", {});
|
||||
const userDarkColors = get(config, "dark", {});
|
||||
|
||||
|
||||
@ -60,15 +60,15 @@ const SematicSwatch = ({
|
||||
<div
|
||||
className={`${className} flex flex-col items-center justify-center w-24 h-24 m-2 rounded-xl shadow-lg`}
|
||||
>
|
||||
<span className={textClassName}>{color}</span>
|
||||
<span className={`${textClassName} text-sm`}>{color}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
||||
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-4">
|
||||
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2">
|
||||
{colors.map(({title, items}) => (
|
||||
<div key={title} className="flex flex-col items-start w-full h-full p-4">
|
||||
<div key={title} className="flex flex-col items-start w-full h-full">
|
||||
<h2 className="text-xl font-bold text-foreground">{title}</h2>
|
||||
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
|
||||
{items.map((c, index) =>
|
||||
@ -90,8 +90,13 @@ const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
||||
);
|
||||
|
||||
export default {
|
||||
title: "Foundation/Colors",
|
||||
title: "Foundations/Colors",
|
||||
component: SwatchSet,
|
||||
argTypes: {
|
||||
isSematic: {
|
||||
control: false,
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof SwatchSet>;
|
||||
|
||||
const Template: ComponentStory<typeof SwatchSet> = (args: SwatchSetProps) => (
|
||||
@ -135,6 +140,10 @@ CommonColors.args = {
|
||||
title: "Yellow",
|
||||
items: getCommonItems([...Object.values(commonColors.yellow)]),
|
||||
},
|
||||
{
|
||||
title: "Cyan",
|
||||
items: getCommonItems([...Object.values(commonColors.cyan)]),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -162,6 +171,31 @@ SemanticColors.args = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Content",
|
||||
items: [
|
||||
{
|
||||
color: "content1",
|
||||
className: "bg-content1",
|
||||
textClassName: "text-content1-contrastText",
|
||||
},
|
||||
{
|
||||
color: "content2",
|
||||
className: "bg-content2",
|
||||
textClassName: "text-content2-contrastText",
|
||||
},
|
||||
{
|
||||
color: "content3",
|
||||
className: "bg-content3",
|
||||
textClassName: "text-content3-contrastText",
|
||||
},
|
||||
{
|
||||
color: "content4",
|
||||
className: "bg-content4",
|
||||
textClassName: "text-content4-contrastText",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Base",
|
||||
items: [
|
||||
@ -197,5 +231,335 @@ SemanticColors.args = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Neutral",
|
||||
items: [
|
||||
{
|
||||
color: "neutral-50",
|
||||
className: "bg-neutral-50",
|
||||
textClassName: "text-neutral-900",
|
||||
},
|
||||
{
|
||||
color: "neutral-100",
|
||||
className: "bg-neutral-100",
|
||||
textClassName: "text-neutral-900",
|
||||
},
|
||||
{
|
||||
color: "neutral-200",
|
||||
className: "bg-neutral-200",
|
||||
textClassName: "text-neutral-800",
|
||||
},
|
||||
{
|
||||
color: "neutral-300",
|
||||
className: "bg-neutral-300",
|
||||
textClassName: "text-neutral-800",
|
||||
},
|
||||
{
|
||||
color: "neutral-400",
|
||||
className: "bg-neutral-400",
|
||||
textClassName: "text-neutral-800",
|
||||
},
|
||||
{
|
||||
color: "neutral-500",
|
||||
className: "bg-neutral-500",
|
||||
textClassName: "text-neutral-contrastText",
|
||||
},
|
||||
{
|
||||
color: "neutral-600",
|
||||
className: "bg-neutral-600",
|
||||
textClassName: "text-neutral-50",
|
||||
},
|
||||
{
|
||||
color: "neutral-700",
|
||||
className: "bg-neutral-700",
|
||||
textClassName: "text-neutral-100",
|
||||
},
|
||||
{
|
||||
color: "neutral-800",
|
||||
className: "bg-neutral-800",
|
||||
textClassName: "text-neutral-100",
|
||||
},
|
||||
{
|
||||
color: "neutral-900",
|
||||
className: "bg-neutral-900",
|
||||
textClassName: "text-neutral-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Primary",
|
||||
items: [
|
||||
{
|
||||
color: "primary-50",
|
||||
className: "bg-primary-50",
|
||||
textClassName: "text-primary-900",
|
||||
},
|
||||
{
|
||||
color: "primary-100",
|
||||
className: "bg-primary-100",
|
||||
textClassName: "text-primary-900",
|
||||
},
|
||||
{
|
||||
color: "primary-200",
|
||||
className: "bg-primary-200",
|
||||
textClassName: "text-primary-800",
|
||||
},
|
||||
{
|
||||
color: "primary-300",
|
||||
className: "bg-primary-300",
|
||||
textClassName: "text-primary-800",
|
||||
},
|
||||
{
|
||||
color: "primary-400",
|
||||
className: "bg-primary-400",
|
||||
textClassName: "text-primary-800",
|
||||
},
|
||||
{
|
||||
color: "primary-500",
|
||||
className: "bg-primary-500",
|
||||
textClassName: "text-primary-contrastText",
|
||||
},
|
||||
{
|
||||
color: "primary-600",
|
||||
className: "bg-primary-600",
|
||||
textClassName: "text-primary-50",
|
||||
},
|
||||
{
|
||||
color: "primary-700",
|
||||
className: "bg-primary-700",
|
||||
textClassName: "text-primary-100",
|
||||
},
|
||||
{
|
||||
color: "primary-800",
|
||||
className: "bg-primary-800",
|
||||
textClassName: "text-primary-100",
|
||||
},
|
||||
{
|
||||
color: "primary-900",
|
||||
className: "bg-primary-900",
|
||||
textClassName: "text-primary-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Secondary",
|
||||
items: [
|
||||
{
|
||||
color: "secondary-50",
|
||||
className: "bg-secondary-50",
|
||||
textClassName: "text-secondary-900",
|
||||
},
|
||||
{
|
||||
color: "secondary-100",
|
||||
className: "bg-secondary-100",
|
||||
textClassName: "text-secondary-900",
|
||||
},
|
||||
{
|
||||
color: "secondary-200",
|
||||
className: "bg-secondary-200",
|
||||
textClassName: "text-secondary-800",
|
||||
},
|
||||
{
|
||||
color: "secondary-300",
|
||||
className: "bg-secondary-300",
|
||||
textClassName: "text-secondary-800",
|
||||
},
|
||||
{
|
||||
color: "secondary-400",
|
||||
className: "bg-secondary-400",
|
||||
textClassName: "text-secondary-800",
|
||||
},
|
||||
{
|
||||
color: "secondary-500",
|
||||
className: "bg-secondary-500",
|
||||
textClassName: "text-secondary-contrastText",
|
||||
},
|
||||
{
|
||||
color: "secondary-600",
|
||||
className: "bg-secondary-600",
|
||||
textClassName: "text-secondary-50",
|
||||
},
|
||||
{
|
||||
color: "secondary-700",
|
||||
className: "bg-secondary-700",
|
||||
textClassName: "text-secondary-100",
|
||||
},
|
||||
{
|
||||
color: "secondary-800",
|
||||
className: "bg-secondary-800",
|
||||
textClassName: "text-secondary-100",
|
||||
},
|
||||
{
|
||||
color: "secondary-900",
|
||||
className: "bg-secondary-900",
|
||||
textClassName: "text-secondary-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Success",
|
||||
items: [
|
||||
{
|
||||
color: "success-50",
|
||||
className: "bg-success-50",
|
||||
textClassName: "text-success-900",
|
||||
},
|
||||
{
|
||||
color: "success-100",
|
||||
className: "bg-success-100",
|
||||
textClassName: "text-success-900",
|
||||
},
|
||||
{
|
||||
color: "success-200",
|
||||
className: "bg-success-200",
|
||||
textClassName: "text-success-800",
|
||||
},
|
||||
{
|
||||
color: "success-300",
|
||||
className: "bg-success-300",
|
||||
textClassName: "text-success-800",
|
||||
},
|
||||
{
|
||||
color: "success-400",
|
||||
className: "bg-success-400",
|
||||
textClassName: "text-success-800",
|
||||
},
|
||||
{
|
||||
color: "success-500",
|
||||
className: "bg-success-500",
|
||||
textClassName: "text-success-contrastText",
|
||||
},
|
||||
{
|
||||
color: "success-600",
|
||||
className: "bg-success-600",
|
||||
textClassName: "text-success-50",
|
||||
},
|
||||
{
|
||||
color: "success-700",
|
||||
className: "bg-success-700",
|
||||
textClassName: "text-success-100",
|
||||
},
|
||||
{
|
||||
color: "success-800",
|
||||
className: "bg-success-800",
|
||||
textClassName: "text-success-100",
|
||||
},
|
||||
{
|
||||
color: "success-900",
|
||||
className: "bg-success-900",
|
||||
textClassName: "text-success-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Warning",
|
||||
items: [
|
||||
{
|
||||
color: "warning-50",
|
||||
className: "bg-warning-50",
|
||||
textClassName: "text-warning-900",
|
||||
},
|
||||
{
|
||||
color: "warning-100",
|
||||
className: "bg-warning-100",
|
||||
textClassName: "text-warning-900",
|
||||
},
|
||||
{
|
||||
color: "warning-200",
|
||||
className: "bg-warning-200",
|
||||
textClassName: "text-warning-800",
|
||||
},
|
||||
{
|
||||
color: "warning-300",
|
||||
className: "bg-warning-300",
|
||||
textClassName: "text-warning-800",
|
||||
},
|
||||
{
|
||||
color: "warning-400",
|
||||
className: "bg-warning-400",
|
||||
textClassName: "text-warning-800",
|
||||
},
|
||||
{
|
||||
color: "warning-500",
|
||||
className: "bg-warning-500",
|
||||
textClassName: "text-warning-contrastText",
|
||||
},
|
||||
{
|
||||
color: "warning-600",
|
||||
className: "bg-warning-600",
|
||||
textClassName: "text-warning-50",
|
||||
},
|
||||
{
|
||||
color: "warning-700",
|
||||
className: "bg-warning-700",
|
||||
textClassName: "text-warning-100",
|
||||
},
|
||||
{
|
||||
color: "warning-800",
|
||||
className: "bg-warning-800",
|
||||
textClassName: "text-warning-100",
|
||||
},
|
||||
{
|
||||
color: "warning-900",
|
||||
className: "bg-warning-900",
|
||||
textClassName: "text-warning-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Danger",
|
||||
items: [
|
||||
{
|
||||
color: "danger-50",
|
||||
className: "bg-danger-50",
|
||||
textClassName: "text-danger-900",
|
||||
},
|
||||
{
|
||||
color: "danger-100",
|
||||
className: "bg-danger-100",
|
||||
textClassName: "text-danger-900",
|
||||
},
|
||||
{
|
||||
color: "danger-200",
|
||||
className: "bg-danger-200",
|
||||
textClassName: "text-danger-800",
|
||||
},
|
||||
{
|
||||
color: "danger-300",
|
||||
className: "bg-danger-300",
|
||||
textClassName: "text-danger-800",
|
||||
},
|
||||
{
|
||||
color: "danger-400",
|
||||
className: "bg-danger-400",
|
||||
textClassName: "text-danger-800",
|
||||
},
|
||||
{
|
||||
color: "danger-500",
|
||||
className: "bg-danger-500",
|
||||
textClassName: "text-danger-contrastText",
|
||||
},
|
||||
{
|
||||
color: "danger-600",
|
||||
className: "bg-danger-600",
|
||||
textClassName: "text-danger-50",
|
||||
},
|
||||
{
|
||||
color: "danger-700",
|
||||
className: "bg-danger-700",
|
||||
textClassName: "text-danger-100",
|
||||
},
|
||||
{
|
||||
color: "danger-800",
|
||||
className: "bg-danger-800",
|
||||
textClassName: "text-danger-100",
|
||||
},
|
||||
{
|
||||
color: "danger-900",
|
||||
className: "bg-danger-900",
|
||||
textClassName: "text-danger-100",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"include": ["src/index.ts"]
|
||||
"include": ["src/index.ts"],
|
||||
"exclude": ["**/*.js"]
|
||||
}
|
||||
|
||||
@ -34,11 +34,11 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
"react": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.2.0"
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user