@shipfox/react-ui 0.24.0 → 0.26.0

package/dist/components/interval-selector/interval-selector.stories.js

@@ -1,232 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { endOfDay, startOfDay } from 'date-fns';
-import { useState } from 'react';
-import { IntervalSelector } from './interval-selector.js';
-const meta = {
-    title: 'Components/IntervalSelector',
-    component: IntervalSelector,
-    tags: [
-        'autodocs'
-    ],
-    parameters: {
-        layout: 'centered'
-    }
-};
-export default meta;
-function RelativeIntervalSelector() {
-    const [selection, setSelection] = useState({
-        type: 'relative',
-        duration: {
-            days: 1
-        }
-    });
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "space-y-8",
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-sm text-foreground-neutral-subtle",
-                children: [
-                    /*#__PURE__*/ _jsx("strong", {
-                        children: "Relative Mode:"
-                    }),
-                    ' Duration-based selection (e.g., "Past 1 Day"). The interval updates automatically based on the current time.'
-                ]
-            }),
-            /*#__PURE__*/ _jsx(IntervalSelector, {
-                selection: selection,
-                onSelectionChange: setSelection,
-                className: "w-[75vw] md:w-350"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-xs text-foreground-neutral-muted font-mono",
-                children: [
-                    "Selection: ",
-                    JSON.stringify(selection, null, 2)
-                ]
-            })
-        ]
-    });
-}
-function AbsoluteIntervalSelector() {
-    const now = new Date();
-    const [selection, setSelection] = useState({
-        type: 'interval',
-        interval: {
-            start: new Date(now.getFullYear(), 0, 1),
-            end: new Date(now.getFullYear(), 0, 15)
-        }
-    });
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "space-y-8",
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-sm text-foreground-neutral-subtle",
-                children: [
-                    /*#__PURE__*/ _jsx("strong", {
-                        children: "Absolute Mode:"
-                    }),
-                    ' Fixed date range selection (e.g., "Jan 1 - Jan 15"). The interval stays the same regardless of when you refresh the page.'
-                ]
-            }),
-            /*#__PURE__*/ _jsx(IntervalSelector, {
-                selection: selection,
-                onSelectionChange: setSelection,
-                className: "w-[75vw] md:w-350"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-xs text-foreground-neutral-muted font-mono",
-                children: [
-                    "Selection: ",
-                    JSON.stringify(selection, null, 2)
-                ]
-            })
-        ]
-    });
-}
-export const Relative = {
-    args: {
-        selection: {
-            type: 'relative',
-            duration: {
-                days: 1
-            }
-        },
-        onSelectionChange: ()=>undefined
-    },
-    render: ()=>/*#__PURE__*/ _jsx("div", {
-            className: "w-screen h-screen p-16",
-            children: /*#__PURE__*/ _jsx(RelativeIntervalSelector, {})
-        })
-};
-export const Absolute = {
-    args: {
-        selection: (()=>{
-            const now = new Date();
-            return {
-                type: 'interval',
-                interval: {
-                    start: new Date(now.getFullYear(), 0, 1),
-                    end: new Date(now.getFullYear(), 0, 15)
-                }
-            };
-        })(),
-        onSelectionChange: ()=>undefined
-    },
-    render: ()=>/*#__PURE__*/ _jsx("div", {
-            className: "w-screen h-screen p-16",
-            children: /*#__PURE__*/ _jsx(AbsoluteIntervalSelector, {})
-        })
-};
-function CustomIntervalsSelector() {
-    const [selection, setSelection] = useState({
-        type: 'relative',
-        duration: {
-            hours: 1
-        }
-    });
-    const customRelativeSuggestions = [
-        {
-            duration: {
-                minutes: 15
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                hours: 1
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                hours: 6
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                hours: 24
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                days: 3
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                weeks: 1
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                weeks: 2
-            },
-            type: 'relative'
-        },
-        {
-            duration: {
-                months: 1
-            },
-            type: 'relative'
-        }
-    ];
-    const customIntervalSuggestions = [
-        {
-            type: 'interval',
-            label: "During Einstein's lifetime",
-            interval: {
-                start: startOfDay(new Date('1879-03-14')),
-                end: endOfDay(new Date('1955-04-18'))
-            }
-        }
-    ];
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "space-y-8",
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-sm text-foreground-neutral-subtle",
-                children: [
-                    /*#__PURE__*/ _jsx("strong", {
-                        children: "Custom Intervals:"
-                    }),
-                    " This is useful for internationalization, branding, or context-specific options."
-                ]
-            }),
-            /*#__PURE__*/ _jsx(IntervalSelector, {
-                selection: selection,
-                onSelectionChange: setSelection,
-                relativeSuggestions: customRelativeSuggestions,
-                intervalSuggestions: customIntervalSuggestions,
-                className: "w-[75vw] md:w-350"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "text-xs text-foreground-neutral-muted font-mono",
-                children: [
-                    "Selection: ",
-                    JSON.stringify(selection, null, 2)
-                ]
-            })
-        ]
-    });
-}
-export const CustomIntervals = {
-    args: {
-        selection: {
-            type: 'relative',
-            duration: {
-                hours: 1
-            }
-        },
-        onSelectionChange: ()=>undefined
-    },
-    render: ()=>/*#__PURE__*/ _jsx("div", {
-            className: "w-screen h-screen p-16",
-            children: /*#__PURE__*/ _jsx(CustomIntervalsSelector, {})
-        })
-};
-
-//# sourceMappingURL=interval-selector.stories.js.map

package/dist/components/item/item.stories.js

@@ -1,239 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../components/button/button.js';
-import { DatePicker } from '../../components/date-picker/index.js';
-import { Icon } from '../../components/icon/icon.js';
-import { Input } from '../../components/input/input.js';
-import { Kbd } from '../../components/kbd/index.js';
-import { Label } from '../../components/label/label.js';
-import { useState } from 'react';
-import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemSeparator, ItemTitle } from './item.js';
-const meta = {
-    title: 'Components/Item',
-    component: Item,
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: [
-                'default',
-                'neutral'
-            ]
-        },
-        size: {
-            control: 'select',
-            options: [
-                'default',
-                'sm'
-            ]
-        }
-    },
-    args: {
-        variant: 'default',
-        size: 'default'
-    }
-};
-export default meta;
-const DEFAULT_START_DATE = new Date('2024-01-01T00:00:00.000Z');
-export const Default = {
-    args: {
-        variant: 'default'
-    },
-    render: (args)=>/*#__PURE__*/ _jsxs(Item, {
-            ...args,
-            className: "px-12 py-12",
-            children: [
-                /*#__PURE__*/ _jsxs(ItemContent, {
-                    children: [
-                        /*#__PURE__*/ _jsx(ItemTitle, {
-                            children: "Basic Item"
-                        }),
-                        /*#__PURE__*/ _jsx(ItemDescription, {
-                            children: "A simple item with title and description."
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(ItemActions, {
-                    className: "pt-8",
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        variant: "secondary",
-                        size: "sm",
-                        children: "Action"
-                    })
-                })
-            ]
-        })
-};
-export const Variants = {
-    args: {},
-    render: ()=>/*#__PURE__*/ _jsxs(ItemGroup, {
-            className: "flex w-full max-w-md flex-col gap-12",
-            children: [
-                /*#__PURE__*/ _jsxs(Item, {
-                    variant: "default",
-                    className: "px-12 py-12",
-                    children: [
-                        /*#__PURE__*/ _jsxs(ItemContent, {
-                            children: [
-                                /*#__PURE__*/ _jsx(ItemTitle, {
-                                    children: "Default Variant"
-                                }),
-                                /*#__PURE__*/ _jsx(ItemDescription, {
-                                    children: "Standard styling with subtle background and borders."
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(ItemActions, {
-                            className: "pt-8",
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                variant: "secondary",
-                                size: "sm",
-                                children: "Action"
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Item, {
-                    variant: "neutral",
-                    className: "px-12 py-12",
-                    children: [
-                        /*#__PURE__*/ _jsxs(ItemContent, {
-                            children: [
-                                /*#__PURE__*/ _jsx(ItemTitle, {
-                                    children: "Neutral Variant"
-                                }),
-                                /*#__PURE__*/ _jsx(ItemDescription, {
-                                    children: "Neutral style with subtle background and borders."
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(ItemActions, {
-                            className: "pt-8",
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                variant: "primary",
-                                size: "sm",
-                                children: "Action"
-                            })
-                        })
-                    ]
-                })
-            ]
-        })
-};
-export const ImportPastJobsModal = {
-    args: {},
-    render: ()=>{
-        const [date, setDate] = useState(DEFAULT_START_DATE);
-        return /*#__PURE__*/ _jsx("div", {
-            className: "flex w-full max-w-lg flex-col",
-            children: /*#__PURE__*/ _jsxs(Item, {
-                variant: "neutral",
-                children: [
-                    /*#__PURE__*/ _jsxs(ItemHeader, {
-                        className: "justify-between px-24 py-16",
-                        children: [
-                            /*#__PURE__*/ _jsx(ItemTitle, {
-                                className: "text-lg font-medium text-foreground-neutral-base",
-                                children: "Import past jobs from GitHub"
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex items-center gap-8",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Kbd, {
-                                        children: "Esc"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "transparent",
-                                        size: "xs",
-                                        className: "rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24",
-                                        children: /*#__PURE__*/ _jsx(Icon, {
-                                            name: "close"
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(ItemSeparator, {}),
-                    /*#__PURE__*/ _jsxs(ItemContent, {
-                        className: "px-24 py-16",
-                        children: [
-                            /*#__PURE__*/ _jsx(ItemDescription, {
-                                className: "mb-16 text-sm text-foreground-neutral-subtle",
-                                children: "Backfill your CI history by importing past runs from your GitHub repo. We'll handle the rest by creating a background task to import the data for you."
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex flex-col gap-20",
-                                children: [
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-8",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Label, {
-                                                htmlFor: "repo-owner",
-                                                children: "Repository owner"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Input, {
-                                                id: "repo-owner",
-                                                type: "text",
-                                                defaultValue: "apache"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-8",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Label, {
-                                                htmlFor: "repo-name",
-                                                children: "Repository name"
-                                            }),
-                                            /*#__PURE__*/ _jsx(Input, {
-                                                id: "repo-name",
-                                                type: "text",
-                                                defaultValue: "kafka"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-8",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Label, {
-                                                htmlFor: "start-date",
-                                                children: "Start date"
-                                            }),
-                                            /*#__PURE__*/ _jsx(DatePicker, {
-                                                id: "start-date",
-                                                date: date,
-                                                onDateSelect: setDate,
-                                                onClear: ()=>setDate(undefined),
-                                                placeholder: "DD/MM/YYYY"
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(ItemSeparator, {}),
-                    /*#__PURE__*/ _jsxs(ItemFooter, {
-                        className: "justify-end gap-8 px-24 py-16",
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "transparent",
-                                size: "sm",
-                                children: "Cancel"
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "primary",
-                                size: "sm",
-                                children: "Import"
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-
-//# sourceMappingURL=item.stories.js.map

package/dist/components/kbd/kbd.stories.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Kbd, KbdGroup } from './kbd.js';
-const meta = {
-    title: 'Components/Kbd',
-    component: Kbd,
-    tags: [
-        'autodocs'
-    ]
-};
-export default meta;
-export const Default = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-wrap gap-8",
-            children: [
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "Ctrl"
-                }),
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "Alt"
-                }),
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "Shift"
-                }),
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "⌘"
-                }),
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "⌥"
-                }),
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "⇧"
-                })
-            ]
-        })
-};
-export const KeyCombination = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-wrap items-center gap-12",
-            children: [
-                /*#__PURE__*/ _jsx(Kbd, {
-                    children: "⌘K"
-                }),
-                /*#__PURE__*/ _jsxs(KbdGroup, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Kbd, {
-                            children: "Ctrl"
-                        }),
-                        /*#__PURE__*/ _jsx(Kbd, {
-                            children: "Shift"
-                        }),
-                        /*#__PURE__*/ _jsx(Kbd, {
-                            children: "P"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(KbdGroup, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Kbd, {
-                            children: "Alt"
-                        }),
-                        /*#__PURE__*/ _jsx(Kbd, {
-                            children: "Enter"
-                        })
-                    ]
-                })
-            ]
-        })
-};
-export const InMenu = {
-    render: ()=>/*#__PURE__*/ _jsx("div", {
-            className: "max-w-400 rounded-10 border border-border-neutral-base p-8",
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col gap-4",
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-sm text-foreground-neutral-subtle",
-                                children: "Copy"
-                            }),
-                            /*#__PURE__*/ _jsx(Kbd, {
-                                children: "⌘C"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-sm text-foreground-neutral-subtle",
-                                children: "Paste"
-                            }),
-                            /*#__PURE__*/ _jsx(Kbd, {
-                                children: "⌘V"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "h-px bg-border-neutral-base my-4"
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "text-sm text-foreground-neutral-subtle",
-                                children: "Command Palette"
-                            }),
-                            /*#__PURE__*/ _jsx(Kbd, {
-                                children: "⌘K"
-                            })
-                        ]
-                    })
-                ]
-            })
-        })
-};
-
-//# sourceMappingURL=kbd.stories.js.map

package/dist/components/label/label.stories.js

@@ -1,105 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from '../../components/checkbox/index.js';
-import { Input } from '../../components/input/input.js';
-import { Textarea } from '../../components/textarea/index.js';
-import { Label } from './label.js';
-const meta = {
-    title: 'Components/Label',
-    component: Label,
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        htmlFor: {
-            control: 'text'
-        }
-    }
-};
-export default meta;
-export const Default = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-8",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "email",
-                    children: "Email"
-                }),
-                /*#__PURE__*/ _jsx(Input, {
-                    id: "email",
-                    type: "email",
-                    placeholder: "Enter your email"
-                })
-            ]
-        })
-};
-export const WithCheckbox = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex items-center gap-8",
-            children: [
-                /*#__PURE__*/ _jsx(Checkbox, {
-                    id: "terms"
-                }),
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "terms",
-                    children: "Accept terms and conditions"
-                })
-            ]
-        })
-};
-export const WithTextarea = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-8",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "message",
-                    children: "Message"
-                }),
-                /*#__PURE__*/ _jsx(Textarea, {
-                    id: "message",
-                    placeholder: "Enter your message"
-                })
-            ]
-        })
-};
-export const Required = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-8",
-            children: [
-                /*#__PURE__*/ _jsxs(Label, {
-                    htmlFor: "required-field",
-                    children: [
-                        "Required Field ",
-                        /*#__PURE__*/ _jsx("span", {
-                            className: "text-foreground-highlight-error",
-                            children: "*"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(Input, {
-                    id: "required-field",
-                    type: "text",
-                    placeholder: "This field is required"
-                })
-            ]
-        })
-};
-export const Disabled = {
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-8",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "disabled-field",
-                    className: "opacity-50",
-                    children: "Disabled Field"
-                }),
-                /*#__PURE__*/ _jsx(Input, {
-                    id: "disabled-field",
-                    type: "text",
-                    placeholder: "Disabled input",
-                    disabled: true
-                })
-            ]
-        })
-};
-
-//# sourceMappingURL=label.stories.js.map