@shipfox/react-ui 0.13.0 → 0.15.0

package/dist/components/button-group/button-group.stories.js

@@ -0,0 +1,644 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { Input } from '../input/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select/index.js';
+import { Textarea } from '../textarea/index.js';
+import { Code, Header } from '../typography/index.js';
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group.js';
+const meta = {
+    title: 'Components/ButtonGroup',
+    component: ButtonGroup,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A container that groups related buttons together with consistent styling. Automatically styles Button, Input, Select, and Textarea children without requiring manual className overrides. Separators are recommended for visual hierarchy.'
+            }
+        }
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: [
+                'horizontal',
+                'vertical'
+            ],
+            description: 'The orientation of the button group',
+            defaultValue: 'horizontal'
+        }
+    }
+};
+export default meta;
+function SelectExample() {
+    const [currency, setCurrency] = useState('$');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "inline-flex gap-8",
+        children: [
+            /*#__PURE__*/ _jsxs(ButtonGroup, {
+                className: "w-280",
+                "aria-label": "Currency converter",
+                children: [
+                    /*#__PURE__*/ _jsxs(Select, {
+                        value: currency,
+                        onValueChange: setCurrency,
+                        children: [
+                            /*#__PURE__*/ _jsx(SelectTrigger, {
+                                className: "w-80 font-mono text-foreground-neutral-subtle",
+                                "aria-label": "Select currency",
+                                children: /*#__PURE__*/ _jsx(SelectValue, {})
+                            }),
+                            /*#__PURE__*/ _jsxs(SelectContent, {
+                                align: "start",
+                                children: [
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "$",
+                                        children: "$ USD"
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "€",
+                                        children: "€ EUR"
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "£",
+                                        children: "£ GBP"
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "¥",
+                                        children: "¥ JPY"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                    /*#__PURE__*/ _jsx(Input, {
+                        placeholder: "10.00",
+                        pattern: "[0-9]*",
+                        "aria-label": "Amount"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ButtonGroup, {
+                "aria-label": "Send action",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "secondary",
+                    "aria-label": "Send",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        name: "arrowRightLine",
+                        className: "size-16 text-foreground-neutral-subtle"
+                    })
+                })
+            })
+        ]
+    });
+}
+function PopoverExample() {
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ _jsxs(ButtonGroup, {
+        "aria-label": "Copilot actions",
+        children: [
+            /*#__PURE__*/ _jsxs(ButtonGroupText, {
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        name: "sparklingLine",
+                        className: "size-16"
+                    }),
+                    "Copilot"
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+            /*#__PURE__*/ _jsxs(Popover, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "secondary",
+                            size: "sm",
+                            className: "!text-foreground-neutral-subtle",
+                            "aria-label": "Open Copilot options",
+                            children: /*#__PURE__*/ _jsx(Icon, {
+                                name: "arrowDownSLine",
+                                className: "size-16"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(PopoverContent, {
+                        align: "end",
+                        className: "w-320 p-0 rounded-12",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "px-16 py-12 border-b border-border-neutral-strong",
+                                children: /*#__PURE__*/ _jsx(Header, {
+                                    variant: "h4",
+                                    className: "text-sm font-medium",
+                                    children: "Agent Tasks"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "p-16 flex flex-col gap-12",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        placeholder: "Describe your task in natural language.",
+                                        className: "min-h-80 resize-none",
+                                        "aria-label": "Task description"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "label",
+                                                className: "font-medium text-foreground-neutral-base",
+                                                children: "Start a new task with Copilot"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Code, {
+                                                variant: "paragraph",
+                                                className: "text-foreground-neutral-subtle text-xs",
+                                                children: "Describe your task in natural language. Copilot will work in the background and open a pull request for your review."
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-24",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Basic Button Group"
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            "aria-label": "Text alignment",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    "aria-label": "Align left",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "rewindFill",
+                                        className: "size-14 text-foreground-neutral-subtle"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    "aria-label": "Align center",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "playFill",
+                                        className: "size-14 text-foreground-neutral-subtle"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    "aria-label": "Align right",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "speedFill",
+                                        className: "size-14 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-12",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Sizes"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Small buttons",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Cut",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "rewindFill",
+                                                className: "size-14 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Copy",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "playFill",
+                                                className: "size-14 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Paste",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "speedFill",
+                                                className: "size-14 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Medium buttons",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "md",
+                                            "aria-label": "Cut",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "rewindFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "md",
+                                            "aria-label": "Copy",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "playFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "md",
+                                            "aria-label": "Paste",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "speedFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Large buttons",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "lg",
+                                            "aria-label": "Cut",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "rewindFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "lg",
+                                            "aria-label": "Copy",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "playFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "lg",
+                                            "aria-label": "Paste",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "speedFill",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Orientation"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-24 items-start",
+                            children: [
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Horizontal",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Zoom in",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "addLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Zoom out",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "subtractLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    orientation: "vertical",
+                                    className: "h-fit w-fit",
+                                    "aria-label": "Vertical",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Increase",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "addLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {
+                                            orientation: "horizontal"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            "aria-label": "Decrease",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "subtractLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Split Button"
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            "aria-label": "Save actions",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    className: " !text-foreground-neutral-subtle",
+                                    children: "Save"
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    "aria-label": "More options",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "arrowDownSLine",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With Input"
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            className: "w-320",
+                            "aria-label": "Search",
+                            children: [
+                                /*#__PURE__*/ _jsx(Input, {
+                                    placeholder: "Search...",
+                                    "aria-label": "Search input"
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    "aria-label": "Submit search",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "searchLine",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Quantity Selector"
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            className: "w-280",
+                            "aria-label": "Quantity selector",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    "aria-label": "Decrease",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "subtractLine",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Input, {
+                                    placeholder: "1",
+                                    className: "text-center",
+                                    "aria-label": "Quantity"
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    "aria-label": "Increase",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "addLine",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With Select"
+                        }),
+                        /*#__PURE__*/ _jsx(SelectExample, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "With Popover"
+                        }),
+                        /*#__PURE__*/ _jsx(PopoverExample, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Nested Groups"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "inline-flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Page selection",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            className: "w-42 !text-foreground-neutral-subtle",
+                                            "aria-label": "Page 1",
+                                            children: "1"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            className: "w-42 !text-foreground-neutral-subtle",
+                                            "aria-label": "Page 2",
+                                            children: "2"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            className: "w-42 !text-foreground-neutral-subtle",
+                                            "aria-label": "Page 3",
+                                            children: "3"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            className: "w-42 !text-foreground-neutral-subtle",
+                                            "aria-label": "Page 4",
+                                            children: "4"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            className: "w-42 !text-foreground-neutral-subtle",
+                                            "aria-label": "Page 5",
+                                            children: "5"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                    "aria-label": "Pagination controls",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            "aria-label": "Previous page",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "arrowLeftSLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "transparent",
+                                            "aria-label": "Next page",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "arrowRightSLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Disabled State"
+                        }),
+                        /*#__PURE__*/ _jsxs(ButtonGroup, {
+                            "aria-label": "Button group with disabled state",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    className: " !text-foreground-neutral-subtle",
+                                    children: "Enabled"
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    disabled: true,
+                                    children: "Disabled"
+                                }),
+                                /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    className: " !text-foreground-neutral-subtle",
+                                    children: "Enabled"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=button-group.stories.js.map