fix: export Panel and ResizablePanel

Author: tenphi

src/components/layout/ResizablePanel.stories.tsx

@@ -2,22 +2,22 @@ import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Panel } from './Panel';
-import { ResizablePanel, ResizablePanelProps } from './ResizablePanel';
+import { ResizablePanel, CubeResizablePanelProps } from './ResizablePanel';
 
 export default {
   title: 'Layout/ResizablePanel',
   component: ResizablePanel,
   args: {},
-} as Meta<ResizablePanelProps>;
+} as Meta<CubeResizablePanelProps>;
 
-const TemplateRight: StoryFn<ResizablePanelProps> = (args) => (
+const TemplateRight: StoryFn<CubeResizablePanelProps> = (args) => (
   <Panel isFlex isStretched height="min 30x" fill="#white">
     <ResizablePanel {...args} />
     <Panel fill="#light"></Panel>
   </Panel>
 );
 
-const TemplateLeft: StoryFn<ResizablePanelProps> = (args) => {
+const TemplateLeft: StoryFn<CubeResizablePanelProps> = (args) => {
   return (
     <Panel isFlex isStretched height="min 30x" fill="#white">
       <Panel fill="#light"></Panel>
@@ -26,14 +26,14 @@ const TemplateLeft: StoryFn<ResizablePanelProps> = (args) => {
   );
 };
 
-const TemplateBottom: StoryFn<ResizablePanelProps> = (args) => (
+const TemplateBottom: StoryFn<CubeResizablePanelProps> = (args) => (
   <Panel isFlex isStretched flow="column" height="min 30x" fill="#white">
     <ResizablePanel {...args} />
     <Panel fill="#light"></Panel>
   </Panel>
 );
 
-const TemplateTop: StoryFn<ResizablePanelProps> = (args) => {
+const TemplateTop: StoryFn<CubeResizablePanelProps> = (args) => {
   return (
     <Panel isFlex isStretched flow="column" height="min 30x" fill="#white">
       <Panel fill="#light"></Panel>
@@ -42,7 +42,7 @@ const TemplateTop: StoryFn<ResizablePanelProps> = (args) => {
   );
 };
 
-const TemplateControllable: StoryFn<ResizablePanelProps> = (args) => {
+const TemplateControllable: StoryFn<CubeResizablePanelProps> = (args) => {
   const [size, setSize] = useState(200);
 
   return (

src/components/layout/ResizablePanel.tsx

@@ -15,7 +15,7 @@ import { Panel, CubePanelProps, PanelContext } from './Panel';
 
 type Direction = 'top' | 'right' | 'bottom' | 'left';
 
-export interface ResizablePanelProps extends CubePanelProps {
+export interface CubeResizablePanelProps extends CubePanelProps {
   handlerStyles?: Styles;
   direction: Direction;
   size?: number;
@@ -163,7 +163,7 @@ const PanelElement = tasty(Panel, {
 });
 
 function ResizablePanel(
-  props: ResizablePanelProps,
+  props: CubeResizablePanelProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const panelContext = useContext(PanelContext);

src/index.ts

@@ -24,6 +24,10 @@ export { Space } from './components/layout/Space';
 export type { CubeSpaceProps } from './components/layout/Space';
 export { Flow } from './components/layout/Flow';
 export type { CubeFlowProps } from './components/layout/Flow';
+export { Panel } from './components/layout/Panel';
+export type { CubePanelProps } from './components/layout/Panel';
+export { ResizablePanel } from './components/layout/ResizablePanel';
+export type { CubeResizablePanelProps } from './components/layout/ResizablePanel';
 export { Root } from './components/Root';
 export type { CubeRootProps } from './components/Root';
 export { PrismCode } from './components/content/PrismCode/PrismCode';