@cssui/react 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/icons/react/add_circle.js +23 -19
- package/dist/icons/react/add_circle.js.map +1 -1
- package/dist/icons/react/arrow_back.js +17 -19
- package/dist/icons/react/arrow_back.js.map +1 -1
- package/dist/icons/react/arrow_drop_down.js.map +1 -1
- package/dist/icons/react/arrow_forward.js.map +1 -1
- package/dist/icons/react/calendar_month.js.map +1 -1
- package/dist/icons/react/check.js +17 -19
- package/dist/icons/react/check.js.map +1 -1
- package/dist/icons/react/chevron_right.js.map +1 -1
- package/dist/icons/react/close.js +17 -19
- package/dist/icons/react/close.js.map +1 -1
- package/dist/icons/react/config.js +25 -19
- package/dist/icons/react/config.js.map +1 -1
- package/dist/icons/react/dark_mode.js +17 -19
- package/dist/icons/react/dark_mode.js.map +1 -1
- package/dist/icons/react/do_not_disturb_on.js +7 -1
- package/dist/icons/react/do_not_disturb_on.js.map +1 -1
- package/dist/icons/react/error.js +17 -19
- package/dist/icons/react/error.js.map +1 -1
- package/dist/icons/react/home.js +20 -22
- package/dist/icons/react/home.js.map +1 -1
- package/dist/icons/react/info.js +23 -19
- package/dist/icons/react/info.js.map +1 -1
- package/dist/icons/react/logo_Block.js +23 -19
- package/dist/icons/react/logo_Block.js.map +1 -1
- package/dist/icons/react/logo_Horizontal.js +7 -1
- package/dist/icons/react/logo_Horizontal.js.map +1 -1
- package/dist/icons/react/looks_3.js +17 -19
- package/dist/icons/react/looks_3.js.map +1 -1
- package/dist/icons/react/looks_one.js +23 -19
- package/dist/icons/react/looks_one.js.map +1 -1
- package/dist/icons/react/looks_two.js +17 -19
- package/dist/icons/react/looks_two.js.map +1 -1
- package/dist/icons/react/menu.js +17 -19
- package/dist/icons/react/menu.js.map +1 -1
- package/dist/icons/react/menu_open.js +17 -19
- package/dist/icons/react/menu_open.js.map +1 -1
- package/dist/icons/react/more_horiz.js +20 -22
- package/dist/icons/react/more_horiz.js.map +1 -1
- package/dist/icons/react/schedule.js +17 -19
- package/dist/icons/react/schedule.js.map +1 -1
- package/dist/icons/react/search.js +23 -19
- package/dist/icons/react/search.js.map +1 -1
- package/dist/icons/react/sunny.js +17 -19
- package/dist/icons/react/sunny.js.map +1 -1
- package/dist/icons/react/warning.js +23 -19
- package/dist/icons/react/warning.js.map +1 -1
- package/dist/style.css +2 -0
- package/dist/theme.css +183 -0
- package/package.json +3 -1
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
|
|
4
|
-
const Schedule = memo(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
);
|
|
4
|
+
const Schedule = memo(({ size = 24, width, height, className = "", ...props }) => {
|
|
5
|
+
const finalWidth = width ?? size;
|
|
6
|
+
const finalHeight = height ?? size;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
width: finalWidth,
|
|
11
|
+
height: finalHeight,
|
|
12
|
+
viewBox: "0 -960 960 960",
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
+
className: `css-icon ${className}`.trim(),
|
|
16
|
+
...props,
|
|
17
|
+
children: /* @__PURE__ */ jsx("path", { d: "m627-287 45-45-159-160v-201h-60v225l174 181ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155t86-127.5Q252-817 325-848.5T480-880q82 0 155 31.5t127.5 86Q817-708 848.5-635T880-480q0 82-31.5 155t-86 127.5Q708-143 635-111.5T480-80Zm0-400Zm0 340q140 0 240-100t100-240q0-140-100-240T480-820q-140 0-240 100T140-480q0 140 100 240t240 100Z" })
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
});
|
|
23
21
|
Schedule.displayName = "Schedule";
|
|
24
22
|
|
|
25
23
|
export { Schedule as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schedule.js","sources":["../../../../icons/react/schedule.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface ScheduleProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * schedule 图标组件\n */\nconst Schedule = memo(
|
|
1
|
+
{"version":3,"file":"schedule.js","sources":["../../../../icons/react/schedule.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface ScheduleProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * schedule 图标组件\n */\nconst Schedule = memo(({ size = 24, width, height, className = '', ...props }: ScheduleProps) => {\n const finalWidth = width ?? size\n const finalHeight = height ?? size\n\n return (\n <svg\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={`css-icon ${className}`.trim()}\n {...props}\n >\n <path d=\"m627-287 45-45-159-160v-201h-60v225l174 181ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155t86-127.5Q252-817 325-848.5T480-880q82 0 155 31.5t127.5 86Q817-708 848.5-635T880-480q0 82-31.5 155t-86 127.5Q708-143 635-111.5T480-80Zm0-400Zm0 340q140 0 240-100t100-240q0-140-100-240T480-820q-140 0-240 100T140-480q0 140 100 240t240 100Z\" />\n </svg>\n )\n})\n\nSchedule.displayName = 'Schedule'\n\nexport default Schedule\n"],"names":[],"mappings":";;;AAYA,MAAM,QAAA,GAAW,IAAA,CAAK,CAAC,EAAE,IAAA,GAAO,EAAA,EAAI,KAAA,EAAO,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,KAAA,EAAM,KAAqB;AAC/F,EAAA,MAAM,aAAa,KAAA,IAAS,IAAA;AAC5B,EAAA,MAAM,cAAc,MAAA,IAAU,IAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAQ,gBAAA;AAAA,MACR,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kWAAA,EAAmW;AAAA;AAAA,GAC7W;AAEJ,CAAC;AAED,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
|
|
4
|
-
const Search = memo(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
const Search = memo(({ size = 24, width, height, className = "", ...props }) => {
|
|
5
|
+
const finalWidth = width ?? size;
|
|
6
|
+
const finalHeight = height ?? size;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
width: finalWidth,
|
|
11
|
+
height: finalHeight,
|
|
12
|
+
viewBox: "0 0 15 15",
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
+
className: `css-icon ${className}`.trim(),
|
|
16
|
+
...props,
|
|
17
|
+
children: /* @__PURE__ */ jsx(
|
|
18
|
+
"path",
|
|
19
|
+
{
|
|
20
|
+
d: "M2.77344 8.08594C3.5026 8.8151 4.38802 9.17969 5.42969 9.17969C6.47135 9.17969 7.35677 8.8151 8.08594 8.08594C8.8151 7.35677 9.17969 6.47135 9.17969 5.42969C9.17969 4.38802 8.8151 3.5026 8.08594 2.77344C7.35677 2.04427 6.47135 1.67969 5.42969 1.67969C4.38802 1.67969 3.5026 2.04427 2.77344 2.77344C2.04427 3.5026 1.67969 4.38802 1.67969 5.42969C1.67969 6.47135 2.04427 7.35677 2.77344 8.08594ZM10.4297 9.17969L14.5703 13.3203L13.3203 14.5703L9.17969 10.4297V9.76562L8.94531 9.53125C7.95573 10.3906 6.78385 10.8203 5.42969 10.8203C3.91927 10.8203 2.63021 10.2995 1.5625 9.25781C0.520833 8.21615 0 6.9401 0 5.42969C0 3.91927 0.520833 2.64323 1.5625 1.60156C2.63021 0.533854 3.91927 0 5.42969 0C6.9401 0 8.21615 0.533854 9.25781 1.60156C10.2995 2.64323 10.8203 3.91927 10.8203 5.42969C10.8203 5.97656 10.6901 6.60156 10.4297 7.30469C10.1693 7.98177 9.86979 8.52865 9.53125 8.94531L9.76562 9.17969H10.4297Z",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
}
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
});
|
|
23
27
|
Search.displayName = "Search";
|
|
24
28
|
|
|
25
29
|
export { Search as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sources":["../../../../icons/react/search.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface SearchProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * search 图标组件\n */\nconst Search = memo(
|
|
1
|
+
{"version":3,"file":"search.js","sources":["../../../../icons/react/search.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface SearchProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * search 图标组件\n */\nconst Search = memo(({ size = 24, width, height, className = '', ...props }: SearchProps) => {\n const finalWidth = width ?? size\n const finalHeight = height ?? size\n\n return (\n <svg\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 0 15 15\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={`css-icon ${className}`.trim()}\n {...props}\n >\n <path\n d=\"M2.77344 8.08594C3.5026 8.8151 4.38802 9.17969 5.42969 9.17969C6.47135 9.17969 7.35677 8.8151 8.08594 8.08594C8.8151 7.35677 9.17969 6.47135 9.17969 5.42969C9.17969 4.38802 8.8151 3.5026 8.08594 2.77344C7.35677 2.04427 6.47135 1.67969 5.42969 1.67969C4.38802 1.67969 3.5026 2.04427 2.77344 2.77344C2.04427 3.5026 1.67969 4.38802 1.67969 5.42969C1.67969 6.47135 2.04427 7.35677 2.77344 8.08594ZM10.4297 9.17969L14.5703 13.3203L13.3203 14.5703L9.17969 10.4297V9.76562L8.94531 9.53125C7.95573 10.3906 6.78385 10.8203 5.42969 10.8203C3.91927 10.8203 2.63021 10.2995 1.5625 9.25781C0.520833 8.21615 0 6.9401 0 5.42969C0 3.91927 0.520833 2.64323 1.5625 1.60156C2.63021 0.533854 3.91927 0 5.42969 0C6.9401 0 8.21615 0.533854 9.25781 1.60156C10.2995 2.64323 10.8203 3.91927 10.8203 5.42969C10.8203 5.97656 10.6901 6.60156 10.4297 7.30469C10.1693 7.98177 9.86979 8.52865 9.53125 8.94531L9.76562 9.17969H10.4297Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n})\n\nSearch.displayName = 'Search'\n\nexport default Search\n"],"names":[],"mappings":";;;AAYA,MAAM,MAAA,GAAS,IAAA,CAAK,CAAC,EAAE,IAAA,GAAO,EAAA,EAAI,KAAA,EAAO,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,KAAA,EAAM,KAAmB;AAC3F,EAAA,MAAM,aAAa,KAAA,IAAS,IAAA;AAC5B,EAAA,MAAM,cAAc,MAAA,IAAU,IAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAE,w4BAAA;AAAA,UACF,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
|
|
4
|
-
const Sunny = memo(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
);
|
|
4
|
+
const Sunny = memo(({ size = 24, width, height, className = "", ...props }) => {
|
|
5
|
+
const finalWidth = width ?? size;
|
|
6
|
+
const finalHeight = height ?? size;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
width: finalWidth,
|
|
11
|
+
height: finalHeight,
|
|
12
|
+
viewBox: "0 -960 960 960",
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
+
className: `css-icon ${className}`.trim(),
|
|
16
|
+
...props,
|
|
17
|
+
children: /* @__PURE__ */ jsx("path", { d: "M450-770v-150h60v150h-60Zm256 106-42-42 106-107 42 43-106 106Zm64 214v-60h150v60H770ZM450-40v-150h60v150h-60ZM253-665 148-770l42-42 106 106-43 41Zm518 517L664-254l41-41 108 104-42 43ZM40-450v-60h150v60H40Zm151 302-43-42 105-105 22 20 22 21-106 106Zm119-162q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Z" })
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
});
|
|
23
21
|
Sunny.displayName = "Sunny";
|
|
24
22
|
|
|
25
23
|
export { Sunny as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sunny.js","sources":["../../../../icons/react/sunny.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface SunnyProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * sunny 图标组件\n */\nconst Sunny = memo(
|
|
1
|
+
{"version":3,"file":"sunny.js","sources":["../../../../icons/react/sunny.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface SunnyProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * sunny 图标组件\n */\nconst Sunny = memo(({ size = 24, width, height, className = '', ...props }: SunnyProps) => {\n const finalWidth = width ?? size\n const finalHeight = height ?? size\n\n return (\n <svg\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={`css-icon ${className}`.trim()}\n {...props}\n >\n <path d=\"M450-770v-150h60v150h-60Zm256 106-42-42 106-107 42 43-106 106Zm64 214v-60h150v60H770ZM450-40v-150h60v150h-60ZM253-665 148-770l42-42 106 106-43 41Zm518 517L664-254l41-41 108 104-42 43ZM40-450v-60h150v60H40Zm151 302-43-42 105-105 22 20 22 21-106 106Zm119-162q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Z\" />\n </svg>\n )\n})\n\nSunny.displayName = 'Sunny'\n\nexport default Sunny\n"],"names":[],"mappings":";;;AAYA,MAAM,KAAA,GAAQ,IAAA,CAAK,CAAC,EAAE,IAAA,GAAO,EAAA,EAAI,KAAA,EAAO,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,KAAA,EAAM,KAAkB;AACzF,EAAA,MAAM,aAAa,KAAA,IAAS,IAAA;AAC5B,EAAA,MAAM,cAAc,MAAA,IAAU,IAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAQ,gBAAA;AAAA,MACR,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uVAAA,EAAwV;AAAA;AAAA,GAClW;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
|
|
4
|
-
const Warning = memo(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
const Warning = memo(({ size = 24, width, height, className = "", ...props }) => {
|
|
5
|
+
const finalWidth = width ?? size;
|
|
6
|
+
const finalHeight = height ?? size;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
width: finalWidth,
|
|
11
|
+
height: finalHeight,
|
|
12
|
+
viewBox: "0 0 24 24",
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
+
className: `css-icon ${className}`.trim(),
|
|
16
|
+
...props,
|
|
17
|
+
children: /* @__PURE__ */ jsx(
|
|
18
|
+
"path",
|
|
19
|
+
{
|
|
20
|
+
d: "M12.9844 14.0156V9.98438H11.0156V14.0156H12.9844ZM12.9844 18V15.9844H11.0156V18H12.9844ZM0.984375 21L12 2.01562L23.0156 21H0.984375Z",
|
|
21
|
+
fill: "currentColor"
|
|
22
|
+
}
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
});
|
|
23
27
|
Warning.displayName = "Warning";
|
|
24
28
|
|
|
25
29
|
export { Warning as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"warning.js","sources":["../../../../icons/react/warning.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface WarningProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * warning 图标组件\n */\nconst Warning = memo(
|
|
1
|
+
{"version":3,"file":"warning.js","sources":["../../../../icons/react/warning.tsx"],"sourcesContent":["import { SVGProps, memo } from 'react'\n\nexport interface WarningProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n /**\n * 图标尺寸\n */\n size?: number | string\n}\n\n/**\n * warning 图标组件\n */\nconst Warning = memo(({ size = 24, width, height, className = '', ...props }: WarningProps) => {\n const finalWidth = width ?? size\n const finalHeight = height ?? size\n\n return (\n <svg\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={`css-icon ${className}`.trim()}\n {...props}\n >\n <path\n d=\"M12.9844 14.0156V9.98438H11.0156V14.0156H12.9844ZM12.9844 18V15.9844H11.0156V18H12.9844ZM0.984375 21L12 2.01562L23.0156 21H0.984375Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n})\n\nWarning.displayName = 'Warning'\n\nexport default Warning\n"],"names":[],"mappings":";;;AAYA,MAAM,OAAA,GAAU,IAAA,CAAK,CAAC,EAAE,IAAA,GAAO,EAAA,EAAI,KAAA,EAAO,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,KAAA,EAAM,KAAoB;AAC7F,EAAA,MAAM,aAAa,KAAA,IAAS,IAAA;AAC5B,EAAA,MAAM,cAAc,MAAA,IAAU,IAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAE,sIAAA;AAAA,UACF,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,GACF;AAEJ,CAAC;AAED,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}
|
package/dist/style.css
ADDED
package/dist/theme.css
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 周生生 UI 设计系统 - CSS 变量
|
|
3
|
+
* 将 TypeScript 设计令牌转换为 CSS 变量
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* 品牌色 */
|
|
10
|
+
--color-primary: #9e8a57;
|
|
11
|
+
--color-primary-golden-01: var(--color-primary);
|
|
12
|
+
--color-primary-golden-02: color-mix(in srgb, var(--color-primary) 70%, transparent);
|
|
13
|
+
--color-primary-golden-03: color-mix(in srgb, var(--color-primary) 50%, transparent);
|
|
14
|
+
--color-primary-golden-04: color-mix(in srgb, var(--color-primary) 30%, transparent);
|
|
15
|
+
--color-primary-golden-05: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
|
16
|
+
--color-primary-golden-06: color-mix(in srgb, var(--color-dark) 35%, var(--color-primary));
|
|
17
|
+
--color-primary-golden-07: color-mix(in srgb, var(--color-primary) 30%, #ffffff);
|
|
18
|
+
/* 深色 */
|
|
19
|
+
--color-dark: #333333;
|
|
20
|
+
--color-dark-01: color-mix(in srgb, var(--color-dark) 10%, #ffffff);
|
|
21
|
+
--color-dark-02: color-mix(in srgb, var(--color-dark) 10%, transparent);
|
|
22
|
+
--color-dark-03: color-mix(in srgb, var(--color-dark) 30%, #ffffff);
|
|
23
|
+
--color-dark-04: var(--color-dark);
|
|
24
|
+
--color-dark-05: color-mix(in srgb, var(--color-dark) 50%, #ffffff);
|
|
25
|
+
|
|
26
|
+
/* 状态色 */
|
|
27
|
+
--color-warning: #ffa826;
|
|
28
|
+
--color-error: #ff0000;
|
|
29
|
+
--color-background: #ffffff;
|
|
30
|
+
--color-overlay: rgba(51, 51, 51, 0.5);
|
|
31
|
+
|
|
32
|
+
/* 间距 */
|
|
33
|
+
--spacing-0: 0;
|
|
34
|
+
--spacing-0-5: 0.125rem;
|
|
35
|
+
--spacing-1: 0.25rem;
|
|
36
|
+
--spacing-2: 0.5rem;
|
|
37
|
+
--spacing-3: 0.75rem;
|
|
38
|
+
--spacing-4: 1rem;
|
|
39
|
+
--spacing-5: 1.25rem;
|
|
40
|
+
--spacing-6: 1.5rem;
|
|
41
|
+
--spacing-8: 2rem;
|
|
42
|
+
--spacing-10: 2.5rem;
|
|
43
|
+
--spacing-12: 3rem;
|
|
44
|
+
--spacing-16: 4rem;
|
|
45
|
+
--spacing-20: 5rem;
|
|
46
|
+
--spacing-24: 6rem;
|
|
47
|
+
|
|
48
|
+
/* 字体 */
|
|
49
|
+
--font-family-base: 'Noto Sans TC', sans-serif;
|
|
50
|
+
--font-family-mono: 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
|
|
51
|
+
|
|
52
|
+
--font-size-caption: 12px;
|
|
53
|
+
--font-size-xs: 12px;
|
|
54
|
+
--font-size-sm: 14px;
|
|
55
|
+
--font-size-body: 14px;
|
|
56
|
+
--font-size-base: 14px;
|
|
57
|
+
--font-size-h4: 16px;
|
|
58
|
+
--font-size-lg: 28px;
|
|
59
|
+
--font-size-h3: 20px;
|
|
60
|
+
--font-size-xl: 20px;
|
|
61
|
+
--font-size-h2: 24px;
|
|
62
|
+
--font-size-2xl: 24px;
|
|
63
|
+
--font-size-h1: 36px;
|
|
64
|
+
--font-size-3xl: 36px;
|
|
65
|
+
--font-size-4xl: 36px;
|
|
66
|
+
|
|
67
|
+
--font-weight-regular: 400;
|
|
68
|
+
--font-weight-normal: 400;
|
|
69
|
+
--font-weight-medium: 500;
|
|
70
|
+
--font-weight-semibold: 500;
|
|
71
|
+
--font-weight-bold: 700;
|
|
72
|
+
|
|
73
|
+
--line-height-caption: 18px;
|
|
74
|
+
--line-height-body: 20px;
|
|
75
|
+
--line-height-normal: 20px;
|
|
76
|
+
--line-height-h4: 24px;
|
|
77
|
+
--line-height-tight: 24px;
|
|
78
|
+
--line-height-h3: 30px;
|
|
79
|
+
--line-height-relaxed: 30px;
|
|
80
|
+
--line-height-h2: 36px;
|
|
81
|
+
--line-height-h1: 54px;
|
|
82
|
+
|
|
83
|
+
/* 圆角 */
|
|
84
|
+
--radius-none: 0;
|
|
85
|
+
--radius-sm: 0.125rem;
|
|
86
|
+
--radius-base: 0.25rem;
|
|
87
|
+
--radius-md: 0.375rem;
|
|
88
|
+
--radius-lg: 0.5rem;
|
|
89
|
+
--radius-xl: 0.75rem;
|
|
90
|
+
--radius-2xl: 1rem;
|
|
91
|
+
--radius-full: 9999px;
|
|
92
|
+
|
|
93
|
+
/* 阴影 */
|
|
94
|
+
--shadow-none: none;
|
|
95
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
96
|
+
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
97
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
98
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
99
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
100
|
+
|
|
101
|
+
/* 过渡 */
|
|
102
|
+
--transition-duration-150: 150ms;
|
|
103
|
+
--transition-duration-200: 200ms;
|
|
104
|
+
--transition-duration-300: 300ms;
|
|
105
|
+
--transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
106
|
+
|
|
107
|
+
/* Z-index */
|
|
108
|
+
--z-dropdown: 1000;
|
|
109
|
+
--z-sticky: 1020;
|
|
110
|
+
--z-fixed: 1030;
|
|
111
|
+
--z-modal-backdrop: 1040;
|
|
112
|
+
--z-modal: 1050;
|
|
113
|
+
--z-popover: 1060;
|
|
114
|
+
--z-tooltip: 1070;
|
|
115
|
+
|
|
116
|
+
/* Button Dimensions */
|
|
117
|
+
--button-sm-height: 36px;
|
|
118
|
+
--button-sm-font-size: 14px;
|
|
119
|
+
|
|
120
|
+
--button-md-height: 46px;
|
|
121
|
+
--button-md-font-size: 20px;
|
|
122
|
+
--button-md-line-height: 30px;
|
|
123
|
+
|
|
124
|
+
--button-lg-height: 58px;
|
|
125
|
+
--button-lg-font-size: 28px;
|
|
126
|
+
--button-lg-line-height: 42px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
body {
|
|
130
|
+
font-family: var(--font-family-base);
|
|
131
|
+
font-size: var(--font-size-body);
|
|
132
|
+
font-weight: var(--font-weight-regular);
|
|
133
|
+
line-height: var(--line-height-body);
|
|
134
|
+
background-color: var(--color-background);
|
|
135
|
+
color: var(--color-dark-04);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
h1,
|
|
139
|
+
.typography-h1 {
|
|
140
|
+
font-family: var(--font-family-base);
|
|
141
|
+
font-size: var(--font-size-h1);
|
|
142
|
+
font-weight: var(--font-weight-bold);
|
|
143
|
+
line-height: var(--line-height-h1);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
h2,
|
|
147
|
+
.typography-h2 {
|
|
148
|
+
font-family: var(--font-family-base);
|
|
149
|
+
font-size: var(--font-size-h2);
|
|
150
|
+
font-weight: var(--font-weight-bold);
|
|
151
|
+
line-height: var(--line-height-h2);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
h3,
|
|
155
|
+
.typography-h3 {
|
|
156
|
+
font-family: var(--font-family-base);
|
|
157
|
+
font-size: var(--font-size-h3);
|
|
158
|
+
font-weight: var(--font-weight-bold);
|
|
159
|
+
line-height: var(--line-height-h3);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
h4,
|
|
163
|
+
.typography-h4 {
|
|
164
|
+
font-family: var(--font-family-base);
|
|
165
|
+
font-size: var(--font-size-h4);
|
|
166
|
+
font-weight: var(--font-weight-bold);
|
|
167
|
+
line-height: var(--line-height-h4);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.typography-body,
|
|
171
|
+
.typography-body-regular {
|
|
172
|
+
font-family: var(--font-family-base);
|
|
173
|
+
font-size: var(--font-size-body);
|
|
174
|
+
font-weight: var(--font-weight-regular);
|
|
175
|
+
line-height: var(--line-height-body);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.typography-caption {
|
|
179
|
+
font-family: var(--font-family-base);
|
|
180
|
+
font-size: var(--font-size-caption);
|
|
181
|
+
font-weight: var(--font-weight-regular);
|
|
182
|
+
line-height: var(--line-height-caption);
|
|
183
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cssui/react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "周生生 UI React 组件库",
|
|
5
5
|
"main": "./dist/src/index.js",
|
|
6
6
|
"module": "./dist/src/index.js",
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
"import": "./dist/src/index.js",
|
|
12
12
|
"default": "./dist/src/index.js"
|
|
13
13
|
},
|
|
14
|
+
"./style.css": "./dist/style.css",
|
|
15
|
+
"./theme.css": "./dist/theme.css",
|
|
14
16
|
"./*": {
|
|
15
17
|
"types": "./dist/*/index.d.ts",
|
|
16
18
|
"import": "./dist/*/index.js",
|