notionsoft-ui 1.0.40 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/card/card.tsx

@@ -31,7 +31,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn(
+        "leading-none ltr:text-md rtl:text-md font-semibold",
+        className
+      )}
       {...props}
     />
   );
@@ -41,7 +44,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground ltr:text-sm rtl:text-md", className)}
       {...props}
     />
   );

package/src/notion-ui/checkbox/checkbox.tsx

@@ -0,0 +1,74 @@
+import CircleLoader from "@/components/notion-ui/circle-loader";
+import { cn } from "@/utils/cn";
+import { CheckIcon } from "lucide-react";
+import React from "react";
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange: (value: boolean) => void;
+  checked: boolean;
+  loading?: boolean;
+  label?: string;
+  description?: string;
+  classNames?: {
+    rootDivClassName?: string;
+  };
+}
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref: any) => {
+    const {
+      onCheckedChange,
+      checked,
+      loading,
+      label,
+      description,
+      className,
+      readOnly,
+      classNames,
+    } = props;
+    const { rootDivClassName } = classNames || {};
+
+    const readOnlyStyle = readOnly && "opacity-40";
+
+    return (
+      <div
+        className={cn(
+          "flex items-center space-x-3",
+          rootDivClassName,
+          readOnlyStyle
+        )}
+      >
+        {loading ? (
+          <CircleLoader className="size-4" />
+        ) : (
+          <label className="inline-flex items-center">
+            <input
+              ref={ref}
+              type="checkbox"
+              checked={checked}
+              onChange={(e) => onCheckedChange(e.target.checked)}
+              className={cn("peer sr-only", className)}
+            />
+
+            <CheckIcon className="size-4 shadow-sm p-px border border-tertiary/60 text-transparent peer-checked:bg-primary peer-checked:text-primary-foreground transition-transform rounded peer-checked:scale-100" />
+          </label>
+        )}
+
+        <label className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          {label && (
+            <h1 className="text-start rtl:text-[18px] ltr:text-[13px] font-semibold">
+              {label}
+            </h1>
+          )}
+          {description && (
+            <h1 className="text-start rtl:pr-1 rtl:text-[17px] ltr:text-xs pt-0.5 ltr:leading-3.5 rtl:leading-5 text-primary/80">
+              {description}
+            </h1>
+          )}
+        </label>
+      </div>
+    );
+  }
+);
+
+export default Checkbox;

package/src/notion-ui/page-size-select/page-size-select.tsx

@@ -88,12 +88,10 @@ const PageSizeSelect: React.FC<SelectProps> = ({
       const cached = await loadFn(paginationKey);
       if (cached) {
         setSelectData((p) => ({ ...p, select: cached }));
-        onChange?.(cached.value);
       } else {
         const item = { key: paginationKey, value: "10", option: KEYS.default };
         setSelectData((p) => ({ ...p, select: item }));
         saveFn(paginationKey, item);
-        onChange?.("10");
       }
     };
     loadCache();
@@ -188,7 +186,7 @@ const PageSizeSelect: React.FC<SelectProps> = ({
     <div ref={selectRef} className={cn("w-full", className)}>
       <button
         onClick={() => setSelectData((p) => ({ ...p, isOpen: !p.isOpen }))}
-        className="w-full px-3 py-2 border rounded-md flex items-center justify-between bg-card"
+        className="w-full gap-1 text-sm px-2 py-2 border rounded-md flex items-center justify-between bg-card"
       >
         {selectData.select.value || placeholder}
         <ChevronDown
@@ -252,16 +250,14 @@ const PageSizeSelect: React.FC<SelectProps> = ({
             {/* Options */}
             <ul className="max-h-60 overflow-auto">
               {options.length === 0 ? (
-                <li className="px-4 py-2 text-center text-sm">
-                  {emptyPlaceholder}
-                </li>
+                <li className="px-4 py-2 text-center">{emptyPlaceholder}</li>
               ) : (
                 options.map((o) => (
                   <li
                     key={o.value}
                     onClick={() => handleSelect(o.value)}
                     className={cn(
-                      "px-4 py-2 cursor-pointer flex justify-between hover:bg-primary/10",
+                      "px-4 py-2 text-sm cursor-pointer flex justify-between hover:bg-primary/10",
                       selectData.select.value === o.value && "bg-primary/10"
                     )}
                   >

package/src/notion-ui/sidebar/sidebar-item.tsx

@@ -166,9 +166,9 @@ export const SidebarItem = memo(function SidebarItem({
       <div
         onClick={handleClick}
         className={cn(
-          `grid grid-cols-[1fr_auto] ltr:py-2 rtl:p-1 ltr:pl-2.5 rtl:pr-2 ltr:mx-1 rtl:mx-1.5 text-primary items-center rtl:text-lg ltr:text-xs cursor-pointer rounded-md ${
+          `grid grid-cols-[1fr_auto] ltr:py-2 dark:text-primary/70 rtl:p-1 ltr:pl-2.5 rtl:pr-[7px] ltr:mx-1 rtl:mx-1.5 text-primary items-center rtl:text-lg ltr:text-xs cursor-pointer rounded-md ${
             isActive
-              ? `bg-tertiary/90 text-card font-semibold`
+              ? `bg-tertiary/90 text-card dark:text-primary font-semibold`
               : "hover:opacity-75"
           }`
         )}

package/src/notion-ui/table/table.tsx

@@ -0,0 +1,203 @@
+import CircleLoader from "@/components/notion-ui/circle-loader";
+import { cn } from "@/utils/cn";
+import { Edit, Eye, Trash2 } from "lucide-react";
+import * as React from "react";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b rtl:text-lg ltr:text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn(
+        "[&_tr:last-child]:border-0 rtl:text-md ltr:text-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "font-medium text-muted-foreground h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+interface TableRowIconProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  read?: boolean;
+  remove?: boolean;
+  edit?: boolean;
+  onRemove: (item: any) => Promise<void>;
+  onEdit: (item: any) => Promise<void>;
+  onRead: (item: any) => Promise<void>;
+  item: any;
+}
+const TableRowIcon = React.forwardRef<HTMLTableRowElement, TableRowIconProps>(
+  (
+    { className, read, edit, remove, onRemove, onEdit, onRead, item, ...props },
+    ref
+  ) => {
+    const { children } = props;
+    const [showAction, setShowAction] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    return (
+      <TableRow
+        className={cn(`${showAction && "bg-primary/10!"} relative`, className)}
+        {...props}
+        ref={ref}
+        onMouseEnter={() => {
+          if (read || edit || remove) setShowAction(true);
+        }}
+        onMouseLeave={() => setShowAction(false)}
+      >
+        {children}
+        <td>
+          {showAction && (
+            <div className="w-[110px] bg-primary py-1 rounded-full flex absolute top-1/2 transform -translate-y-1/2 ltr:right-2 rtl:left-2 justify-center gap-x-2">
+              {read && !edit && (
+                <div
+                  onClick={async () => {
+                    if (loading) return;
+                    setLoading(true);
+                    await onRead(item);
+                    setLoading(false);
+                  }}
+                  className="cursor-pointer hover:*:text-primary-foreground/70"
+                >
+                  <Eye className="text-primary-foreground size-[18px] transition" />
+                </div>
+              )}
+              {edit && (
+                <div
+                  onClick={async () => {
+                    if (loading) return;
+                    setLoading(true);
+                    await onEdit(item);
+                    setLoading(false);
+                  }}
+                  className="cursor-pointer hover:*:text-green-500/70"
+                >
+                  <Edit className="text-green-500 size-[18px] transition" />
+                </div>
+              )}
+
+              {remove && (
+                <div
+                  onClick={async () => {
+                    if (loading) return;
+                    setLoading(true);
+                    await onRemove(item);
+                    setLoading(false);
+                  }}
+                  className="cursor-pointer hover:*:text-red-400/70"
+                >
+                  <Trash2 className="text-red-400 size-[18px] transition" />
+                </div>
+              )}
+            </div>
+          )}
+        </td>
+        {loading && (
+          <td className="w-full h-full bg-primary/20 absolute flex justify-center left-0">
+            <CircleLoader className="size-[18px]" />
+          </td>
+        )}
+      </TableRow>
+    );
+  }
+);
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableRowIcon,
+};