orizon 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -7
- package/bin/cli.mjs +53 -16
- package/bin/init.mjs +13 -9
- package/dist/components/affix/Affix.d.ts +19 -0
- package/dist/components/affix/Affix.stories.d.ts +9 -0
- package/dist/components/affix/index.d.ts +23 -0
- package/dist/components/alert/Alert.d.ts +21 -0
- package/dist/components/alert/Alert.stories.d.ts +13 -0
- package/dist/components/alert/ErrorBoundary.d.ts +10 -0
- package/dist/components/alert/index.d.ts +20 -0
- package/dist/components/anchor/Anchor.d.ts +23 -0
- package/dist/components/anchor/Anchor.stories.d.ts +9 -0
- package/dist/components/anchor/index.d.ts +24 -0
- package/dist/components/app/App.d.ts +25 -0
- package/dist/components/app/App.stories.d.ts +8 -0
- package/dist/components/app/index.d.ts +18 -0
- package/dist/components/auto-complete/AutoComplete.d.ts +22 -0
- package/dist/components/auto-complete/AutoComplete.stories.d.ts +12 -0
- package/dist/components/auto-complete/index.d.ts +22 -0
- package/dist/components/avatar/Avatar.d.ts +24 -0
- package/dist/components/avatar/Avatar.stories.d.ts +10 -0
- package/dist/components/avatar/index.d.ts +21 -0
- package/dist/components/badge/Badge.d.ts +19 -0
- package/dist/components/badge/Badge.stories.d.ts +12 -0
- package/dist/components/badge/index.d.ts +19 -0
- package/dist/components/breadcrumb/Breadcrumb.d.ts +24 -0
- package/dist/components/breadcrumb/Breadcrumb.stories.d.ts +9 -0
- package/dist/components/breadcrumb/index.d.ts +25 -0
- package/dist/components/button/Button.d.ts +24 -0
- package/dist/components/button/Button.stories.d.ts +20 -0
- package/dist/components/button/ButtonGroup.d.ts +23 -0
- package/dist/components/button/index.d.ts +33 -0
- package/dist/components/button/types.d.ts +87 -11
- package/dist/components/calendar/Calendar.d.ts +21 -0
- package/dist/components/calendar/Calendar.stories.d.ts +10 -0
- package/dist/components/calendar/index.d.ts +19 -0
- package/dist/components/card/Card.d.ts +21 -0
- package/dist/components/card/Card.stories.d.ts +14 -0
- package/dist/components/card/index.d.ts +25 -0
- package/dist/components/carousel/Carousel.d.ts +23 -0
- package/dist/components/carousel/Carousel.stories.d.ts +11 -0
- package/dist/components/carousel/index.d.ts +25 -0
- package/dist/components/cascader/Cascader.d.ts +26 -0
- package/dist/components/cascader/Cascader.stories.d.ts +11 -0
- package/dist/components/cascader/index.d.ts +25 -0
- package/dist/components/checkbox/Checkbox.d.ts +21 -0
- package/dist/components/checkbox/Checkbox.stories.d.ts +11 -0
- package/dist/components/checkbox/CheckboxGroup.d.ts +10 -0
- package/dist/components/checkbox/index.d.ts +19 -0
- package/dist/components/collapse/Collapse.d.ts +25 -0
- package/dist/components/collapse/Collapse.stories.d.ts +12 -0
- package/dist/components/collapse/index.d.ts +26 -0
- package/dist/components/color-picker/ColorPicker.d.ts +22 -0
- package/dist/components/color-picker/ColorPicker.stories.d.ts +11 -0
- package/dist/components/color-picker/index.d.ts +22 -0
- package/dist/components/date-picker/DatePicker.d.ts +20 -0
- package/dist/components/date-picker/DatePicker.stories.d.ts +12 -0
- package/dist/components/date-picker/RangePicker.d.ts +12 -0
- package/dist/components/date-picker/index.d.ts +21 -0
- package/dist/components/descriptions/Descriptions.d.ts +25 -0
- package/dist/components/descriptions/Descriptions.stories.d.ts +12 -0
- package/dist/components/descriptions/index.d.ts +25 -0
- package/dist/components/divider/Divider.stories.d.ts +12 -0
- package/dist/components/divider/index.d.ts +10 -0
- package/dist/components/drawer/Drawer.stories.d.ts +10 -0
- package/dist/components/drawer/index.d.ts +13 -0
- package/dist/components/dropdown/Dropdown.stories.d.ts +12 -0
- package/dist/components/dropdown/index.d.ts +14 -0
- package/dist/components/empty/Empty.stories.d.ts +11 -0
- package/dist/components/empty/index.d.ts +14 -0
- package/dist/components/flex/Flex.stories.d.ts +12 -0
- package/dist/components/flex/index.d.ts +15 -0
- package/dist/components/float-button/FloatButton.stories.d.ts +12 -0
- package/dist/components/float-button/index.d.ts +15 -0
- package/dist/components/form/Form.stories.d.ts +10 -0
- package/dist/components/form/index.d.ts +17 -0
- package/dist/components/grid/Grid.stories.d.ts +11 -0
- package/dist/components/grid/index.d.ts +20 -0
- package/dist/components/image/Image.stories.d.ts +11 -0
- package/dist/components/image/index.d.ts +14 -0
- package/dist/components/input/Input.stories.d.ts +14 -0
- package/dist/components/input/index.d.ts +15 -0
- package/dist/components/input-number/InputNumber.stories.d.ts +13 -0
- package/dist/components/input-number/index.d.ts +10 -0
- package/dist/components/layout/Layout.stories.d.ts +9 -0
- package/dist/components/layout/index.d.ts +17 -0
- package/dist/components/list/List.stories.d.ts +13 -0
- package/dist/components/list/index.d.ts +18 -0
- package/dist/components/masonry/Masonry.stories.d.ts +11 -0
- package/dist/components/masonry/index.d.ts +12 -0
- package/dist/components/mentions/Mentions.stories.d.ts +12 -0
- package/dist/components/mentions/index.d.ts +11 -0
- package/dist/components/menu/Menu.stories.d.ts +12 -0
- package/dist/components/menu/index.d.ts +15 -0
- package/dist/components/message/Message.stories.d.ts +8 -0
- package/dist/components/message/index.d.ts +16 -0
- package/dist/components/modal/Modal.stories.d.ts +12 -0
- package/dist/components/modal/index.d.ts +17 -0
- package/dist/components/notification/Notification.stories.d.ts +10 -0
- package/dist/components/notification/index.d.ts +14 -0
- package/dist/components/pagination/Pagination.stories.d.ts +13 -0
- package/dist/components/pagination/index.d.ts +13 -0
- package/dist/components/popconfirm/Popconfirm.stories.d.ts +11 -0
- package/dist/components/popconfirm/index.d.ts +13 -0
- package/dist/components/popover/Popover.stories.d.ts +10 -0
- package/dist/components/popover/index.d.ts +10 -0
- package/dist/components/progress/Progress.stories.d.ts +13 -0
- package/dist/components/progress/index.d.ts +10 -0
- package/dist/components/qrcode/QRCode.stories.d.ts +11 -0
- package/dist/components/qrcode/index.d.ts +9 -0
- package/dist/components/radio/Radio.stories.d.ts +13 -0
- package/dist/components/radio/index.d.ts +17 -0
- package/dist/components/rate/Rate.stories.d.ts +12 -0
- package/dist/components/rate/index.d.ts +13 -0
- package/dist/components/result/Result.stories.d.ts +12 -0
- package/dist/components/result/index.d.ts +9 -0
- package/dist/components/segmented/Segmented.stories.d.ts +12 -0
- package/dist/components/segmented/index.d.ts +9 -0
- package/dist/components/select/Select.stories.d.ts +14 -0
- package/dist/components/select/index.d.ts +10 -0
- package/dist/components/skeleton/Skeleton.stories.d.ts +12 -0
- package/dist/components/skeleton/index.d.ts +15 -0
- package/dist/components/slider/Slider.stories.d.ts +13 -0
- package/dist/components/slider/index.d.ts +10 -0
- package/dist/components/space/Space.stories.d.ts +13 -0
- package/dist/components/space/index.d.ts +18 -0
- package/dist/components/spin/Spin.stories.d.ts +13 -0
- package/dist/components/spin/index.d.ts +14 -0
- package/dist/components/splitter/Splitter.stories.d.ts +12 -0
- package/dist/components/splitter/index.d.ts +18 -0
- package/dist/components/statistic/Statistic.stories.d.ts +10 -0
- package/dist/components/statistic/index.d.ts +17 -0
- package/dist/components/steps/Steps.stories.d.ts +11 -0
- package/dist/components/steps/index.d.ts +15 -0
- package/dist/components/switch/Switch.stories.d.ts +10 -0
- package/dist/components/switch/index.d.ts +12 -0
- package/dist/components/table/Table.stories.d.ts +12 -0
- package/dist/components/table/index.d.ts +12 -0
- package/dist/components/tabs/Tabs.stories.d.ts +11 -0
- package/dist/components/tabs/index.d.ts +16 -0
- package/dist/components/tag/Tag.stories.d.ts +11 -0
- package/dist/components/tag/index.d.ts +14 -0
- package/dist/components/time-picker/TimePicker.stories.d.ts +10 -0
- package/dist/components/time-picker/index.d.ts +13 -0
- package/dist/components/timeline/Timeline.stories.d.ts +10 -0
- package/dist/components/timeline/index.d.ts +15 -0
- package/dist/components/tooltip/Tooltip.stories.d.ts +8 -0
- package/dist/components/tooltip/index.d.ts +10 -0
- package/dist/components/tour/Tour.stories.d.ts +8 -0
- package/dist/components/tour/index.d.ts +16 -0
- package/dist/components/transfer/Transfer.stories.d.ts +9 -0
- package/dist/components/transfer/index.d.ts +15 -0
- package/dist/components/tree/Tree.stories.d.ts +10 -0
- package/dist/components/tree/index.d.ts +18 -0
- package/dist/components/tree-select/TreeSelect.stories.d.ts +9 -0
- package/dist/components/tree-select/index.d.ts +16 -0
- package/dist/components/typography/Typography.stories.d.ts +11 -0
- package/dist/components/typography/index.d.ts +14 -0
- package/dist/components/upload/Upload.stories.d.ts +10 -0
- package/dist/components/upload/index.d.ts +17 -0
- package/dist/components/watermark/Watermark.stories.d.ts +9 -0
- package/dist/components/watermark/index.d.ts +11 -0
- package/dist/orizon.cjs.js +101 -101
- package/dist/orizon.es.js +26200 -25378
- package/dist/preset.css +4 -4
- package/dist/themes/corporate.css +169 -0
- package/package.json +16 -3
|
@@ -1,4 +1,23 @@
|
|
|
1
1
|
import { BadgeProps, BadgeRibbonProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Badge Component
|
|
4
|
+
*
|
|
5
|
+
* Displays a numeric count, dot, or status indicator on its children.
|
|
6
|
+
* Includes `Badge.Ribbon` for corner ribbon decorations on cards.
|
|
7
|
+
*
|
|
8
|
+
* Key props: `count`, `dot`, `status`, `color`, `size`, `overflowCount`,
|
|
9
|
+
* `showZero`, `offset`.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Badge count={5}><Avatar /></Badge>
|
|
14
|
+
* <Badge dot status="success" />
|
|
15
|
+
* <Badge.Ribbon text="New"><Card>...</Card></Badge.Ribbon>
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @see {@link ./types.ts} — prop definitions
|
|
19
|
+
* @see {@link ./index.ts} — barrel export
|
|
20
|
+
*/
|
|
2
21
|
import * as React from "react";
|
|
3
22
|
declare const InternalBadge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
4
23
|
declare const BadgeRibbon: React.FC<BadgeRibbonProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Badge } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Badge>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Badge>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Count: Story;
|
|
8
|
+
export declare const Dot: Story;
|
|
9
|
+
export declare const StatusBadges: Story;
|
|
10
|
+
export declare const Colors: Story;
|
|
11
|
+
export declare const Overflow: Story;
|
|
12
|
+
export declare const Ribbon: Story;
|
|
@@ -2,6 +2,25 @@ import { InternalBadge, BadgeRibbon } from './Badge';
|
|
|
2
2
|
type BadgeComponent = typeof InternalBadge & {
|
|
3
3
|
Ribbon: typeof BadgeRibbon;
|
|
4
4
|
};
|
|
5
|
+
/**
|
|
6
|
+
* Badge component for numeric counts, dots, and status indicators.
|
|
7
|
+
*
|
|
8
|
+
* Supports `count`, `dot`, `status`, preset / custom `color`,
|
|
9
|
+
* `overflowCount`, `size`, and `showZero`.
|
|
10
|
+
*
|
|
11
|
+
* Use `Badge.Ribbon` for corner ribbon decorations on cards.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Badge count={5}><button>Notifications</button></Badge>
|
|
16
|
+
* <Badge dot status="processing"><span>Online</span></Badge>
|
|
17
|
+
* <Badge status="success" text="Completed" />
|
|
18
|
+
*
|
|
19
|
+
* <Badge.Ribbon text="Hot" color="red">
|
|
20
|
+
* <Card>Content</Card>
|
|
21
|
+
* </Badge.Ribbon>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
5
24
|
declare const Badge: BadgeComponent;
|
|
6
25
|
export { Badge };
|
|
7
26
|
export type { BadgeProps, BadgeRibbonProps, BadgeStatus, BadgeSize, PresetColor, RibbonPlacement, } from './types';
|
|
@@ -1,4 +1,28 @@
|
|
|
1
1
|
import { BreadcrumbProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Breadcrumb Component
|
|
4
|
+
*
|
|
5
|
+
* Renders a breadcrumb trail from an `items` array. Each item can
|
|
6
|
+
* optionally include an `href` for linking, a dropdown `menu` for
|
|
7
|
+
* sub-navigation, and an `onClick` handler. The last item is
|
|
8
|
+
* automatically rendered as the current page.
|
|
9
|
+
*
|
|
10
|
+
* Key props: `items`, `separator`.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Breadcrumb
|
|
15
|
+
* items={[
|
|
16
|
+
* { title: "Home", href: "/" },
|
|
17
|
+
* { title: "Products", href: "/products" },
|
|
18
|
+
* { title: "Widget" },
|
|
19
|
+
* ]}
|
|
20
|
+
* />
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @see {@link ./types.ts} — prop definitions
|
|
24
|
+
* @see {@link ./index.ts} — barrel export
|
|
25
|
+
*/
|
|
2
26
|
import * as React from "react";
|
|
3
27
|
declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
4
28
|
export { Breadcrumb };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Breadcrumb } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Breadcrumb>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Breadcrumb>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Basic: Story;
|
|
8
|
+
export declare const CustomSeparator: Story;
|
|
9
|
+
export declare const WithMenu: Story;
|
|
@@ -1,2 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file Breadcrumb — Public Barrel Export
|
|
3
|
+
*
|
|
4
|
+
* Re-exports the `<Breadcrumb>` navigation component.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Breadcrumb navigation trail.
|
|
8
|
+
*
|
|
9
|
+
* Renders a list of `items` as linked crumbs with an automatic
|
|
10
|
+
* separator. Supports dropdown `menu` per item and a custom
|
|
11
|
+
* `separator` node.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Breadcrumb
|
|
16
|
+
* items={[
|
|
17
|
+
* { title: "Home", href: "/" },
|
|
18
|
+
* { title: "Settings", href: "/settings" },
|
|
19
|
+
* { title: "Profile" },
|
|
20
|
+
* ]}
|
|
21
|
+
* />
|
|
22
|
+
*
|
|
23
|
+
* <Breadcrumb separator=">" items={[{ title: "A" }, { title: "B" }]} />
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
1
26
|
export { Breadcrumb } from './Breadcrumb';
|
|
2
27
|
export type { BreadcrumbProps, BreadcrumbItemType, BreadcrumbMenuItemType } from './types';
|
|
@@ -1,4 +1,28 @@
|
|
|
1
1
|
import { ButtonProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Button Component
|
|
4
|
+
*
|
|
5
|
+
* Public `<Button>` with an Ant-Design-compatible API.
|
|
6
|
+
* Wraps the low-level `primitives/button` and maps friendly props
|
|
7
|
+
* (`type`, `danger`, `ghost`, `loading`, `shape`, `hint`, …) onto
|
|
8
|
+
* CVA variant classes.
|
|
9
|
+
*
|
|
10
|
+
* Ant-Design `type` → Primitive `variant` mapping:
|
|
11
|
+
* primary → "default" (solid primary bg)
|
|
12
|
+
* default → "outline" (bordered)
|
|
13
|
+
* dashed → "outline" + border-dashed class
|
|
14
|
+
* text → "ghost" (transparent)
|
|
15
|
+
* link → "link" (underline on hover)
|
|
16
|
+
*
|
|
17
|
+
* When `danger` is true the variant is overridden to "destructive".
|
|
18
|
+
*
|
|
19
|
+
* Tooltip: pass a `hint` string and the button is automatically
|
|
20
|
+
* wrapped in a `<TooltipProvider> → <Tooltip> → <TooltipTrigger>`.
|
|
21
|
+
*
|
|
22
|
+
* @see {@link ../../primitives/button.tsx} — underlying styled primitive
|
|
23
|
+
* @see {@link ./types.ts} — prop definitions
|
|
24
|
+
* @see {@link ./ButtonGroup.tsx} — grouped buttons
|
|
25
|
+
*/
|
|
2
26
|
import * as React from "react";
|
|
3
27
|
declare const InternalButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
4
28
|
export { InternalButton };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Button } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const AllTypes: Story;
|
|
8
|
+
export declare const AllSizes: Story;
|
|
9
|
+
export declare const AllShapes: Story;
|
|
10
|
+
export declare const WithIcons: Story;
|
|
11
|
+
export declare const Danger: Story;
|
|
12
|
+
export declare const Ghost: Story;
|
|
13
|
+
export declare const Loading: Story;
|
|
14
|
+
export declare const Disabled: Story;
|
|
15
|
+
export declare const Block: Story;
|
|
16
|
+
export declare const HoverActiveTest: Story;
|
|
17
|
+
export declare const CompleteMatrix: Story;
|
|
18
|
+
export declare const Hint: Story;
|
|
19
|
+
export declare const IconOnlySizes: Story;
|
|
20
|
+
export declare const Group: Story;
|
|
@@ -1,4 +1,27 @@
|
|
|
1
1
|
import { ButtonGroupProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file ButtonGroup Component
|
|
4
|
+
*
|
|
5
|
+
* Renders adjacent `<Button>` children as a visually connected group:
|
|
6
|
+
* - Collapsed borders via `-ml-px` on non-first children
|
|
7
|
+
* - First child keeps left rounding, last child keeps right rounding,
|
|
8
|
+
* middle children have no rounding
|
|
9
|
+
* - Hovered / focused children are promoted via `z-10` so their
|
|
10
|
+
* border/ring sits above neighbours
|
|
11
|
+
*
|
|
12
|
+
* An optional `size` prop overrides every child button's size.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <Button.Group size="small">
|
|
17
|
+
* <Button>Left</Button>
|
|
18
|
+
* <Button>Center</Button>
|
|
19
|
+
* <Button>Right</Button>
|
|
20
|
+
* </Button.Group>
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @see {@link ./types.ts} — `ButtonGroupProps`
|
|
24
|
+
*/
|
|
2
25
|
import * as React from "react";
|
|
3
26
|
declare const ButtonGroup: React.FC<ButtonGroupProps>;
|
|
4
27
|
export { ButtonGroup };
|
|
@@ -3,6 +3,39 @@ import { ButtonGroup } from './ButtonGroup';
|
|
|
3
3
|
type ButtonComponent = typeof InternalButton & {
|
|
4
4
|
Group: typeof ButtonGroup;
|
|
5
5
|
};
|
|
6
|
+
/**
|
|
7
|
+
* Button component with Ant-Design-compatible props.
|
|
8
|
+
*
|
|
9
|
+
* Supports `type`, `size`, `shape`, `danger`, `ghost`, `loading`,
|
|
10
|
+
* `icon`, `block`, and `hint` (tooltip on hover).
|
|
11
|
+
*
|
|
12
|
+
* Use `Button.Group` to render connected button groups.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* // Primary button
|
|
17
|
+
* <Button type="primary">Save</Button>
|
|
18
|
+
*
|
|
19
|
+
* // With icon and tooltip
|
|
20
|
+
* <Button type="primary" icon={<Save />} hint="Save changes">Save</Button>
|
|
21
|
+
*
|
|
22
|
+
* // Danger
|
|
23
|
+
* <Button danger icon={<Trash2 />}>Delete</Button>
|
|
24
|
+
*
|
|
25
|
+
* // Loading state
|
|
26
|
+
* <Button type="primary" loading>Submitting…</Button>
|
|
27
|
+
*
|
|
28
|
+
* // Ghost on dark background
|
|
29
|
+
* <Button type="primary" ghost>Ghost</Button>
|
|
30
|
+
*
|
|
31
|
+
* // Button group
|
|
32
|
+
* <Button.Group>
|
|
33
|
+
* <Button>Left</Button>
|
|
34
|
+
* <Button>Center</Button>
|
|
35
|
+
* <Button>Right</Button>
|
|
36
|
+
* </Button.Group>
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
6
39
|
declare const Button: ButtonComponent;
|
|
7
40
|
export { Button };
|
|
8
41
|
export type { ButtonProps, ButtonGroupProps, ButtonType, ButtonSize, ButtonShape, ButtonHTMLType } from './types';
|
|
@@ -1,35 +1,111 @@
|
|
|
1
1
|
import { ReactNode, MouseEventHandler, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
/** Visual style — maps to CVA `variant` in the primitive. */
|
|
2
3
|
export type ButtonType = "primary" | "default" | "dashed" | "link" | "text";
|
|
4
|
+
/** T-shirt sizing — maps to CVA `size` in the primitive. */
|
|
3
5
|
export type ButtonSize = "small" | "middle" | "large";
|
|
6
|
+
/** Border-radius preset. "circle" forces a 1:1 aspect ratio. */
|
|
4
7
|
export type ButtonShape = "default" | "circle" | "round";
|
|
8
|
+
/** Native `<button type="">` attribute. Kept separate from `ButtonType`. */
|
|
5
9
|
export type ButtonHTMLType = "button" | "submit" | "reset";
|
|
10
|
+
/**
|
|
11
|
+
* Props for the public `<Button>` component.
|
|
12
|
+
*
|
|
13
|
+
* Extends native button attributes but replaces `type` with
|
|
14
|
+
* the Ant-Design-style {@link ButtonType} (use `htmlType` for
|
|
15
|
+
* the native attribute instead).
|
|
16
|
+
*/
|
|
6
17
|
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
|
|
7
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Visual type of the button.
|
|
20
|
+
*
|
|
21
|
+
* | value | rendered as |
|
|
22
|
+
* |-----------|----------------------------|
|
|
23
|
+
* | primary | Solid primary background |
|
|
24
|
+
* | default | Outlined / bordered |
|
|
25
|
+
* | dashed | Outlined with dashed border|
|
|
26
|
+
* | text | Ghost / transparent |
|
|
27
|
+
* | link | Inline text link style |
|
|
28
|
+
*
|
|
29
|
+
* @default "default"
|
|
30
|
+
*/
|
|
8
31
|
type?: ButtonType;
|
|
9
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* Button size. Inherits from `SizeContext` if not provided.
|
|
34
|
+
* @default "middle"
|
|
35
|
+
*/
|
|
10
36
|
size?: ButtonSize;
|
|
11
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* Border-radius shape.
|
|
39
|
+
* - `"default"` — standard rounded-lg
|
|
40
|
+
* - `"round"` — fully rounded (pill shape)
|
|
41
|
+
* - `"circle"` — 1:1 square with full rounding (use with icon-only)
|
|
42
|
+
*
|
|
43
|
+
* @default "default"
|
|
44
|
+
*/
|
|
12
45
|
shape?: ButtonShape;
|
|
13
|
-
/**
|
|
46
|
+
/**
|
|
47
|
+
* Show a loading spinner and disable the button.
|
|
48
|
+
* Replaces the `icon` slot with a spinning `<Loader2>`.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
14
51
|
loading?: boolean;
|
|
15
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Apply destructive (red) styling regardless of `type`.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
16
56
|
danger?: boolean;
|
|
17
|
-
/**
|
|
57
|
+
/**
|
|
58
|
+
* Transparent background with border in the current text color.
|
|
59
|
+
* Useful on dark/colored backgrounds.
|
|
60
|
+
* @default false
|
|
61
|
+
*/
|
|
18
62
|
ghost?: boolean;
|
|
19
|
-
/**
|
|
63
|
+
/**
|
|
64
|
+
* Stretch to 100% width of the parent container.
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
20
67
|
block?: boolean;
|
|
21
|
-
/**
|
|
68
|
+
/**
|
|
69
|
+
* Icon element rendered alongside (or instead of) the label.
|
|
70
|
+
* Pass any `ReactNode` — typically a Lucide icon.
|
|
71
|
+
*/
|
|
22
72
|
icon?: ReactNode;
|
|
23
|
-
/**
|
|
73
|
+
/**
|
|
74
|
+
* Which side of the label the `icon` appears on.
|
|
75
|
+
* @default "start"
|
|
76
|
+
*/
|
|
24
77
|
iconPosition?: "start" | "end";
|
|
25
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* Native `<button>` type attribute.
|
|
80
|
+
* Kept separate from the visual `type` prop to avoid conflicts.
|
|
81
|
+
* @default "button"
|
|
82
|
+
*/
|
|
26
83
|
htmlType?: ButtonHTMLType;
|
|
27
|
-
/**
|
|
84
|
+
/**
|
|
85
|
+
* Plain-text tooltip shown on hover via the Tooltip primitive.
|
|
86
|
+
* Wraps the button in a `<TooltipProvider> → <Tooltip> → <TooltipTrigger>`.
|
|
87
|
+
* Only renders the tooltip wrapper when a non-empty string is provided.
|
|
88
|
+
*/
|
|
89
|
+
hint?: string;
|
|
90
|
+
/** Click handler. */
|
|
28
91
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
92
|
+
/** Button label / content. */
|
|
29
93
|
children?: ReactNode;
|
|
30
94
|
}
|
|
95
|
+
/**
|
|
96
|
+
* Props for `<Button.Group>`.
|
|
97
|
+
*
|
|
98
|
+
* Groups adjacent buttons with collapsed borders and shared rounding.
|
|
99
|
+
* Children are cloned with the group-level `size` if provided.
|
|
100
|
+
*/
|
|
31
101
|
export interface ButtonGroupProps {
|
|
102
|
+
/**
|
|
103
|
+
* Overrides the size of every child `<Button>` in the group.
|
|
104
|
+
* Individual button sizes are preserved if this is not set.
|
|
105
|
+
*/
|
|
32
106
|
size?: ButtonSize;
|
|
107
|
+
/** Additional CSS classes on the group wrapper. */
|
|
33
108
|
className?: string;
|
|
109
|
+
/** `<Button>` children. */
|
|
34
110
|
children?: ReactNode;
|
|
35
111
|
}
|
|
@@ -1,4 +1,25 @@
|
|
|
1
1
|
import { CalendarProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Calendar Component
|
|
4
|
+
*
|
|
5
|
+
* Full-featured calendar with two modes: a full-screen grid view
|
|
6
|
+
* and a compact mini calendar using the shadcn primitive. Supports
|
|
7
|
+
* month / year panel switching, custom cell rendering, disabled
|
|
8
|
+
* dates, and controlled / uncontrolled selection.
|
|
9
|
+
*
|
|
10
|
+
* Key props: `fullscreen`, `mode`, `value`, `disabledDate`,
|
|
11
|
+
* `cellRender`, `headerRender`, `onChange`, `onSelect`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Calendar />
|
|
16
|
+
* <Calendar fullscreen={false} />
|
|
17
|
+
* <Calendar mode="year" />
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @see {@link ./types.ts} — prop definitions
|
|
21
|
+
* @see {@link ./index.ts} — barrel export
|
|
22
|
+
*/
|
|
2
23
|
import * as React from "react";
|
|
3
24
|
declare const InternalCalendar: React.FC<CalendarProps>;
|
|
4
25
|
export { InternalCalendar };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Calendar } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Calendar>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Calendar>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Fullscreen: Story;
|
|
8
|
+
export declare const Mini: Story;
|
|
9
|
+
export declare const YearMode: Story;
|
|
10
|
+
export declare const DisabledDates: Story;
|
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file Calendar — Public Barrel Export
|
|
3
|
+
*
|
|
4
|
+
* Re-exports the `<Calendar>` date selection component.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Calendar component for date display and selection.
|
|
8
|
+
*
|
|
9
|
+
* Renders a full-screen monthly/yearly calendar by default, or a
|
|
10
|
+
* compact mini calendar when `fullscreen={false}`. Supports
|
|
11
|
+
* `mode`, `disabledDate`, custom `cellRender`, and `headerRender`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Calendar />
|
|
16
|
+
* <Calendar fullscreen={false} />
|
|
17
|
+
* <Calendar mode="year" onChange={(d) => console.log(d)} />
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
1
20
|
declare const Calendar: import('react').FC<import('./types').CalendarProps>;
|
|
2
21
|
export { Calendar };
|
|
3
22
|
export type { CalendarProps, CalendarMode } from './types';
|
|
@@ -1,4 +1,25 @@
|
|
|
1
1
|
import { CardProps, CardMetaProps, CardGridProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Card Component
|
|
4
|
+
*
|
|
5
|
+
* A versatile container component with optional title, extra content,
|
|
6
|
+
* cover image, action bar, and loading skeleton. Includes `Card.Meta`
|
|
7
|
+
* for avatar + title + description layouts and `Card.Grid` for grid
|
|
8
|
+
* cells within the card body.
|
|
9
|
+
*
|
|
10
|
+
* Key props: `title`, `extra`, `cover`, `actions`, `bordered`,
|
|
11
|
+
* `hoverable`, `loading`, `size`, `type`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Card title="Card Title" extra={<a href="#">More</a>}>
|
|
16
|
+
* <p>Card content</p>
|
|
17
|
+
* </Card>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @see {@link ./types.ts} — prop definitions
|
|
21
|
+
* @see {@link ./index.ts} — barrel export
|
|
22
|
+
*/
|
|
2
23
|
import * as React from "react";
|
|
3
24
|
declare const CardMeta: React.FC<CardMetaProps>;
|
|
4
25
|
declare const CardGrid: React.FC<CardGridProps>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Card } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Card>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Card>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Basic: Story;
|
|
8
|
+
export declare const Hoverable: Story;
|
|
9
|
+
export declare const Loading: Story;
|
|
10
|
+
export declare const NoBorder: Story;
|
|
11
|
+
export declare const WithCover: Story;
|
|
12
|
+
export declare const Meta: Story;
|
|
13
|
+
export declare const GridCells: Story;
|
|
14
|
+
export declare const InnerCard: Story;
|
|
@@ -3,6 +3,31 @@ type CardComponent = typeof InternalCard & {
|
|
|
3
3
|
Meta: typeof CardMeta;
|
|
4
4
|
Grid: typeof CardGrid;
|
|
5
5
|
};
|
|
6
|
+
/**
|
|
7
|
+
* Card container component.
|
|
8
|
+
*
|
|
9
|
+
* Supports `title`, `extra`, `cover`, `actions`, `bordered`,
|
|
10
|
+
* `hoverable`, `loading`, `size`, and `type` (inner for nesting).
|
|
11
|
+
*
|
|
12
|
+
* Use `Card.Meta` for avatar + title + description layouts and
|
|
13
|
+
* `Card.Grid` for hoverable grid cells inside the card body.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Card title="Users" extra={<a href="#">More</a>}>
|
|
18
|
+
* <p>Card body content</p>
|
|
19
|
+
* </Card>
|
|
20
|
+
*
|
|
21
|
+
* <Card cover={<img src="/cover.jpg" alt="" />}>
|
|
22
|
+
* <Card.Meta title="Title" description="Description" />
|
|
23
|
+
* </Card>
|
|
24
|
+
*
|
|
25
|
+
* <Card>
|
|
26
|
+
* <Card.Grid>Cell 1</Card.Grid>
|
|
27
|
+
* <Card.Grid>Cell 2</Card.Grid>
|
|
28
|
+
* </Card>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
6
31
|
declare const Card: CardComponent;
|
|
7
32
|
export { Card };
|
|
8
33
|
export type { CardProps, CardMetaProps, CardGridProps, CardSize, CardType } from './types';
|
|
@@ -1,4 +1,27 @@
|
|
|
1
1
|
import { CarouselProps, CarouselRef } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Carousel Component
|
|
4
|
+
*
|
|
5
|
+
* A slideshow component that cycles through child slides with
|
|
6
|
+
* scroll or fade transitions. Supports autoplay with pause-on-hover,
|
|
7
|
+
* navigation arrows, dot indicators at any position, and an
|
|
8
|
+
* imperative ref for programmatic control.
|
|
9
|
+
*
|
|
10
|
+
* Key props: `autoplay`, `effect`, `dots`, `dotPosition`, `arrows`,
|
|
11
|
+
* `slidesToShow`, `infinite`, `beforeChange`, `afterChange`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Carousel autoplay arrows>
|
|
16
|
+
* <div>Slide 1</div>
|
|
17
|
+
* <div>Slide 2</div>
|
|
18
|
+
* <div>Slide 3</div>
|
|
19
|
+
* </Carousel>
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @see {@link ./types.ts} — prop definitions
|
|
23
|
+
* @see {@link ./index.ts} — barrel export
|
|
24
|
+
*/
|
|
2
25
|
import * as React from "react";
|
|
3
26
|
declare const InternalCarousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
|
|
4
27
|
export { InternalCarousel };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Carousel } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Carousel>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Carousel>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Basic: Story;
|
|
8
|
+
export declare const FadeEffect: Story;
|
|
9
|
+
export declare const Arrows: Story;
|
|
10
|
+
export declare const DotPositions: Story;
|
|
11
|
+
export declare const Autoplay: Story;
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file Carousel — Public Barrel Export
|
|
3
|
+
*
|
|
4
|
+
* Re-exports the `<Carousel>` slideshow component.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Carousel slideshow component.
|
|
8
|
+
*
|
|
9
|
+
* Cycles through child slides with `effect` (scrollx / fade),
|
|
10
|
+
* `autoplay`, `arrows`, `dots`, and `dotPosition`. Exposes an
|
|
11
|
+
* imperative ref with `goTo`, `next`, and `prev` methods.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Carousel autoplay arrows>
|
|
16
|
+
* <div>Slide 1</div>
|
|
17
|
+
* <div>Slide 2</div>
|
|
18
|
+
* </Carousel>
|
|
19
|
+
*
|
|
20
|
+
* <Carousel effect="fade" dotPosition="right">
|
|
21
|
+
* <img src="/a.jpg" />
|
|
22
|
+
* <img src="/b.jpg" />
|
|
23
|
+
* </Carousel>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
1
26
|
declare const Carousel: import('react').ForwardRefExoticComponent<import('./types').CarouselProps & import('react').RefAttributes<import('./types').CarouselRef>>;
|
|
2
27
|
export { Carousel };
|
|
3
28
|
export type { CarouselProps, CarouselRef, DotPosition, CarouselEffect, AutoplayConfig, } from './types';
|
|
@@ -1,4 +1,30 @@
|
|
|
1
1
|
import { CascaderProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* @file Cascader Component
|
|
4
|
+
*
|
|
5
|
+
* Hierarchical dropdown selector that drills into nested option
|
|
6
|
+
* columns. Supports single and multiple selection, expand on
|
|
7
|
+
* click or hover, search filtering, lazy loading via `loadData`,
|
|
8
|
+
* allow-clear, and custom display rendering.
|
|
9
|
+
*
|
|
10
|
+
* Key props: `options`, `value`, `onChange`, `multiple`,
|
|
11
|
+
* `expandTrigger`, `showSearch`, `changeOnSelect`, `placeholder`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Cascader
|
|
16
|
+
* options={[
|
|
17
|
+
* { value: "zhejiang", label: "Zhejiang", children: [
|
|
18
|
+
* { value: "hangzhou", label: "Hangzhou" },
|
|
19
|
+
* ]},
|
|
20
|
+
* ]}
|
|
21
|
+
* placeholder="Select location"
|
|
22
|
+
* />
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @see {@link ./types.ts} — prop definitions
|
|
26
|
+
* @see {@link ./index.ts} — barrel export
|
|
27
|
+
*/
|
|
2
28
|
import * as React from "react";
|
|
3
29
|
declare const InternalCascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
30
|
export { InternalCascader };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Cascader } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Cascader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Cascader>;
|
|
6
|
+
export declare const Playground: Story;
|
|
7
|
+
export declare const Basic: Story;
|
|
8
|
+
export declare const ExpandOnHover: Story;
|
|
9
|
+
export declare const ChangeOnSelect: Story;
|
|
10
|
+
export declare const AllowClear: Story;
|
|
11
|
+
export declare const Disabled: Story;
|
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file Cascader — Public Barrel Export
|
|
3
|
+
*
|
|
4
|
+
* Re-exports the `<Cascader>` hierarchical dropdown selector.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Cascader component for hierarchical selection.
|
|
8
|
+
*
|
|
9
|
+
* Drills into nested option columns. Supports `multiple` selection,
|
|
10
|
+
* `expandTrigger` (click / hover), `showSearch`, `changeOnSelect`,
|
|
11
|
+
* `loadData` for lazy loading, and `allowClear`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Cascader
|
|
16
|
+
* options={[
|
|
17
|
+
* { value: "zhejiang", label: "Zhejiang", children: [
|
|
18
|
+
* { value: "hangzhou", label: "Hangzhou" },
|
|
19
|
+
* ]},
|
|
20
|
+
* ]}
|
|
21
|
+
* placeholder="Select location"
|
|
22
|
+
* onChange={(val, opts) => console.log(val, opts)}
|
|
23
|
+
* />
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
1
26
|
declare const Cascader: import('react').ForwardRefExoticComponent<import('./types').CascaderProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
2
27
|
export { Cascader };
|
|
3
28
|
export type { CascaderProps, CascaderOption, CascaderSize, CascaderStatus, CascaderVariant, CascaderExpandTrigger, CascaderPlacement, } from './types';
|