folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-04-23 18:17:17 +08:00
parent 3a7b48e483
commit 9890864e5c
76 changed files with 1096 additions and 1631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.turbo/daemon/934a1a5ec62dbadc-turbo.log.2026-03-28 Normal file
View File

@@ -0,0 +1,2 @@
2026-03-28T01:43:52.309381Z WARN daemon_server: turborepo_lib::commands::daemon: daemon already running
2026-03-28T12:18:37.344622Z WARN daemon_server: turborepo_lib::commands::daemon: daemon already running

5
apps/ui-site/package.json
View File

@@ -10,9 +10,10 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@base-ui/react": "^1.3.0",
"@defgov/ui": "workspace:*",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0", "react-dom": "^19.2.0"
"@defgov/ui": "workspace:*"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.1", "@eslint/js": "^9.39.1",

10
apps/ui-site/src/App.tsx
View File

@@ -1,11 +1,15 @@
import { Skin } from "@defgov/ui"; import { Theme } from "@defgov/ui";
import { ButtonGallery } from "./gallery/ButtonGallery"; import { ButtonGallery } from "./gallery/ButtonGallery";
import { CheckboxGallery } from "./gallery/CheckboxGallery";
import { TooltipGallery } from "./gallery/TooltipGallery";
const App = () => { const App = () => {
return ( return (
<Skin> <Theme>
<ButtonGallery /> <ButtonGallery />
</Skin> <CheckboxGallery />
<TooltipGallery />
</Theme>
); );
}; };

8
apps/ui-site/src/common/InnerWrap.tsx
View File

@@ -1,18 +1,20 @@
import { type ReactNode } from "react"; import { type CSSProperties, type ReactNode } from "react";
interface WrapProps { interface WrapProps {
children: ReactNode; children: ReactNode;
style?: CSSProperties;
} }
export function InnerWrap({ children }: WrapProps) { export function InnerWrap({ children, style }: WrapProps) {
return ( return (
<div <div
style={{ style={{
display: "flex", display: "flex",
margin: "20px", margin: "20px",
gap: "20px", gap: "10px",
alignItems: "center", alignItems: "center",
flexDirection: "row", flexDirection: "row",
...style,
}} }}
> >
{children} {children}

4
apps/ui-site/src/common/OuterWrap.tsx
View File

@@ -9,8 +9,8 @@ export function OuterWrap({ children }: WrapProps) {
<div <div
style={{ style={{
display: "flex", display: "flex",
margin: "20px", margin: "10px",
gap: "20px", gap: "10px",
flexDirection: "column", flexDirection: "column",
}} }}
> >

43
apps/ui-site/src/gallery/ButtonGallery.tsx
View File

@@ -6,26 +6,40 @@ export const ButtonGallery = () => {
return ( return (
<OuterWrap> <OuterWrap>
<InnerWrap> <InnerWrap>
<Button variant="filled" icon={<DownloadSvg />} size="xs">
Xsmall
</Button>
<Button variant="filled" icon={<DownloadSvg />} size="sm">
Small
</Button>
<Button variant="filled" icon={<DownloadSvg />} size="md"> <Button variant="filled" icon={<DownloadSvg />} size="md">
Button Madium
</Button>
<Button
variant="filled"
icon={<DownloadSvg />}
size="md"
iconOnly={true}
>
IconOnly
</Button> </Button>
<Button variant="filled" icon={<DownloadSvg />} size="lg"> <Button variant="filled" icon={<DownloadSvg />} size="lg">
Button Large
</Button>
<Button variant="filled" icon={<DownloadSvg />} size="xl">
Button
</Button> </Button>
</InnerWrap> </InnerWrap>
<InnerWrap> <InnerWrap>
<Button variant="filled" brand="default"> <Button variant="filled" brand="default">
Buttun Filled
</Button>{" "} </Button>{" "}
<Button variant="outline" brand="default"> <Button variant="outline" brand="default">
Buttun Outline
</Button>{" "} </Button>{" "}
<Button variant="subtle" brand="default"> <Button variant="subtle" brand="default">
Buttun Subtle
</Button> </Button>
<Button variant="ghost" brand="default">
Ghost
</Button>{" "}
<Button variant="filled" brand="success"> <Button variant="filled" brand="success">
Buttun Buttun
</Button>{" "} </Button>{" "}
@@ -56,7 +70,6 @@ export const ButtonGallery = () => {
Buttun Buttun
</Button> </Button>
</InnerWrap> </InnerWrap>
<InnerWrap> <InnerWrap>
<Button variant="filled" brand="info"> <Button variant="filled" brand="info">
Buttun Buttun
@@ -67,6 +80,18 @@ export const ButtonGallery = () => {
<Button variant="subtle" brand="info"> <Button variant="subtle" brand="info">
Buttun Buttun
</Button> </Button>
<Button variant="filled" brand="info" disabled>
Disabled
</Button>{" "}
<Button variant="outline" brand="info" disabled>
Disabled
</Button>{" "}
<Button variant="subtle" brand="info" disabled>
Disabled
</Button>{" "}
<Button variant="ghost" brand="info" disabled>
Disabled
</Button>
</InnerWrap> </InnerWrap>
</OuterWrap> </OuterWrap>
); );

26
apps/ui-site/src/gallery/CheckboxGallery.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Checkbox, RulerSvg } from "@defgov/ui";
import { InnerWrap } from "../common/InnerWrap";
import { OuterWrap } from "../common/OuterWrap";
export const CheckboxGallery = () => {
return (
<OuterWrap>
<InnerWrap>
<Checkbox size="xs" icon={<RulerSvg />}>
Ruler
</Checkbox>
<Checkbox size="sm" icon={<RulerSvg />}>
Ruler
</Checkbox>
<Checkbox
size="md"
icon={<RulerSvg />}
hideIcon={true}
iconPlaceholder={true}
>
Ruler
</Checkbox>
</InnerWrap>
</OuterWrap>
);
};

0
apps/ui-site/src/gallery/PopoverGallery.tsx Normal file
View File

43
apps/ui-site/src/gallery/TooltipGallery.tsx Normal file
View File

@@ -0,0 +1,43 @@
import {
BoldSvg,
Button,
Tooltip,
TooltipPopup,
TooltipTriger,
} from "@defgov/ui";
import { InnerWrap } from "../common/InnerWrap";
import { OuterWrap } from "../common/OuterWrap";
export const TooltipGallery = () => {
return (
<OuterWrap>
<InnerWrap style={{ columnGap: "60px", rowGap: "10px" }}>
<Tooltip >
<TooltipTriger>
<Button icon={<BoldSvg />} iconOnly={true}></Button>
</TooltipTriger>
<TooltipPopup side="right">Bold</TooltipPopup>
</Tooltip>
<Tooltip open={true}>
<TooltipTriger>
<Button icon={<BoldSvg />} iconOnly={true}></Button>
</TooltipTriger>
<TooltipPopup>Bold</TooltipPopup>
</Tooltip>
<Tooltip open={true}>
<TooltipTriger>
<Button icon={<BoldSvg />} iconOnly={true}></Button>
</TooltipTriger>
<TooltipPopup side="bottom">Bold</TooltipPopup>
</Tooltip>
<Tooltip open={true}>
<TooltipTriger>
<Button icon={<BoldSvg />} iconOnly={true}></Button>
</TooltipTriger>
<TooltipPopup side="left">Bold</TooltipPopup>
</Tooltip>
</InnerWrap>
</OuterWrap>
);
};

2
package.json
View File

@@ -9,7 +9,7 @@
"devDependencies": { "devDependencies": {
"turbo": "^2.8.0" "turbo": "^2.8.0"
}, },
"packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be", "packageManager": "pnpm@10.33.1+sha512.05ba3c1d5d1c18f68df06470d74055e62d41fc110a0c660db1b2dfb2785327f04cf0f68345d4609bc52089e7fa0343c31593b2f9594e2c5d5da426230acc9820",
"engines": { "engines": {
"node": ">=20" "node": ">=20"
} }

23
packages/ui/package.json
View File

@@ -26,26 +26,19 @@
"gen-index": "ts-node scripts/generate-index.ts && ts-node scripts/generate-index-css.ts" "gen-index": "ts-node scripts/generate-index.ts && ts-node scripts/generate-index-css.ts"
}, },
"devDependencies": { "devDependencies": {
"@tsconfig/vite-react": "^7.0.2", "@types/node": "^25.6.0",
"@types/node": "^25.1.0", "@types/react": "^19.2.14",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2", "glob": "^13.0.6",
"autoprefixer": "^10.4.24",
"glob": "^13.0.3",
"prettier": "^3.8.1",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "^5.9.3", "typescript": "^6.0.3"
"vite": "^7.3.1",
"vite-plugin-dts": "^4.5.4"
}, },
"dependencies": { "dependencies": {
"@base-ui/react": "^1.3.0", "@base-ui/react": "^1.4.1",
"@tailwindcss/vite": "^4.2.1", "react": "^19.2.5",
"react": "^19.2.4", "react-dom": "^19.2.5",
"react-dom": "^19.2.4",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"tailwind-variants": "^3.2.2", "tailwind-variants": "^3.2.2",
"tailwindcss": "^4.2.1" "tailwindcss": "^4.2.4"
} }
} }

12
packages/ui/src/assets/svg/BoldSvg.tsx Normal file
View 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>
);

16
packages/ui/src/assets/svg/CheckIndicatorOutlineSvg.tsx
View File

@@ -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>
);

10
packages/ui/src/assets/svg/CheckIndicatorSvg.tsx
View File

@@ -1,14 +1,8 @@
export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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> </svg>
); );

9
packages/ui/src/assets/svg/ChevronRightSvg.tsx
View File

@@ -1,12 +1,5 @@
export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

8
packages/ui/src/assets/svg/CutSvg.tsx
View File

@@ -1,11 +1,5 @@
export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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" 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"

10
packages/ui/src/assets/svg/DownloadSvg.tsx
View File

@@ -1,14 +1,8 @@
export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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> </svg>
); );

8
packages/ui/src/assets/svg/FileSvg.tsx
View File

@@ -1,11 +1,5 @@
export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<g <g
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

8
packages/ui/src/assets/svg/KeySvg.tsx
View File

@@ -1,11 +1,5 @@
export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => ( export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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" 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
View 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>
);

8
packages/ui/src/assets/svg/MoonSvg.tsx
View File

@@ -1,11 +1,5 @@
export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

8
packages/ui/src/assets/svg/PasteSvg.tsx
View File

@@ -1,11 +1,5 @@
export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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" 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"

16
packages/ui/src/assets/svg/RadioIndicatorOutlineSvg.tsx
View File

@@ -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>
);

15
packages/ui/src/assets/svg/RadioIndicatorSvg.tsx
View File

@@ -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
View 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>
);

8
packages/ui/src/assets/svg/SearchSvg.tsx
View File

@@ -1,11 +1,5 @@
export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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" 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"

8
packages/ui/src/assets/svg/SettingSvg.tsx
View File

@@ -1,11 +1,5 @@
export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" fill="currentColor"
fill-rule="evenodd" fill-rule="evenodd"

8
packages/ui/src/assets/svg/SpinnerSvg.tsx
View File

@@ -1,12 +1,6 @@
export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => { export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
return ( return (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="currentColor" 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" 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"

8
packages/ui/src/assets/svg/SunSvg.tsx
View File

@@ -1,11 +1,5 @@
export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

8
packages/ui/src/assets/svg/UserSvg.tsx
View File

@@ -1,12 +1,6 @@
export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => { export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
return ( return (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"

13
packages/ui/src/assets/svg/VolumeHighSvg.tsx
View File

@@ -1,19 +1,12 @@
export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
id="a"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <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" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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> </svg>
); );

39
packages/ui/src/assets/svg/VolumeLowSvg.tsx
View File

@@ -1,45 +1,12 @@
export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
id="a"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <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" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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"
<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"
/> />
</svg> </svg>
); );

44
packages/ui/src/assets/svg/VolumeMediumSvg.tsx
View File

@@ -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>
);

35
packages/ui/src/assets/svg/VolumeMuteSvg.tsx
View File

@@ -1,41 +1,12 @@
export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => ( export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
id="a"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
>
<path <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" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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"
<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"
/> />
</svg> </svg>
); );

9
packages/ui/src/common/CommonProps.ts
View File

@@ -1,9 +0,0 @@
import type { CSSProperties } from "react";
export type CommonProps = {
className?: string;
style?: CSSProperties;
children?: React.ReactNode;
key?: string | number;
disabled?: boolean;
};

10
packages/ui/src/common/Skin.tsx
View File

@@ -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
View 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
View 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
View 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>
);
};

0
packages/ui/src/component/accordion/AccordionItem.tsx Normal file
View File

0
packages/ui/src/component/accordion/AccordionPanel.tsx Normal file
View File

0
packages/ui/src/component/accordion/AccordionTrigger.tsx Normal file
View File

15
packages/ui/src/component/avatar/Avatar.css Normal file
View 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
View 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>
);
};

47
packages/ui/src/component/button/Button.tsx
View File

@@ -1,23 +1,24 @@
"use client"; "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 type { ReactNode } from "react";
import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe"; import * as BUI from "@base-ui/react";
import { Slot } from "@/common/Slot"; 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 & { type ButtonProps = {
size?: "md" | "lg" | "xl"; size?: "xs" | "sm" | "md" | "lg";
variant?: "filled" | "outline" | "subtle"; variant?: "filled" | "outline" | "subtle" | "ghost";
shape?: "rounded" | "square" | "circle"; shape?: "rounded" | "square" | "circle";
brand?: "success" | "danger" | "info" | "warning" | "default"; brand?: "success" | "danger" | "info" | "warning" | "default";
loading?: boolean; loading?: boolean;
icon?: ReactNode; iconSvg?: ReactNode;
iconOnly?: boolean; iconOnly?: boolean;
hideIcon?: boolean; hideIcon?: boolean;
}; } & BUI.Button.Props;
export const Button = (props: ButtonProps) => { export const Button = (props: ButtonProps) => {
const { const {
@@ -29,7 +30,7 @@ export const Button = (props: ButtonProps) => {
brand, brand,
loading, loading,
disabled, disabled,
icon, iconSvg,
iconOnly, iconOnly,
hideIcon = false, hideIcon = false,
} = props; } = props;
@@ -38,22 +39,24 @@ export const Button = (props: ButtonProps) => {
brand == undefined ? (variant == "filled" ? "info" : "default") : brand; brand == undefined ? (variant == "filled" ? "info" : "default") : brand;
const buttonCls = cn( const buttonCls = cn(
itemSizeRecipe({ size, brand: currentBrand, shape }), itemSizeRecipe({ size, shape, iconOnly }),
variantRecipe({ variant, disabled: loading || disabled }), variantRecipe({ variant, disabled: loading || disabled }),
brandRecipe({ brand: currentBrand }),
className, className,
); );
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
return ( return (
<BUI.Button className={buttonCls} disabled={loading || disabled}> <BUI.Button className={buttonCls} disabled={loading || disabled}>
{!hideIcon && {iconSvg ? (
(iconOnly ? ( hideIcon ? (
<span className={iconCls}></span> iconOnly ? (
<Icon />
) : null
) : ( ) : (
<Slot className={iconCls}>{icon}</Slot> <Icon svg={iconSvg} />
))} )
{children} ) : null}
{!iconOnly && children}
</BUI.Button> </BUI.Button>
); );
}; };

19
packages/ui/src/component/checkbox/Checkbox.css Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

4
packages/ui/src/index.css
View File

@@ -1,6 +1,10 @@
@import "tailwindcss"; @import "tailwindcss";
@import './component/accordion/Accordion.css';
@import './component/checkbox/Checkbox.css';
@import './component/tooltip/Tooltip.css';
@import './styles/theme/global.css'; @import './styles/theme/global.css';
@import './styles/utility/brand.css'; @import './styles/utility/brand.css';
@import './styles/utility/font.css';
@import './styles/utility/gap.css'; @import './styles/utility/gap.css';
@import './styles/utility/height.css'; @import './styles/utility/height.css';
@import './styles/utility/loading.css'; @import './styles/utility/loading.css';

24
packages/ui/src/index.ts
View File

@@ -2,17 +2,17 @@
import './index.css'; import './index.css';
export * from './assets/svg/CheckIndicatorOutlineSvg'; export * from './assets/svg/BoldSvg';
export * from './assets/svg/CheckIndicatorSvg'; export * from './assets/svg/CheckIndicatorSvg';
export * from './assets/svg/ChevronRightSvg'; export * from './assets/svg/ChevronRightSvg';
export * from './assets/svg/CutSvg'; export * from './assets/svg/CutSvg';
export * from './assets/svg/DownloadSvg'; export * from './assets/svg/DownloadSvg';
export * from './assets/svg/FileSvg'; export * from './assets/svg/FileSvg';
export * from './assets/svg/KeySvg'; export * from './assets/svg/KeySvg';
export * from './assets/svg/MeshSvg';
export * from './assets/svg/MoonSvg'; export * from './assets/svg/MoonSvg';
export * from './assets/svg/PasteSvg'; export * from './assets/svg/PasteSvg';
export * from './assets/svg/RadioIndicatorOutlineSvg'; export * from './assets/svg/Ruler';
export * from './assets/svg/RadioIndicatorSvg';
export * from './assets/svg/SearchSvg'; export * from './assets/svg/SearchSvg';
export * from './assets/svg/SettingSvg'; export * from './assets/svg/SettingSvg';
export * from './assets/svg/SpinnerSvg'; export * from './assets/svg/SpinnerSvg';
@@ -20,13 +20,25 @@ export * from './assets/svg/SunSvg';
export * from './assets/svg/UserSvg'; export * from './assets/svg/UserSvg';
export * from './assets/svg/VolumeHighSvg'; export * from './assets/svg/VolumeHighSvg';
export * from './assets/svg/VolumeLowSvg'; export * from './assets/svg/VolumeLowSvg';
export * from './assets/svg/VolumeMediumSvg';
export * from './assets/svg/VolumeMuteSvg'; export * from './assets/svg/VolumeMuteSvg';
export * from './common/Box'; export * from './common/Box';
export * from './common/CommonProps';
export * from './common/Skin';
export * from './common/Slot'; 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/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/IinlineSize.recipe';
export * from './styles/recipe/ItemSize.recipe'; export * from './styles/recipe/ItemSize.recipe';
export * from './styles/recipe/brand.recipe';
export * from './styles/recipe/variant.recipe'; export * from './styles/recipe/variant.recipe';

30
packages/ui/src/styles/recipe/IinlineSize.recipe.ts
View File

@@ -1,7 +1,7 @@
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
export const inlineSizeRecipe = tv({ 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: { variants: {
size: { size: {
xs: "text-xs h-inline-xs", xs: "text-xs h-inline-xs",
@@ -16,18 +16,6 @@ export const inlineSizeRecipe = tv({
rounded: "", rounded: "",
circle: "rounded-full", 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: { iconOnly: {
true: "", true: "",
false: "", false: "",
@@ -99,21 +87,5 @@ export const inlineSizeRecipe = tv({
size: "2xl", size: "2xl",
class: "w-inline-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",
},
], ],
}); });

62
packages/ui/src/styles/recipe/ItemSize.recipe.ts
View File

@@ -1,34 +1,24 @@
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
export const itemSizeRecipe = tv({ 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: { variants: {
size: { size: {
xs: "text-xs h-xs px-xs gap-xs", xs: "text-xs h-item-xs px-xs gap-xs",
sm: "text-sm h-sm px-sm gap-sm", sm: "text-sm h-item-sm px-sm gap-sm",
md: "text-md h-md px-md gap-md", md: "text-md h-item-md px-md gap-md",
lg: "text-lg h-lg px-lg gap-lg", lg: "text-lg h-item-lg px-lg gap-lg",
xl: "text-xl h-xl px-xl gap-xl", xl: "text-xl h-item-xl px-xl gap-xl",
"2xl": "text-2xl h-2xl px-2xl gap-2xl", "2xl": "text-2xl h-item-2xl px-2xl gap-2xl",
}, },
shape: { shape: {
square: "rounded-none", square: "rounded-none",
rounded: "", rounded: "",
circle: "rounded-full", circle: "rounded-full",
}, },
brand: {
success: "brand-success",
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
default: "brand-default",
},
iconOnly: { iconOnly: {
true: "", true: "px-none",
false: "",
},
hasShadow: {
true: "shadow-xl",
false: "", false: "",
}, },
disabled: { disabled: {
@@ -37,66 +27,62 @@ export const itemSizeRecipe = tv({
}, },
}, },
compoundVariants: [ compoundVariants: [
{ { shape: "rounded", size: "xs", class: "rounded-sm" },
shape: "rounded",
size: "xs",
class: "rounded-xs",
},
{ {
shape: "rounded", shape: "rounded",
size: "sm", size: "sm",
class: "rounded-sm",
},
{
shape: "rounded",
size: "md",
class: "rounded-md", class: "rounded-md",
}, },
{ {
shape: "rounded", shape: "rounded",
size: "lg", size: "md",
class: "rounded-lg", class: "rounded-lg",
}, },
{ {
shape: "rounded", shape: "rounded",
size: "xl", size: "lg",
class: "rounded-xl", class: "rounded-xl",
}, },
{ {
shape: "rounded", shape: "rounded",
size: "2xl", size: "xl",
class: "rounded-2xl", class: "rounded-2xl",
}, },
{
shape: "rounded",
size: "2xl",
class: "rounded-3xl",
},
// -------------------------------------------------- // --------------------------------------------------
{ {
iconOnly: true, iconOnly: true,
size: "xs", size: "xs",
class: "w-xs", class: "w-item-xs",
}, },
{ {
iconOnly: true, iconOnly: true,
size: "sm", size: "sm",
class: "w-sm", class: "w-item-sm",
}, },
{ {
iconOnly: true, iconOnly: true,
size: "md", size: "md",
class: "w-md", class: "w-item-md",
}, },
{ {
iconOnly: true, iconOnly: true,
size: "lg", size: "lg",
class: "w-lg", class: "w-item-lg",
}, },
{ {
iconOnly: true, iconOnly: true,
size: "xl", size: "xl",
class: "w-xl", class: "w-item-xl",
}, },
{ {
iconOnly: true, iconOnly: true,
size: "2xl", size: "2xl",
class: "w-2xl", class: "w-item-2xl",
}, },
], ],
}); });

13
packages/ui/src/styles/recipe/brand.recipe.ts Normal file
View 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
packages/ui/src/styles/recipe/variant.recipe.ts
View File

@@ -6,6 +6,7 @@ export const variantRecipe = tv({
filled: "variant-filled", filled: "variant-filled",
outline: "variant-outline", outline: "variant-outline",
subtle: "variant-subtle", subtle: "variant-subtle",
ghost: "variant-ghost",
}, },
disabled: { disabled: {
true: "", true: "",
@@ -28,5 +29,10 @@ export const variantRecipe = tv({
variant: "subtle", variant: "subtle",
class: "variant-subtle-disabled", class: "variant-subtle-disabled",
}, },
{
disabled: true,
variant: "ghost",
class: "variant-ghost-disabled",
},
], ],
}); });

50
packages/ui/src/styles/theme/global.css
View File

@@ -1,32 +1,44 @@
@theme { @theme {
--text-md: 1rem;
--text-md--line-height: calc(1.5 / 1);
--color-transparent: transparent; --color-transparent: transparent;
--danger-bg: var(--color-red-600); --danger-bg: var(--color-red-600);
--danger-bg-high-hover: var(--color-red-500); --danger-bg-hover: var(--color-red-500);
--danger-bg-high-active: var(--color-red-400); --danger-bg-active: var(--color-red-400);
--danger-bg-low-hover: var(--color-red-100); --danger-bg-low: var(--color-red-100);
--danger-bg-low-active: var(--color-red-200); --danger-bg-low-hover: var(--color-red-200);
--danger-bg-low-active: var(--color-red-300);
--success-bg: var(--color-emerald-600); --success-bg: var(--color-emerald-600);
--success-bg-high-hover: var(--color-emerald-500); --success-bg-hover: var(--color-emerald-500);
--success-bg-high-active: var(--color-emerald-400); --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-hover: var(--color-emerald-100);
--success-bg-low-active: var(--color-emerald-200); --success-bg-low-active: var(--color-emerald-200);
--info-bg: var(--color-sky-600); --info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-500); --info-bg-hover: var(--color-sky-500);
--info-bg-high-active: var(--color-sky-400); --info-bg-active: var(--color-sky-400);
--info-bg-low-hover: var(--color-sky-100); --info-bg-low: var(--color-sky-100);
--info-bg-low-active: var(--color-sky-200); --info-bg-low-hover: var(--color-sky-200);
--info-bg-low-active: var(--color-sky-300);
--warning-bg: var(--color-yellow-600); --warning-bg: var(--color-yellow-600);
--warning-bg-high-hover: var(--color-yellow-500); --warning-bg-hover: var(--color-yellow-500);
--warning-bg-high-active: var(--color-yellow-400); --warning-bg-active: var(--color-yellow-400);
--warning-bg-low-hover: var(--color-yellow-100); --warning-bg-low: var(--color-yellow-100);
--warning-bg-low-active: var(--color-yellow-200); --warning-bg-low-hover: var(--color-yellow-200);
--warning-bg-low-active: var(--color-yellow-300);
--default-bg: var(--color-neutral-800); --default-bg: var(--color-neutral-700);
--default-bg-high-hover: var(--color-neutral-700); --default-bg-hover: var(--color-neutral-600);
--default-bg-high-active: var(--color-neutral-600); --default-bg-active: var(--color-neutral-500);
--default-bg-low-hover: var(--color-neutral-100); --default-bg-low: var(--color-neutral-100);
--default-bg-low-active: var(--color-neutral-200); --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);
} }

25
packages/ui/src/styles/utility/brand.css
View File

@@ -1,35 +1,40 @@
@utility brand-info { @utility brand-info {
--brand-bg: var(--info-bg); --brand-bg: var(--info-bg);
--brand-bg-high-hover: var(--info-bg-high-hover); --brand-bg-hover: var(--info-bg-hover);
--brand-bg-high-active: var(--info-bg-high-active); --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-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active); --brand-bg-low-active: var(--info-bg-low-active);
} }
@utility brand-danger { @utility brand-danger {
--brand-bg: var(--danger-bg); --brand-bg: var(--danger-bg);
--brand-bg-high-hover: var(--danger-bg-high-hover); --brand-bg-hover: var(--danger-bg-hover);
--brand-bg-high-active: var(--danger-bg-high-active); --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-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active); --brand-bg-low-active: var(--danger-bg-low-active);
} }
@utility brand-success { @utility brand-success {
--brand-bg: var(--success-bg); --brand-bg: var(--success-bg);
--brand-bg-high-hover: var(--success-bg-high-hover); --brand-bg-hover: var(--success-bg-hover);
--brand-bg-high-active: var(--success-bg-high-active); --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-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active); --brand-bg-low-active: var(--success-bg-low-active);
} }
@utility brand-warning { @utility brand-warning {
--brand-bg: var(--warning-bg); --brand-bg: var(--warning-bg);
--brand-bg-high-hover: var(--warning-bg-high-hover); --brand-bg-hover: var(--warning-bg-hover);
--brand-bg-high-active: var(--warning-bg-high-active); --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-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active); --brand-bg-low-active: var(--warning-bg-low-active);
} }
@utility brand-default { @utility brand-default {
--brand-bg: var(--default-bg); --brand-bg: var(--default-bg);
--brand-bg-high-hover: var(--default-bg-high-hover); --brand-bg-hover: var(--default-bg-hover);
--brand-bg-high-active: var(--default-bg-high-active); --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-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active); --brand-bg-low-active: var(--default-bg-low-active);
} }

4
packages/ui/src/styles/utility/font.css Normal file
View 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) */
}

10
packages/ui/src/styles/utility/gap.css
View File

@@ -2,17 +2,17 @@
gap: calc(var(--spacing) * 0.5); gap: calc(var(--spacing) * 0.5);
} }
@utility gap-sm { @utility gap-sm {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 1);
} }
@utility gap-md { @utility gap-md {
gap: calc(var(--spacing) * 3); gap: calc(var(--spacing) * 1.5);
} }
@utility gap-lg { @utility gap-lg {
gap: calc(var(--spacing) * 4); gap: calc(var(--spacing) * 2);
} }
@utility gap-xl { @utility gap-xl {
gap: calc(var(--spacing) * 5); gap: calc(var(--spacing) * 2.5);
} }
@utility gap-2xl { @utility gap-2xl {
gap: calc(var(--spacing) * 6); gap: calc(var(--spacing) * 3);
} }

38
packages/ui/src/styles/utility/height.css
View File

@@ -1,36 +1,40 @@
@utility h-xs { @utility h-item-xs {
height: calc(var(--spacing) * 5); /* 24px minimum touch size for text line */
height: 24px;
} }
@utility h-sm { @utility h-item-sm {
height: calc(var(--spacing) * 6); /* 30px save space for most used size */
height: 30px;
} }
@utility h-md { @utility h-item-md {
height: calc(var(--spacing) * 8); /* 34px most used size */
height: 34px;
} }
@utility h-lg { @utility h-item-lg {
height: calc(var(--spacing) * 9); /* 46px maximum touch size without waste */
height: 46px;
} }
@utility h-xl { @utility h-item-xl {
height: calc(var(--spacing) * 11); height: calc(var(--spacing) * 16);
} }
@utility h-2xl { @utility h-item-2xl {
height: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16);
} }
@utility h-inline-xs { @utility h-inline-xs {
height: var(--text-xs--line-height); height: calc(var(--text-xs--line-height) * var(--text-xs));
} }
@utility h-inline-sm { @utility h-inline-sm {
height: var(--text-sm--line-height); height: calc(var(--text-sm--line-height) * var(--text-sm));
} }
@utility h-inline-md { @utility h-inline-md {
height: var(--text-base--line-height); height: calc(var(--text-md--line-height) * var(--text-md));
} }
@utility h-inline-lg { @utility h-inline-lg {
height: var(--text-lg--line-height); height: calc(var(--text-lg--line-height) * var(--text-lg));
} }
@utility h-inline-xl { @utility h-inline-xl {
height: var(--text-xl--line-height); height: calc(var(--text-xl--line-height) * var(--text-xl));
} }
@utility h-inline-2xl { @utility h-inline-2xl {
height: var(--text-2xl--line-height); height: calc(var(--text-2xl--line-height) * var(--text-2xl));
} }

2
packages/ui/src/styles/utility/margin.css
View File

@@ -1,7 +1,7 @@
@utility mr-none { @utility mr-none {
margin-right: 0; margin-right: 0;
} }
@utility mr-xs { @utility mr-sm {
margin-right: calc(var(--spacing) * 1); margin-right: calc(var(--spacing) * 1);
} }
@utility mr-sm { @utility mr-sm {

28
packages/ui/src/styles/utility/padding.css
View File

@@ -1,36 +1,40 @@
@utility px-none {
padding-inline: 0px;
}
@utility px-xs { @utility px-xs {
padding-inline: calc(var(--spacing) * 2); padding-inline: 6px;
} }
@utility px-sm { @utility px-sm {
padding-inline: calc(var(--spacing) * 3); padding-inline: 8px;
} }
@utility px-md { @utility px-md {
padding-inline: calc(var(--spacing) * 4); padding-inline: 10px;
} }
@utility px-lg { @utility px-lg {
padding-inline: calc(var(--spacing) * 5); padding-inline: 12px;
} }
@utility px-xl { @utility px-xl {
padding-inline: calc(var(--spacing) * 6); padding-inline: var(--radius-xl);
} }
@utility px-2xl { @utility px-2xl {
padding-inline: calc(var(--spacing) * 8); padding-inline: var(--radius-2xl);
} }
@utility py-xs { @utility py-xs {
padding-block: calc(var(--spacing) * 1); /* 2px correspond to rounded-xs */
padding-block: var(--radius-xs);
} }
@utility py-sm { @utility py-sm {
padding-block: calc(var(--spacing) * 2); padding-block: var(--radius-sm);
} }
@utility py-md { @utility py-md {
padding-block: calc(var(--spacing) * 3); padding-block: var(--radius-md);
} }
@utility py-lg { @utility py-lg {
padding-block: calc(var(--spacing) * 4); padding-block: var(--radius-lg);
} }
@utility py-xl { @utility py-xl {
padding-block: calc(var(--spacing) * 5); padding-block: var(--radius-xl);
} }
@utility py-2xl { @utility py-2xl {
padding-block: calc(var(--spacing) * 6); padding-block: var(--radius-2xl);
} }

4
packages/ui/src/styles/utility/skin.css
View File

@@ -1,13 +1,9 @@
@utility light { @utility light {
--base-fg: var(--color-gray-950); --base-fg: var(--color-gray-950);
--base-bg: var(--color-white); --base-bg: var(--color-white);
--base-fg-subtext: var(--color-gray-500);
--base-bg-subtext: var(--color-gray-200);
} }
@utility dark { @utility dark {
--base-fg: var(--color-gray-50); --base-fg: var(--color-gray-50);
--base-bg: var(--color-black); --base-bg: var(--color-black);
--base-fg-subtext: var(--color-gray-400);
--base-bg-subtext: var(--color-gray-600);
} }

89
packages/ui/src/styles/utility/variant.css
View File

@@ -3,8 +3,8 @@
--filled-fg-hover: var(--color-white); --filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white); --filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg); --filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-high-hover); --filled-bg-hover: var(--brand-bg-hover);
--filled-bg-active: var(--brand-bg-high-active); --filled-bg-active: var(--brand-bg-active);
--filled-border-color: var(--color-transparent); --filled-border-color: var(--color-transparent);
color: var(--filled-fg); color: var(--filled-fg);
@@ -61,7 +61,7 @@
--subtle-fg: var(--brand-bg); --subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg); --subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: 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-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active); --subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent); --subtle-border-color: var(--color-transparent);
@@ -86,31 +86,60 @@
} }
} }
@utility variant-filled-disabled { @utility variant-ghost {
color: var(--filled-fg); --ghost-fg: var(--brand-bg);
background-color: var(--filled-bg); --ghost-fg-hover: var(--brand-bg);
border-color: var(--filled-border-color); --ghost-fg-active: var(--brand-bg);
filter: grayscale(50%); --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 { &:hover {
color: var(--filled-fg); background-color: var(--ghost-bg-hover);
background-color: var(--filled-bg); color: var(--ghost-fg-hover);
border-color: var(--filled-border-color);
filter: grayscale(50%);
} }
&:active { &:active {
color: var(--filled-fg); background-color: var(--ghost-bg-active);
background-color: var(--filled-bg); color: var(--ghost-fg-active);
border-color: var(--filled-border-color); }
filter: grayscale(50%);
&: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 { &:focus-visible {
color: var(--filled-fg); color: var(--filled-fg);
background-color: var(--filled-bg); background-color: var(--filled-bg);
border-color: var(--filled-border-color); border-color: var(--filled-border-color);
filter: grayscale(50%); filter: grayscale(100%);
} }
} }
@@ -142,30 +171,30 @@
} }
} }
@utility variant-subtle-disabled { @utility variant-ghost-disabled {
color: var(--subtle-fg); color: var(--ghost-fg);
background-color: var(--subtle-bg); background-color: var(--ghost-bg);
border-color: var(--subtle-border-color); border-color: var(--ghost-border-color);
filter: grayscale(50%); filter: grayscale(50%);
&:hover { &:hover {
color: var(--subtle-fg); color: var(--ghost-fg);
background-color: var(--subtle-bg); background-color: var(--ghost-bg);
border-color: var(--subtle-border-color); border-color: var(--ghost-border-color);
filter: grayscale(50%); filter: grayscale(50%);
} }
&:active { &:active {
color: var(--subtle-fg); color: var(--ghost-fg);
background-color: var(--subtle-bg); background-color: var(--ghost-bg);
border-color: var(--subtle-border-color); border-color: var(--ghost-border-color);
filter: grayscale(50%); filter: grayscale(50%);
} }
&:focus-visible { &:focus-visible {
color: var(--subtle-fg); color: var(--ghost-fg);
background-color: var(--subtle-bg); background-color: var(--ghost-bg);
border-color: var(--subtle-border-color); border-color: var(--ghost-border-color);
filter: grayscale(50%); filter: grayscale(50%);
} }
} }

39
packages/ui/src/styles/utility/width.css
View File

@@ -1,36 +1,41 @@
@utility w-xs { @utility w-item-xs {
width: calc(var(--spacing) * 5); /* 24px minimum touch size for text line */
}
@utility w-sm {
width: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6);
} }
@utility w-md { @utility w-item-sm {
width: calc(var(--spacing) * 8); /* 30px save space for most used size */
width: calc(var(--spacing) * 7.5);
} }
@utility w-lg { @utility w-item-md {
width: calc(var(--spacing) * 9); /* 34px most used size */
width: calc(var(--spacing) * 8.5);
} }
@utility w-xl { @utility w-item-lg {
width: calc(var(--spacing) * 11); /* 46px maximum touch size without waste */
width: calc(var(--spacing) * 11.5);
} }
@utility w-2xl { @utility w-item-xl {
width: calc(var(--spacing) * 16); width: calc(var(--spacing) * 16);
} }
@utility w-item-2xl {
width: calc(var(--spacing) * 16);
}
/* ---------------------------------------------------- */
@utility w-inline-xs { @utility w-inline-xs {
width: var(--text-xs--line-height); width: calc(var(--text-xs--line-height) * var(--text-xs));
} }
@utility w-inline-sm { @utility w-inline-sm {
width: var(--text-sm--line-height); width: calc(var(--text-sm--line-height) * var(--text-sm));
} }
@utility w-inline-md { @utility w-inline-md {
width: var(--text-base--line-height); width: calc(var(--text-md--line-height) * var(--text-md));
} }
@utility w-inline-lg { @utility w-inline-lg {
width: var(--text-lg--line-height); width: calc(var(--text-lg--line-height) * var(--text-lg));
} }
@utility w-inline-xl { @utility w-inline-xl {
width: var(--text-xl--line-height); width: calc(var(--text-xl--line-height) * var(--text-xl));
} }
@utility w-inline-2xl { @utility w-inline-2xl {
width: var(--text-2xl--line-height); width: calc(var(--text-2xl--line-height) * var(--text-2xl));
} }

13
packages/ui/tsconfig.json
View File

@@ -1,16 +1,13 @@
{ {
"extends": "@tsconfig/vite-react/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"baseUrl": ".", "module": "ESNext",
"paths": { "moduleResolution": "bundler",
"@/*": ["src/*"] "jsx": "react-jsx",
},
"outDir": "./dist", "outDir": "./dist",
"rootDir": "./src", "rootDir": "./src",
"declaration": true, // 补充：生成类型声明文件，供其他子包引用 "declaration": true,
"skipLibCheck": true, // 补充：跳过第三方库类型校验，避免冲突、提升速度 "types": ["node", "react"]
"types": ["vite/client"]
}, },
"include": ["src"], "include": ["src"],
"exclude": [ "exclude": [

78
packages/ui/vite.config.ts
View File

@@ -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"],
},
};
});

1270
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

31
tsconfig.base.json Normal file
View File

@@ -0,0 +1,31 @@
{
"compilerOptions": {
"module": "nodenext",
"target": "es2022",
"lib": ["es2022", "dom"],
"jsx": "react-jsx",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noErrorTruncation": false,
"allowJs": true,
"skipLibCheck": true,
"allowImportingTsExtensions": true,
"noUncheckedSideEffectImports": true,
"paths": {}
},
"exclude": [
"**/.*/",
"**/build",
"**/build-tests",
"**/node_modules",
"docs/export",
"**/dist",
"**/example",
"**/scripts",
"**/stories",
"**/vite.config.ts"
]
}