notionsoft-ui 1.0.15 → 1.0.17

package/package.json

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

package/src/notion-ui/button/Button.stories.tsx

@@ -49,3 +49,9 @@ export const Success: Story = {
     variant: "success",
   },
 };
+export const Outline: Story = {
+  args: {
+    children: "Outline Button",
+    variant: "outline",
+  },
+};

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

@@ -3,11 +3,11 @@ import { cn } from "../../utils/cn";
 // import { cn } from "@/utils/cn";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "warning" | "success";
+  variant?: "primary" | "secondary" | "warning" | "success" | "outline";
 }
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref: any) => {
-    const { className, children, variant, ...rest } = props;
+    const { className, children, variant, disabled, ...rest } = props;
     const style =
       variant == "secondary"
         ? "border hover:bg-primary hover:text-primary-foreground"
@@ -15,16 +15,20 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ? "bg-red-500 text-primary-foreground"
         : variant == "success"
         ? "bg-green-500 text-primary-foreground"
-        : "bg-primary hover:bg-primary shadow shadow-primary/50 text-primary-foreground/80 hover:opacity-90 hover:text-primary-foreground";
+        : variant == "outline"
+        ? "text-primary border border-primary/10 hover:bg-primary/5"
+        : "bg-primary hover:shadow hover:bg-primary shadow shadow-primary/50 text-primary-foreground/80 hover:opacity-90 hover:text-primary-foreground";
     return (
       <button
         {...rest}
+        disabled={disabled}
         ref={ref}
         className={cn(
-          `rounded-sm cursor-pointer ltr:text-[13px] sm:ltr:text-sm rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
-           hover:shadow transition w-fit
-            sm:px-4 py-[6px] leading-normal duration-200 ease-linear`,
+          `rounded-sm flex items-center gap-x-1 cursor-pointer font-medium ltr:text-xs leading-snug li rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
+          transition w-fit px-3 py-1.5 duration-200 ease-linear`,
           style,
+          disabled &&
+            "opacity-35 pointer-events-none disabled:cursor-not-allowed",
           className
         )}
       >

package/src/notion-ui/button-spinner/ButtonSpinner.stories.tsx

@@ -3,7 +3,7 @@ import ButtonSpinner from "./button-spinner";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof ButtonSpinner> = {
-  title: "Components/ButtonSpinner",
+  title: "Loader/ButtonSpinner",
   component: ButtonSpinner,
   parameters: {
     layout: "centered",

package/src/notion-ui/circle-loader/CircleLoader.stories.tsx

@@ -3,7 +3,7 @@ import { CircleLoaderProps } from "./circle-loader";
 
 // Meta information for Storybook
 export default {
-  title: "Components/CircleLoader", // This will be the folder and component name in Storybook's sidebar
+  title: "Loader/CircleLoader", // This will be the folder and component name in Storybook's sidebar
   component: CircleLoader, // The component being showcased
   argTypes: {
     className: { control: "text" },

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 // import { cn } from "@/utils/cn";
 import { cn } from "../../utils/cn";
-import AnimatedItem from "@/components/notion-ui/animated-item";
+import AnimatedItem from "../../notion-ui/animated-item";
 // import AnimatedItem from "../animated-item";
 
 export type NastranInputSize = "sm" | "md" | "lg";
@@ -14,7 +14,7 @@ export interface InputProps
   endContent?: React.ReactNode;
   errorMessage?: string;
   parentClassName?: string;
-  measurement: NastranInputSize;
+  measurement?: NastranInputSize;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -26,7 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       startContent,
       endContent,
       parentClassName = "",
-      measurement = "md",
+      measurement = "sm",
       errorMessage,
       label,
       readOnly,
@@ -47,50 +47,50 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               height: "50px",
               paddingBottom: "pb-[3px]",
               endContent: label
-                ? "top-12 -translate-y-1/2"
+                ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
                 : "top-[26px] -translate-y-1/2",
               startContent: label
-                ? "top-12 -translate-y-1/2"
+                ? "ltr:top-[48px] rtl:top-[54px] -translate-y-1/2"
                 : "top-[26px] -translate-y-1/2",
-              required: "top-[2px]",
+              required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
             }
           : measurement == "md"
           ? {
               height: "44px",
               paddingBottom: "pb-[2px]",
               endContent: label
-                ? "top-[45px] -translate-y-1/2"
+                ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
                 : "top-[22px] -translate-y-1/2",
               startContent: label
-                ? "top-[45px] -translate-y-1/2"
+                ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
                 : "top-[22px] -translate-y-1/2",
-              required: "top-[4px]",
+              required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
             }
           : {
               height: "40px",
               paddingBottom: "pb-[2px]",
               endContent: label
-                ? "top-[44px] -translate-y-1/2"
+                ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
                 : "top-[20px] -translate-y-1/2",
               startContent: label
-                ? "top-[44px] -translate-y-1/2"
+                ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
                 : "top-[20px] -translate-y-1/2",
-              required: "top-[4px]",
+              required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
             },
-      []
+      [measurement, label]
     );
     return (
-      <div className={cn(parentClassName, "flex flex-col justify-end")}>
+      <div className={cn(parentClassName, "flex w-full flex-col justify-end")}>
         <div
           className={cn(
-            "relative select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+            "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
           )}
         >
           {/* Start Content */}
           {startContent && (
             <span
               className={cn(
-                "absolute flex items-center ltr:left-[12px] rtl:right-[12px]",
+                "absolute flex items-center ltr:left-3 rtl:right-3",
                 heightStyle.startContent
               )}
             >
@@ -114,7 +114,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {requiredHint && (
             <span
               className={cn(
-                "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-[10px] rtl:left-[10px]",
+                "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-2.5 rtl:left-2.5",
                 heightStyle.required
               )}
             >
@@ -145,13 +145,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               height: heightStyle.height,
             }}
             className={cn(
-              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded border bg-transparent px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
               "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-              "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 rounded focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
-              "focus-visible:border-fourth/60",
+              "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
+              "focus-visible:border-tertiary/60",
               "[&::-webkit-outer-spin-button]:appearance-none",
               "[&::-webkit-inner-spin-button]:appearance-none",
-              "[-moz-appearance:textfield]",
+              "[-moz-appearance:textfield] ",
               inputPaddingClass,
               hasError ? "border-red-400 border" : "border-primary/25",
               readOnly && "cursor-not-allowed",

package/src/notion-ui/multi-select-input/index.ts

@@ -0,0 +1,3 @@
+import MultiSelectInput from "./multi-select-input";
+
+export default MultiSelectInput;

package/src/notion-ui/multi-select-input/multi-select-input.stories.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import MultiSelectInputForward, {
+  MultiSelectInputProps,
+} from "./multi-select-input";
+
+interface User {
+  uuid: string;
+  name: string;
+  email: string;
+  active: boolean;
+  admin: boolean;
+}
+
+export default {
+  title: "Select/MultiSelectInput",
+  component: MultiSelectInputForward,
+} as Meta<typeof MultiSelectInputForward>;
+
+// ------------------ Mock data ------------------
+const mockUsers: User[] = [
+  {
+    uuid: "1",
+    name: "Alice",
+    email: "alice@example.com",
+    active: true,
+    admin: false,
+  },
+  {
+    uuid: "2",
+    name: "Bob",
+    email: "bob@example.com",
+    active: false,
+    admin: true,
+  },
+  {
+    uuid: "3",
+    name: "Charlie",
+    email: "charlie@example.com",
+    active: true,
+    admin: true,
+  },
+  {
+    uuid: "4",
+    name: "David",
+    email: "david@example.com",
+    active: false,
+    admin: false,
+  },
+];
+
+// ------------------ Mock async fetch function ------------------
+const fetchUsers = async (
+  query: string,
+  filters?: Record<string, boolean>,
+  maxFetch?: number
+) => {
+  let result = mockUsers;
+
+  if (filters) {
+    result = result.filter((user) =>
+      Object.entries(filters).every(([key, value]) =>
+        value ? (user as any)[key] : true
+      )
+    );
+  }
+
+  if (query) {
+    const q = query.toLowerCase();
+    result = result.filter(
+      (u) =>
+        u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)
+    );
+  }
+
+  if (maxFetch) result = result.slice(0, maxFetch);
+
+  await new Promise((r) => setTimeout(r, 300));
+
+  return result;
+};
+
+// ------------------ Template ------------------
+const Template: StoryFn<MultiSelectInputProps<User>> = (args) => {
+  const [selected, setSelected] = useState<User[]>([]);
+
+  return (
+    <div style={{ width: 400, padding: 20 }}>
+      <MultiSelectInputForward
+        {...args}
+        selected={selected}
+        onItemsSelect={(selectedItems) => {
+          if (Array.isArray(selectedItems)) setSelected(selectedItems);
+          else if (selectedItems) setSelected([selectedItems]);
+          else setSelected([]);
+        }}
+      />
+      <div style={{ marginTop: 20 }}>
+        <strong>Selected Users:</strong>
+        <pre>{JSON.stringify(selected, null, 2)}</pre>
+      </div>
+    </div>
+  );
+};
+
+// ------------------ Stories ------------------
+
+// Multiple selection story
+export const MultipleSelection = Template.bind({});
+MultipleSelection.args = {
+  fetch: fetchUsers,
+  selectionMode: "multiple",
+  searchBy: ["name", "email"],
+  itemKey: "uuid",
+  filters: [
+    { key: "active", name: "Active" },
+    { key: "admin", name: "Admin" },
+  ],
+  text: {
+    fetch: "Loading users...",
+    notItem: "No users found",
+    maxRecord: "Max results",
+    clearFilters: "Clear Filters",
+  },
+};
+
+// Single selection story
+export const SingleSelection = Template.bind({});
+SingleSelection.args = {
+  fetch: fetchUsers,
+  selectionMode: "single",
+  searchBy: ["name", "email"],
+  itemKey: "uuid",
+  filters: [
+    { key: "active", name: "Active" },
+    { key: "admin", name: "Admin" },
+  ],
+  text: {
+    fetch: "Loading users...",
+    notItem: "No users found",
+    maxRecord: "Max results",
+    clearFilters: "Clear Filters",
+  },
+};
+
+// ------------------ API Config story ------------------
+export const APIConfigExample = Template.bind({});
+APIConfigExample.args = {
+  apiConfig: {
+    url: "https://jsonplaceholder.typicode.com/users",
+    headers: { "Content-Type": "application/json" },
+  },
+  selectionMode: "multiple",
+  searchBy: ["name", "email"],
+  filters: [
+    { key: "active", name: "Active" },
+    { key: "admin", name: "Admin" },
+  ],
+  itemKey: "id", // JSONPlaceholder uses `id` as key
+  text: {
+    fetch: "Fetching users from API...",
+    notItem: "No users found",
+    maxRecord: "Max results",
+    clearFilters: "Clear Filters",
+  },
+};