notionsoft-ui 1.0.41 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.41",
+  "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/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"
           }`
         )}