@bouku/core 0.4.0 → 0.4.2

package/dist/components/button/normal.js

@@ -25,10 +25,10 @@ export function Button({ style, size = "md", variant = "surface", icon, action,
                 : icon, children] }));
 }
 const styles = 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",
+    base: "relative flex justify-center items-center border outline-none rounded font-semibold shadow duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-125",
     variants: {
         size: {
-            xs: "gap-1 px-2 py-2 text-sm rounded-full",
+            xs: "gap-2 px-3 py-2 text-xs",
             sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
             md: "gap-2 px-4 py-2 text-xs sm:text-sm",
             lg: "gap-3 px-5 py-3 text-base sm:text-lg"

package/dist/components/miscellaneous/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    size?: "sm" | "md";
+    size?: "sm" | "md" | "lg";
     label: string;
     value: boolean;
     update: (x: boolean) => void;

package/dist/components/miscellaneous/checkbox/index.js

@@ -1,21 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowBox } from "../../container/flex.js";
+import { RowBox } from "@bouku/core";
 import Check from "../../../assets/icons/check.svg";
-import { cn } from "../../../utils/functions/_.js";
+import { cn } from "../../../utils/functions/style.js";
 import { tv } from "tailwind-variants";
 export const CheckBox = ({ size, label, value: isChecked, update, disabled = false }) => {
-    const s = getStyle({
+    const s = baseStyles({
         size,
         active: isChecked
     });
     return (_jsxs(RowBox, { style: s.container(), children: [_jsx("div", { className: cn(s.box(), disabled && "pointer-events-none"), onClick: () => !disabled ? update(!isChecked) : null, children: isChecked && _jsx(Check, { className: s.check() }) }), _jsx("span", { className: s.label(), children: label })] }));
 };
-const getStyle = tv({
+const baseStyles = tv({
     slots: {
         container: "items-center",
-        box: "flex justify-center items-center hover:bg-accent border rounded border-outline duration-200 cursor-pointer",
+        box: "flex justify-center items-center bg-input hover:bg-input-dark border rounded border-outline duration-200 cursor-pointer",
         check: "text-background",
-        label: "text-primary-dark"
+        label: "text-primary"
+    },
+    defaultVariants: {
+        size: "md"
     },
     variants: {
         size: {
@@ -26,6 +29,12 @@ const getStyle = tv({
                 label: "text-xs"
             },
             md: {
+                container: "gap-3",
+                box: "size-5 min-w-5",
+                check: "size-3",
+                label: "text-sm"
+            },
+            lg: {
                 container: "gap-3",
                 box: "size-5 min-w-5",
                 check: "size-3",
@@ -34,12 +43,9 @@ const getStyle = tv({
         },
         active: {
             true: {
-                box: "bg-accent"
+                box: "!bg-accent border-accent-darker"
             }
         }
-    },
-    defaultVariants: {
-        size: "md"
     }
 });
 export default CheckBox;

package/dist/components/miscellaneous/dropdown/normal.d.ts

@@ -2,7 +2,8 @@ import { type ReactNode } from "react";
 interface Props {
     trigger: ReactNode;
     align?: "left" | "right";
+    direction?: "up" | "down";
     children: ReactNode;
 }
-export declare function Dropdown({ trigger, align, children }: Props): import("react").JSX.Element;
+export declare function Dropdown({ trigger, align, direction, children }: Props): import("react").JSX.Element;
 export default Dropdown;

package/dist/components/miscellaneous/dropdown/normal.js

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "../../../utils/functions/_.js";
 ;
-export function Dropdown({ trigger, align = "left", children }) {
+export function Dropdown({ trigger, align = "left", direction = "down", children }) {
     const [isOpen, setOpen] = useState(false);
     const ref = useRef(null);
     useEffect(() => {
@@ -17,10 +17,12 @@ export function Dropdown({ trigger, align = "left", children }) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
-    return (_jsxs("div", { ref: ref, className: styles.container, children: [_jsx("div", { onClick: () => setOpen(open => !open), children: trigger }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(styles.dropdown, align === "left" ? "left-0" : "right-0"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: children })) })] }));
+    return (_jsxs("div", { ref: ref, className: styles.container, children: [_jsx("div", { onClick: () => setOpen(open => !open), children: trigger }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(styles.dropdown, align === "left" ? "left-0" : "right-0", direction === "down"
+                        ? "top-full mt-2"
+                        : "bottom-full mb-2"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: children })) })] }));
 }
 const styles = {
     container: "relative shrink-0",
-    dropdown: "absolute mt-3 z-50 flex flex-col gap-2 min-w-full w-max bg-surface-dark rounded border border-border-dark p-3 pr-4 text-sm"
+    dropdown: "absolute z-50 flex flex-col gap-2 min-w-full w-max bg-surface-darker rounded-md border border-border-darker p-2 text-sm shadow-md"
 };
 export default Dropdown;

package/dist/components/table/state/sort.js

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { parseDate } from "../utils/date.js";
+import { parseDate, isDateLike } from "../utils/date.js";
 export function useSort(items, initialSort) {
     const [column, setColumn] = useState(initialSort ?? null);
     const [isDescending, setDescending] = useState(true);
@@ -20,20 +20,16 @@ export function useSort(items, initialSort) {
             if (valB === undefined || valB === null)
                 return -1;
             let comparison;
-            if (isDateLike(valA) && isDateLike(valB)) {
+            if (isDateLike(valA) && isDateLike(valB))
                 comparison =
                     parseDate(valA).getTime() -
                         parseDate(valB).getTime();
-            }
-            else if (typeof valA === "number" &&
-                typeof valB === "number") {
+            else if (typeof valA === "number" && typeof valB === "number")
                 comparison = valA - valB;
-            }
-            else {
+            else
                 comparison = String(valA)
                     .toLowerCase()
                     .localeCompare(String(valB).toLowerCase());
-            }
             return isDescending ? -comparison : comparison;
         });
     }, [items, column, isDescending]);
@@ -45,7 +41,3 @@ export function useSort(items, initialSort) {
         toggleSortDirection: () => setDescending(prev => !prev)
     };
 }
-const isDateLike = (value) => value instanceof Date ||
-    (typeof value === "string" &&
-        !Number.isNaN(Date.parse(value)) &&
-        Number.isNaN(Number(value)));

package/dist/components/table/utils/date.d.ts

@@ -3,3 +3,4 @@ export declare const parseDate: (value: CellValue) => Date;
 export declare const formatDateInput: (value: CellValue) => string;
 export declare const getDateRange: <T extends TableRow>(items: T[], column?: keyof T) => DateRange;
 export declare const formatDateLabel: (value: string) => string;
+export declare const isDateLike: (value: CellValue) => boolean;

package/dist/components/table/utils/date.js

@@ -41,3 +41,6 @@ export const formatDateLabel = (value) => {
         year: "numeric"
     });
 };
+export const isDateLike = (value) => value instanceof Date || (typeof value === "string" &&
+    !Number.isNaN(Date.parse(value)) &&
+    Number.isNaN(Number(value)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "./dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts",