@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/dialog.tsx

@@ -0,0 +1,186 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import * as React from "react";
+
+import { useLanguage } from "@gostack-framework/react";
+import { cn } from "../support/utils";
+import { XIcon } from "lucide-react";
+import { Button } from "./button";
+import { ThemedText } from "../index";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+    className,
+    ...props
+}: DialogPrimitive.Backdrop.Props) {
+    return (
+        <DialogPrimitive.Backdrop
+            data-slot="dialog-overlay"
+            className={cn(
+                "fixed inset-0 isolate z-50 bg-black/60 backdrop-blur-xs duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DialogContent({
+    className,
+    children,
+    showCloseButton = true,
+    contentClassName,
+    ...props
+}: DialogPrimitive.Popup.Props & {
+    showCloseButton?: boolean;
+    contentClassName?: string;
+}) {
+    return (
+        <DialogPortal>
+            <DialogOverlay />
+            <DialogPrimitive.Popup
+                data-slot="dialog-content"
+                className={cn(
+                    "fixed top-1/2 left-1/2 z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-0 overflow-hidden rounded-xl bg-dashboard-card p-0 text-xs text-dashboard-foreground shadow-2xl border border-dashboard-border duration-100 outline-none sm:max-w-200 max-h-[88vh] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                    className,
+                )}
+                {...props}
+            >
+                <div
+                    className={cn(
+                        "flex-1 overflow-y-auto p-5 custom-scrollbar text-xs leading-relaxed",
+                        contentClassName,
+                        typeof className === "string" &&
+                            className.includes("p-0") &&
+                            "p-0! sm:p-0! flex flex-col overflow-hidden",
+                    )}
+                >
+                    {children}
+                </div>
+                {showCloseButton && (
+                    <div className="absolute top-2.5 ltr:right-2.5 rtl:left-2.5 z-10 flex items-center gap-1">
+                        <DialogPrimitive.Close
+                            data-slot="dialog-close"
+                            render={
+                                <Button
+                                    variant="ghost"
+                                    size="icon-sm"
+                                    className="size-7 rounded-md text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground transition-all cursor-pointer"
+                                >
+                                    <XIcon size={14} />
+                                    <ThemedText as="span" className="sr-only">Close</ThemedText>
+                                </Button>
+                            }
+                        />
+                    </div>
+                )}
+            </DialogPrimitive.Popup>
+        </DialogPortal>
+    );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn("flex flex-col gap-1 px-5 py-4 border-b border-dashboard-border", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogFooter({
+    className,
+    showCloseButton = false,
+    children,
+    ...props
+}: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}) {
+    const { t } = useLanguage();
+    return (
+        <div
+            data-slot="dialog-footer"
+            className={cn(
+                "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-5 py-3 border-t border-dashboard-border bg-dashboard-secondary/30 rounded-b-xl",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            {showCloseButton && (
+                <DialogPrimitive.Close
+                    className="w-full sm:w-auto"
+                    render={
+                        <Button
+                            variant="outline"
+                            className="w-full sm:w-auto h-8 px-4 text-xs font-semibold rounded-md border-dashboard-border text-dashboard-muted-foreground hover:bg-dashboard-secondary"
+                        >
+                            {t("dashboard:common.cancel")}
+                        </Button>
+                    }
+                />
+            )}
+        </div>
+    );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+    return (
+        <ThemedText
+            as={DialogPrimitive.Title}
+            data-slot="dialog-title"
+            variant="h3"
+            className={cn(
+                "text-[16px] sm:text-[17px] font-semibold text-dashboard-foreground tracking-tight leading-snug",
+                className,
+            )}
+            {...(props as any)}
+        />
+    );
+}
+
+function DialogDescription({
+    className,
+    ...props
+}: DialogPrimitive.Description.Props) {
+    return (
+        <ThemedText
+            as={DialogPrimitive.Description}
+            data-slot="dialog-description"
+            variant="subtitle"
+            className={cn(
+                "text-xs text-dashboard-muted-foreground mt-0.5 leading-normal *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-dashboard-foreground",
+                className,
+            )}
+            {...(props as any)}
+        />
+    );
+}
+
+export {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
+};

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,274 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import * as React from "react";
+
+import { cn } from "../support/utils";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+    return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+    return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+    return (
+        <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+    );
+}
+
+function DropdownMenuContent({
+    align = "start",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    className,
+    ...props
+}: MenuPrimitive.Popup.Props &
+    Pick<
+        MenuPrimitive.Positioner.Props,
+        "align" | "alignOffset" | "side" | "sideOffset"
+    >) {
+    return (
+        <MenuPrimitive.Portal>
+            <MenuPrimitive.Positioner
+                className="isolate z-50 outline-none"
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+            >
+                <MenuPrimitive.Popup
+                    data-slot="dropdown-menu-content"
+                    className={cn(
+                        "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-dashboard bg-dashboard-card p-1.5 text-dashboard-foreground shadow-xl border border-dashboard-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+                        className,
+                    )}
+                    {...props}
+                />
+            </MenuPrimitive.Positioner>
+        </MenuPrimitive.Portal>
+    );
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+    return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuLabel({
+    className,
+    inset,
+    ...props
+}: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.GroupLabel
+            data-slot="dropdown-menu-label"
+            data-inset={inset}
+            className={cn(
+                "px-2.5 py-1 text-[10.5px] font-semibold uppercase tracking-wider text-dashboard-muted-foreground data-inset:pl-8",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuItem({
+    className,
+    inset,
+    variant = "default",
+    ...props
+}: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}) {
+    return (
+        <MenuPrimitive.Item
+            data-slot="dropdown-menu-item"
+            data-inset={inset}
+            data-variant={variant}
+            className={cn(
+                "group/dropdown-menu-item relative flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-dashboard-foreground outline-none select-none hover:bg-dashboard-secondary focus:bg-dashboard-secondary focus:text-dashboard-foreground not-data-[variant=destructive]:focus:**:text-dashboard-foreground data-inset:pl-8 data-[variant=destructive]:text-dashboard-destructive data-[variant=destructive]:focus:bg-dashboard-destructive/10 data-[variant=destructive]:focus:text-dashboard-destructive dark:data-[variant=destructive]:focus:bg-dashboard-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-dashboard-destructive",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+    return (
+        <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+    );
+}
+
+function DropdownMenuSubTrigger({
+    className,
+    inset,
+    children,
+    ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.SubmenuTrigger
+            data-slot="dropdown-menu-sub-trigger"
+            data-inset={inset}
+            className={cn(
+                "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium text-dashboard-foreground outline-none select-none hover:bg-dashboard-border/80 focus:bg-dashboard-secondary focus:text-dashboard-foreground not-data-[variant=destructive]:focus:**:text-dashboard-foreground data-inset:pl-8 data-popup-open:bg-dashboard-secondary data-popup-open:text-dashboard-foreground data-open:bg-dashboard-secondary data-open:text-dashboard-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronRightIcon className="ml-auto rtl:rotate-180" />
+        </MenuPrimitive.SubmenuTrigger>
+    );
+}
+
+function DropdownMenuSubContent({
+    align = "start",
+    alignOffset = -3,
+    side = "right",
+    sideOffset = 0,
+    className,
+    ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+    return (
+        <DropdownMenuContent
+            data-slot="dropdown-menu-sub-content"
+            className={cn(
+                "w-auto min-w-[96px] rounded-xl bg-dashboard-popover p-1.5 text-dashboard-popover-foreground shadow-lg border border-dashboard-border duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                className,
+            )}
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuCheckboxItem({
+    className,
+    children,
+    checked,
+    inset,
+    ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.CheckboxItem
+            data-slot="dropdown-menu-checkbox-item"
+            data-inset={inset}
+            className={cn(
+                "relative flex cursor-default items-center gap-2 rounded-md py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-dashboard-secondary focus:text-dashboard-foreground focus:**:text-dashboard-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            checked={checked}
+            {...props}
+        >
+            <span
+                className="pointer-events-none absolute right-2 flex items-center justify-center"
+                data-slot="dropdown-menu-checkbox-item-indicator"
+            >
+                <MenuPrimitive.CheckboxItemIndicator>
+                    <CheckIcon />
+                </MenuPrimitive.CheckboxItemIndicator>
+            </span>
+            {children}
+        </MenuPrimitive.CheckboxItem>
+    );
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+    return (
+        <MenuPrimitive.RadioGroup
+            data-slot="dropdown-menu-radio-group"
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuRadioItem({
+    className,
+    children,
+    inset,
+    ...props
+}: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.RadioItem
+            data-slot="dropdown-menu-radio-item"
+            data-inset={inset}
+            className={cn(
+                "relative flex cursor-default items-center gap-2 rounded-md py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-dashboard-secondary focus:text-dashboard-foreground focus:**:text-dashboard-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <span
+                className="pointer-events-none absolute right-2 flex items-center justify-center"
+                data-slot="dropdown-menu-radio-item-indicator"
+            >
+                <MenuPrimitive.RadioItemIndicator>
+                    <CheckIcon />
+                </MenuPrimitive.RadioItemIndicator>
+            </span>
+            {children}
+        </MenuPrimitive.RadioItem>
+    );
+}
+
+function DropdownMenuSeparator({
+    className,
+    ...props
+}: MenuPrimitive.Separator.Props) {
+    return (
+        <MenuPrimitive.Separator
+            data-slot="dropdown-menu-separator"
+            className={cn("-mx-1 my-1 h-px bg-dashboard-border", className)}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuShortcut({
+    className,
+    ...props
+}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="dropdown-menu-shortcut"
+            className={cn(
+                "ml-auto text-[13px] text-dashboard-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+};