@bouku/core 0.0.1

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.
Files changed (112) hide show
  1. package/dist/assets/icons/chevron-left.svg +6 -0
  2. package/dist/assets/icons/chevron-right.svg +6 -0
  3. package/dist/assets/icons/copy.svg +6 -0
  4. package/dist/assets/icons/spinner.svg +6 -0
  5. package/dist/assets/styles/button.css +76 -0
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +18 -0
  8. package/dist/ui/button/_.d.ts +2 -0
  9. package/dist/ui/button/_.js +10 -0
  10. package/dist/ui/button/copy.d.ts +6 -0
  11. package/dist/ui/button/copy.js +16 -0
  12. package/dist/ui/button/normal.d.ts +11 -0
  13. package/dist/ui/button/normal.js +48 -0
  14. package/dist/ui/date/_.d.ts +1 -0
  15. package/dist/ui/date/_.js +8 -0
  16. package/dist/ui/date/time-ago.d.ts +7 -0
  17. package/dist/ui/date/time-ago.js +13 -0
  18. package/dist/ui/dropdown/normal.d.ts +10 -0
  19. package/dist/ui/dropdown/normal.js +22 -0
  20. package/dist/ui/fade/_.d.ts +1 -0
  21. package/dist/ui/fade/_.js +8 -0
  22. package/dist/ui/fade/circle.d.ts +10 -0
  23. package/dist/ui/fade/circle.js +8 -0
  24. package/dist/ui/heading/_.d.ts +2 -0
  25. package/dist/ui/heading/_.js +10 -0
  26. package/dist/ui/heading/normal.d.ts +24 -0
  27. package/dist/ui/heading/normal.js +26 -0
  28. package/dist/ui/heading/page.d.ts +25 -0
  29. package/dist/ui/heading/page.js +26 -0
  30. package/dist/ui/index.d.ts +19 -0
  31. package/dist/ui/index.js +45 -0
  32. package/dist/ui/information/_.d.ts +1 -0
  33. package/dist/ui/information/_.js +8 -0
  34. package/dist/ui/information/card.d.ts +7 -0
  35. package/dist/ui/information/card.js +20 -0
  36. package/dist/ui/layout/_.d.ts +2 -0
  37. package/dist/ui/layout/_.js +10 -0
  38. package/dist/ui/layout/absolute.d.ts +9 -0
  39. package/dist/ui/layout/absolute.js +12 -0
  40. package/dist/ui/layout/fade.d.ts +7 -0
  41. package/dist/ui/layout/fade.js +20 -0
  42. package/dist/ui/layout/flex.d.ts +17 -0
  43. package/dist/ui/layout/flex.js +49 -0
  44. package/dist/ui/layout/footer.d.ts +15 -0
  45. package/dist/ui/layout/footer.js +13 -0
  46. package/dist/ui/layout/media-row.d.ts +15 -0
  47. package/dist/ui/layout/media-row.js +11 -0
  48. package/dist/ui/layout/rnd.d.ts +10 -0
  49. package/dist/ui/layout/rnd.js +32 -0
  50. package/dist/ui/layout/scroll-box.d.ts +14 -0
  51. package/dist/ui/layout/scroll-box.js +11 -0
  52. package/dist/ui/layout/section.d.ts +15 -0
  53. package/dist/ui/layout/section.js +19 -0
  54. package/dist/ui/layout/separator.d.ts +3 -0
  55. package/dist/ui/layout/separator.js +8 -0
  56. package/dist/ui/link/_.d.ts +1 -0
  57. package/dist/ui/link/_.js +8 -0
  58. package/dist/ui/link/tab.d.ts +22 -0
  59. package/dist/ui/link/tab.js +30 -0
  60. package/dist/ui/list/index.d.ts +2 -0
  61. package/dist/ui/list/index.js +10 -0
  62. package/dist/ui/list/item.d.ts +9 -0
  63. package/dist/ui/list/item.js +9 -0
  64. package/dist/ui/list/search-bar.d.ts +14 -0
  65. package/dist/ui/list/search-bar.js +33 -0
  66. package/dist/ui/list/variants/bullet.d.ts +9 -0
  67. package/dist/ui/list/variants/bullet.js +21 -0
  68. package/dist/ui/list/variants/number.d.ts +10 -0
  69. package/dist/ui/list/variants/number.js +23 -0
  70. package/dist/ui/pagination/index.d.ts +9 -0
  71. package/dist/ui/pagination/index.js +21 -0
  72. package/dist/ui/progress/_.d.ts +1 -0
  73. package/dist/ui/progress/_.js +8 -0
  74. package/dist/ui/progress/bar.d.ts +4 -0
  75. package/dist/ui/progress/bar.js +12 -0
  76. package/dist/ui/table/_.d.ts +1 -0
  77. package/dist/ui/table/_.js +8 -0
  78. package/dist/ui/table/normal.d.ts +7 -0
  79. package/dist/ui/table/normal.js +20 -0
  80. package/dist/ui/text/_.d.ts +2 -0
  81. package/dist/ui/text/_.js +10 -0
  82. package/dist/ui/text/badge.d.ts +18 -0
  83. package/dist/ui/text/badge.js +42 -0
  84. package/dist/ui/text/input.d.ts +39 -0
  85. package/dist/ui/text/input.js +50 -0
  86. package/dist/utils/functions/_.d.ts +2 -0
  87. package/dist/utils/functions/_.js +18 -0
  88. package/dist/utils/functions/element.d.ts +3 -0
  89. package/dist/utils/functions/element.js +7 -0
  90. package/dist/utils/functions/text.d.ts +2 -0
  91. package/dist/utils/functions/text.js +36 -0
  92. package/dist/utils/hooks/_.d.ts +5 -0
  93. package/dist/utils/hooks/_.js +21 -0
  94. package/dist/utils/hooks/clock.d.ts +8 -0
  95. package/dist/utils/hooks/clock.js +28 -0
  96. package/dist/utils/hooks/element.d.ts +13 -0
  97. package/dist/utils/hooks/element.js +27 -0
  98. package/dist/utils/hooks/pagination.d.ts +36 -0
  99. package/dist/utils/hooks/pagination.js +82 -0
  100. package/dist/utils/hooks/router.d.ts +5 -0
  101. package/dist/utils/hooks/router.js +15 -0
  102. package/dist/utils/hooks/state.d.ts +26 -0
  103. package/dist/utils/hooks/state.js +48 -0
  104. package/dist/utils/index.d.ts +3 -0
  105. package/dist/utils/index.js +19 -0
  106. package/dist/utils/types/_.d.ts +2 -0
  107. package/dist/utils/types/_.js +18 -0
  108. package/dist/utils/types/element.d.ts +20 -0
  109. package/dist/utils/types/element.js +3 -0
  110. package/dist/utils/types/state.d.ts +2 -0
  111. package/dist/utils/types/state.js +2 -0
  112. package/package.json +42 -0
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
2
+ <path
3
+ d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"
4
+ fill="currentColor"
5
+ />
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
2
+ <path
3
+ d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"
4
+ fill="currentColor"
5
+ />
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
2
+ <path
3
+ d="M288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448L480 448C515.3 448 544 419.3 544 384L544 183.4C544 166 536.9 149.3 524.3 137.2L466.6 81.8C454.7 70.4 438.8 64 422.3 64L288 64zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L352 496L352 512L160 512L160 256L176 256L176 192L160 192z"
4
+ fill="currentColor"
5
+ />
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
2
+ <path
3
+ d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"
4
+ fill="currentColor"
5
+ />
6
+ </svg>
@@ -0,0 +1,76 @@
1
+ .test-button::before {
2
+ content: "";
3
+ display: block;
4
+ position: absolute;
5
+ top: 0;
6
+ left: 0;
7
+ width: 100%;
8
+ height: 100%;
9
+ background:
10
+ linear-gradient(
11
+ 180deg,
12
+ rgba(20, 60, 140, 0) 0%,
13
+ rgba(20, 60, 140, .32) 100%
14
+ ),
15
+ rgba(60, 120, 255, .12);
16
+ border-radius: inherit;
17
+ box-shadow: inset 0 0 12px #7fb0ff3d;
18
+ transition: .2s opacity cubic-bezier(.6, .6, 0, 1);
19
+ z-index: -1;
20
+ }
21
+
22
+ .test-button::after {
23
+ content: "";
24
+ display: block;
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ background:
31
+ linear-gradient(
32
+ 180deg,
33
+ rgba(20, 60, 140, 0) 0%,
34
+ rgba(20, 60, 140, .42) 100%
35
+ ),
36
+ rgba(60, 120, 255, .24);
37
+ border-radius: inherit;
38
+ box-shadow: inset 0 0 12px #7fb0ff70;
39
+ transition: .2s opacity cubic-bezier(.6, .6, 0, 1);
40
+ opacity: 0;
41
+ z-index: -1;
42
+ }
43
+
44
+ .test-button-border {
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 100%;
50
+ border-radius: inherit;
51
+ z-index: -1;
52
+ }
53
+
54
+ .test-button-border::before {
55
+ content: "";
56
+ position: absolute;
57
+ inset: 0;
58
+ padding: 1px;
59
+ background:
60
+ linear-gradient(
61
+ 180deg,
62
+ rgba(180, 210, 255, .24) 0%,
63
+ rgba(180, 210, 255, 0) 100%
64
+ ),
65
+ linear-gradient(
66
+ 0deg,
67
+ rgba(180, 210, 255, .32),
68
+ rgba(180, 210, 255, .32)
69
+ );
70
+ border-radius: inherit;
71
+ mask:
72
+ linear-gradient(#fff 0 0) content-box,
73
+ linear-gradient(#fff 0 0);
74
+ mask-composite: exclude;
75
+ pointer-events: none;
76
+ }
@@ -0,0 +1,2 @@
1
+ export * from "./ui";
2
+ export * from "./utils";
package/dist/index.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ui"), exports);
18
+ __exportStar(require("./utils"), exports);
@@ -0,0 +1,2 @@
1
+ export { default as Button } from "./normal";
2
+ export { default as CopyButton } from "./copy";
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CopyButton = exports.Button = void 0;
7
+ var normal_1 = require("./normal");
8
+ Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
9
+ var copy_1 = require("./copy");
10
+ Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return __importDefault(copy_1).default; } });
@@ -0,0 +1,6 @@
1
+ import { ButtonProps } from "./normal";
2
+ type Props = ButtonProps & {
3
+ value: string;
4
+ };
5
+ export default function CopyButton({ value, action, children, ...props }: Props): import("react").JSX.Element;
6
+ export {};
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = CopyButton;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const normal_1 = require("./normal");
9
+ const copy_svg_1 = __importDefault(require("../../assets/icons/copy.svg"));
10
+ function CopyButton({ value, action, children, ...props }) {
11
+ const submit = async () => {
12
+ await navigator.clipboard.writeText(value);
13
+ await action?.();
14
+ };
15
+ return ((0, jsx_runtime_1.jsxs)(normal_1.Button, { action: submit, ...props, children: [(0, jsx_runtime_1.jsx)(copy_svg_1.default, {}), children] }));
16
+ }
@@ -0,0 +1,11 @@
1
+ import type { ReactNode } from "react";
2
+ import type { Component } from "../../utils";
3
+ export type ButtonProps = Component & {
4
+ size?: "xs" | "sm" | "md" | "lg";
5
+ variant?: "surface" | "accent" | "outline" | "ghost" | "error" | "future";
6
+ icon?: ReactNode;
7
+ action?: () => void;
8
+ disabled?: boolean;
9
+ };
10
+ export declare function Button({ style, size, variant, icon, children, disabled, action }: ButtonProps): import("react").JSX.Element;
11
+ export default Button;
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Button = Button;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
9
+ const style_1 = require("@bouko/style");
10
+ const tailwind_variants_1 = require("tailwind-variants");
11
+ const spinner_svg_1 = __importDefault(require("../../assets/icons/spinner.svg"));
12
+ function Button({ style, size, variant, icon, children, disabled, action }) {
13
+ const [isLoading, setLoading] = (0, react_1.useState)(false);
14
+ const handleClick = async () => {
15
+ if (action) {
16
+ setLoading(true);
17
+ await action();
18
+ setLoading(false);
19
+ }
20
+ };
21
+ return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)(styles({ size, variant }), style), onClick: handleClick, disabled: disabled || isLoading, children: [icon && isLoading
22
+ ? (0, jsx_runtime_1.jsx)(spinner_svg_1.default, { className: "animate-spin" })
23
+ : icon, children] }));
24
+ }
25
+ const styles = (0, tailwind_variants_1.tv)({
26
+ base: "relative flex justify-center items-center border outline-none rounded font-semibold duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
27
+ defaultVariants: {
28
+ size: "md",
29
+ variant: "surface"
30
+ },
31
+ variants: {
32
+ size: {
33
+ xs: "gap-1 px-2 py-2 text-sm rounded-full",
34
+ sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
35
+ md: "gap-2 px-4 py-2 text-xs sm:text-sm",
36
+ lg: "gap-3 px-5 py-3 text-base sm:text-lg"
37
+ },
38
+ variant: {
39
+ surface: "bg-surface border-border text-primary",
40
+ accent: "bg-accent border-accent-dark text-background",
41
+ outline: "bg-transparent border-accent text-accent",
42
+ ghost: "bg-transparent border-transparent text-primary",
43
+ error: "bg-error border-error-dark text-background",
44
+ future: "backdrop-blur-sm test-button"
45
+ }
46
+ }
47
+ });
48
+ exports.default = Button;
@@ -0,0 +1 @@
1
+ export { default as TimeAgo } from "./time-ago";
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.TimeAgo = void 0;
7
+ var time_ago_1 = require("./time-ago");
8
+ Object.defineProperty(exports, "TimeAgo", { enumerable: true, get: function () { return __importDefault(time_ago_1).default; } });
@@ -0,0 +1,7 @@
1
+ type Props = {
2
+ style?: string;
3
+ prefix?: string;
4
+ date?: Date | null | undefined;
5
+ };
6
+ export default function TimeAgo({ style, prefix, date }: Props): import("react").JSX.Element | null;
7
+ export {};
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = TimeAgo;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_time_ago_1 = __importDefault(require("react-time-ago"));
9
+ function TimeAgo({ style, prefix, date }) {
10
+ if (!date)
11
+ return null;
12
+ return ((0, jsx_runtime_1.jsxs)("span", { className: style, children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: prefix }), (0, jsx_runtime_1.jsx)(react_time_ago_1.default, { date: date, timeStyle: "mini-minute-now" })] }));
13
+ }
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from "react";
2
+ type Option = {
3
+ label: ReactNode;
4
+ action: () => void;
5
+ };
6
+ export default function Dropdown({ options, children }: {
7
+ options: Option[];
8
+ children: ReactNode;
9
+ }): import("react").JSX.Element;
10
+ export {};
@@ -0,0 +1,22 @@
1
+ "use client";
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.default = Dropdown;
5
+ const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const react_1 = require("react");
7
+ const framer_motion_1 = require("framer-motion");
8
+ function Dropdown({ options, children }) {
9
+ const [isOpen, setOpen] = (0, react_1.useState)(false);
10
+ const boom = (action) => {
11
+ action();
12
+ setOpen(false);
13
+ };
14
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles.container, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => setOpen(true), children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) })] }));
15
+ }
16
+ const styles = {
17
+ container: "relative shrink-0",
18
+ subcontainer: "flex flex-col gap-1 w-full",
19
+ label: "text-xs text-slate-600",
20
+ trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
21
+ dropdown: "absolute mt-2 z-50 flex flex-col items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
22
+ };
@@ -0,0 +1 @@
1
+ export { default as CircleFade } from "./circle";
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CircleFade = void 0;
7
+ var circle_1 = require("./circle");
8
+ Object.defineProperty(exports, "CircleFade", { enumerable: true, get: function () { return __importDefault(circle_1).default; } });
@@ -0,0 +1,10 @@
1
+ type Props = {
2
+ className?: string;
3
+ style?: {
4
+ top?: string;
5
+ left?: string;
6
+ transform?: string;
7
+ };
8
+ };
9
+ export default function CircleFade({ className, style }: Props): import("react").JSX.Element;
10
+ export {};
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = CircleFade;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const style_1 = require("@bouko/style");
6
+ function CircleFade({ className, style }) {
7
+ return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)("absolute size-24 bg-radial from-background", className), style: style }));
8
+ }
@@ -0,0 +1,2 @@
1
+ export { default as Heading } from "./normal";
2
+ export { default as PageHeading } from "./page";
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.PageHeading = exports.Heading = void 0;
7
+ var normal_1 = require("./normal");
8
+ Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
9
+ var page_1 = require("./page");
10
+ Object.defineProperty(exports, "PageHeading", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
@@ -0,0 +1,24 @@
1
+ import { ReactNode } from "react";
2
+ type Props = {
3
+ badge?: string;
4
+ image?: string;
5
+ title: ReactNode;
6
+ subtitle?: ReactNode;
7
+ style?: Styles;
8
+ };
9
+ type Styles = {
10
+ container?: string;
11
+ badge?: string;
12
+ title?: string;
13
+ subtitle?: string;
14
+ };
15
+ /**
16
+ * Text heading with badge, title, subtitle.
17
+ *
18
+ * @param {string} badge - Little note above the title (optional).
19
+ * @param {ReactNode} title - Main title content.
20
+ * @param {ReactNode} subtitle - Subtitle content (optional).
21
+ * @param {Styles} style - Additional styles (optional).
22
+ **/
23
+ export default function Heading({ badge, image, title, subtitle, style }: Props): import("react").JSX.Element;
24
+ export {};
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = Heading;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const style_1 = require("@bouko/style");
6
+ const flex_1 = require("../layout/flex");
7
+ const badge_1 = require("../text/badge");
8
+ /**
9
+ * Text heading with badge, title, subtitle.
10
+ *
11
+ * @param {string} badge - Little note above the title (optional).
12
+ * @param {ReactNode} title - Main title content.
13
+ * @param {ReactNode} subtitle - Subtitle content (optional).
14
+ * @param {Styles} style - Additional styles (optional).
15
+ **/
16
+ function Heading({ badge, image, title, subtitle, style = {} }) {
17
+ const styles = (0, style_1.mergeStyles)(base, style);
18
+ return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(badge_1.Badge, { style: styles.badge, children: badge }), image && (0, jsx_runtime_1.jsx)("img", { className: styles.logo, src: image, alt: "Logo" }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.title, children: title }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.subtitle, children: subtitle })] }));
19
+ }
20
+ const base = {
21
+ container: "items-center",
22
+ badge: "mb-2",
23
+ logo: "mb-5 w-12",
24
+ title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
25
+ subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
26
+ };
@@ -0,0 +1,25 @@
1
+ import { ReactNode } from "react";
2
+ type Props = {
3
+ style?: Styles;
4
+ badge?: string;
5
+ icon?: ReactNode;
6
+ title: string;
7
+ subtitle?: string;
8
+ };
9
+ type Styles = {
10
+ container?: string;
11
+ badge?: string;
12
+ title?: string;
13
+ subtitle?: string;
14
+ };
15
+ /**
16
+ * Text heading with badge, title, subtitle.
17
+ *
18
+ * @param {Styles} style - Additional styles. (optional)
19
+ * @param {string} badge - Little note above the title. (optional)
20
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
21
+ * @param {string} title - Main title content.
22
+ * @param {string} subtitle - Subtitle content. (optional)
23
+ **/
24
+ export default function PageHeading({ style, badge, icon, title, subtitle }: Props): import("react").JSX.Element;
25
+ export {};
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = PageHeading;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const style_1 = require("@bouko/style");
6
+ const flex_1 = require("../layout/flex");
7
+ const badge_1 = require("../text/badge");
8
+ /**
9
+ * Text heading with badge, title, subtitle.
10
+ *
11
+ * @param {Styles} style - Additional styles. (optional)
12
+ * @param {string} badge - Little note above the title. (optional)
13
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
14
+ * @param {string} title - Main title content.
15
+ * @param {string} subtitle - Subtitle content. (optional)
16
+ **/
17
+ function PageHeading({ style = {}, badge, icon, title, subtitle }) {
18
+ const styles = (0, style_1.mergeStyles)(base, style);
19
+ return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(badge_1.Badge, { style: styles.badge, children: badge }), (0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: styles.title, children: [icon, title] }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: styles.subtitle, children: subtitle })] }));
20
+ }
21
+ const base = {
22
+ container: "w-full items-center font-mono",
23
+ badge: "mb-2",
24
+ title: "items-center gap-2 mb-3 text-4xl sm:text-5xl 2xl:text-6xl text-center font-bold text-primary",
25
+ subtitle: "items-center gap-2 text-sm sm:text-base 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
26
+ };
@@ -0,0 +1,19 @@
1
+ export { default as Separator } from "./layout/separator";
2
+ export { default as FadeBox } from "./layout/fade";
3
+ export { default as AbsoluteBox } from "./layout/absolute";
4
+ export * from "./layout/flex";
5
+ export * from "./layout/_";
6
+ export * from "./heading/_";
7
+ export * from "./button/_";
8
+ export { default as Pagination } from "./pagination";
9
+ export { default as Section } from "./layout/section";
10
+ export { default as Dropdown } from "./dropdown/normal";
11
+ export * from "./fade/_";
12
+ export * from "./list";
13
+ export * from "./layout/media-row";
14
+ export * from "./layout/scroll-box";
15
+ export * from "./date/_";
16
+ export * from "./information/_";
17
+ export * from "./progress/_";
18
+ export * from "./text/_";
19
+ export * from "./table/_";
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ var __importDefault = (this && this.__importDefault) || function (mod) {
17
+ return (mod && mod.__esModule) ? mod : { "default": mod };
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ exports.Dropdown = exports.Section = exports.Pagination = exports.AbsoluteBox = exports.FadeBox = exports.Separator = void 0;
21
+ var separator_1 = require("./layout/separator");
22
+ Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });
23
+ var fade_1 = require("./layout/fade");
24
+ Object.defineProperty(exports, "FadeBox", { enumerable: true, get: function () { return __importDefault(fade_1).default; } });
25
+ var absolute_1 = require("./layout/absolute");
26
+ Object.defineProperty(exports, "AbsoluteBox", { enumerable: true, get: function () { return __importDefault(absolute_1).default; } });
27
+ __exportStar(require("./layout/flex"), exports);
28
+ __exportStar(require("./layout/_"), exports);
29
+ __exportStar(require("./heading/_"), exports);
30
+ __exportStar(require("./button/_"), exports);
31
+ var pagination_1 = require("./pagination");
32
+ Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
33
+ var section_1 = require("./layout/section");
34
+ Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(section_1).default; } });
35
+ var normal_1 = require("./dropdown/normal");
36
+ Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
37
+ __exportStar(require("./fade/_"), exports);
38
+ __exportStar(require("./list"), exports);
39
+ __exportStar(require("./layout/media-row"), exports);
40
+ __exportStar(require("./layout/scroll-box"), exports);
41
+ __exportStar(require("./date/_"), exports);
42
+ __exportStar(require("./information/_"), exports);
43
+ __exportStar(require("./progress/_"), exports);
44
+ __exportStar(require("./text/_"), exports);
45
+ __exportStar(require("./table/_"), exports);
@@ -0,0 +1 @@
1
+ export { default as Card } from "./card";
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Card = void 0;
7
+ var card_1 = require("./card");
8
+ Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
@@ -0,0 +1,7 @@
1
+ type Props = {
2
+ label: string;
3
+ value: string | number;
4
+ note?: string;
5
+ };
6
+ export declare const Card: ({ label, value, note }: Props) => import("react").JSX.Element;
7
+ export default Card;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Card = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const flex_1 = require("../layout/flex");
6
+ const Card = ({ label, value, note }) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.card, children: [(0, jsx_runtime_1.jsx)("span", { className: s.label, children: label }), (0, jsx_runtime_1.jsx)("span", { className: s.value, children: formatValue(value) }), (0, jsx_runtime_1.jsx)("span", { className: s.note, children: note })] }));
7
+ exports.Card = Card;
8
+ const formatValue = (x) => {
9
+ if (typeof x === "string")
10
+ return x;
11
+ else if (typeof x === "number")
12
+ return x.toLocaleString("en-US");
13
+ };
14
+ const s = {
15
+ card: "gap-2 flex-1 p-5 bg-surface border border-border-light rounded-md shadow hover:brightness-120 duration-200",
16
+ label: "text-sm font-mono tracking-wide text-primary-dark uppercase",
17
+ value: "text-5xl font-bold",
18
+ note: "text-xs text-primary-dark"
19
+ };
20
+ exports.default = exports.Card;
@@ -0,0 +1,2 @@
1
+ export { default as RnD } from "./rnd";
2
+ export { default as Footer } from "./footer";
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Footer = exports.RnD = void 0;
7
+ var rnd_1 = require("./rnd");
8
+ Object.defineProperty(exports, "RnD", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
9
+ var footer_1 = require("./footer");
10
+ Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return __importDefault(footer_1).default; } });
@@ -0,0 +1,9 @@
1
+ import { ReactNode, RefObject } from "react";
2
+ type Props = {
3
+ pos?: string;
4
+ style?: string;
5
+ ref?: RefObject<HTMLDivElement | null>;
6
+ children: ReactNode;
7
+ };
8
+ export default function AbsoluteBox({ pos, style, ref, children }: Props): import("react").JSX.Element;
9
+ export {};
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = AbsoluteBox;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const style_1 = require("@bouko/style");
6
+ function AbsoluteBox({ pos, style, ref, children }) {
7
+ return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.container, pos), ref: ref, children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.subcontainer, style), children: children }) }));
8
+ }
9
+ const styles = {
10
+ container: "absolute",
11
+ subcontainer: "relative w-full h-full"
12
+ };
@@ -0,0 +1,7 @@
1
+ import type { Component } from "../../utils/types/element";
2
+ type Props = Component & {
3
+ direction?: "up" | "left" | "down";
4
+ gradient?: string;
5
+ };
6
+ export declare function FadeBox({ style, direction, gradient, children }: Props): import("react").JSX.Element;
7
+ export default FadeBox;