@shipfox/react-ui 0.3.0 → 0.5.0

package/dist/components/tooltip/tooltip.stories.js

@@ -0,0 +1,560 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code } from '../../components/typography/index.js';
+import { Button } from '../button/index.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+const meta = {
+    title: 'Components/Tooltip',
+    component: Tooltip,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        defaultOpen: {
+            control: 'boolean'
+        },
+        delayDuration: {
+            control: 'number'
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'default',
+                'inverted',
+                'muted'
+            ]
+        },
+        size: {
+            control: 'select',
+            options: [
+                'sm',
+                'md',
+                'lg'
+            ]
+        },
+        side: {
+            control: 'select',
+            options: [
+                'top',
+                'bottom',
+                'left',
+                'right'
+            ]
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end'
+            ]
+        },
+        sideOffset: {
+            control: 'number'
+        },
+        animated: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        defaultOpen: false,
+        delayDuration: 0,
+        variant: 'default',
+        size: 'md',
+        side: 'top',
+        align: 'center',
+        sideOffset: 8,
+        animated: true
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultOpen: false
+    },
+    render: (args)=>{
+        const { defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated } = args;
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center p-64",
+            children: /*#__PURE__*/ _jsxs(Tooltip, {
+                defaultOpen: defaultOpen,
+                delayDuration: delayDuration,
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Hover me"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        variant: variant,
+                        size: size,
+                        side: side,
+                        align: align,
+                        sideOffset: sideOffset,
+                        animated: animated,
+                        children: "Tooltip Text"
+                    })
+                ]
+            })
+        });
+    }
+};
+export const Types = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-64 p-64",
+            children: [
+                /*#__PURE__*/ _jsx(Code, {
+                    variant: "label",
+                    className: "text-foreground-neutral-subtle",
+                    children: "TYPES"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-32",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle",
+                                    children: "Type=Text"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "primary",
+                                                        children: "Tooltip Text"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    variant: "inverted",
+                                                    children: "Tooltip Text"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "secondary",
+                                                        children: "Tooltip Text"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    children: "Tooltip Text"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle",
+                                    children: "Type=Shortcut"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "primary",
+                                                        children: "Tooltip Text"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    variant: "inverted",
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center gap-6",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Tooltip Text"
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                className: "flex items-center gap-4",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("kbd", {
+                                                                        className: "flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle",
+                                                                        children: "⌘"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("kbd", {
+                                                                        className: "flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle",
+                                                                        children: "/"
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "secondary",
+                                                        children: "Tooltip Text"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center gap-6",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Tooltip Text"
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                className: "flex items-center gap-4",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("kbd", {
+                                                                        className: "flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle",
+                                                                        children: "⌘"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("kbd", {
+                                                                        className: "flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle",
+                                                                        children: "/"
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle",
+                                    children: "Type=Graph"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "primary",
+                                                        children: "Hover for graph data"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    variant: "inverted",
+                                                    className: "w-160",
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex flex-col gap-4",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: "text-xs text-foreground-neutral-subtle",
+                                                                children: "Jul 22, 2025"
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                className: "flex flex-col gap-4",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-purple-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data A"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$6.14"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-green-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data B"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$4.37"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-orange-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data C"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$12.88"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-blue-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data D"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$2.91"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "secondary",
+                                                        children: "Hover for graph data"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    className: "w-160",
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex flex-col gap-4",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: "text-xs text-foreground-neutral-subtle",
+                                                                children: "Jul 22, 2025"
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                className: "flex flex-col gap-4",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-purple-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data A"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$6.14"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-green-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data B"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$4.37"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-orange-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data C"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$12.88"
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("div", {
+                                                                        className: "flex items-center justify-between gap-12",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                                className: "flex flex-1 items-center gap-4",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx("div", {
+                                                                                        className: "size-6 rounded-full bg-blue-500"
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx("span", {
+                                                                                        className: "text-xs",
+                                                                                        children: "Data D"
+                                                                                    })
+                                                                                ]
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "$2.91"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Code, {
+                                    variant: "label",
+                                    className: "text-foreground-neutral-subtle",
+                                    children: "Type=Breadcrumbs"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "primary",
+                                                        children: "Breadcrumb"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    variant: "inverted",
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center gap-6",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Breadcrumb"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "text-foreground-neutral-muted",
+                                                                children: "/"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Breadcrumb"
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "secondary",
+                                                        children: "Breadcrumb"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "flex items-center gap-6",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Breadcrumb"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                className: "text-foreground-neutral-muted",
+                                                                children: "/"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("span", {
+                                                                children: "Breadcrumb"
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=tooltip.stories.js.map

package/dist/components/tooltip/tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tooltip/tooltip.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from '../button';\nimport {Tooltip, TooltipContent, type TooltipContentProps, TooltipTrigger} from './tooltip';\n\ntype TooltipStoryArgs = {\n  defaultOpen?: boolean;\n  delayDuration?: number;\n  variant?: TooltipContentProps['variant'];\n  size?: TooltipContentProps['size'];\n  side?: TooltipContentProps['side'];\n  align?: TooltipContentProps['align'];\n  sideOffset?: TooltipContentProps['sideOffset'];\n  animated?: TooltipContentProps['animated'];\n};\n\nconst meta = {\n  title: 'Components/Tooltip',\n  component: Tooltip,\n  tags: ['autodocs'],\n  argTypes: {\n    defaultOpen: {control: 'boolean'},\n    delayDuration: {control: 'number'},\n    variant: {\n      control: 'select',\n      options: ['default', 'inverted', 'muted'],\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n    },\n    side: {\n      control: 'select',\n      options: ['top', 'bottom', 'left', 'right'],\n    },\n    align: {\n      control: 'select',\n      options: ['start', 'center', 'end'],\n    },\n    sideOffset: {control: 'number'},\n    animated: {control: 'boolean'},\n  },\n  args: {\n    defaultOpen: false,\n    delayDuration: 0,\n    variant: 'default',\n    size: 'md',\n    side: 'top',\n    align: 'center',\n    sideOffset: 8,\n    animated: true,\n  },\n} satisfies Meta<TooltipStoryArgs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    defaultOpen: false,\n  },\n\n  render: (args: TooltipStoryArgs) => {\n    const {defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated} = args;\n    return (\n      <div className=\"flex items-center justify-center p-64\">\n        <Tooltip defaultOpen={defaultOpen} delayDuration={delayDuration}>\n          <TooltipTrigger asChild>\n            <Button>Hover me</Button>\n          </TooltipTrigger>\n          <TooltipContent\n            variant={variant}\n            size={size}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            animated={animated}\n          >\n            Tooltip Text\n          </TooltipContent>\n        </Tooltip>\n      </div>\n    );\n  },\n};\n\nexport const Types: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-64 p-64\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        TYPES\n      </Code>\n      <div className=\"flex flex-col gap-32\">\n        {/* Text Type */}\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Type=Text\n          </Code>\n          <div className=\"flex gap-16\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"primary\">Tooltip Text</Button>\n              </TooltipTrigger>\n              <TooltipContent variant=\"inverted\">Tooltip Text</TooltipContent>\n            </Tooltip>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"secondary\">Tooltip Text</Button>\n              </TooltipTrigger>\n              <TooltipContent>Tooltip Text</TooltipContent>\n            </Tooltip>\n          </div>\n        </div>\n\n        {/* Shortcut Type */}\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Type=Shortcut\n          </Code>\n          <div className=\"flex gap-16\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"primary\">Tooltip Text</Button>\n              </TooltipTrigger>\n              <TooltipContent variant=\"inverted\">\n                <div className=\"flex items-center gap-6\">\n                  <span>Tooltip Text</span>\n                  <div className=\"flex items-center gap-4\">\n                    <kbd className=\"flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle\">\n                      ⌘\n                    </kbd>\n                    <kbd className=\"flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle\">\n                      /\n                    </kbd>\n                  </div>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"secondary\">Tooltip Text</Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                <div className=\"flex items-center gap-6\">\n                  <span>Tooltip Text</span>\n                  <div className=\"flex items-center gap-4\">\n                    <kbd className=\"flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle\">\n                      ⌘\n                    </kbd>\n                    <kbd className=\"flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle\">\n                      /\n                    </kbd>\n                  </div>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          </div>\n        </div>\n\n        {/* Graph Type */}\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Type=Graph\n          </Code>\n          <div className=\"flex gap-16\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"primary\">Hover for graph data</Button>\n              </TooltipTrigger>\n              <TooltipContent variant=\"inverted\" className=\"w-160\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"text-xs text-foreground-neutral-subtle\">Jul 22, 2025</div>\n                  <div className=\"flex flex-col gap-4\">\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-purple-500\" />\n                        <span className=\"text-xs\">Data A</span>\n                      </div>\n                      <span className=\"text-xs\">$6.14</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-green-500\" />\n                        <span className=\"text-xs\">Data B</span>\n                      </div>\n                      <span className=\"text-xs\">$4.37</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-orange-500\" />\n                        <span className=\"text-xs\">Data C</span>\n                      </div>\n                      <span className=\"text-xs\">$12.88</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-blue-500\" />\n                        <span className=\"text-xs\">Data D</span>\n                      </div>\n                      <span className=\"text-xs\">$2.91</span>\n                    </div>\n                  </div>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"secondary\">Hover for graph data</Button>\n              </TooltipTrigger>\n              <TooltipContent className=\"w-160\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"text-xs text-foreground-neutral-subtle\">Jul 22, 2025</div>\n                  <div className=\"flex flex-col gap-4\">\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-purple-500\" />\n                        <span className=\"text-xs\">Data A</span>\n                      </div>\n                      <span className=\"text-xs\">$6.14</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-green-500\" />\n                        <span className=\"text-xs\">Data B</span>\n                      </div>\n                      <span className=\"text-xs\">$4.37</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-orange-500\" />\n                        <span className=\"text-xs\">Data C</span>\n                      </div>\n                      <span className=\"text-xs\">$12.88</span>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-12\">\n                      <div className=\"flex flex-1 items-center gap-4\">\n                        <div className=\"size-6 rounded-full bg-blue-500\" />\n                        <span className=\"text-xs\">Data D</span>\n                      </div>\n                      <span className=\"text-xs\">$2.91</span>\n                    </div>\n                  </div>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          </div>\n        </div>\n\n        {/* Breadcrumbs Type */}\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Type=Breadcrumbs\n          </Code>\n          <div className=\"flex gap-16\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"primary\">Breadcrumb</Button>\n              </TooltipTrigger>\n              <TooltipContent variant=\"inverted\">\n                <div className=\"flex items-center gap-6\">\n                  <span>Breadcrumb</span>\n                  <span className=\"text-foreground-neutral-muted\">/</span>\n                  <span>Breadcrumb</span>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"secondary\">Breadcrumb</Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                <div className=\"flex items-center gap-6\">\n                  <span>Breadcrumb</span>\n                  <span className=\"text-foreground-neutral-muted\">/</span>\n                  <span>Breadcrumb</span>\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","Tooltip","TooltipContent","TooltipTrigger","meta","title","component","tags","argTypes","defaultOpen","control","delayDuration","variant","options","size","side","align","sideOffset","animated","args","Default","render","div","className","asChild","Types","span","kbd"],"mappings":"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"}

package/dist/hooks/index.d.ts

@@ -1,3 +1,6 @@
 export * from './useCopyToClipboard';
+export * from './useResolvedTheme';
+export * from './useShikiHighlight';
+export * from './useShikiStyleInjection';
 export * from './useTheme';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC"}

package/dist/hooks/index.js

@@ -1,4 +1,7 @@
 export * from './useCopyToClipboard.js';
+export * from './useResolvedTheme.js';
+export * from './useShikiHighlight.js';
+export * from './useShikiStyleInjection.js';
 export * from './useTheme.js';
 
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useCopyToClipboard';\nexport * from './useTheme';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,aAAa"}
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useCopyToClipboard';\nexport * from './useResolvedTheme';\nexport * from './useShikiHighlight';\nexport * from './useShikiStyleInjection';\nexport * from './useTheme';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,aAAa"}