@js-empire/emperor-ui 1.2.7 → 1.3.0

package/dist/src-UW24ZMRV-DZ8MyM4k.js

@@ -0,0 +1,6 @@
+"use client";
+import { d as a } from "./index-DoF4sONu.js";
+var e = a;
+export {
+  e as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
@@ -78,8 +78,6 @@
     "@internationalized/date": "^3.11.0",
     "@storybook/react": "^10.1.8",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "^5.90.20",
-    "@tanstack/react-query-devtools": "^5.91.3",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -87,7 +85,6 @@
     "husky": "^9.1.7",
     "lucide-react": "^0.560.0",
     "motion": "^12.26.2",
-    "next": "^16.1.6",
     "next-themes": "^0.4.6",
     "prettier": "^3.7.4",
     "react": "^19.2.0",

package/src/components/molecules/item-card/components/actions/index.ts

@@ -0,0 +1,3 @@
+export * from "./item-actions-dropdown";
+export * from "./item-actions-buttons";
+export * from "./item-actions-overlay";

package/src/components/molecules/item-card/components/actions/item-actions-overlay.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+import { Tooltip } from "@heroui/tooltip";
+
+type ItemActionsOverlayProps = Pick<
+  ItemCardProps,
+  "actions" | "classNames" | "onActionClick" | "orientation"
+>;
+
+export function ItemActionsOverlay({
+  actions,
+  classNames,
+  onActionClick,
+  orientation,
+}: ItemActionsOverlayProps) {
+  if (!actions || actions?.length === 0) return null;
+
+  return (
+    <div
+      data-slot="emperor-ui-item-card-actions-overlay"
+      className={cn(
+        "absolute inset-0 z-20 gap-3 flex items-center justify-center bg-black/60 opacity-0",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        "transition-opacity duration-200 group-hover:opacity-100",
+        classNames?.actions,
+      )}
+    >
+      {actions?.map(
+        ({ key, label, className: actionClassName, ...props }, index) => {
+          return (
+            <Tooltip content={label}>
+              <Button
+                key={key ?? index}
+                data-slot="emperor-ui-item-card-actions-overlay-button"
+                isIconOnly
+                radius="full"
+                className={cn(classNames?.action, actionClassName)}
+                onPress={() => key && onActionClick?.(String(key))}
+                {...props}
+              />
+            </Tooltip>
+          );
+        },
+      )}
+    </div>
+  );
+}

package/src/components/molecules/item-card/components/additions/index.ts

@@ -0,0 +1,2 @@
+export * from "./loading-item";
+export * from "./item-banner";

package/src/components/molecules/item-card/{item-banner.tsx → components/additions/item-banner.tsx}

@@ -2,7 +2,7 @@
 
 import { ItemCardProps } from "@/types";
 import { cn } from "@/utils";
-import { itemBannerClasses } from "./styles";
+import { itemBannerClasses } from "@/components";
 
 export function ItemBanner({
   item,

package/src/components/molecules/item-card/{loading-item.tsx → components/additions/loading-item.tsx}

@@ -12,7 +12,7 @@ import {
   itemBodyClasses,
   itemFooterClasses,
   itemChipsClasses,
-} from "./styles";
+} from "@/components";
 import { getCardMotion } from "@/constants";
 import type { ItemCardProps } from "@/types";
 

package/src/components/molecules/item-card/components/card/index.ts

@@ -0,0 +1,4 @@
+export * from "./item-card";
+export * from "./item-card-header";
+export * from "./item-card-body";
+export * from "./item-card-footer";

package/src/components/molecules/item-card/{item-card-body.tsx → components/card/item-card-body.tsx}

@@ -7,9 +7,9 @@ import {
   itemDescriptionClasses,
   itemPriceClasses,
   itemTitleClasses,
-} from "./styles";
+  ItemActionsDropdown,
+} from "@/components";
 import { CardBody } from "@heroui/card";
-import { ItemActionsDropdown } from "./item-actions-dropdown";
 
 export function ItemCardBody({
   item,

package/src/components/molecules/item-card/{item-card-footer.tsx → components/card/item-card-footer.tsx}

@@ -2,10 +2,13 @@
 
 import type { ItemCardProps } from "@/types";
 import { cn } from "@/utils";
-import { itemFooterClasses, itemChipsClasses } from "./styles";
+import {
+  ItemActionsButtons,
+  itemFooterClasses,
+  itemChipsClasses,
+} from "@/components";
 import { CardFooter } from "@heroui/card";
 import { Chip } from "@heroui/chip";
-import { ItemActionsButtons } from "./item-actions-buttons";
 
 export function ItemCardFooter({
   item,
@@ -63,7 +66,7 @@ export function ItemCardFooter({
         </menu>
       )}
 
-      {actionsViewVariant === "buttons" && actions && actions.length > 0 && (
+      {actionsViewVariant === "buttons" && actions && actions?.length > 0 && (
         <ItemActionsButtons
           actions={actions}
           classNames={classNames}

package/src/components/molecules/item-card/{item-card-header.tsx → components/card/item-card-header.tsx}

@@ -2,11 +2,13 @@
 
 import { CardHeader } from "@heroui/card";
 import { cn } from "@/utils";
-import { itemHeaderClasses } from "./styles";
-import { itemImageWrapperClasses } from "./styles";
+import {
+  itemHeaderClasses,
+  ItemActionsDropdown,
+  itemImageWrapperClasses,
+  ItemBanner,
+} from "@/components";
 import { Image } from "@heroui/image";
-import { ItemBanner } from "@/components";
-import { ItemActionsDropdown } from "./item-actions-dropdown";
 import type { ItemCardProps } from "@/types";
 
 export function ItemCardHeader({

package/src/components/molecules/item-card/{item-card.tsx → components/card/item-card.tsx}

@@ -8,7 +8,11 @@ import type {
 import { cn } from "@/utils";
 import { Card } from "@heroui/card";
 import { motion } from "framer-motion";
-import { itemMainWrapperClasses, itemCardMotionClasses } from "./styles";
+import {
+  itemMainWrapperClasses,
+  itemCardMotionClasses,
+  ItemActionsOverlay,
+} from "@/components";
 import { getCardMotion } from "@/constants";
 import {
   LoadingItem,
@@ -17,7 +21,6 @@ import {
   ItemCardFooter,
 } from "@/components";
 import { useWindowSize } from "@/hooks";
-import { ItemActionsOverlay } from "./item-actions-overlay";
 
 export function ItemCard({
   variants,
@@ -47,8 +50,10 @@ export function ItemCard({
     );
 
   const hasActions = actions && actions.length > 0;
+
   const isDropdownVariant: boolean =
     (actionsViewVariant as ItemCardActionsViewVariant) === "dropdown";
+
   const isHoverOverlayVariant: boolean =
     (actionsViewVariant as ItemCardActionsViewVariant) === "hover-overlay";
 
@@ -103,20 +108,14 @@ export function ItemCard({
           onActionClick={onActionClick}
           actionsViewVariant={actionsViewVariant}
         />
+
         {isHoverOverlayVariant && hasActions && (
-          <div
-            data-slot="emperor-ui-item-card-actions-hover-overlay"
-            className={cn(
-              "pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-black/60 opacity-0",
-              "transition-opacity duration-200 group-hover:opacity-100",
-            )}
-          >
-            <ItemActionsOverlay
-              actions={actions}
-              classNames={classNames}
-              onActionClick={onActionClick}
-            />
-          </div>
+          <ItemActionsOverlay
+            actions={actions}
+            classNames={classNames}
+            onActionClick={onActionClick}
+            orientation={orientation}
+          />
         )}
       </Card>
     </motion.div>

package/src/components/molecules/item-card/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./additions";
+export * from "./card";
+export * from "./actions";

package/src/components/molecules/item-card/index.ts

@@ -1,9 +1,2 @@
-export * from "./item-card";
-export * from "./loading-item";
-export * from "./item-banner";
-export * from "./item-actions-dropdown";
-export * from "./item-actions-buttons";
-export * from "./item-actions-overlay";
-export * from "./item-card-header";
-export * from "./item-card-body";
-export * from "./item-card-footer";
+export * from "./components";
+export * from "./styles";

package/src/components/molecules/item-card/stories/item-card.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { MockItemType } from "@/mocks";
 import { ItemCard } from "@/components";
 import { getStorybookDecorators } from "@/utils";
 import { getListing, MOCK_LISTINGS } from "@/mocks";
-import type { MockItemType } from "@/mocks";
 import { useEffect, useState } from "storybook/internal/preview-api";
 import { ItemCardProps } from "@/types";
 import { ITEM_CARD_ACTIONS } from "@/constants";
@@ -102,7 +102,7 @@ export const WithHorizontalLoading: Story = {
   },
 };
 
-export const WithActions: Story = {
+export const WithDropdownActions: Story = {
   args: {
     item: {
       key: String(MOCK_LISTINGS[0]?.id),

package/src/components/molecules/item-card/styles/classes.ts

@@ -58,16 +58,19 @@ export const itemBodyClasses = cva(["relative flex flex-col gap-2 p-4"], {
   compoundVariants: [],
 });
 
-export const itemFooterClasses = cva(["flex items-center p-4"], {
-  variants: {
-    orientation: {
-      vertical: "",
-      horizontal: "justify-end",
+export const itemFooterClasses = cva(
+  ["flex flex-wrap flex-col p-4 gap-4 items-start"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "justify-end",
+      },
     },
+    defaultVariants: {},
+    compoundVariants: [],
   },
-  defaultVariants: {},
-  compoundVariants: [],
-});
+);
 
 export const itemTitleClasses = cva(
   ["line-clamp-1 font-semibold text-foreground"],

package/src/components/organisms/deletion-confirmor/deletion-confirmor.tsx

@@ -85,16 +85,12 @@ export function DeletionConfirmor({
             onPress={handleDecline}
             className={cn(declineProps?.className, classNames?.declineButton)}
           >
-            {declineProps?.children ??
-              deletionConfirmorLocale?.decline ??
-              "Decline"}
+            {declineProps?.children ?? deletionConfirmorLocale?.decline}
           </Button>
 
           <Button
             color="danger"
             size="sm"
-            {...confirmProps}
-            className={cn(confirmProps?.className, classNames?.confirmButton)}
             startContent={
               confirmProps?.isLoading
                 ? undefined
@@ -102,10 +98,10 @@ export function DeletionConfirmor({
                     <Trash2 className="size-4" aria-hidden />
                   ))
             }
+            {...confirmProps}
+            className={cn(confirmProps?.className, classNames?.confirmButton)}
           >
-            {confirmProps?.children ??
-              deletionConfirmorLocale?.confirm ??
-              "Confirm"}
+            {confirmProps?.children ?? deletionConfirmorLocale?.confirm}
           </Button>
         </ModalFooter>
       </ModalContent>

package/src/components/organisms/deletion-confirmor/stories/components.tsx

@@ -13,6 +13,9 @@ export const DeletionConfirmorWithTrigger = (args: DeletionConfirmorProps) => {
       </Button>
 
       <DeletionConfirmor
+        confirmProps={{
+          onPress: () => setIsOpen(false),
+        }}
         {...args}
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}

package/src/constants/card.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { Eye, Pencil, Trash2 } from "lucide-react";
 import { ItemCardAction } from "@/types";
 
@@ -8,7 +9,7 @@ export const ITEM_CARD_ACTIONS: ItemCardAction[] = [
     color: "primary",
     variant: "flat",
     size: "sm",
-    startContent: <Eye className="size-5" />,
+    startContent: <Eye className="size-4" />,
   },
   {
     key: "edit",
@@ -16,7 +17,7 @@ export const ITEM_CARD_ACTIONS: ItemCardAction[] = [
     color: "secondary",
     variant: "flat",
     size: "sm",
-    startContent: <Pencil className="size-5" />,
+    startContent: <Pencil className="size-4" />,
   },
   {
     key: "delete",
@@ -27,3 +28,15 @@ export const ITEM_CARD_ACTIONS: ItemCardAction[] = [
     startContent: <Trash2 className="size-4" />,
   },
 ];
+
+export const ITEM_CARD_ACTIONS_OVERLAY: ItemCardAction[] =
+  ITEM_CARD_ACTIONS.map((action) => ({
+    ...action,
+    variant: "solid",
+    size: "lg",
+    startContent: {
+      view: <Eye className="size-5" />,
+      edit: <Pencil className="size-5" />,
+      delete: <Trash2 className="size-5" />,
+    }[action?.key],
+  }));

package/src/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import "./styles/globals.css";
 
 export * from "./components";

package/vite.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
           "react-dom": "ReactDOM",
         },
         assetFileNames: "globals.css",
+        banner: '"use client";',
       },
     },
   },

package/src/components/molecules/item-card/item-actions-overlay.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import type { ItemCardProps } from "@/types";
-import { cn } from "@/utils";
-import { Button } from "@heroui/button";
-
-type ItemActionsOverlayProps = Pick<
-  ItemCardProps,
-  "actions" | "classNames" | "onActionClick"
->;
-
-export function ItemActionsOverlay({
-  actions,
-  classNames,
-  onActionClick,
-}: ItemActionsOverlayProps) {
-  if (!actions || actions.length === 0) return null;
-
-  return (
-    <div
-      data-slot="emperor-ui-item-card-actions-overlay-buttons"
-      className={cn("flex flex-col items-center gap-3", classNames?.actions)}
-    >
-      {actions?.map(
-        ({ key, label, className: actionClassName, ...props }, index) => {
-          return (
-            <Button
-              key={key ?? index}
-              data-slot="emperor-ui-item-card-actions-overlay-button"
-              isIconOnly
-              radius="full"
-              className={cn(classNames?.action, actionClassName)}
-              onPress={() => key && onActionClick?.(String(key))}
-              {...props}
-            />
-          );
-        },
-      )}
-    </div>
-  );
-}