@chain-ui/core 0.1.1 → 0.2.0

package/dist/src/components/checkbox/checkbox.d.ts

@@ -0,0 +1,40 @@
+import { default as React, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'type' | 'children'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    status?: 'default' | 'error' | 'warning';
+    shape?: 'square' | 'round';
+    label?: ReactNode;
+    ariaLabel?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    value?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
+export interface CheckboxOption {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+export interface CheckboxGroupProps {
+    value?: (string | number)[];
+    defaultValue?: (string | number)[];
+    onChange?: (value: (string | number)[], event?: ChangeEvent<HTMLInputElement>) => void;
+    options?: CheckboxOption[];
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    direction?: 'horizontal' | 'vertical';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox, CheckboxGroup } from './checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Round: Story;
+export declare const ColorPrimary: Story;
+export declare const ColorBrand: Story;
+export declare const ColorSuccess: Story;
+export declare const ColorWarning: Story;
+export declare const ColorError: Story;
+export declare const ColorInfo: Story;
+export declare const StatusError: Story;
+export declare const StatusWarning: Story;
+export declare const NoLabel: Story;
+export declare const WithChildren: Story;
+export declare const GroupVertical: StoryObj<typeof CheckboxGroup>;
+export declare const GroupHorizontal: StoryObj<typeof CheckboxGroup>;
+export declare const GroupDisabled: StoryObj<typeof CheckboxGroup>;
+export declare const GroupSmall: StoryObj<typeof CheckboxGroup>;
+export declare const GroupCustomColor: StoryObj<typeof CheckboxGroup>;

package/dist/src/components/checkbox/checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup } from './checkbox';
+export type { CheckboxProps, CheckboxOption, CheckboxGroupProps } from './checkbox';

package/dist/src/components/index.d.ts

@@ -10,3 +10,10 @@ export * from './pagination';
 export * from './alert';
 export * from './space';
 export * from './divider';
+export * from './checkbox';
+export * from './radio';
+export * from './switch';
+export * from './tooltip';
+export * from './popover';
+export * from './message';
+export * from './notification';

package/dist/src/components/message/index.d.ts

@@ -0,0 +1,2 @@
+export { Message } from './message';
+export type { MessageProps } from './message';

package/dist/src/components/message/message.d.ts

@@ -0,0 +1,16 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+export interface MessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    type?: 'success' | 'error' | 'warning' | 'info';
+    content?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onClose?: () => void;
+    duration?: number;
+    closable?: boolean;
+    closeAriaLabel?: string;
+    icon?: ReactNode | false;
+    placement?: 'top' | 'top-left' | 'top-right';
+    getContainer?: () => HTMLElement;
+    destroyOnClose?: boolean;
+}
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/message/message.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Message } from './message';
+declare const meta: Meta<typeof Message>;
+export default meta;
+type Story = StoryObj<typeof Message>;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Closable: Story;
+export declare const AutoDismiss: Story;
+export declare const TopLeft: Story;
+export declare const TopRight: Story;
+export declare const NoIcon: Story;
+export declare const CustomIcon: Story;
+export declare const LongText: Story;
+export declare const Stacked: Story;
+export declare const Controlled: Story;

package/dist/src/components/message/message.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+export { Notification } from './notification';
+export type { NotificationProps } from './notification';

package/dist/src/components/notification/notification.d.ts

@@ -0,0 +1,18 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    type?: 'success' | 'error' | 'warning' | 'info';
+    title?: ReactNode;
+    description?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onClose?: () => void;
+    duration?: number;
+    closable?: boolean;
+    closeAriaLabel?: string;
+    icon?: ReactNode | false;
+    placement?: 'top-right' | 'top-left';
+    action?: ReactNode;
+    getContainer?: () => HTMLElement;
+    destroyOnClose?: boolean;
+}
+export declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/notification/notification.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Notification } from './notification';
+declare const meta: Meta<typeof Notification>;
+export default meta;
+type Story = StoryObj<typeof Notification>;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const WithAction: Story;
+export declare const TitleOnly: Story;
+export declare const NoCloseButton: Story;
+export declare const AutoDismiss: Story;
+export declare const TopLeft: Story;
+export declare const NoIcon: Story;
+export declare const CustomIcon: Story;
+export declare const Stacked: Story;
+export declare const Controlled: Story;

package/dist/src/components/notification/notification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './popover';
+export type { PopoverProps } from './popover';

package/dist/src/components/popover/popover.d.ts

@@ -0,0 +1,23 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../../utils';
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'children' | 'title'> {
+    title?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    placement?: Placement;
+    trigger?: 'hover' | 'focus' | 'click';
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    closable?: boolean;
+    closeAriaLabel?: string;
+    arrow?: boolean;
+    width?: number | string;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    destroyOnClose?: boolean;
+    children: ReactNode;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/popover/popover.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Popover } from './popover';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Default: Story;
+export declare const WithFooter: Story;
+export declare const Closable: Story;
+export declare const ContentOnly: Story;
+export declare const PlacementBottom: Story;
+export declare const PlacementBottomStart: Story;
+export declare const PlacementLeft: Story;
+export declare const PlacementRight: Story;
+export declare const HoverTrigger: Story;
+export declare const FocusTrigger: Story;
+export declare const Wide: Story;
+export declare const NoArrow: Story;
+export declare const RichContent: Story;

package/dist/src/components/popover/popover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './radio';
+export type { RadioProps, RadioOption, RadioGroupProps } from './radio';

package/dist/src/components/radio/radio.d.ts

@@ -0,0 +1,37 @@
+import { default as React, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'type' | 'children'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    status?: 'default' | 'error' | 'warning';
+    label?: ReactNode;
+    ariaLabel?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    value?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLLabelElement>>;
+export interface RadioOption {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, event?: ChangeEvent<HTMLInputElement>) => void;
+    options?: RadioOption[];
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    direction?: 'horizontal' | 'vertical';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/radio/radio.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Radio, RadioGroup } from './radio';
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ColorPrimary: Story;
+export declare const ColorBrand: Story;
+export declare const ColorSuccess: Story;
+export declare const ColorWarning: Story;
+export declare const ColorError: Story;
+export declare const ColorInfo: Story;
+export declare const StatusError: Story;
+export declare const StatusWarning: Story;
+export declare const NoLabel: Story;
+export declare const WithChildren: Story;
+export declare const GroupVertical: StoryObj<typeof RadioGroup>;
+export declare const GroupHorizontal: StoryObj<typeof RadioGroup>;
+export declare const GroupDisabled: StoryObj<typeof RadioGroup>;
+export declare const GroupSmall: StoryObj<typeof RadioGroup>;
+export declare const GroupCustomColor: StoryObj<typeof RadioGroup>;
+export declare const GroupChildrenMode: StoryObj<typeof RadioGroup>;

package/dist/src/components/radio/radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/space/space.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
+export interface SpaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
     size?: 'sm' | 'md' | 'lg' | number;
+    gap?: string | number;
     direction?: 'horizontal' | 'vertical';
     align?: 'start' | 'end' | 'center' | 'baseline';
     wrap?: boolean;

package/dist/src/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';

package/dist/src/components/switch/switch.d.ts

@@ -0,0 +1,14 @@
+import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type' | 'role' | 'children'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event?: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    ariaLabel?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/switch/switch.stories.d.ts

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './switch';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Loading: Story;
+export declare const LoadingChecked: Story;
+export declare const Small: Story;
+export declare const SmallChecked: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ColorPrimary: Story;
+export declare const ColorBrand: Story;
+export declare const ColorSuccess: Story;
+export declare const ColorWarning: Story;
+export declare const ColorError: Story;
+export declare const ColorInfo: Story;
+export declare const WithText: Story;
+export declare const WithTextUnchecked: Story;
+export declare const LargeWithText: Story;

package/dist/src/components/switch/switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/dist/src/components/tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../../utils/position';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'children' | 'title'> {
+    title?: ReactNode;
+    content?: ReactNode;
+    placement?: Placement;
+    trigger?: 'hover' | 'focus' | 'click';
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    color?: 'dark' | 'light';
+    arrow?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    destroyOnClose?: boolean;
+    children: ReactNode;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/tooltip/tooltip.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const PlacementTop: Story;
+export declare const PlacementTopStart: Story;
+export declare const PlacementTopEnd: Story;
+export declare const PlacementBottom: Story;
+export declare const PlacementLeft: Story;
+export declare const PlacementRight: Story;
+export declare const LightTheme: Story;
+export declare const NoArrow: Story;
+export declare const RichContent: Story;
+export declare const ClickTrigger: Story;
+export declare const FocusTrigger: Story;
+export declare const LongText: Story;
+export declare const OnDisabledElement: Story;

package/dist/src/components/tooltip/tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/icons.d.ts

@@ -0,0 +1 @@
+export declare const STATUS_ICONS: Record<string, string>;

package/dist/src/utils/index.d.ts

@@ -1 +1,5 @@
-export {};
+export { calculatePosition } from './position';
+export type { Placement, Position } from './position';
+export { STATUS_ICONS } from './icons';
+export { useAnimationState, Portal } from './portal';
+export type { AnimationState, PortalProps } from './portal';

package/dist/src/utils/portal.d.ts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { AnimationState } from '@chain-ui/hooks';
+export interface AnimationStateOptions {
+    duration?: number;
+    onExited?: () => void;
+}
+export { type AnimationState };
+export declare function useAnimationState(open: boolean, options?: AnimationStateOptions): AnimationState;
+export interface PortalProps {
+    getContainer?: () => HTMLElement;
+    children: ReactNode;
+}
+export declare function Portal({ getContainer, children }: PortalProps): React.ReactPortal;

package/dist/src/utils/position.d.ts

@@ -0,0 +1,7 @@
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface Position {
+    top: number;
+    left: number;
+}
+export declare const POPPER_OFFSET: number;
+export declare function calculatePosition(triggerRect: DOMRect, tooltipRect: DOMRect, placement: Placement): Position;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chain-ui/core",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "Core UI components for Chain UI design system",
   "main": "./dist/index.cjs",
@@ -16,7 +16,8 @@
       "import": "./dist/*.js",
       "require": "./dist/*.cjs",
       "types": "./dist/*.d.ts"
-    }
+    },
+    "./dist/*.css": "./dist/*.css"
   },
   "files": [
     "dist"
@@ -30,6 +31,9 @@
     "test": "vitest run",
     "lint": "eslint src/"
   },
+  "dependencies": {
+    "@chain-ui/hooks": "^0.1.0"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './src/index';