@bouku/core 0.2.1 → 0.2.3

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 (136) hide show
  1. package/dist/components/button/_.d.ts +1 -0
  2. package/dist/components/button/_.js +3 -1
  3. package/dist/components/button/actions.d.ts +14 -0
  4. package/dist/components/button/actions.js +8 -0
  5. package/dist/components/button/upload.js +1 -1
  6. package/dist/utils/types/element.d.ts +5 -0
  7. package/package.json +7 -2
  8. package/dist/assets/styles/button.css +0 -76
  9. package/dist/components/accordion/index.d.ts +0 -6
  10. package/dist/components/accordion/index.js +0 -12
  11. package/dist/components/accordion/tab.d.ts +0 -4
  12. package/dist/components/accordion/tab.js +0 -35
  13. package/dist/components/dropdown/normal.d.ts +0 -10
  14. package/dist/components/dropdown/normal.js +0 -22
  15. package/dist/components/fade/_.d.ts +0 -1
  16. package/dist/components/fade/_.js +0 -8
  17. package/dist/components/fade/circle.d.ts +0 -10
  18. package/dist/components/fade/circle.js +0 -8
  19. package/dist/components/heading/_.d.ts +0 -2
  20. package/dist/components/heading/_.js +0 -10
  21. package/dist/components/heading/normal.d.ts +0 -24
  22. package/dist/components/heading/normal.js +0 -26
  23. package/dist/components/heading/page.d.ts +0 -25
  24. package/dist/components/heading/page.js +0 -26
  25. package/dist/components/information/_.d.ts +0 -1
  26. package/dist/components/information/_.js +0 -8
  27. package/dist/components/information/card.d.ts +0 -8
  28. package/dist/components/information/card.js +0 -22
  29. package/dist/components/layout/absolute.d.ts +0 -9
  30. package/dist/components/layout/absolute.js +0 -12
  31. package/dist/components/layout/fade.d.ts +0 -7
  32. package/dist/components/layout/fade.js +0 -20
  33. package/dist/components/layout/flex.d.ts +0 -17
  34. package/dist/components/layout/flex.js +0 -49
  35. package/dist/components/layout/media-row.d.ts +0 -15
  36. package/dist/components/layout/media-row.js +0 -11
  37. package/dist/components/layout/rnd.d.ts +0 -10
  38. package/dist/components/layout/rnd.js +0 -32
  39. package/dist/components/layout/scroll-box.d.ts +0 -14
  40. package/dist/components/layout/scroll-box.js +0 -11
  41. package/dist/components/pagination/index.d.ts +0 -9
  42. package/dist/components/pagination/index.js +0 -21
  43. package/dist/components/progress/_.d.ts +0 -1
  44. package/dist/components/progress/_.js +0 -8
  45. package/dist/components/progress/bar.d.ts +0 -4
  46. package/dist/components/progress/bar.js +0 -12
  47. package/dist/components/table/_.d.ts +0 -1
  48. package/dist/components/table/_.js +0 -8
  49. package/dist/components/table/header.d.ts +0 -10
  50. package/dist/components/table/header.js +0 -20
  51. package/dist/components/table/index.d.ts +0 -15
  52. package/dist/components/table/index.js +0 -37
  53. package/dist/components/table/normal.d.ts +0 -7
  54. package/dist/components/table/normal.js +0 -20
  55. package/dist/components/table/row.d.ts +0 -22
  56. package/dist/components/table/row.js +0 -40
  57. package/dist/components/table/sorter.d.ts +0 -10
  58. package/dist/components/table/sorter.js +0 -53
  59. package/dist/ui/button/_.d.ts +0 -2
  60. package/dist/ui/button/_.js +0 -10
  61. package/dist/ui/button/copy.d.ts +0 -6
  62. package/dist/ui/button/copy.js +0 -16
  63. package/dist/ui/button/normal.d.ts +0 -11
  64. package/dist/ui/button/normal.js +0 -48
  65. package/dist/ui/date/_.d.ts +0 -1
  66. package/dist/ui/date/_.js +0 -8
  67. package/dist/ui/date/time-ago.d.ts +0 -7
  68. package/dist/ui/date/time-ago.js +0 -13
  69. package/dist/ui/dropdown/normal.d.ts +0 -10
  70. package/dist/ui/dropdown/normal.js +0 -22
  71. package/dist/ui/fade/_.d.ts +0 -1
  72. package/dist/ui/fade/_.js +0 -8
  73. package/dist/ui/fade/circle.d.ts +0 -10
  74. package/dist/ui/fade/circle.js +0 -8
  75. package/dist/ui/heading/_.d.ts +0 -2
  76. package/dist/ui/heading/_.js +0 -10
  77. package/dist/ui/heading/normal.d.ts +0 -24
  78. package/dist/ui/heading/normal.js +0 -26
  79. package/dist/ui/heading/page.d.ts +0 -25
  80. package/dist/ui/heading/page.js +0 -26
  81. package/dist/ui/index.d.ts +0 -19
  82. package/dist/ui/index.js +0 -45
  83. package/dist/ui/information/_.d.ts +0 -1
  84. package/dist/ui/information/_.js +0 -8
  85. package/dist/ui/information/card.d.ts +0 -7
  86. package/dist/ui/information/card.js +0 -20
  87. package/dist/ui/layout/_.d.ts +0 -2
  88. package/dist/ui/layout/_.js +0 -10
  89. package/dist/ui/layout/absolute.d.ts +0 -9
  90. package/dist/ui/layout/absolute.js +0 -12
  91. package/dist/ui/layout/fade.d.ts +0 -7
  92. package/dist/ui/layout/fade.js +0 -20
  93. package/dist/ui/layout/flex.d.ts +0 -17
  94. package/dist/ui/layout/flex.js +0 -49
  95. package/dist/ui/layout/footer.d.ts +0 -15
  96. package/dist/ui/layout/footer.js +0 -13
  97. package/dist/ui/layout/media-row.d.ts +0 -15
  98. package/dist/ui/layout/media-row.js +0 -11
  99. package/dist/ui/layout/rnd.d.ts +0 -10
  100. package/dist/ui/layout/rnd.js +0 -32
  101. package/dist/ui/layout/scroll-box.d.ts +0 -14
  102. package/dist/ui/layout/scroll-box.js +0 -11
  103. package/dist/ui/layout/section.d.ts +0 -15
  104. package/dist/ui/layout/section.js +0 -19
  105. package/dist/ui/layout/separator.d.ts +0 -3
  106. package/dist/ui/layout/separator.js +0 -8
  107. package/dist/ui/link/_.d.ts +0 -1
  108. package/dist/ui/link/_.js +0 -8
  109. package/dist/ui/link/tab.d.ts +0 -22
  110. package/dist/ui/link/tab.js +0 -30
  111. package/dist/ui/list/index.d.ts +0 -2
  112. package/dist/ui/list/index.js +0 -10
  113. package/dist/ui/list/item.d.ts +0 -9
  114. package/dist/ui/list/item.js +0 -9
  115. package/dist/ui/list/search-bar.d.ts +0 -14
  116. package/dist/ui/list/search-bar.js +0 -33
  117. package/dist/ui/list/variants/bullet.d.ts +0 -9
  118. package/dist/ui/list/variants/bullet.js +0 -21
  119. package/dist/ui/list/variants/number.d.ts +0 -10
  120. package/dist/ui/list/variants/number.js +0 -23
  121. package/dist/ui/pagination/index.d.ts +0 -9
  122. package/dist/ui/pagination/index.js +0 -21
  123. package/dist/ui/progress/_.d.ts +0 -1
  124. package/dist/ui/progress/_.js +0 -8
  125. package/dist/ui/progress/bar.d.ts +0 -4
  126. package/dist/ui/progress/bar.js +0 -12
  127. package/dist/ui/table/_.d.ts +0 -1
  128. package/dist/ui/table/_.js +0 -8
  129. package/dist/ui/table/normal.d.ts +0 -7
  130. package/dist/ui/table/normal.js +0 -20
  131. package/dist/ui/text/_.d.ts +0 -2
  132. package/dist/ui/text/_.js +0 -10
  133. package/dist/ui/text/badge.d.ts +0 -18
  134. package/dist/ui/text/badge.js +0 -42
  135. package/dist/ui/text/input.d.ts +0 -39
  136. package/dist/ui/text/input.js +0 -50
@@ -1,24 +0,0 @@
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 {};
@@ -1,26 +0,0 @@
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
- };
@@ -1,25 +0,0 @@
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 {};
@@ -1,26 +0,0 @@
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
- };
@@ -1,19 +0,0 @@
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/_";
package/dist/ui/index.js DELETED
@@ -1,45 +0,0 @@
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);
@@ -1 +0,0 @@
1
- export { default as Card } from "./card";
@@ -1,8 +0,0 @@
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; } });
@@ -1,7 +0,0 @@
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;
@@ -1,20 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- export { default as RnD } from "./rnd";
2
- export { default as Footer } from "./footer";
@@ -1,10 +0,0 @@
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; } });
@@ -1,9 +0,0 @@
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 {};
@@ -1,12 +0,0 @@
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
- };
@@ -1,7 +0,0 @@
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;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FadeBox = FadeBox;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const style_1 = require("@bouko/style");
6
- const tailwind_variants_1 = require("tailwind-variants");
7
- function FadeBox({ style, direction = "up", gradient, children }) {
8
- return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)("relative", style), children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles({ direction }), gradient) })] }));
9
- }
10
- const styles = (0, tailwind_variants_1.tv)({
11
- base: "absolute from-background",
12
- variants: {
13
- direction: {
14
- up: "left-0 bottom-0 w-full h-full bg-gradient-to-t",
15
- left: "top-0 right-0 w-12 h-full bg-gradient-to-l",
16
- down: "top-0 left-0 w-full h-full bg-gradient-to-b"
17
- }
18
- }
19
- });
20
- exports.default = FadeBox;
@@ -1,17 +0,0 @@
1
- import { Component, Hoverable } from "../../utils";
2
- type Props = Component & Hoverable & {
3
- center?: boolean;
4
- centerX?: boolean;
5
- centerY?: boolean;
6
- equal?: boolean;
7
- };
8
- /**
9
- * Flex containers with configurable alignment and styling.
10
- *
11
- * @param {string} style - Additional styles for container.
12
- * @param {ReactNode} children - Child elements to render inside the row.
13
- * @param {Props} opts - Variant options for styling.
14
- **/
15
- export declare function RowBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
16
- export declare function ColumnBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
17
- export {};
@@ -1,49 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.RowBox = RowBox;
4
- exports.ColumnBox = ColumnBox;
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const style_1 = require("@bouko/style");
7
- const tailwind_variants_1 = require("tailwind-variants");
8
- /**
9
- * Flex containers with configurable alignment and styling.
10
- *
11
- * @param {string} style - Additional styles for container.
12
- * @param {ReactNode} children - Child elements to render inside the row.
13
- * @param {Props} opts - Variant options for styling.
14
- **/
15
- function RowBox({ style, children, onHover, onLeave, ...opts }) {
16
- if (!children)
17
- return null;
18
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(row(opts), style), onMouseEnter: onHover, onMouseLeave: onLeave, children: children }));
19
- }
20
- function ColumnBox({ style, children, onHover, onLeave, ...opts }) {
21
- if (!children)
22
- return null;
23
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(column(opts), style), onMouseEnter: onHover, onMouseLeave: onLeave, children: children }));
24
- }
25
- /**
26
- * Styling variants for flex options.
27
- *
28
- * @param {boolean} centerX - center children horizontally
29
- * @param {boolean} centerY - center children vertically
30
- * @param {boolean} center - center children on both axis
31
- **/
32
- const row = (0, tailwind_variants_1.tv)({
33
- base: "flex",
34
- variants: {
35
- centerX: { true: "justify-center" },
36
- centerY: { true: "items-center" },
37
- center: { true: "items-center justify-center" },
38
- equal: { true: "[&>*]:flex-1 [&>*]:shrink-0" }
39
- }
40
- });
41
- const column = (0, tailwind_variants_1.tv)({
42
- base: "flex flex-col",
43
- variants: {
44
- centerX: { true: "items-center" },
45
- centerY: { true: "justify-center" },
46
- center: { true: "items-center justify-center" },
47
- equal: { true: "[&>*]:flex-1" }
48
- }
49
- });
@@ -1,15 +0,0 @@
1
- import type { ReactNode } from "react";
2
- /**
3
- * Page Footer component.
4
- *
5
- * Meant to be rendered at the bottom of pages that need
6
- * a footer. Provides controls for refreshing the page contents,
7
- * navigating the paginated results, and other actions.
8
- **/
9
- type Props = {
10
- Left: ReactNode;
11
- Center: ReactNode;
12
- Right?: ReactNode;
13
- };
14
- export declare const Footer: ({ Left, Center, Right }: Props) => import("react").JSX.Element;
15
- export default Footer;
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Footer = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const flex_1 = require("./flex");
6
- const style_1 = require("@bouko/style");
7
- const Footer = ({ Left, Center, Right }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: style, equal: true, children: [(0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "justify-start items-center", children: Left }), (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "justify-center items-center", children: Center }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center", children: Right })] }));
8
- exports.Footer = Footer;
9
- const style = (0, style_1.css)({
10
- layout: "justify-between items-center w-full gap-4 p-3 border",
11
- color: "bg-background-light border-border-dark"
12
- });
13
- exports.default = exports.Footer;
@@ -1,15 +0,0 @@
1
- import { ReactNode } from "react";
2
- type MediaRowProps = {
3
- media: string;
4
- title: string;
5
- subtitle?: ReactNode;
6
- badge?: string;
7
- styles?: {
8
- container?: string;
9
- media?: string;
10
- title?: string;
11
- subtitle?: string;
12
- };
13
- };
14
- export declare const MediaRow: ({ media, title, subtitle, badge, styles, }: MediaRowProps) => import("react").JSX.Element;
15
- export {};
@@ -1,11 +0,0 @@
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.MediaRow = void 0;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
8
- const flex_1 = require("./flex");
9
- const badge_1 = __importDefault(require("../text/badge"));
10
- const MediaRow = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "xs", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
11
- exports.MediaRow = MediaRow;
@@ -1,10 +0,0 @@
1
- type Props = {
2
- style?: string;
3
- min: number;
4
- max: number;
5
- minWidth?: number;
6
- update: (min: number, size: number) => void;
7
- children: React.ReactNode;
8
- };
9
- export default function RnD({ style, min, max, minWidth, update, children }: Props): import("react").JSX.Element;
10
- export {};
@@ -1,32 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.default = RnD;
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_rnd_1 = require("react-rnd");
7
- const style_1 = require("@bouko/style");
8
- function RnD({ style, min, max, minWidth, update, children }) {
9
- const gapSize = max - min;
10
- const handleResize = (x, width) => {
11
- update(x, width);
12
- };
13
- const handleDrag = (x) => {
14
- update(x, gapSize);
15
- };
16
- return ((0, jsx_runtime_1.jsx)(react_rnd_1.Rnd, { ...opts(min, max, minWidth), className: (0, style_1.cn)("flex! justify-center items-center overflow-hidden", style), size: { width: gapSize, height: "100%" }, position: { x: min, y: 0 }, onResize: (e, dir, ref, d, pos) => handleResize(pos.x, ref.offsetWidth), onDragStop: (e, d) => handleDrag(d.x), children: children }));
17
- }
18
- const opts = (min, max, minWidth) => ({
19
- bounds: "parent",
20
- axis: "x",
21
- minWidth: minWidth || 30,
22
- default: {
23
- x: min,
24
- y: 0,
25
- width: max - min,
26
- height: "100%"
27
- },
28
- enableResizing: {
29
- left: true,
30
- right: true
31
- }
32
- });
@@ -1,14 +0,0 @@
1
- import { Dispatch, SetStateAction } from "react";
2
- type RowProps<T> = {
3
- data: T;
4
- hovered: boolean;
5
- setHovered: Dispatch<SetStateAction<number | null>>;
6
- index: number;
7
- };
8
- type Props<T> = {
9
- style?: string;
10
- items: T[];
11
- element: React.ComponentType<RowProps<T>>;
12
- };
13
- export declare function ScrollBox<T>({ style, items, element: Row }: Props<T>): import("react").JSX.Element;
14
- export {};
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ScrollBox = ScrollBox;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const style_1 = require("@bouko/style");
7
- const flex_1 = require("./flex");
8
- function ScrollBox({ style, items, element: Row }) {
9
- const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
10
- return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: (0, style_1.cn)("grow gap-1 w-full overflow-y-auto", style), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(Row, { data: x, hovered: hoveredIndex === i, setHovered: setHoveredIndex, index: i }, i))) }));
11
- }
@@ -1,15 +0,0 @@
1
- import { ReactNode } from "react";
2
- /**
3
- * Settings Section Component.
4
- *
5
- * Generic layout wrapper used to group related settings or content
6
- * under a titled section with a visual separator for consistency.
7
- *
8
- * @param {string} title - The section title displayed at top.
9
- * @param {ReactNode} content - Rendered below the separator.
10
- **/
11
- declare const Section: ({ title, content }: {
12
- title: string;
13
- content: ReactNode;
14
- }) => import("react").JSX.Element;
15
- export default Section;
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const flex_1 = require("./flex");
5
- /**
6
- * Settings Section Component.
7
- *
8
- * Generic layout wrapper used to group related settings or content
9
- * under a titled section with a visual separator for consistency.
10
- *
11
- * @param {string} title - The section title displayed at top.
12
- * @param {ReactNode} content - Rendered below the separator.
13
- **/
14
- const Section = ({ title, content }) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [title, (0, jsx_runtime_1.jsx)("hr", { className: styles.separator }), content] }));
15
- const styles = {
16
- container: "gap-2 items-start text-primary",
17
- separator: "mb-2 w-full text-border-dark"
18
- };
19
- exports.default = Section;
@@ -1,3 +0,0 @@
1
- export default function Separator({ style }: {
2
- style?: string;
3
- }): import("react").JSX.Element;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = Separator;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const style_1 = require("@bouko/style");
6
- function Separator({ style }) {
7
- return (0, jsx_runtime_1.jsx)("hr", { className: (0, style_1.cn)("w-full text-border-dark", style) });
8
- }
@@ -1 +0,0 @@
1
- export { default as NavTab } from "./tab";
package/dist/ui/link/_.js DELETED
@@ -1,8 +0,0 @@
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.NavTab = void 0;
7
- var tab_1 = require("./tab");
8
- Object.defineProperty(exports, "NavTab", { enumerable: true, get: function () { return __importDefault(tab_1).default; } });
@@ -1,22 +0,0 @@
1
- /**
2
- * Tab Navigation Component.
3
- *
4
- * A `TabItem` wrapper that integrates with React Router.
5
- * Derives active state from the current URL and renders a
6
- * navigable tab using a router `<Link>`.
7
- *
8
- * Behavior:
9
- * - Builds a route from the provided `id` (/[id]).
10
- * - Marks tab as active when the pathname includes that route.
11
- * - Delegates all visual rendering to `TabItem`.
12
- * - Nested routes keep the parent tab active.
13
- *
14
- * @param id - Route identifier used to construct the URL.
15
- * @param props - Remaining `NavItem` props forwarded to `TabItem`.
16
- **/
17
- declare const NavTab: ({ id, ...props }: Omit<NavItem, "isActive">) => import("react").JSX.Element;
18
- type NavItem = {
19
- id: string;
20
- isActive: boolean;
21
- };
22
- export default NavTab;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const react_router_dom_1 = require("react-router-dom");
5
- /**
6
- * Tab Navigation Component.
7
- *
8
- * A `TabItem` wrapper that integrates with React Router.
9
- * Derives active state from the current URL and renders a
10
- * navigable tab using a router `<Link>`.
11
- *
12
- * Behavior:
13
- * - Builds a route from the provided `id` (/[id]).
14
- * - Marks tab as active when the pathname includes that route.
15
- * - Delegates all visual rendering to `TabItem`.
16
- * - Nested routes keep the parent tab active.
17
- *
18
- * @param id - Route identifier used to construct the URL.
19
- * @param props - Remaining `NavItem` props forwarded to `TabItem`.
20
- **/
21
- const NavTab = ({ id, ...props }) => {
22
- const location = (0, react_router_dom_1.useLocation)();
23
- const route = "/" + id;
24
- const isActive = location.pathname.includes(route);
25
- return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: route, children: (0, jsx_runtime_1.jsx)(Base, { isActive: isActive, ...props }) }));
26
- };
27
- function Base({ isActive }) {
28
- return ((0, jsx_runtime_1.jsx)("div", { children: isActive }));
29
- }
30
- exports.default = NavTab;
@@ -1,2 +0,0 @@
1
- export { default as BulletList } from "./variants/bullet";
2
- export { default as NumberList } from "./variants/number";
@@ -1,10 +0,0 @@
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.NumberList = exports.BulletList = void 0;
7
- var bullet_1 = require("./variants/bullet");
8
- Object.defineProperty(exports, "BulletList", { enumerable: true, get: function () { return __importDefault(bullet_1).default; } });
9
- var number_1 = require("./variants/number");
10
- Object.defineProperty(exports, "NumberList", { enumerable: true, get: function () { return __importDefault(number_1).default; } });
@@ -1,9 +0,0 @@
1
- import type { ReactNode } from "react";
2
- interface Props {
3
- marker: ReactNode;
4
- content: ReactNode;
5
- index: number;
6
- centerMarker?: boolean;
7
- }
8
- export default function Item({ marker, content, centerMarker, index }: Props): import("react").JSX.Element;
9
- export {};