@bouku/core 0.1.8 → 0.2.0

package/dist/components/button/_.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Button Component Entrypoint.
+
+ * Includes buttons for various purposes:
+ *
+ *  - Standard base component.
+ *  - Copy value to clipboard.
+ *  - File upload trigger.
+**/
 export { default as Button } from "./normal";
 export { default as CopyButton } from "./copy";
 export { default as FileUploader } from "./upload";

package/dist/components/button/_.js

@@ -1,4 +1,13 @@
 "use strict";
+/**
+ * Button Component Entrypoint.
+
+ * Includes buttons for various purposes:
+ *
+ *  - Standard base component.
+ *  - Copy value to clipboard.
+ *  - File upload trigger.
+**/
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,3 +19,4 @@ var copy_1 = require("./copy");
 Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return __importDefault(copy_1).default; } });
 var upload_1 = require("./upload");
 Object.defineProperty(exports, "FileUploader", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
+// 

package/dist/components/button/copy.d.ts

@@ -1,6 +1,13 @@
-import { ButtonProps } from "./normal";
-type Props = ButtonProps & {
+import { type ButtonProps } from "./normal";
+/**
+ * Copy Button Component.
+ *
+ * Built on top of the base button component,
+ * made for copying a value to the clipboard.
+ *
+ * @param value - To be copied onto clipboard.
+ * @param action - Function to execute after copy. (optional)
+**/
+export default function CopyButton({ value, action, ...props }: ButtonProps & {
     value: string;
-};
-export default function CopyButton({ value, action, children, ...props }: Props): import("react").JSX.Element;
-export {};
+}): import("react").JSX.Element;

package/dist/components/button/copy.js

@@ -5,12 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CopyButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const normal_1 = require("./normal");
+const normal_1 = __importDefault(require("./normal"));
 const copy_svg_1 = __importDefault(require("../../assets/icons/copy.svg"));
-function CopyButton({ value, action, children, ...props }) {
-    const submit = async () => {
+/**
+ * Copy Button Component.
+ *
+ * Built on top of the base button component,
+ * made for copying a value to the clipboard.
+ *
+ * @param value - To be copied onto clipboard.
+ * @param action - Function to execute after copy. (optional)
+**/
+function CopyButton({ value, action, ...props }) {
+    const copyAndContinue = async () => {
         await navigator.clipboard.writeText(value);
         await action?.();
     };
-    return ((0, jsx_runtime_1.jsxs)(normal_1.Button, { action: submit, ...props, children: [(0, jsx_runtime_1.jsx)(copy_svg_1.default, {}), children] }));
+    return ((0, jsx_runtime_1.jsx)(normal_1.default, { ...props, icon: (0, jsx_runtime_1.jsx)(copy_svg_1.default, {}), action: copyAndContinue }));
 }

package/dist/components/button/normal.d.ts

@@ -1,11 +1,26 @@
-import type { ReactNode } from "react";
-import type { Component } from "../../utils";
+import { type Component } from "../../utils";
 export type ButtonProps = Component & {
     size?: "xs" | "sm" | "md" | "lg";
-    variant?: "surface" | "accent" | "outline" | "ghost" | "error" | "future";
-    icon?: ReactNode;
+    variant?: "surface" | "accent" | "outline" | "ghost" | "error";
+    icon?: React.ReactNode;
     action?: () => void;
     disabled?: boolean;
 };
-export declare function Button({ style, size, variant, icon, children, disabled, action }: ButtonProps): import("react").JSX.Element;
+/**
+ * Base Button Component.
+ *
+ * Configurable sizes, visual variants, icons, and styles.
+ * Built-in loading-state handling where the button is
+ * disabled until the action completes. If the button has
+ * an icon, it's replaced by a spinner during execution.
+ *
+ * @param style - Additional classes applied to the button.
+ * @param size - Button size. (optional)
+ * @param variant - Button visual style. (optional)
+ * @param icon - Icon displayed before the content. (optional)
+ * @param action - Function executed when the button is clicked.
+ * @param disabled - Whether the button is disabled.
+ * @param children - Content displayed inside the button.
+**/
+export declare function Button({ style, size, variant, icon, action, disabled, children }: ButtonProps): import("react").JSX.Element;
 export default Button;

package/dist/components/button/normal.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -6,10 +7,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const style_1 = require("../../utils/functions/style");
+const utils_1 = require("../../utils");
 const tailwind_variants_1 = require("tailwind-variants");
 const spinner_svg_1 = __importDefault(require("../../assets/icons/spinner.svg"));
-function Button({ style, size, variant, icon, children, disabled, action }) {
+/**
+ * Base Button Component.
+ *
+ * Configurable sizes, visual variants, icons, and styles.
+ * Built-in loading-state handling where the button is
+ * disabled until the action completes. If the button has
+ * an icon, it's replaced by a spinner during execution.
+ *
+ * @param style - Additional classes applied to the button.
+ * @param size - Button size. (optional)
+ * @param variant - Button visual style. (optional)
+ * @param icon - Icon displayed before the content. (optional)
+ * @param action - Function executed when the button is clicked.
+ * @param disabled - Whether the button is disabled.
+ * @param children - Content displayed inside the button.
+**/
+function Button({ style, size = "md", variant = "surface", icon, action, disabled, children }) {
     const [isLoading, setLoading] = (0, react_1.useState)(false);
     const handleClick = async () => {
         if (action) {
@@ -18,16 +35,12 @@ function Button({ style, size, variant, icon, children, disabled, action }) {
             setLoading(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)(styles({ size, variant }), style), onClick: handleClick, disabled: disabled || isLoading, children: [icon && isLoading
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)(styles({ size, variant }), style), onClick: handleClick, disabled: disabled || isLoading, children: [icon && isLoading
                 ? (0, jsx_runtime_1.jsx)(spinner_svg_1.default, { className: "animate-spin" })
                 : icon, children] }));
 }
 const styles = (0, tailwind_variants_1.tv)({
     base: "relative flex justify-center items-center border outline-none rounded font-semibold duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
-    defaultVariants: {
-        size: "md",
-        variant: "surface"
-    },
     variants: {
         size: {
             xs: "gap-1 px-2 py-2 text-sm rounded-full",
@@ -40,8 +53,7 @@ const styles = (0, tailwind_variants_1.tv)({
             accent: "bg-accent border-accent-dark text-background",
             outline: "bg-transparent border-accent text-accent",
             ghost: "bg-transparent border-transparent text-primary-dark",
-            error: "bg-error border-error-dark text-background",
-            future: "backdrop-blur-sm test-button"
+            error: "bg-error border-error-dark text-background"
         }
     }
 });

package/dist/components/button/upload.d.ts

@@ -1,10 +1,9 @@
-type FileType = "csv" | "pdf";
-type Props<T> = {
-    type?: FileType | FileType[];
-    variant?: "accent" | "surface";
+import { type ButtonProps } from "./normal";
+type FileType = "csv" | "pdf" | "xlsx";
+type Props = ButtonProps & {
     url: string;
-    next?: (data: T) => void;
+    accept?: FileType | FileType[];
     oops?: (err: string) => void;
 };
-export default function FileUploader<T>({ type, variant, url, next, oops }: Props<T>): import("react").JSX.Element;
+export default function FileUploader<T>({ accept, url, action, oops, disabled, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/components/button/upload.js

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FileUploader;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const upload_svg_1 = __importDefault(require("../../assets/icons/upload.svg"));
-const core_1 = require("@bouku/core");
 const snatch_http_1 = require("snatch-http");
-function FileUploader({ type, variant = "accent", url, next, oops }) {
-    const inputRef = (0, react_1.useRef)(null);
-    const clickButton = () => inputRef.current?.click();
+const normal_1 = __importDefault(require("./normal"));
+const upload_svg_1 = __importDefault(require("../../assets/icons/upload.svg"));
+function FileUploader({ accept, url, action, oops, disabled, ...props }) {
+    const ref = (0, react_1.useRef)(null);
     const [isLoading, setLoading] = (0, react_1.useState)(false);
-    const typesArray = type ? (Array.isArray(type) ? type : [type]) : undefined;
-    const acceptAttribute = typesArray?.map((t) => `.${t}`).join(", ");
+    const fileTypes = accept ? (Array.isArray(accept) ? accept : [accept]) : undefined;
+    const acceptAttribute = fileTypes?.map((t) => `.${t}`).join(", ");
     const handleUpload = async (event) => {
         const file = event.target.files?.[0];
         if (!file)
@@ -24,7 +23,7 @@ function FileUploader({ type, variant = "accent", url, next, oops }) {
         const formData = new FormData();
         formData.append("data", file);
         const handleSuccess = (data) => {
-            next?.(data);
+            action?.();
             setLoading(false);
         };
         await (0, snatch_http_1.postApi)({
@@ -38,5 +37,5 @@ function FileUploader({ type, variant = "accent", url, next, oops }) {
         if (event.target)
             event.target.value = "";
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { variant: variant, action: clickButton, disabled: isLoading, children: [(0, jsx_runtime_1.jsx)(upload_svg_1.default, {}), "Upload ", typesArray?.length === 1 ? typesArray[0].toUpperCase() : "File"] }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", className: "hidden", accept: acceptAttribute, onChange: handleUpload })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(normal_1.default, { ...props, icon: (0, jsx_runtime_1.jsx)(upload_svg_1.default, {}), action: () => ref.current?.click(), disabled: disabled || isLoading, children: ["Upload", fileTypes?.length === 1 ? fileTypes[0].toUpperCase() : "File"] }), (0, jsx_runtime_1.jsx)("input", { type: "file", className: "hidden", accept: acceptAttribute, onChange: handleUpload, ref: ref })] }));
 }

package/dist/components/card/_.d.ts

@@ -0,0 +1,2 @@
+export { default as CalloutCard } from "./callout";
+export { default as MediaCard } from "./media";

package/dist/components/card/_.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaCard = exports.CalloutCard = void 0;
+var callout_1 = require("./callout");
+Object.defineProperty(exports, "CalloutCard", { enumerable: true, get: function () { return __importDefault(callout_1).default; } });
+var media_1 = require("./media");
+Object.defineProperty(exports, "MediaCard", { enumerable: true, get: function () { return __importDefault(media_1).default; } });

package/dist/components/card/callout.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    label: string;
+    value?: string | number | null;
+    units?: string;
+    note?: string;
+};
+export declare const Card: ({ label, value, units, note }: Props) => import("react").JSX.Element;
+export default Card;

package/dist/components/card/callout.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("../container/flex");
+const Card = ({ label, value, units, 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.jsxs)("span", { className: s.value, children: [formatValue(value), " ", units] }), (0, jsx_runtime_1.jsx)("span", { className: s.note, children: note })] }));
+exports.Card = Card;
+const formatValue = (x) => {
+    if (!x)
+        return "N/A";
+    if (typeof x === "string")
+        return x;
+    else if (typeof x === "number")
+        return x.toLocaleString("en-US");
+};
+const s = {
+    card: "gap-2 flex-1 p-5 bg-surface border border-border-light rounded-md shadow hover:brightness-120 duration-200",
+    label: "text-sm font-mono tracking-wide text-primary-dark uppercase",
+    value: "text-5xl font-bold",
+    note: "text-xs text-primary-dark"
+};
+exports.default = exports.Card;

package/dist/components/card/media.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+type MediaRowProps = {
+    media: string;
+    title: string;
+    subtitle?: ReactNode;
+    badge?: string;
+    styles?: {
+        container?: string;
+        media?: string;
+        title?: string;
+        subtitle?: string;
+    };
+};
+declare const MediaCard: ({ media, title, subtitle, badge, styles, }: MediaRowProps) => import("react").JSX.Element;
+export default MediaCard;

package/dist/components/card/media.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("../container/flex");
+const badge_1 = __importDefault(require("../text/badge"));
+const MediaCard = ({ 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 }))] })] }));
+exports.default = MediaCard;

package/dist/components/container/_.d.ts

@@ -0,0 +1,5 @@
+export { default as AbsoluteBox } from "./absolute";
+export { default as FadeBox } from "./fade";
+export { default as Rnd } from "./rnd";
+export { default as ScrollBox } from "./scroll";
+export * from "./flex";

package/dist/components/container/_.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollBox = exports.Rnd = exports.FadeBox = exports.AbsoluteBox = void 0;
+var absolute_1 = require("./absolute");
+Object.defineProperty(exports, "AbsoluteBox", { enumerable: true, get: function () { return __importDefault(absolute_1).default; } });
+var fade_1 = require("./fade");
+Object.defineProperty(exports, "FadeBox", { enumerable: true, get: function () { return __importDefault(fade_1).default; } });
+var rnd_1 = require("./rnd");
+Object.defineProperty(exports, "Rnd", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
+var scroll_1 = require("./scroll");
+Object.defineProperty(exports, "ScrollBox", { enumerable: true, get: function () { return __importDefault(scroll_1).default; } });
+__exportStar(require("./flex"), exports);

package/dist/components/container/absolute.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, RefObject } from "react";
+type Props = {
+    pos?: string;
+    style?: string;
+    ref?: RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+};
+export default function AbsoluteBox({ pos, style, ref, children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/container/absolute.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AbsoluteBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../utils/functions/style");
+function AbsoluteBox({ pos, style, ref, children }) {
+    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 }) }));
+}
+const styles = {
+    container: "absolute",
+    subcontainer: "relative w-full h-full"
+};

package/dist/components/container/fade.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from "../../utils/types/element";
+type Props = Component & {
+    direction?: "up" | "left" | "down";
+    gradient?: string;
+};
+export declare function FadeBox({ style, direction, gradient, children }: Props): import("react").JSX.Element;
+export default FadeBox;

package/dist/components/container/fade.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FadeBox = FadeBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../utils/functions/style");
+const tailwind_variants_1 = require("tailwind-variants");
+function FadeBox({ style, direction = "up", gradient, children }) {
+    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) })] }));
+}
+const styles = (0, tailwind_variants_1.tv)({
+    base: "absolute from-background",
+    variants: {
+        direction: {
+            up: "left-0 bottom-0 w-full h-full bg-gradient-to-t",
+            left: "top-0 right-0 w-12 h-full bg-gradient-to-l",
+            down: "top-0 left-0 w-full h-full bg-gradient-to-b"
+        }
+    }
+});
+exports.default = FadeBox;

package/dist/components/container/flex.d.ts

@@ -0,0 +1,17 @@
+import { Component, Hoverable } from "../../utils";
+type Props = Component & Hoverable & {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+    equal?: boolean;
+};
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @param {ReactNode} children - Child elements to render inside the row.
+ * @param {Props} opts - Variant options for styling.
+**/
+export declare function RowBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
+export declare function ColumnBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
+export {};

package/dist/components/container/flex.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowBox = RowBox;
+exports.ColumnBox = ColumnBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("../../utils/functions/style");
+const tailwind_variants_1 = require("tailwind-variants");
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @param {ReactNode} children - Child elements to render inside the row.
+ * @param {Props} opts - Variant options for styling.
+**/
+function RowBox({ style, children, onHover, onLeave, ...opts }) {
+    if (!children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(row(opts), style), onMouseEnter: onHover, onMouseLeave: onLeave, children: children }));
+}
+function ColumnBox({ style, children, onHover, onLeave, ...opts }) {
+    if (!children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(column(opts), style), onMouseEnter: onHover, onMouseLeave: onLeave, children: children }));
+}
+/**
+ * Styling variants for flex options.
+ *
+ * @param {boolean} centerX - center children horizontally
+ * @param {boolean} centerY - center children vertically
+ * @param {boolean} center - center children on both axis
+**/
+const row = (0, tailwind_variants_1.tv)({
+    base: "flex",
+    variants: {
+        centerX: { true: "justify-center" },
+        centerY: { true: "items-center" },
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1 [&>*]:shrink-0" }
+    }
+});
+const column = (0, tailwind_variants_1.tv)({
+    base: "flex flex-col",
+    variants: {
+        centerX: { true: "items-center" },
+        centerY: { true: "justify-center" },
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1" }
+    }
+});

package/dist/components/container/rnd.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    style?: string;
+    min: number;
+    max: number;
+    minWidth?: number;
+    update: (min: number, size: number) => void;
+    children: React.ReactNode;
+};
+export default function RnD({ style, min, max, minWidth, update, children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/container/rnd.js

@@ -0,0 +1,32 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RnD;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_rnd_1 = require("react-rnd");
+const style_1 = require("../../utils/functions/style");
+function RnD({ style, min, max, minWidth, update, children }) {
+    const gapSize = max - min;
+    const handleResize = (x, width) => {
+        update(x, width);
+    };
+    const handleDrag = (x) => {
+        update(x, gapSize);
+    };
+    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 }));
+}
+const opts = (min, max, minWidth) => ({
+    bounds: "parent",
+    axis: "x",
+    minWidth: minWidth || 30,
+    default: {
+        x: min,
+        y: 0,
+        width: max - min,
+        height: "100%"
+    },
+    enableResizing: {
+        left: true,
+        right: true
+    }
+});

package/dist/components/container/scroll.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
+type RowProps<T> = {
+    data: T;
+    hovered: boolean;
+    setHovered: Dispatch<SetStateAction<number | null>>;
+    index: number;
+};
+type Props<T> = {
+    style?: string;
+    items: T[];
+    element: React.ComponentType<RowProps<T>>;
+};
+export default function ScrollBox<T>({ style, items, element: Row }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/container/scroll.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ScrollBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("../../utils/functions/style");
+const flex_1 = require("./flex");
+function ScrollBox({ style, items, element: Row }) {
+    const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
+    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))) }));
+}

package/dist/components/index.d.ts

@@ -1,20 +1,9 @@
-export { default as Accordion } from "./accordion";
-export { default as Table } from "./table";
-export { default as Separator } from "./layout/separator";
-export { default as FadeBox } from "./layout/fade";
-export { default as AbsoluteBox } from "./layout/absolute";
-export * from "./layout/flex";
-export * from "./layout/_";
-export * from "./heading/_";
 export * from "./button/_";
-export { default as Pagination } from "./pagination";
-export { default as Section } from "./layout/section";
-export { default as Dropdown } from "./dropdown/normal";
-export * from "./fade/_";
-export * from "./list";
-export * from "./layout/media-row";
-export * from "./layout/scroll-box";
+export * from "./card/_";
+export * from "./container/_";
 export * from "./date/_";
-export * from "./information/_";
-export * from "./progress/_";
+export * from "./layout/_";
+export * from "./link/_";
+export * from "./list";
+export * from "./miscellaneous";
 export * from "./text/_";

package/dist/components/index.js

@@ -13,36 +13,13 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = exports.Section = exports.Pagination = exports.AbsoluteBox = exports.FadeBox = exports.Separator = exports.Table = exports.Accordion = void 0;
-var accordion_1 = require("./accordion");
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(accordion_1).default; } });
-var table_1 = require("./table");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(table_1).default; } });
-var separator_1 = require("./layout/separator");
-Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });
-var fade_1 = require("./layout/fade");
-Object.defineProperty(exports, "FadeBox", { enumerable: true, get: function () { return __importDefault(fade_1).default; } });
-var absolute_1 = require("./layout/absolute");
-Object.defineProperty(exports, "AbsoluteBox", { enumerable: true, get: function () { return __importDefault(absolute_1).default; } });
-__exportStar(require("./layout/flex"), exports);
-__exportStar(require("./layout/_"), exports);
-__exportStar(require("./heading/_"), exports);
 __exportStar(require("./button/_"), exports);
-var pagination_1 = require("./pagination");
-Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
-var section_1 = require("./layout/section");
-Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(section_1).default; } });
-var normal_1 = require("./dropdown/normal");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
-__exportStar(require("./fade/_"), exports);
-__exportStar(require("./list"), exports);
-__exportStar(require("./layout/media-row"), exports);
-__exportStar(require("./layout/scroll-box"), exports);
+__exportStar(require("./card/_"), exports);
+__exportStar(require("./container/_"), exports);
 __exportStar(require("./date/_"), exports);
-__exportStar(require("./information/_"), exports);
-__exportStar(require("./progress/_"), exports);
+__exportStar(require("./layout/_"), exports);
+__exportStar(require("./link/_"), exports);
+__exportStar(require("./list"), exports);
+__exportStar(require("./miscellaneous"), exports);
 __exportStar(require("./text/_"), exports);

package/dist/components/layout/_.d.ts

@@ -1,2 +1,3 @@
-export { default as RnD } from "./rnd";
+export { default as Section } from "./section";
 export { default as Footer } from "./footer";
+export { default as Separator } from "./separator";

package/dist/components/layout/_.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = exports.RnD = void 0;
-var rnd_1 = require("./rnd");
-Object.defineProperty(exports, "RnD", { enumerable: true, get: function () { return __importDefault(rnd_1).default; } });
+exports.Separator = exports.Footer = exports.Section = void 0;
+var section_1 = require("./section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(section_1).default; } });
 var footer_1 = require("./footer");
 Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return __importDefault(footer_1).default; } });
+var separator_1 = require("./separator");
+Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(separator_1).default; } });