@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { ThemedText } from "../index";
+import { cn } from "../support/utils";
+
+function Card({
+    className,
+    size = "default",
+    ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+    return (
+        <div
+            data-slot="card"
+            data-size={size}
+            className={cn(
+                "group/card flex flex-col gap-3.5 overflow-hidden rounded-lg bg-dashboard-card py-3.5 text-xs text-dashboard-foreground border border-dashboard-border shadow-xs backdrop-blur-xs has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2.5 data-[size=sm]:py-2.5 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-header"
+            className={cn(
+                "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-3.5 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-3 group-data-[size=sm]/card:[.border-b]:pb-2.5",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn(
+                "font-heading text-[14px] sm:text-[15px] font-semibold text-dashboard-foreground leading-snug tracking-tight group-data-[size=sm]/card:text-xs",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-description"
+            className={cn("text-xs text-dashboard-muted-foreground leading-normal", className)}
+            {...props}
+        />
+    );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-action"
+            className={cn(
+                "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-content"
+            className={cn("px-3.5 group-data-[size=sm]/card:px-3 text-xs leading-relaxed", className)}
+            {...props}
+        />
+    );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-footer"
+            className={cn(
+                "flex items-center rounded-b-lg border-t border-dashboard-border bg-dashboard-secondary/30 p-3 group-data-[size=sm]/card:p-2.5 text-xs",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Card,
+    CardAction,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+};

package/src/components/context menu core/context-menu.tsx

@@ -0,0 +1,304 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "../../support/utils";
+import { useLanguage } from "@gostack-framework/react";
+import { useTypography } from "../../typography";
+
+const useIsRTL = () => {
+    const { i18n } = useTranslation();
+    return i18n.language === "ar";
+};
+
+/** Returns the dynamic font-family class that respects the user's typography settings. */
+const useMenuFontClass = () => {
+    const { isRTL } = useLanguage();
+    const { getFontFamilyClass } = useTypography();
+    return getFontFamilyClass(undefined, isRTL, false);
+};
+
+const ContextMenu = ({
+    dir,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>) => {
+    const isRTL = useIsRTL();
+    return (
+        <ContextMenuPrimitive.Root
+            dir={dir ?? (isRTL ? "rtl" : "ltr")}
+            {...props}
+        />
+    );
+};
+
+const ContextMenuTrigger = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>
+>(({ children, ...props }, ref) => {
+    const styledChildren = React.isValidElement(children)
+        ? React.cloneElement(
+              children as React.ReactElement<{ className?: string }>,
+              {
+                  className: cn(
+                      (children as React.ReactElement<{ className?: string }>)
+                          .props.className,
+                      "cursor-context-menu!",
+                  ),
+              },
+          )
+        : children;
+
+    return (
+        <ContextMenuPrimitive.Trigger ref={ref} {...props}>
+            {styledChildren}
+        </ContextMenuPrimitive.Trigger>
+    );
+});
+ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+        inset?: boolean;
+    }
+>(({ className, inset, children, ...props }, ref) => {
+    const isRTL = useIsRTL();
+    const fontClass = useMenuFontClass();
+    return (
+        <ContextMenuPrimitive.SubTrigger
+            ref={ref}
+            className={cn(
+                "group/context-menu-sub-trigger flex cursor-context-menu! items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium text-dashboard-foreground/90 outline-none select-none hover:bg-dashboard-secondary focus:bg-dashboard-secondary focus:text-dashboard-foreground data-[state=open]:bg-dashboard-secondary data-[state=open]:text-dashboard-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-dashboard-muted-foreground group-hover/context-menu-sub-trigger:[&_svg]:text-dashboard-foreground transition-colors duration-75",
+                fontClass,
+                inset && (isRTL ? "pr-8" : "pl-8"),
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronRight className="ml-auto rtl:ml-0 rtl:mr-auto rtl:rotate-180" />
+        </ContextMenuPrimitive.SubTrigger>
+    );
+});
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => {
+    const fontClass = useMenuFontClass();
+    return (
+        <ContextMenuPrimitive.SubContent
+            ref={ref}
+            className={cn(
+                "z-50 min-w-32 w-fit overflow-hidden rounded-xl bg-dashboard-popover p-1.5 text-dashboard-popover-foreground shadow-2xl border border-dashboard-border backdrop-blur-md cursor-context-menu! data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                fontClass,
+                className,
+            )}
+            {...props}
+        />
+    );
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, onCloseAutoFocus, ...props }, ref) => {
+    const fontClass = useMenuFontClass();
+    return (
+        <ContextMenuPrimitive.Portal>
+            <ContextMenuPrimitive.Content
+                ref={ref}
+                className={cn(
+                    "z-50 min-w-32 w-fit overflow-hidden rounded-xl bg-dashboard-popover p-1.5 text-dashboard-popover-foreground shadow-2xl border border-dashboard-border backdrop-blur-md cursor-context-menu! data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                    fontClass,
+                    className,
+                )}
+                onCloseAutoFocus={(event) => {
+                    onCloseAutoFocus?.(event);
+                    // An action may open a dialog before the menu finishes closing.
+                    if (
+                        document.activeElement?.closest(
+                            '[role="dialog"], [role="alertdialog"]',
+                        )
+                    ) {
+                        event.preventDefault();
+                    }
+                }}
+                {...props}
+            />
+        </ContextMenuPrimitive.Portal>
+    );
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+        inset?: boolean;
+        variant?: "default" | "destructive";
+    }
+>(({ className, inset, variant = "default", ...props }, ref) => {
+    const isRTL = useIsRTL();
+    const fontClass = useMenuFontClass();
+    return (
+        <ContextMenuPrimitive.Item
+            ref={ref}
+            className={cn(
+                "group/context-menu-item relative flex cursor-context-menu! items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium text-dashboard-foreground/90 outline-none select-none hover:bg-dashboard-secondary focus:bg-dashboard-secondary focus:text-dashboard-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-dashboard-muted-foreground group-hover/context-menu-item:[&_svg]:text-dashboard-foreground transition-colors duration-75",
+                variant === "destructive" &&
+                    "text-dashboard-destructive focus:bg-dashboard-destructive/10 focus:text-dashboard-destructive dark:focus:bg-dashboard-destructive/20 [&_svg]:text-dashboard-destructive group-hover/context-menu-item:[&_svg]:text-dashboard-destructive",
+                fontClass,
+                inset && (isRTL ? "pr-8" : "pl-8"),
+                className,
+            )}
+            {...props}
+        />
+    );
+});
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => {
+    const isRTL = useIsRTL();
+    return (
+        <ContextMenuPrimitive.CheckboxItem
+            ref={ref}
+            className={cn(
+                "relative flex cursor-context-menu! select-none items-center rounded-sm py-1.5 text-sm outline-none focus:bg-dashboard-secondary focus:text-dashboard-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+                isRTL ? "pl-2 pr-8" : "pl-8 pr-2",
+                className,
+            )}
+            checked={checked}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "absolute flex h-3.5 w-3.5 items-center justify-center",
+                    isRTL ? "right-2" : "left-2",
+                )}
+            >
+                <ContextMenuPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                </ContextMenuPrimitive.ItemIndicator>
+            </span>
+            {children}
+        </ContextMenuPrimitive.CheckboxItem>
+    );
+});
+ContextMenuCheckboxItem.displayName =
+    ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => {
+    const isRTL = useIsRTL();
+    return (
+        <ContextMenuPrimitive.RadioItem
+            ref={ref}
+            className={cn(
+                "relative flex cursor-context-menu! select-none items-center rounded-sm py-1.5 text-sm outline-none focus:bg-dashboard-secondary focus:text-dashboard-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+                isRTL ? "pl-2 pr-8" : "pl-8 pr-2",
+                className,
+            )}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "absolute flex h-3.5 w-3.5 items-center justify-center",
+                    isRTL ? "right-2" : "left-2",
+                )}
+            >
+                <ContextMenuPrimitive.ItemIndicator>
+                    <Circle className="h-2 w-2 fill-current" />
+                </ContextMenuPrimitive.ItemIndicator>
+            </span>
+            {children}
+        </ContextMenuPrimitive.RadioItem>
+    );
+});
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+        inset?: boolean;
+    }
+>(({ className, inset, ...props }, ref) => {
+    const isRTL = useIsRTL();
+    const fontClass = useMenuFontClass();
+    return (
+        <ContextMenuPrimitive.Label
+            ref={ref}
+            className={cn(
+                "px-2.5 py-1.5 text-[13px] font-medium text-dashboard-muted-foreground",
+                fontClass,
+                inset && (isRTL ? "pr-8" : "pl-8"),
+                className,
+            )}
+            {...props}
+        />
+    );
+});
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-dashboard-border", className)}
+        {...props}
+    />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    const isRTL = useIsRTL();
+    return (
+        <span
+            className={cn(
+                "text-xs tracking-widest text-dashboard-muted-foreground",
+                isRTL ? "mr-auto ml-0" : "ml-auto mr-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+    ContextMenu,
+    ContextMenuCheckboxItem,
+    ContextMenuContent,
+    ContextMenuGroup,
+    ContextMenuItem,
+    ContextMenuLabel,
+    ContextMenuPortal,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+};

package/src/components/context menu core/contextMenuAdvanced.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuPortal,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from "./context-menu";
+
+const useIsRTL = () => {
+    const { i18n } = useTranslation();
+    return i18n.language === "ar";
+};
+
+// ─── 1. Reusable Advanced Components ──────────────────────────────────────────
+
+export interface ContextMenuAdvancedProps {
+    /** The element that triggers the context menu on right-click */
+    children: React.ReactNode;
+    /** The content of the context menu (items, submenus, separators) */
+    menuContent: React.ReactNode;
+    /** Optional class name for the menu content container (e.g. to set width) */
+    className?: string;
+}
+
+/**
+ * A wrapper component that sets up the Context Menu Root, Trigger, and Content container.
+ */
+export function ContextMenuAdvanced({
+    children,
+    menuContent,
+    className = "w-fit min-w-32",
+}: ContextMenuAdvancedProps) {
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+            <ContextMenuContent className={className}>
+                {menuContent}
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+}
+
+export interface ContextMenuAdvancedItemProps extends React.ComponentPropsWithoutRef<
+    typeof ContextMenuItem
+> {
+    /** Optional Lucide icon component to display on the left */
+    icon?: React.ElementType;
+    /** Optional keyboard shortcut string to display on the right */
+    shortcut?: string;
+    /** Variation of the item (e.g., "destructive" for delete actions) */
+    variant?: "default" | "destructive";
+}
+
+/**
+ * A standard context menu item that automatically handles Icon and Shortcut placement.
+ */
+export const ContextMenuAdvancedItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuItem>,
+    ContextMenuAdvancedItemProps
+>(({ icon: Icon, shortcut, variant, children, ...props }, ref) => {
+    const isRTL = useIsRTL();
+    return (
+        <ContextMenuItem ref={ref} variant={variant} {...props}>
+            {Icon && <Icon className={isRTL ? "ml-2" : "mr-2"} />}
+            {children}
+            {shortcut && (
+                <ContextMenuShortcut className={isRTL ? "ml-2" : "mr-2"}>
+                    {shortcut}
+                </ContextMenuShortcut>
+            )}
+        </ContextMenuItem>
+    );
+});
+ContextMenuAdvancedItem.displayName = "ContextMenuAdvancedItem";
+
+export interface ContextMenuAdvancedSubProps {
+    /** Optional Lucide icon component to display on the left of the trigger */
+    icon?: React.ElementType;
+    /** The label for the sub-menu trigger */
+    label: React.ReactNode;
+    /** Optional keyboard shortcut string to display on the right of the trigger */
+    shortcut?: string;
+    /** The content of the sub-menu */
+    children: React.ReactNode;
+    /** Optional class name for the sub-menu content container (e.g. to set width) */
+    contentClassName?: string;
+}
+
+/**
+ * A nested sub-menu component that automatically handles the Sub Root, Trigger, and Content container.
+ */
+export function ContextMenuAdvancedSub({
+    icon: Icon,
+    label,
+    shortcut,
+    children,
+    contentClassName = "w-fit min-w-32",
+}: ContextMenuAdvancedSubProps) {
+    const isRTL = useIsRTL();
+    return (
+        <ContextMenuSub>
+            <ContextMenuSubTrigger>
+                {Icon && <Icon className={isRTL ? "ml-2" : "mr-2"} />}
+                {label}
+                {shortcut && (
+                    <ContextMenuShortcut className={isRTL ? "ml-2" : "mr-2"}>
+                        {shortcut}
+                    </ContextMenuShortcut>
+                )}
+            </ContextMenuSubTrigger>
+            <ContextMenuPortal>
+                <ContextMenuSubContent className={contentClassName}>
+                    {children}
+                </ContextMenuSubContent>
+            </ContextMenuPortal>
+        </ContextMenuSub>
+    );
+}
+
+/**
+ * Expose the separator directly for convenience
+ */
+export const ContextMenuAdvancedSeparator = ContextMenuSeparator;