mm
This commit is contained in:
@@ -26,26 +26,19 @@
|
||||
"gen-index": "ts-node scripts/generate-index.ts && ts-node scripts/generate-index-css.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/vite-react": "^7.0.2",
|
||||
"@types/node": "^25.1.0",
|
||||
"@types/react": "^19.2.10",
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"autoprefixer": "^10.4.24",
|
||||
"glob": "^13.0.3",
|
||||
"prettier": "^3.8.1",
|
||||
"glob": "^13.0.6",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-dts": "^4.5.4"
|
||||
"typescript": "^6.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.3.0",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"@base-ui/react": "^1.4.1",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tailwind-variants": "^3.2.2",
|
||||
"tailwindcss": "^4.2.1"
|
||||
"tailwindcss": "^4.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
12
packages/ui/src/assets/svg/BoldSvg.tsx
Normal file
12
packages/ui/src/assets/svg/BoldSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,16 +0,0 @@
|
||||
export const CheckIndicatorOutlineSvg = (
|
||||
props: React.SVGProps<SVGSVGElement>,
|
||||
) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,14 +1,8 @@
|
||||
export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM17.99 9l-1.41-1.42l-6.59 6.59l-2.58-2.57l-1.42 1.41l4 3.99z"
|
||||
d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
|
||||
export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59L7 11l5 5z"
|
||||
d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
|
||||
|
||||
14
packages/ui/src/assets/svg/MeshSvg.tsx
Normal file
14
packages/ui/src/assets/svg/MeshSvg.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
|
||||
<path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,11 +1,5 @@
|
||||
export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
export const RadioIndicatorOutlineSvg = (
|
||||
props: React.SVGProps<SVGSVGElement>,
|
||||
) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,15 +0,0 @@
|
||||
export const RadioIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
|
||||
/>
|
||||
<circle cx="12" cy="12" r="5" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui/src/assets/svg/Ruler.tsx
Normal file
12
packages/ui/src/assets/svg/Ruler.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,11 +1,5 @@
|
||||
export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
id="a"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
stroke-width="2"
|
||||
d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,45 +1,12 @@
|
||||
export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
id="a"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25"
|
||||
fill="none"
|
||||
opacity=".2"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
|
||||
fill="none"
|
||||
opacity=".2"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
stroke-width="2"
|
||||
d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
export const VolumeMediumSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
id="a"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
|
||||
fill="none"
|
||||
opacity=".2"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,41 +1,12 @@
|
||||
export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
id="a"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<line
|
||||
x1="14.8"
|
||||
y1="8.57"
|
||||
x2="21.2"
|
||||
y2="15.46"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<line
|
||||
x1="14.79"
|
||||
y1="15.45"
|
||||
x2="21.19"
|
||||
y2="8.55"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
stroke-width="2"
|
||||
d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
export type CommonProps = {
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
key?: string | number;
|
||||
disabled?: boolean;
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
import type { CommonProps } from "./CommonProps";
|
||||
|
||||
type SkinProps = CommonProps & {
|
||||
theme?: "light" | "dark";
|
||||
};
|
||||
|
||||
export const Skin = (props: SkinProps) => {
|
||||
const { theme = "light", children } = props;
|
||||
return <div className={theme}>{children}</div>;
|
||||
};
|
||||
9
packages/ui/src/component/accordion/Accordion.css
Normal file
9
packages/ui/src/component/accordion/Accordion.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.accordion-root {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 24rem;
|
||||
max-width: calc(100vw - 8rem);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
12
packages/ui/src/component/accordion/Accordion.recipe.ts
Normal file
12
packages/ui/src/component/accordion/Accordion.recipe.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { tv } from "tailwind-variants";
|
||||
|
||||
export const AccordionRecipe = tv({
|
||||
base: "",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "",
|
||||
sm: "",
|
||||
md: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
20
packages/ui/src/component/accordion/Accordion.tsx
Normal file
20
packages/ui/src/component/accordion/Accordion.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as BUI from "@base-ui/react";
|
||||
import type { CommonProps } from "@/common/CommonProps";
|
||||
import type { ComponentProps } from "react";
|
||||
import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
|
||||
|
||||
type AccordionProps = CommonProps &
|
||||
ComponentProps<typeof BUI.Accordion.Root> & {
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
chevronPosition?: "left" | "right";
|
||||
};
|
||||
|
||||
export const Accordion = (props: AccordionProps) => {
|
||||
const { children, size, ...rest } = props;
|
||||
const accordionRootCls = itemSizeRecipe({ size });
|
||||
return (
|
||||
<BUI.Accordion.Root className={accordionRootCls} {...rest}>
|
||||
{children}
|
||||
</BUI.Accordion.Root>
|
||||
);
|
||||
};
|
||||
15
packages/ui/src/component/avatar/Avatar.css
Normal file
15
packages/ui/src/component/avatar/Avatar.css
Normal file
@@ -0,0 +1,15 @@
|
||||
@layer components {
|
||||
.avatar-image {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar-fallback {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
20
packages/ui/src/component/avatar/Avatar.tsx
Normal file
20
packages/ui/src/component/avatar/Avatar.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as BUI from "@base-ui/react";
|
||||
|
||||
type AvatarPorps = {
|
||||
size?: "sm" | "md" | "lg";
|
||||
src?: string;
|
||||
alt?: string;
|
||||
};
|
||||
|
||||
export const Avatar = (props: AvatarPorps) => {
|
||||
const { size = "md", src, alt } = props;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<BUI.Avatar.Root>
|
||||
<BUI.Avatar.Image src={src} alt={alt} />
|
||||
<BUI.Avatar.Fallback></BUI.Avatar.Fallback>
|
||||
</BUI.Avatar.Root>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +1,24 @@
|
||||
"use client";
|
||||
import * as BUI from "@base-ui/react/button";
|
||||
import { cn } from "tailwind-variants";
|
||||
import type { CommonProps } from "@/common/CommonProps";
|
||||
import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
|
||||
import { variantRecipe } from "@/styles/recipe/variant.recipe";
|
||||
import type { ReactNode } from "react";
|
||||
import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe";
|
||||
import { Slot } from "@/common/Slot";
|
||||
import * as BUI from "@base-ui/react";
|
||||
import { cn } from "tailwind-variants";
|
||||
import { brandRecipe } from "../../styles/recipe/brand.recipe";
|
||||
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
||||
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
||||
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
||||
import { Slot } from "../../common/Slot";
|
||||
import { Icon } from "../icon/Icon";
|
||||
|
||||
type ButtonProps = CommonProps & {
|
||||
size?: "md" | "lg" | "xl";
|
||||
variant?: "filled" | "outline" | "subtle";
|
||||
type ButtonProps = {
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
variant?: "filled" | "outline" | "subtle" | "ghost";
|
||||
shape?: "rounded" | "square" | "circle";
|
||||
brand?: "success" | "danger" | "info" | "warning" | "default";
|
||||
loading?: boolean;
|
||||
icon?: ReactNode;
|
||||
iconSvg?: ReactNode;
|
||||
iconOnly?: boolean;
|
||||
hideIcon?: boolean;
|
||||
};
|
||||
} & BUI.Button.Props;
|
||||
|
||||
export const Button = (props: ButtonProps) => {
|
||||
const {
|
||||
@@ -29,7 +30,7 @@ export const Button = (props: ButtonProps) => {
|
||||
brand,
|
||||
loading,
|
||||
disabled,
|
||||
icon,
|
||||
iconSvg,
|
||||
iconOnly,
|
||||
hideIcon = false,
|
||||
} = props;
|
||||
@@ -38,22 +39,24 @@ export const Button = (props: ButtonProps) => {
|
||||
brand == undefined ? (variant == "filled" ? "info" : "default") : brand;
|
||||
|
||||
const buttonCls = cn(
|
||||
itemSizeRecipe({ size, brand: currentBrand, shape }),
|
||||
itemSizeRecipe({ size, shape, iconOnly }),
|
||||
variantRecipe({ variant, disabled: loading || disabled }),
|
||||
brandRecipe({ brand: currentBrand }),
|
||||
className,
|
||||
);
|
||||
|
||||
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
|
||||
|
||||
return (
|
||||
<BUI.Button className={buttonCls} disabled={loading || disabled}>
|
||||
{!hideIcon &&
|
||||
(iconOnly ? (
|
||||
<span className={iconCls}></span>
|
||||
{iconSvg ? (
|
||||
hideIcon ? (
|
||||
iconOnly ? (
|
||||
<Icon />
|
||||
) : null
|
||||
) : (
|
||||
<Slot className={iconCls}>{icon}</Slot>
|
||||
))}
|
||||
{children}
|
||||
<Icon svg={iconSvg} />
|
||||
)
|
||||
) : null}
|
||||
{!iconOnly && children}
|
||||
</BUI.Button>
|
||||
);
|
||||
};
|
||||
|
||||
19
packages/ui/src/component/checkbox/Checkbox.css
Normal file
19
packages/ui/src/component/checkbox/Checkbox.css
Normal file
@@ -0,0 +1,19 @@
|
||||
@layer components {
|
||||
.checkbox-root {
|
||||
&[data-unchecked] {
|
||||
border: 1px solid var(--color-gray-300);
|
||||
background-color: transparent;
|
||||
}
|
||||
&[data-checked] {
|
||||
background-color: var(--brand-bg);
|
||||
}
|
||||
}
|
||||
.checkbox-indicator {
|
||||
display: flex;
|
||||
color: var(--color-gray-50);
|
||||
|
||||
&[data-unchecked] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
packages/ui/src/component/checkbox/Checkbox.tsx
Normal file
76
packages/ui/src/component/checkbox/Checkbox.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
import * as BUI from "@base-ui/react";
|
||||
import { cn } from "tailwind-variants";
|
||||
import type { CommonProps } from "@/common/CommonProps";
|
||||
import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
|
||||
import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe";
|
||||
import { CheckIndicatorSvg } from "@/assets/svg/CheckIndicatorSvg";
|
||||
import type { ReactNode } from "react";
|
||||
import { Slot } from "@/common/Slot";
|
||||
import { variantRecipe } from "@/styles/recipe/variant.recipe";
|
||||
|
||||
type CheckboxProps = CommonProps & {
|
||||
size?: "xs" | "sm" | "md";
|
||||
shape?: "square" | "rounded";
|
||||
icon?: ReactNode;
|
||||
hideIcon?: boolean;
|
||||
iconPlaceholder?: boolean;
|
||||
};
|
||||
|
||||
export const Checkbox = (props: CheckboxProps) => {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
size = "sm",
|
||||
shape = "square",
|
||||
icon,
|
||||
hideIcon = false,
|
||||
iconPlaceholder = false,
|
||||
disabled,
|
||||
} = props;
|
||||
|
||||
const checkboxCls = cn(
|
||||
itemSizeRecipe({ size, shape }),
|
||||
variantRecipe({ variant: "ghost", disabled }),
|
||||
"brand-default",
|
||||
className,
|
||||
);
|
||||
const checkboxRootCls = cn(
|
||||
inlineSizeRecipe({
|
||||
size,
|
||||
shape: "rounded",
|
||||
iconOnly: true,
|
||||
}),
|
||||
"checkbox-root",
|
||||
"brand-info",
|
||||
);
|
||||
const checkIndicatorCls = cn(
|
||||
inlineSizeRecipe({
|
||||
size,
|
||||
shape: "rounded",
|
||||
iconOnly: true,
|
||||
}),
|
||||
"checkbox-indicator",
|
||||
);
|
||||
const checkIndicatorSvgCls = inlineSizeRecipe({
|
||||
size,
|
||||
iconOnly: true,
|
||||
});
|
||||
|
||||
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
|
||||
|
||||
return (
|
||||
<BUI.Field.Root>
|
||||
<BUI.Field.Label className={checkboxCls}>
|
||||
<BUI.Checkbox.Root className={checkboxRootCls}>
|
||||
<BUI.Checkbox.Indicator className={checkIndicatorCls}>
|
||||
<CheckIndicatorSvg className={checkIndicatorSvgCls} />
|
||||
</BUI.Checkbox.Indicator>
|
||||
</BUI.Checkbox.Root>
|
||||
{icon && !hideIcon && <Slot className={iconCls}>{icon}</Slot>}
|
||||
{hideIcon && iconPlaceholder && <span className={iconCls}></span>}
|
||||
{children}
|
||||
</BUI.Field.Label>
|
||||
</BUI.Field.Root>
|
||||
);
|
||||
};
|
||||
21
packages/ui/src/component/icon/Icon.tsx
Normal file
21
packages/ui/src/component/icon/Icon.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { ReactNode } from "react";
|
||||
import { cn } from "tailwind-variants";
|
||||
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
||||
import { Slot } from "../../common/Slot";
|
||||
|
||||
type IconProps = {
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
svg?: ReactNode;
|
||||
};
|
||||
|
||||
export const Icon = (props: IconProps) => {
|
||||
const { size, svg } = props;
|
||||
|
||||
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
|
||||
|
||||
return (
|
||||
<span className={iconCls}>
|
||||
{svg ? <Slot className={iconCls}>{svg}</Slot> : null}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
17
packages/ui/src/component/theme/Theme.tsx
Normal file
17
packages/ui/src/component/theme/Theme.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { cn } from "tailwind-variants";
|
||||
import type { CommonProps } from "../../common/CommonProps";
|
||||
import { ThemeContext } from "./ThemeContext";
|
||||
|
||||
type ThemeProps = CommonProps & {
|
||||
theme?: "light" | "dark";
|
||||
};
|
||||
|
||||
export const Theme = (props: ThemeProps) => {
|
||||
const { theme = "light", children, className } = props;
|
||||
const themeCls = cn(theme, "brand-default", className) as string;
|
||||
return (
|
||||
<ThemeContext.Provider value={{ themeCls }}>
|
||||
<div className={themeCls}>{children}</div>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
5
packages/ui/src/component/theme/ThemeContext.tsx
Normal file
5
packages/ui/src/component/theme/ThemeContext.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
type ThemeContextValue = { themeCls?: string };
|
||||
|
||||
export const ThemeContext = React.createContext<ThemeContextValue>({});
|
||||
6
packages/ui/src/component/theme/useTheme.ts
Normal file
6
packages/ui/src/component/theme/useTheme.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { useContext } from "react";
|
||||
import { ThemeContext } from "./ThemeContext";
|
||||
|
||||
export const useTheme = () => {
|
||||
return useContext(ThemeContext);
|
||||
};
|
||||
50
packages/ui/src/component/tooltip/Tooltip.css
Normal file
50
packages/ui/src/component/tooltip/Tooltip.css
Normal file
@@ -0,0 +1,50 @@
|
||||
@layer components {
|
||||
.tooltip-arrow {
|
||||
display: flex;
|
||||
fill: aquamarine;
|
||||
|
||||
&[data-side="top"] {
|
||||
bottom: -6px;
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
&[data-side="bottom"] {
|
||||
top: -6px;
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
&[data-side="left"] {
|
||||
right: -8px;
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
&[data-side="right"] {
|
||||
left: -8px;
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-popup {
|
||||
display: flex;
|
||||
background-color: var(--base-bg);
|
||||
border: 1px solid color-mix(in srgb, var(--brand-bg) 40%, white);
|
||||
filter: drop-shadow(var(--drop-shadow-sm));
|
||||
transform-origin: var(--transform-origin);
|
||||
transition:
|
||||
transform 50ms,
|
||||
opacity 50ms;
|
||||
&[data-starting-style],
|
||||
&[data-ending-style] {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
&[data-instant] {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-arrow-border {
|
||||
fill: color-mix(in srgb, var(--brand-bg) 40%, white);
|
||||
}
|
||||
}
|
||||
14
packages/ui/src/component/tooltip/Tooltip.tsx
Normal file
14
packages/ui/src/component/tooltip/Tooltip.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
import * as BUI from "@base-ui/react";
|
||||
|
||||
type TooltipProps = BUI.Tooltip.Root.Props;
|
||||
|
||||
export const Tooltip = (props: TooltipProps) => {
|
||||
const { children, open } = props;
|
||||
|
||||
return (
|
||||
<BUI.Tooltip.Provider>
|
||||
<BUI.Tooltip.Root open={open}>{children}</BUI.Tooltip.Root>
|
||||
</BUI.Tooltip.Provider>
|
||||
);
|
||||
};
|
||||
53
packages/ui/src/component/tooltip/TooltipPopup.tsx
Normal file
53
packages/ui/src/component/tooltip/TooltipPopup.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
import * as BUI from "@base-ui/react";
|
||||
import { cn } from "tailwind-variants";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type TooltipPopupProps = {
|
||||
hideArrow?: boolean;
|
||||
side?: "top" | "bottom" | "left" | "right";
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
export const TooltipPopup = (props: TooltipPopupProps) => {
|
||||
const { children, hideArrow = false, side } = props;
|
||||
const { themeCls } = useTheme();
|
||||
|
||||
const tooltipPopupCls = cn(
|
||||
themeCls,
|
||||
itemSizeRecipe({ size: "xs", shape: "rounded" }),
|
||||
"tooltip-popup",
|
||||
);
|
||||
|
||||
return (
|
||||
<BUI.Tooltip.Portal>
|
||||
<BUI.Tooltip.Positioner sideOffset={8} side={side}>
|
||||
<BUI.Tooltip.Popup className={tooltipPopupCls}>
|
||||
{!hideArrow && (
|
||||
<BUI.Tooltip.Arrow className="tooltip-arrow">
|
||||
<PopupArrowUpSvg />
|
||||
</BUI.Tooltip.Arrow>
|
||||
)}
|
||||
{children}
|
||||
</BUI.Tooltip.Popup>
|
||||
</BUI.Tooltip.Positioner>
|
||||
</BUI.Tooltip.Portal>
|
||||
);
|
||||
};
|
||||
|
||||
const PopupArrowUpSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
width="10"
|
||||
height="6"
|
||||
viewBox="0 0 10 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path d="M0 6 L5 0 L10 6 Z" className="tooltip-arrow-border" />
|
||||
|
||||
<path d="M1 6 L5 1 L9 6 Z" fill="var(--base-bg)" />
|
||||
</svg>
|
||||
);
|
||||
13
packages/ui/src/component/tooltip/TooltipTrigger.tsx
Normal file
13
packages/ui/src/component/tooltip/TooltipTrigger.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
"use client";
|
||||
import * as BUI from "@base-ui/react";
|
||||
|
||||
type TooltipTrigerProps = BUI.Tooltip.Trigger.Props;
|
||||
|
||||
export const TooltipTriger = (props: TooltipTrigerProps) => {
|
||||
const { children, delay = 100 } = props;
|
||||
return (
|
||||
<BUI.Tooltip.Trigger render={<div />} delay={delay}>
|
||||
{children}
|
||||
</BUI.Tooltip.Trigger>
|
||||
);
|
||||
};
|
||||
0
packages/ui/src/component/user-field/UserField.tsx
Normal file
0
packages/ui/src/component/user-field/UserField.tsx
Normal file
@@ -1,6 +1,10 @@
|
||||
@import "tailwindcss";
|
||||
@import './component/accordion/Accordion.css';
|
||||
@import './component/checkbox/Checkbox.css';
|
||||
@import './component/tooltip/Tooltip.css';
|
||||
@import './styles/theme/global.css';
|
||||
@import './styles/utility/brand.css';
|
||||
@import './styles/utility/font.css';
|
||||
@import './styles/utility/gap.css';
|
||||
@import './styles/utility/height.css';
|
||||
@import './styles/utility/loading.css';
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
import './index.css';
|
||||
|
||||
export * from './assets/svg/CheckIndicatorOutlineSvg';
|
||||
export * from './assets/svg/BoldSvg';
|
||||
export * from './assets/svg/CheckIndicatorSvg';
|
||||
export * from './assets/svg/ChevronRightSvg';
|
||||
export * from './assets/svg/CutSvg';
|
||||
export * from './assets/svg/DownloadSvg';
|
||||
export * from './assets/svg/FileSvg';
|
||||
export * from './assets/svg/KeySvg';
|
||||
export * from './assets/svg/MeshSvg';
|
||||
export * from './assets/svg/MoonSvg';
|
||||
export * from './assets/svg/PasteSvg';
|
||||
export * from './assets/svg/RadioIndicatorOutlineSvg';
|
||||
export * from './assets/svg/RadioIndicatorSvg';
|
||||
export * from './assets/svg/Ruler';
|
||||
export * from './assets/svg/SearchSvg';
|
||||
export * from './assets/svg/SettingSvg';
|
||||
export * from './assets/svg/SpinnerSvg';
|
||||
@@ -20,13 +20,25 @@ export * from './assets/svg/SunSvg';
|
||||
export * from './assets/svg/UserSvg';
|
||||
export * from './assets/svg/VolumeHighSvg';
|
||||
export * from './assets/svg/VolumeLowSvg';
|
||||
export * from './assets/svg/VolumeMediumSvg';
|
||||
export * from './assets/svg/VolumeMuteSvg';
|
||||
export * from './common/Box';
|
||||
export * from './common/CommonProps';
|
||||
export * from './common/Skin';
|
||||
export * from './common/Slot';
|
||||
export * from './component/accordion/Accordion.recipe';
|
||||
export * from './component/accordion/Accordion';
|
||||
export * from './component/accordion/AccordionItem';
|
||||
export * from './component/accordion/AccordionPanel';
|
||||
export * from './component/accordion/AccordionTrigger';
|
||||
export * from './component/button/Button';
|
||||
export * from './component/checkbox/Checkbox';
|
||||
export * from './component/icon/Icon';
|
||||
export * from './component/theme/Theme';
|
||||
export * from './component/theme/ThemeContext';
|
||||
export * from './component/theme/useTheme';
|
||||
export * from './component/tooltip/Tooltip';
|
||||
export * from './component/tooltip/TooltipPopup';
|
||||
export * from './component/tooltip/TooltipTrigger';
|
||||
export * from './component/user-field/UserField';
|
||||
export * from './styles/recipe/IinlineSize.recipe';
|
||||
export * from './styles/recipe/ItemSize.recipe';
|
||||
export * from './styles/recipe/brand.recipe';
|
||||
export * from './styles/recipe/variant.recipe';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { tv } from "tailwind-variants";
|
||||
|
||||
export const inlineSizeRecipe = tv({
|
||||
base: "relative overflow-hidden flex flex-nowrap",
|
||||
base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "text-xs h-inline-xs",
|
||||
@@ -16,18 +16,6 @@ export const inlineSizeRecipe = tv({
|
||||
rounded: "",
|
||||
circle: "rounded-full",
|
||||
},
|
||||
variant: {
|
||||
filled: "variant-filled",
|
||||
outline: "variant-outline",
|
||||
subtle: "variant-subtle",
|
||||
},
|
||||
brand: {
|
||||
success: "brand-success",
|
||||
danger: "brand-danger",
|
||||
info: "brand-info",
|
||||
warning: "brand-warning",
|
||||
emphasis: "brand-emphasis",
|
||||
},
|
||||
iconOnly: {
|
||||
true: "",
|
||||
false: "",
|
||||
@@ -99,21 +87,5 @@ export const inlineSizeRecipe = tv({
|
||||
size: "2xl",
|
||||
class: "w-inline-2xl",
|
||||
},
|
||||
// --------------------------------------------------
|
||||
{
|
||||
disabled: true,
|
||||
variant: "filled",
|
||||
class: "variant-filled-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "outline",
|
||||
class: "variant-outline-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "subtle",
|
||||
class: "variant-subtle-disabled",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -1,34 +1,24 @@
|
||||
import { tv } from "tailwind-variants";
|
||||
|
||||
export const itemSizeRecipe = tv({
|
||||
base: "relative select-none overflow-hidden flex flex-nowrap justify-center items-center",
|
||||
base: "relative select-none flex flex-nowrap justify-center items-center",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "text-xs h-xs px-xs gap-xs",
|
||||
sm: "text-sm h-sm px-sm gap-sm",
|
||||
md: "text-md h-md px-md gap-md",
|
||||
lg: "text-lg h-lg px-lg gap-lg",
|
||||
xl: "text-xl h-xl px-xl gap-xl",
|
||||
"2xl": "text-2xl h-2xl px-2xl gap-2xl",
|
||||
xs: "text-xs h-item-xs px-xs gap-xs",
|
||||
sm: "text-sm h-item-sm px-sm gap-sm",
|
||||
md: "text-md h-item-md px-md gap-md",
|
||||
lg: "text-lg h-item-lg px-lg gap-lg",
|
||||
xl: "text-xl h-item-xl px-xl gap-xl",
|
||||
"2xl": "text-2xl h-item-2xl px-2xl gap-2xl",
|
||||
},
|
||||
shape: {
|
||||
square: "rounded-none",
|
||||
rounded: "",
|
||||
circle: "rounded-full",
|
||||
},
|
||||
brand: {
|
||||
success: "brand-success",
|
||||
danger: "brand-danger",
|
||||
info: "brand-info",
|
||||
warning: "brand-warning",
|
||||
default: "brand-default",
|
||||
},
|
||||
|
||||
iconOnly: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
hasShadow: {
|
||||
true: "shadow-xl",
|
||||
true: "px-none",
|
||||
false: "",
|
||||
},
|
||||
disabled: {
|
||||
@@ -37,66 +27,62 @@ export const itemSizeRecipe = tv({
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "xs",
|
||||
class: "rounded-xs",
|
||||
},
|
||||
{ shape: "rounded", size: "xs", class: "rounded-sm" },
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "sm",
|
||||
class: "rounded-sm",
|
||||
},
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "md",
|
||||
class: "rounded-md",
|
||||
},
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "lg",
|
||||
size: "md",
|
||||
class: "rounded-lg",
|
||||
},
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "xl",
|
||||
size: "lg",
|
||||
class: "rounded-xl",
|
||||
},
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "2xl",
|
||||
size: "xl",
|
||||
class: "rounded-2xl",
|
||||
},
|
||||
{
|
||||
shape: "rounded",
|
||||
size: "2xl",
|
||||
class: "rounded-3xl",
|
||||
},
|
||||
// --------------------------------------------------
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "xs",
|
||||
class: "w-xs",
|
||||
class: "w-item-xs",
|
||||
},
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "sm",
|
||||
class: "w-sm",
|
||||
class: "w-item-sm",
|
||||
},
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "md",
|
||||
class: "w-md",
|
||||
class: "w-item-md",
|
||||
},
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "lg",
|
||||
class: "w-lg",
|
||||
class: "w-item-lg",
|
||||
},
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "xl",
|
||||
class: "w-xl",
|
||||
class: "w-item-xl",
|
||||
},
|
||||
{
|
||||
iconOnly: true,
|
||||
size: "2xl",
|
||||
class: "w-2xl",
|
||||
class: "w-item-2xl",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
13
packages/ui/src/styles/recipe/brand.recipe.ts
Normal file
13
packages/ui/src/styles/recipe/brand.recipe.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { tv } from "tailwind-variants";
|
||||
|
||||
export const brandRecipe = tv({
|
||||
variants: {
|
||||
brand: {
|
||||
success: "brand-success",
|
||||
danger: "brand-danger",
|
||||
info: "brand-info",
|
||||
warning: "brand-warning",
|
||||
default: "brand-default",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -6,6 +6,7 @@ export const variantRecipe = tv({
|
||||
filled: "variant-filled",
|
||||
outline: "variant-outline",
|
||||
subtle: "variant-subtle",
|
||||
ghost: "variant-ghost",
|
||||
},
|
||||
disabled: {
|
||||
true: "",
|
||||
@@ -28,5 +29,10 @@ export const variantRecipe = tv({
|
||||
variant: "subtle",
|
||||
class: "variant-subtle-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "ghost",
|
||||
class: "variant-ghost-disabled",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
@theme {
|
||||
--text-md: 1rem;
|
||||
--text-md--line-height: calc(1.5 / 1);
|
||||
--color-transparent: transparent;
|
||||
|
||||
--danger-bg: var(--color-red-600);
|
||||
--danger-bg-high-hover: var(--color-red-500);
|
||||
--danger-bg-high-active: var(--color-red-400);
|
||||
--danger-bg-low-hover: var(--color-red-100);
|
||||
--danger-bg-low-active: var(--color-red-200);
|
||||
--danger-bg-hover: var(--color-red-500);
|
||||
--danger-bg-active: var(--color-red-400);
|
||||
--danger-bg-low: var(--color-red-100);
|
||||
--danger-bg-low-hover: var(--color-red-200);
|
||||
--danger-bg-low-active: var(--color-red-300);
|
||||
|
||||
--success-bg: var(--color-emerald-600);
|
||||
--success-bg-high-hover: var(--color-emerald-500);
|
||||
--success-bg-high-active: var(--color-emerald-400);
|
||||
--success-bg-hover: var(--color-emerald-500);
|
||||
--success-bg-active: var(--color-emerald-400);
|
||||
--success-bg-low: var(--color-emerald-100);
|
||||
--success-bg-low-hover: var(--color-emerald-100);
|
||||
--success-bg-low-active: var(--color-emerald-200);
|
||||
|
||||
--info-bg: var(--color-sky-600);
|
||||
--info-bg-high-hover: var(--color-sky-500);
|
||||
--info-bg-high-active: var(--color-sky-400);
|
||||
--info-bg-low-hover: var(--color-sky-100);
|
||||
--info-bg-low-active: var(--color-sky-200);
|
||||
--info-bg-hover: var(--color-sky-500);
|
||||
--info-bg-active: var(--color-sky-400);
|
||||
--info-bg-low: var(--color-sky-100);
|
||||
--info-bg-low-hover: var(--color-sky-200);
|
||||
--info-bg-low-active: var(--color-sky-300);
|
||||
|
||||
--warning-bg: var(--color-yellow-600);
|
||||
--warning-bg-high-hover: var(--color-yellow-500);
|
||||
--warning-bg-high-active: var(--color-yellow-400);
|
||||
--warning-bg-low-hover: var(--color-yellow-100);
|
||||
--warning-bg-low-active: var(--color-yellow-200);
|
||||
--warning-bg-hover: var(--color-yellow-500);
|
||||
--warning-bg-active: var(--color-yellow-400);
|
||||
--warning-bg-low: var(--color-yellow-100);
|
||||
--warning-bg-low-hover: var(--color-yellow-200);
|
||||
--warning-bg-low-active: var(--color-yellow-300);
|
||||
|
||||
--default-bg: var(--color-neutral-800);
|
||||
--default-bg-high-hover: var(--color-neutral-700);
|
||||
--default-bg-high-active: var(--color-neutral-600);
|
||||
--default-bg-low-hover: var(--color-neutral-100);
|
||||
--default-bg-low-active: var(--color-neutral-200);
|
||||
--default-bg: var(--color-neutral-700);
|
||||
--default-bg-hover: var(--color-neutral-600);
|
||||
--default-bg-active: var(--color-neutral-500);
|
||||
--default-bg-low: var(--color-neutral-100);
|
||||
--default-bg-low-hover: var(--color-neutral-200);
|
||||
--default-bg-low-active: var(--color-neutral-300);
|
||||
|
||||
--disabled-fg: var(--color-gray-500);
|
||||
--disabled-bg: var(--color-gray-200);
|
||||
--disabled-border-color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
@@ -1,35 +1,40 @@
|
||||
@utility brand-info {
|
||||
--brand-bg: var(--info-bg);
|
||||
--brand-bg-high-hover: var(--info-bg-high-hover);
|
||||
--brand-bg-high-active: var(--info-bg-high-active);
|
||||
--brand-bg-hover: var(--info-bg-hover);
|
||||
--brand-bg-active: var(--info-bg-active);
|
||||
--brand-bg-low: var(--info-bg-low);
|
||||
--brand-bg-low-hover: var(--info-bg-low-hover);
|
||||
--brand-bg-low-active: var(--info-bg-low-active);
|
||||
}
|
||||
@utility brand-danger {
|
||||
--brand-bg: var(--danger-bg);
|
||||
--brand-bg-high-hover: var(--danger-bg-high-hover);
|
||||
--brand-bg-high-active: var(--danger-bg-high-active);
|
||||
--brand-bg-hover: var(--danger-bg-hover);
|
||||
--brand-bg-active: var(--danger-bg-active);
|
||||
--brand-bg-low: var(--danger-bg-low);
|
||||
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
||||
--brand-bg-low-active: var(--danger-bg-low-active);
|
||||
}
|
||||
@utility brand-success {
|
||||
--brand-bg: var(--success-bg);
|
||||
--brand-bg-high-hover: var(--success-bg-high-hover);
|
||||
--brand-bg-high-active: var(--success-bg-high-active);
|
||||
--brand-bg-hover: var(--success-bg-hover);
|
||||
--brand-bg-active: var(--success-bg-active);
|
||||
--brand-bg-low: var(--success-bg-low);
|
||||
--brand-bg-low-hover: var(--success-bg-low-hover);
|
||||
--brand-bg-low-active: var(--success-bg-low-active);
|
||||
}
|
||||
@utility brand-warning {
|
||||
--brand-bg: var(--warning-bg);
|
||||
--brand-bg-high-hover: var(--warning-bg-high-hover);
|
||||
--brand-bg-high-active: var(--warning-bg-high-active);
|
||||
--brand-bg-hover: var(--warning-bg-hover);
|
||||
--brand-bg-active: var(--warning-bg-active);
|
||||
--brand-bg-low: var(--warning-bg-low);
|
||||
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
||||
--brand-bg-low-active: var(--warning-bg-low-active);
|
||||
}
|
||||
@utility brand-default {
|
||||
--brand-bg: var(--default-bg);
|
||||
--brand-bg-high-hover: var(--default-bg-high-hover);
|
||||
--brand-bg-high-active: var(--default-bg-high-active);
|
||||
--brand-bg-hover: var(--default-bg-hover);
|
||||
--brand-bg-active: var(--default-bg-active);
|
||||
--brand-bg-low: var(--default-bg-low);
|
||||
--brand-bg-low-hover: var(--default-bg-low-hover);
|
||||
--brand-bg-low-active: var(--default-bg-low-active);
|
||||
}
|
||||
|
||||
4
packages/ui/src/styles/utility/font.css
Normal file
4
packages/ui/src/styles/utility/font.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@utility text-md {
|
||||
font-size: var(--text-md); /* 1rem (16px) */
|
||||
line-height: var(--text-md--line-height); /* calc(1.5 / 1) */
|
||||
}
|
||||
@@ -2,17 +2,17 @@
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@utility gap-sm {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
@utility gap-md {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
gap: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@utility gap-lg {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@utility gap-xl {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
gap: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@utility gap-2xl {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
||||
@@ -1,36 +1,40 @@
|
||||
@utility h-xs {
|
||||
height: calc(var(--spacing) * 5);
|
||||
@utility h-item-xs {
|
||||
/* 24px minimum touch size for text line */
|
||||
height: 24px;
|
||||
}
|
||||
@utility h-sm {
|
||||
height: calc(var(--spacing) * 6);
|
||||
@utility h-item-sm {
|
||||
/* 30px save space for most used size */
|
||||
height: 30px;
|
||||
}
|
||||
@utility h-md {
|
||||
height: calc(var(--spacing) * 8);
|
||||
@utility h-item-md {
|
||||
/* 34px most used size */
|
||||
height: 34px;
|
||||
}
|
||||
@utility h-lg {
|
||||
height: calc(var(--spacing) * 9);
|
||||
@utility h-item-lg {
|
||||
/* 46px maximum touch size without waste */
|
||||
height: 46px;
|
||||
}
|
||||
@utility h-xl {
|
||||
height: calc(var(--spacing) * 11);
|
||||
@utility h-item-xl {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
@utility h-2xl {
|
||||
@utility h-item-2xl {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
@utility h-inline-xs {
|
||||
height: var(--text-xs--line-height);
|
||||
height: calc(var(--text-xs--line-height) * var(--text-xs));
|
||||
}
|
||||
@utility h-inline-sm {
|
||||
height: var(--text-sm--line-height);
|
||||
height: calc(var(--text-sm--line-height) * var(--text-sm));
|
||||
}
|
||||
@utility h-inline-md {
|
||||
height: var(--text-base--line-height);
|
||||
height: calc(var(--text-md--line-height) * var(--text-md));
|
||||
}
|
||||
@utility h-inline-lg {
|
||||
height: var(--text-lg--line-height);
|
||||
height: calc(var(--text-lg--line-height) * var(--text-lg));
|
||||
}
|
||||
@utility h-inline-xl {
|
||||
height: var(--text-xl--line-height);
|
||||
height: calc(var(--text-xl--line-height) * var(--text-xl));
|
||||
}
|
||||
@utility h-inline-2xl {
|
||||
height: var(--text-2xl--line-height);
|
||||
height: calc(var(--text-2xl--line-height) * var(--text-2xl));
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@utility mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
@utility mr-xs {
|
||||
@utility mr-sm {
|
||||
margin-right: calc(var(--spacing) * 1);
|
||||
}
|
||||
@utility mr-sm {
|
||||
|
||||
@@ -1,36 +1,40 @@
|
||||
@utility px-none {
|
||||
padding-inline: 0px;
|
||||
}
|
||||
@utility px-xs {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
padding-inline: 6px;
|
||||
}
|
||||
@utility px-sm {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
padding-inline: 8px;
|
||||
}
|
||||
@utility px-md {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
padding-inline: 10px;
|
||||
}
|
||||
@utility px-lg {
|
||||
padding-inline: calc(var(--spacing) * 5);
|
||||
padding-inline: 12px;
|
||||
}
|
||||
@utility px-xl {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
padding-inline: var(--radius-xl);
|
||||
}
|
||||
@utility px-2xl {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
padding-inline: var(--radius-2xl);
|
||||
}
|
||||
@utility py-xs {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
/* 2px correspond to rounded-xs */
|
||||
padding-block: var(--radius-xs);
|
||||
}
|
||||
@utility py-sm {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
padding-block: var(--radius-sm);
|
||||
}
|
||||
@utility py-md {
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
padding-block: var(--radius-md);
|
||||
}
|
||||
@utility py-lg {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
padding-block: var(--radius-lg);
|
||||
}
|
||||
@utility py-xl {
|
||||
padding-block: calc(var(--spacing) * 5);
|
||||
padding-block: var(--radius-xl);
|
||||
}
|
||||
@utility py-2xl {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
padding-block: var(--radius-2xl);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
@utility light {
|
||||
--base-fg: var(--color-gray-950);
|
||||
--base-bg: var(--color-white);
|
||||
--base-fg-subtext: var(--color-gray-500);
|
||||
--base-bg-subtext: var(--color-gray-200);
|
||||
}
|
||||
|
||||
@utility dark {
|
||||
--base-fg: var(--color-gray-50);
|
||||
--base-bg: var(--color-black);
|
||||
--base-fg-subtext: var(--color-gray-400);
|
||||
--base-bg-subtext: var(--color-gray-600);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
--filled-fg-hover: var(--color-white);
|
||||
--filled-fg-active: var(--color-white);
|
||||
--filled-bg: var(--brand-bg);
|
||||
--filled-bg-hover: var(--brand-bg-high-hover);
|
||||
--filled-bg-active: var(--brand-bg-high-active);
|
||||
--filled-bg-hover: var(--brand-bg-hover);
|
||||
--filled-bg-active: var(--brand-bg-active);
|
||||
--filled-border-color: var(--color-transparent);
|
||||
|
||||
color: var(--filled-fg);
|
||||
@@ -61,7 +61,7 @@
|
||||
--subtle-fg: var(--brand-bg);
|
||||
--subtle-fg-hover: var(--brand-bg);
|
||||
--subtle-fg-active: var(--brand-bg);
|
||||
--subtle-bg: var(--color-transparent);
|
||||
--subtle-bg: var(--brand-bg-low);
|
||||
--subtle-bg-hover: var(--brand-bg-low-hover);
|
||||
--subtle-bg-active: var(--brand-bg-low-active);
|
||||
--subtle-border-color: var(--color-transparent);
|
||||
@@ -86,31 +86,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
@utility variant-filled-disabled {
|
||||
color: var(--filled-fg);
|
||||
background-color: var(--filled-bg);
|
||||
border-color: var(--filled-border-color);
|
||||
filter: grayscale(50%);
|
||||
@utility variant-ghost {
|
||||
--ghost-fg: var(--brand-bg);
|
||||
--ghost-fg-hover: var(--brand-bg);
|
||||
--ghost-fg-active: var(--brand-bg);
|
||||
--ghost-bg: var(--color-transparent);
|
||||
--ghost-bg-hover: var(--brand-bg-low);
|
||||
--ghost-bg-active: var(--brand-bg-low-hover);
|
||||
--ghost-border-color: var(--color-transparent);
|
||||
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--filled-fg);
|
||||
background-color: var(--filled-bg);
|
||||
border-color: var(--filled-border-color);
|
||||
filter: grayscale(50%);
|
||||
background-color: var(--ghost-bg-hover);
|
||||
color: var(--ghost-fg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--filled-fg);
|
||||
background-color: var(--filled-bg);
|
||||
border-color: var(--filled-border-color);
|
||||
filter: grayscale(50%);
|
||||
background-color: var(--ghost-bg-active);
|
||||
color: var(--ghost-fg-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--ghost-bg-hover);
|
||||
color: var(--ghost-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@utility variant-filled-disabled {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
|
||||
&:hover {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--filled-fg);
|
||||
background-color: var(--filled-bg);
|
||||
border-color: var(--filled-border-color);
|
||||
filter: grayscale(50%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,30 +171,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
@utility variant-subtle-disabled {
|
||||
color: var(--subtle-fg);
|
||||
background-color: var(--subtle-bg);
|
||||
border-color: var(--subtle-border-color);
|
||||
@utility variant-ghost-disabled {
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
|
||||
&:hover {
|
||||
color: var(--subtle-fg);
|
||||
background-color: var(--subtle-bg);
|
||||
border-color: var(--subtle-border-color);
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--subtle-fg);
|
||||
background-color: var(--subtle-bg);
|
||||
border-color: var(--subtle-border-color);
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--subtle-fg);
|
||||
background-color: var(--subtle-bg);
|
||||
border-color: var(--subtle-border-color);
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +1,41 @@
|
||||
@utility w-xs {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility w-sm {
|
||||
@utility w-item-xs {
|
||||
/* 24px minimum touch size for text line */
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
@utility w-md {
|
||||
width: calc(var(--spacing) * 8);
|
||||
@utility w-item-sm {
|
||||
/* 30px save space for most used size */
|
||||
width: calc(var(--spacing) * 7.5);
|
||||
}
|
||||
@utility w-lg {
|
||||
width: calc(var(--spacing) * 9);
|
||||
@utility w-item-md {
|
||||
/* 34px most used size */
|
||||
width: calc(var(--spacing) * 8.5);
|
||||
}
|
||||
@utility w-xl {
|
||||
width: calc(var(--spacing) * 11);
|
||||
@utility w-item-lg {
|
||||
/* 46px maximum touch size without waste */
|
||||
width: calc(var(--spacing) * 11.5);
|
||||
}
|
||||
@utility w-2xl {
|
||||
@utility w-item-xl {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
@utility w-item-2xl {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
/* ---------------------------------------------------- */
|
||||
@utility w-inline-xs {
|
||||
width: var(--text-xs--line-height);
|
||||
width: calc(var(--text-xs--line-height) * var(--text-xs));
|
||||
}
|
||||
@utility w-inline-sm {
|
||||
width: var(--text-sm--line-height);
|
||||
width: calc(var(--text-sm--line-height) * var(--text-sm));
|
||||
}
|
||||
@utility w-inline-md {
|
||||
width: var(--text-base--line-height);
|
||||
width: calc(var(--text-md--line-height) * var(--text-md));
|
||||
}
|
||||
@utility w-inline-lg {
|
||||
width: var(--text-lg--line-height);
|
||||
width: calc(var(--text-lg--line-height) * var(--text-lg));
|
||||
}
|
||||
@utility w-inline-xl {
|
||||
width: var(--text-xl--line-height);
|
||||
width: calc(var(--text-xl--line-height) * var(--text-xl));
|
||||
}
|
||||
@utility w-inline-2xl {
|
||||
width: var(--text-2xl--line-height);
|
||||
width: calc(var(--text-2xl--line-height) * var(--text-2xl));
|
||||
}
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
{
|
||||
"extends": "@tsconfig/vite-react/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"declaration": true, // 补充：生成类型声明文件，供其他子包引用
|
||||
"skipLibCheck": true, // 补充：跳过第三方库类型校验，避免冲突、提升速度
|
||||
"types": ["vite/client"]
|
||||
"declaration": true,
|
||||
"types": ["node", "react"]
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": [
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import dts from "vite-plugin-dts";
|
||||
import { resolve } from "node:path";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const isProduction = mode === "production";
|
||||
|
||||
return {
|
||||
// React 核心插件
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
react(),
|
||||
dts({
|
||||
include: ["src/**/*"],
|
||||
exclude: ["src/**/*.test.ts", "src/**/*.stories.tsx"],
|
||||
outDir: "./dist",
|
||||
rollupTypes: true, // 合并类型声明文件
|
||||
}),
|
||||
],
|
||||
|
||||
// 路径别名与后缀配置
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src"),
|
||||
},
|
||||
extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
|
||||
},
|
||||
|
||||
// 纯 ES 模式打包配置（移除 UMD 相关）
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, "./src/index.ts"),
|
||||
formats: ["es"], // 仅保留 ES 模块格式
|
||||
fileName: () => "index.es.js", // 固定 ES 模式文件名
|
||||
},
|
||||
rollupOptions: {
|
||||
// 排除 React 相关依赖（用户项目自行引入）
|
||||
external: ["react", "react-dom"],
|
||||
output: {
|
||||
compact: isProduction, // 生产环境压缩代码格式
|
||||
globals: {
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
},
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
|
||||
return "index.css";
|
||||
}
|
||||
return assetInfo.name || "[name].[ext]";
|
||||
},
|
||||
},
|
||||
// 移除：rollupOptions 下无效的 exclude 配置
|
||||
// exclude: ["example/**/*", "scripts/**/*"],
|
||||
},
|
||||
outDir: "./dist",
|
||||
cssCodeSplit: false,
|
||||
sourcemap: true,
|
||||
minify: isProduction ? "esbuild" : false,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
|
||||
// TS 兼容配置
|
||||
esbuild: {
|
||||
ignoreAnnotations: true,
|
||||
// 移除：esbuild 下无效的 exclude 配置
|
||||
// exclude: ["example/**/*", "scripts/**/*"],
|
||||
},
|
||||
|
||||
// 新增：使用 Vite 官方支持的方式排除文件
|
||||
// 通过 optimizeDeps.exclude 排除依赖，通过 build.assetsInclude 反向控制，
|
||||
// 同时结合 tsconfig.json 的 exclude 确保 TS 编译也排除目标文件
|
||||
optimizeDeps: {
|
||||
exclude: ["example", "scripts"],
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user