@zenkigen-inc/component-ui 1.0.0

package/dist/loading/index.d.ts

@@ -0,0 +1 @@
+export { Loading } from './loading';

package/dist/loading/loading.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    size?: 'small' | 'medium' | 'large';
+    position?: 'fixed' | 'absolute' | 'static';
+    height?: string;
+};
+export declare function Loading({ size, position, height }: Props): import("react").JSX.Element;
+export {};

package/dist/modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './modal';

package/dist/modal/modal-button-tab.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+type Props = {
+    primaryButtonLabel: string;
+    secondaryButtonLabel: string;
+    onClickPrimaryButton: () => void;
+    onClickSecondaryButton: () => void;
+    isDanger?: boolean;
+    isNoBorder?: boolean;
+} & ({
+    isWithCheckbox?: boolean;
+    checkboxLabel?: string;
+    isChecked?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    subButtonLabel?: never;
+    onClickSubButton?: never;
+} | {
+    isWithCheckbox?: never;
+    checkboxLabel?: never;
+    isChecked?: never;
+    onChange?: never;
+    subButtonLabel?: string;
+    onClickSubButton?: () => void;
+});
+export declare function ModalButtonTab({ primaryButtonLabel, secondaryButtonLabel, onClickPrimaryButton, onClickSecondaryButton, isDanger, isNoBorder, isWithCheckbox, checkboxLabel, isChecked, onChange, subButtonLabel, onClickSubButton, }: Props): import("react").JSX.Element;
+export {};

package/dist/modal/modal-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ModalReturnType = {
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const ModalContext: import("react").Context<ModalReturnType>;
+export {};

package/dist/modal/modal-header.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    isNoBorder?: boolean;
+    isNoCloseButton?: boolean;
+};
+export declare function ModalHeader({ children, isNoBorder, isNoCloseButton }: Props): import("react").JSX.Element;
+export {};

package/dist/modal/modal-tab.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    tabItems: {
+        id: string;
+        label: string;
+    }[];
+    selectedTab: string;
+    setSelectedTab: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare function ModalTab({ tabItems, selectedTab, setSelectedTab }: Props): import("react").JSX.Element;
+export {};

package/dist/modal/modal.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, MutableRefObject, ReactElement, ReactNode } from 'react';
+import { ModalButtonTab } from './modal-button-tab';
+import { ModalHeader } from './modal-header';
+import { ModalTab } from './modal-tab';
+type Props = {
+    children?: ReactNode;
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    height?: CSSProperties['height'];
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    portalTargetRef?: MutableRefObject<HTMLElement | null>;
+    headerElement?: ReactElement;
+    tabElement?: ReactElement;
+    buttonTabElement?: ReactElement;
+};
+export declare function Modal({ children, size, height, isOpen, setIsOpen, portalTargetRef, headerElement, tabElement, buttonTabElement, }: Props): import("react").ReactPortal;
+export declare namespace Modal {
+    var Header: typeof ModalHeader;
+    var Tab: typeof ModalTab;
+    var ButtonTab: typeof ModalButtonTab;
+}
+export {};

package/dist/notification-inline/index.d.ts

@@ -0,0 +1 @@
+export { NotificationInline } from './notification-inline';

package/dist/notification-inline/notification-inline.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type Props = {
+    state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
+    size?: 'small' | 'medium';
+    children?: ReactNode;
+} & ({
+    showClose?: false;
+} | {
+    showClose: true;
+    onClickClose: () => void;
+});
+export declare function NotificationInline({ state, size, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio } from './radio';

package/dist/radio/radio.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent } from 'react';
+type Props = {
+    name?: string;
+    value?: string;
+    id?: string;
+    label?: string;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/search/index.d.ts

@@ -0,0 +1 @@
+export { Search } from './search';

package/dist/search/search.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent, FormEvent } from 'react';
+type Props = {
+    placeholder?: string;
+    width?: string;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    onClickSearchModal?: () => void;
+};
+export declare const Search: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './select';
+export type * from './type';

package/dist/select/select-context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SelectOption } from './type';
+type UseSelectReturnType = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    placeholder?: string;
+    selectedOption?: SelectOption | null;
+    setIsOptionListOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    onChange?: (option: SelectOption | null) => void;
+    variant?: 'text' | 'outline';
+};
+export declare const SelectContext: import("react").Context<UseSelectReturnType>;
+export {};

package/dist/select/select-item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SelectOption } from './type';
+type Props = {
+    option: SelectOption;
+};
+export declare function SelectItem({ option }: Props): import("react").JSX.Element;
+export {};

package/dist/select/select-list.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    maxHeight?: CSSProperties['height'];
+};
+export declare function SelectList({ children, maxHeight }: Props): import("react").JSX.Element;
+export {};

package/dist/select/select.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IconName } from '@zenkigen-inc/component-icons';
+import { SelectItem } from './select-item';
+import type { SelectOption } from './type';
+type Props = {
+    children: ReactNode;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'outline' | 'text';
+    width?: CSSProperties['width'];
+    placeholder?: string;
+    placeholderIcon?: IconName;
+    selectedOption?: SelectOption | null;
+    optionListMaxHeight?: CSSProperties['height'];
+    isDisabled?: boolean;
+    onChange?: (option: SelectOption | null) => void;
+};
+export declare function Select({ children, size, variant, width, placeholder, placeholderIcon, selectedOption, isDisabled, onChange, optionListMaxHeight, }: Props): import("react").JSX.Element;
+export declare namespace Select {
+    var Option: typeof SelectItem;
+}
+export {};

package/dist/select/type.d.ts

@@ -0,0 +1,7 @@
+import { IconName } from '@zenkigen-inc/component-icons';
+export type SelectOption = {
+    id: string;
+    value: string;
+    label: string;
+    icon?: IconName;
+};

package/dist/select-sort/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectSort } from './select-sort';
+export type * from './type';

package/dist/select-sort/select-item.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    isSortKey: boolean;
+    onClickItem: () => void;
+};
+export declare function SelectItem({ children, isSortKey, onClickItem }: Props): import("react").JSX.Element;
+export {};

package/dist/select-sort/select-list.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { SortOrder } from './type';
+type Props = {
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    variant: 'text' | 'outline';
+    sortOrder: SortOrder;
+    onClickItem: (value: SortOrder) => void;
+    onClickDeselect?: () => void;
+};
+export declare function SelectList({ size, variant, sortOrder, onClickItem, onClickDeselect }: Props): import("react").JSX.Element;
+export {};

package/dist/select-sort/select-sort.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import type { SortOrder } from './type';
+type Props = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'outline' | 'text';
+    width?: CSSProperties['width'];
+    label: string;
+    sortOrder: SortOrder;
+    isDisabled?: boolean;
+    isSortKey?: boolean;
+    onChange?: (value: SortOrder) => void;
+    onClickDeselect?: () => void;
+};
+export declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props): import("react").JSX.Element;
+export {};

package/dist/select-sort/type.d.ts

@@ -0,0 +1 @@
+export type SortOrder = 'ascend' | 'descend' | null;

package/dist/tab/index.d.ts

@@ -0,0 +1,2 @@
+export { Tab } from './tab';
+export { TabItem } from './tab-item';

package/dist/tab/tab-item.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type Props = {
+    id: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    children?: ReactNode;
+    onClick: (id: string) => void;
+};
+export declare const TabItem: (props: Props) => import("react").JSX.Element;
+export {};

package/dist/tab/tab.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type Props = {
+    children?: ReactNode;
+};
+export declare function Tab({ children }: Props): import("react").JSX.Element;
+export {};

package/dist/table/index.d.ts

@@ -0,0 +1,3 @@
+export { TableContainer } from './table-container';
+export { TableRowContainer } from './table-row-container';
+export { TableCell } from './table-cell';

package/dist/table/table-cell.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type Props = {
+    children?: ReactNode;
+    className?: string;
+};
+export declare function TableCell({ children, className }: Props): import("react").JSX.Element;
+export {};

package/dist/table/table-container.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+type Props = {
+    width?: CSSProperties['width'];
+    rows?: CSSProperties['gridTemplateRows'];
+    columns?: CSSProperties['gridTemplateColumns'];
+};
+export declare function TableContainer({ width, rows, columns, children }: PropsWithChildren<Props>): import("react").JSX.Element;
+export {};

package/dist/table/table-row-container.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type Props = {
+    children?: ReactNode;
+    isHoverBackgroundVisible?: boolean;
+};
+export declare function TableRowContainer({ children, isHoverBackgroundVisible }: Props): import("react").JSX.Element;
+export {};

package/dist/tag/delete-icon.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ColorVariant, TagColor } from './type';
+type Props = {
+    color?: TagColor;
+    variant?: ColorVariant;
+    onClick?: () => void;
+};
+export declare const DeleteIcon: ({ color, variant, onClick }: Props) => import("react").JSX.Element;
+export {};

package/dist/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from './tag';
+export type * from './type';

package/dist/tag/tag.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ColorVariant, TagColor } from './type';
+type Props = {
+    id: string;
+    children: string;
+    color: TagColor;
+    variant?: ColorVariant;
+    size?: 'x-small' | 'small' | 'medium';
+} & ({
+    isEditable: true;
+    onDelete: (id: string) => void;
+} | {
+    isEditable?: undefined;
+    onDelete?: never;
+});
+export declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props): import("react").JSX.Element;
+export {};

package/dist/tag/type.d.ts

@@ -0,0 +1,3 @@
+import { tagLightColors } from '@zenkigen-inc/component-theme';
+export type TagColor = keyof typeof tagLightColors;
+export type ColorVariant = 'normal' | 'light';

package/dist/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toast';
+export * from './toast-provider';

package/dist/toast/toast-provider.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { ToastState } from './type';
+type AddToastArgs = {
+    message: string;
+    state: ToastState;
+};
+type ToastProviderProps = {
+    addToast: (args: AddToastArgs) => void;
+    removeToast: (id: number) => void;
+};
+export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export declare const useToast: () => ToastProviderProps;
+export {};

package/dist/toast/toast.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ToastState } from './type';
+type Props = {
+    state?: ToastState;
+    width?: CSSProperties['width'];
+    isAutoClose?: boolean;
+    isAnimation?: boolean;
+    children?: ReactNode;
+    onClickClose: () => void;
+};
+export declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props): import("react").JSX.Element;
+export {};

package/dist/toast/type.d.ts

@@ -0,0 +1 @@
+export type ToastState = 'success' | 'error' | 'warning' | 'information';

package/dist/toggle/index.d.ts

@@ -0,0 +1 @@
+export { Toggle } from './toggle';

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+type Props = {
+    id: string;
+    size: 'small' | 'medium';
+    isChecked: boolean;
+    onChange: () => void;
+    label?: ReactNode;
+    labelPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+};
+export declare function Toggle({ id, size, isChecked, onChange, label, labelPosition, isDisabled, }: Props): import("react").JSX.Element;
+export {};

package/dist/tooltip/index.d.ts

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

package/dist/tooltip/tail-icon.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TooltipHorizontalAlign, TooltipSize, TooltipVerticalPosition } from './type';
+type Props = {
+    size: TooltipSize;
+    verticalPosition: TooltipVerticalPosition;
+    horizontalAlign: TooltipHorizontalAlign;
+};
+export declare const TailIcon: (props: Props) => import("react").JSX.Element;
+export {};

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TooltipHorizontalAlign, TooltipSize, TooltipVerticalPosition } from './type';
+type Props = {
+    children: ReactNode;
+    content: string;
+    size?: TooltipSize;
+    maxWidth?: CSSProperties['width'];
+    verticalPosition?: TooltipVerticalPosition;
+    horizontalAlign?: TooltipHorizontalAlign;
+    isDisabledHover?: boolean;
+};
+export declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, }: Props): import("react").JSX.Element;
+export {};

package/dist/tooltip/type.d.ts

@@ -0,0 +1,3 @@
+export type TooltipSize = 'small' | 'medium';
+export type TooltipVerticalPosition = 'top' | 'bottom';
+export type TooltipHorizontalAlign = 'left' | 'center' | 'right';

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@zenkigen-inc/component-ui",
+  "version": "1.0.0",
+  "repository": "https://github.com/zenkigen/zenkigen-component",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": "./dist/index.js",
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "generate-component": "hygen generator components",
+    "build": "rimraf dist && microbundle --no-compress -f modern,esm,cjs --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx --tsconfig tsconfig.build.json"
+  },
+  "devDependencies": {
+    "hygen": "6.2.11",
+    "microbundle": "0.15.1",
+    "typescript": "5.1.6"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "@zenkigen-inc/component-icons": "1.0.0",
+    "@zenkigen-inc/component-theme": "1.0.0",
+    "clsx": "2.0.0"
+  }
+}