@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/select/select.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+function Select({ ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Root, {
+        "data-slot": "select",
+        ...props
+    });
+}
+function SelectGroup({ ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Group, {
+        "data-slot": "select-group",
+        ...props
+    });
+}
+function SelectValue({ ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Value, {
+        "data-slot": "select-value",
+        ...props
+    });
+}
+const selectTriggerVariants = cva([
+    'flex items-center justify-between gap-8',
+    'w-full rounded-6 px-8 text-sm leading-20',
+    'bg-background-field-base text-foreground-neutral-subtle',
+    'shadow-button-neutral transition-[color,box-shadow] outline-none',
+    'hover:bg-background-field-hover',
+    'focus-visible:shadow-border-interactive-with-active',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',
+    'data-[placeholder]:text-foreground-neutral-muted'
+], {
+    variants: {
+        variant: {
+            base: 'bg-background-field-base',
+            component: 'bg-background-field-component'
+        },
+        size: {
+            small: 'h-28 py-4',
+            base: 'h-32 py-6'
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'base'
+    }
+});
+function SelectTrigger({ className, variant, size, children, ...props }) {
+    return /*#__PURE__*/ _jsxs(SelectPrimitive.Trigger, {
+        "data-slot": "select-trigger",
+        className: cn(selectTriggerVariants({
+            variant,
+            size
+        }), className),
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(SelectPrimitive.Icon, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "expandUpDownLine",
+                    className: "size-16 text-foreground-neutral-muted shrink-0"
+                })
+            })
+        ]
+    });
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.ScrollUpButton, {
+        "data-slot": "select-scroll-up-button",
+        className: cn('flex cursor-default items-center justify-center py-4', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            name: "arrowUpSLine",
+            className: "size-16 text-foreground-neutral-muted"
+        })
+    });
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.ScrollDownButton, {
+        "data-slot": "select-scroll-down-button",
+        className: cn('flex cursor-default items-center justify-center py-4', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            name: "arrowDownSLine",
+            className: "size-16 text-foreground-neutral-muted"
+        })
+    });
+}
+function SelectContent({ className, children, position = 'popper', sideOffset = 4, align = 'center', container, ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Portal, {
+        container: container,
+        children: /*#__PURE__*/ _jsxs(SelectPrimitive.Content, {
+            "data-slot": "select-content",
+            className: cn('relative z-50 max-h-300 min-w-180 overflow-hidden rounded-10 p-4', 'bg-background-neutral-overlay shadow-tooltip', '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', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+            position: position,
+            sideOffset: sideOffset,
+            align: align,
+            ...props,
+            children: [
+                /*#__PURE__*/ _jsx(SelectScrollUpButton, {}),
+                /*#__PURE__*/ _jsx(SelectPrimitive.Viewport, {
+                    "data-slot": "select-viewport",
+                    className: cn('p-0', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
+                    children: children
+                }),
+                /*#__PURE__*/ _jsx(SelectScrollDownButton, {})
+            ]
+        })
+    });
+}
+function SelectLabel({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Label, {
+        "data-slot": "select-label",
+        className: cn('px-8 py-4 text-xs leading-20 text-foreground-neutral-subtle select-none', className),
+        ...props
+    });
+}
+function SelectItem({ className, children, icon, ...props }) {
+    return /*#__PURE__*/ _jsxs(SelectPrimitive.Item, {
+        "data-slot": "select-item",
+        className: cn('relative flex cursor-pointer select-none items-center gap-8 rounded-6 py-6 pl-32 pr-8', 'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors', 'focus:bg-background-components-hover', 'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled', 'data-[state=checked]:text-foreground-neutral-base', icon && 'pl-56', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "absolute left-8 flex size-16 items-center justify-center",
+                children: /*#__PURE__*/ _jsx(SelectPrimitive.ItemIndicator, {
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        name: "check",
+                        className: "size-14 text-foreground-neutral-base"
+                    })
+                })
+            }),
+            icon && /*#__PURE__*/ _jsx(Icon, {
+                name: icon,
+                className: "size-16 shrink-0 text-foreground-neutral-subtle absolute left-32"
+            }),
+            /*#__PURE__*/ _jsx(SelectPrimitive.ItemText, {
+                children: children
+            })
+        ]
+    });
+}
+function SelectSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(SelectPrimitive.Separator, {
+        "data-slot": "select-separator",
+        className: cn('relative -mx-4 my-4 h-px', 'bg-border-neutral-menu-top', 'after:absolute after:inset-x-0 after:top-px after:h-px', 'after:bg-border-neutral-menu-bottom', className),
+        ...props
+    });
+}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.stories.js

@@ -0,0 +1,393 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd } from '../kbd/index.js';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from './select.js';
+const meta = {
+    title: 'Components/Select',
+    component: Select,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs(Select, {
+            children: [
+                /*#__PURE__*/ _jsx(SelectTrigger, {
+                    className: "w-200",
+                    children: /*#__PURE__*/ _jsx(SelectValue, {
+                        placeholder: "Select an option"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(SelectContent, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "option1",
+                            children: "Option 1"
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "option2",
+                            children: "Option 2"
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "option3",
+                            children: "Option 3"
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithGroups = {
+    render: ()=>/*#__PURE__*/ _jsxs(Select, {
+            defaultValue: "typescript",
+            children: [
+                /*#__PURE__*/ _jsx(SelectTrigger, {
+                    className: "w-280",
+                    children: /*#__PURE__*/ _jsx(SelectValue, {
+                        placeholder: "Select a technology"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(SelectContent, {
+                    children: [
+                        /*#__PURE__*/ _jsxs(SelectGroup, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectLabel, {
+                                    children: "Frontend"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "react",
+                                    children: "React"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "vue",
+                                    children: "Vue"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "angular",
+                                    children: "Angular"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "svelte",
+                                    children: "Svelte"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(SelectSeparator, {}),
+                        /*#__PURE__*/ _jsxs(SelectGroup, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectLabel, {
+                                    children: "Backend"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "nodejs",
+                                    children: "Node.js"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "python",
+                                    children: "Python"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "ruby",
+                                    children: "Ruby"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "go",
+                                    children: "Go"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(SelectSeparator, {}),
+                        /*#__PURE__*/ _jsxs(SelectGroup, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectLabel, {
+                                    children: "Languages"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "typescript",
+                                    children: "TypeScript"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "javascript",
+                                    children: "JavaScript"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "rust",
+                                    children: "Rust"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const WithIcons = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12",
+            children: [
+                /*#__PURE__*/ _jsxs(Select, {
+                    defaultValue: "active",
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Select status"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "active",
+                                    icon: "checkboxCircleLine",
+                                    children: "Active"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "pending",
+                                    icon: "timeLine",
+                                    children: "Pending"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "inactive",
+                                    icon: "closeLine",
+                                    children: "Inactive"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    defaultValue: "medium",
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Select priority"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "high",
+                                    icon: "arrowUpLine",
+                                    children: "High"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "medium",
+                                    icon: "equalLine",
+                                    children: "Medium"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "low",
+                                    icon: "arrowDownLine",
+                                    children: "Low"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const Sizes = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12",
+            children: [
+                /*#__PURE__*/ _jsxs(Select, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            size: "small",
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Small"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option1",
+                                    children: "Option 1"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option2",
+                                    children: "Option 2"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            size: "base",
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Base (default)"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option1",
+                                    children: "Option 1"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option2",
+                                    children: "Option 2"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const Variants = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12",
+            children: [
+                /*#__PURE__*/ _jsxs(Select, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            variant: "base",
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Base variant"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option1",
+                                    children: "Option 1"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option2",
+                                    children: "Option 2"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            variant: "component",
+                            className: "w-200",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Component variant"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option1",
+                                    children: "Option 1"
+                                }),
+                                /*#__PURE__*/ _jsx(SelectItem, {
+                                    value: "option2",
+                                    children: "Option 2"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const TimeSelector = {
+    render: ()=>/*#__PURE__*/ _jsxs(Select, {
+            defaultValue: "2days",
+            children: [
+                /*#__PURE__*/ _jsx(SelectTrigger, {
+                    className: "w-280",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-8 flex-1 min-w-0",
+                        children: /*#__PURE__*/ _jsx(SelectValue, {
+                            placeholder: "Select time range"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(SelectContent, {
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "1hour",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        className: "h-16",
+                                        children: "1h"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Past 1 Hour"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "1day",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        className: "h-16",
+                                        children: "1d"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Past 1 Day"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "2days",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        className: "h-16",
+                                        children: "2d"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Past 2 Days"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "7days",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        className: "h-16",
+                                        children: "7d"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Past 7 Days"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(SelectItem, {
+                            value: "30days",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Kbd, {
+                                        className: "h-16",
+                                        children: "30d"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Past 30 Days"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=select.stories.js.map

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sheet';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sheet/index.js

@@ -0,0 +1,3 @@
+export * from './sheet.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,33 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const sheetOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sheetContentVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Sheet({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ className, ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+type SheetOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+declare function SheetOverlay({ className, ...props }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;
+type SheetContentProps = ComponentProps<typeof DialogPrimitive.Content> & VariantProps<typeof sheetContentVariants> & {
+    container?: HTMLElement | null;
+};
+declare function SheetContent({ side, className, children, container, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+type SheetHeaderProps = ComponentProps<'div'> & {
+    showEscIndicator?: boolean;
+    showClose?: boolean;
+};
+declare function SheetHeader({ className, showEscIndicator, showClose, children, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+type SheetFooterProps = ComponentProps<'div'>;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+type SheetTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react/jsx-runtime").JSX.Element;
+type SheetDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
+type SheetBodyProps = ComponentProps<'div'>;
+declare function SheetBody({ className, children, ...props }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetBody, sheetContentVariants, sheetOverlayVariants, };
+export type { SheetContentProps, SheetHeaderProps, SheetFooterProps, SheetTitleProps, SheetDescriptionProps, SheetBodyProps, SheetOverlayProps, };
+//# sourceMappingURL=sheet.d.ts.map