@zenkigen-inc/component-ui 1.15.1 → 1.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -8,18 +8,28 @@
   },
   "source": "./src/index.ts",
   "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./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 --external none",
-    "build-lib": "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"
+    "build": "rimraf dist && tsup",
+    "build-lib": "rimraf dist && tsup",
+    "test": "vitest",
+    "test:ci": "vitest run"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "6.4.0",
+    "@testing-library/react": "15.0.0",
+    "@testing-library/user-event": "14.6.1",
     "hygen": "6.2.11",
-    "microbundle": "0.15.1",
+    "tsup": "8.5.0",
     "typescript": "5.8.3"
   },
   "peerDependencies": {
@@ -27,8 +37,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@zenkigen-inc/component-icons": "1.15.1",
-    "@zenkigen-inc/component-theme": "1.15.1",
+    "@zenkigen-inc/component-icons": "1.15.2",
+    "@zenkigen-inc/component-theme": "1.15.2",
     "clsx": "2.1.1"
   }
 }

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  external: ['react', 'react-dom', '@zenkigen-inc/component-icons', '@zenkigen-inc/component-theme'],
+  clean: true,
+  esbuildOptions: (options) => {
+    options.jsx = 'automatic';
+    options.jsxImportSource = 'react';
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    globals: true,
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/avatar/avatar.d.ts

@@ -1,10 +0,0 @@
-export declare const isAsciiString: (str: string) => boolean;
-type Props = {
-    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-    userId?: number;
-    firstName: string;
-    lastName: string;
-    isDisabled?: boolean;
-};
-export declare function Avatar({ size, ...props }: Props): import("react").JSX.Element;
-export {};

package/dist/avatar/index.d.ts

@@ -1 +0,0 @@
-export { Avatar } from './avatar';

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

@@ -1,2 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export declare const BreadcrumbItem: ({ children }: PropsWithChildren) => import("react").JSX.Element;

package/dist/breadcrumb/breadcrumb.d.ts

@@ -1,5 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export declare function Breadcrumb({ children }: PropsWithChildren): import("react").JSX.Element;
-export declare namespace Breadcrumb {
-    var Item: ({ children }: PropsWithChildren) => import("react").JSX.Element;
-}

package/dist/breadcrumb/index.d.ts

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

package/dist/button/button.d.ts

@@ -1,22 +0,0 @@
-import type { ComponentPropsWithoutRef, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
-type Size = 'small' | 'medium' | 'large';
-type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
-type JustifyContent = 'start' | 'center';
-export type ElementAs = ElementType;
-export type AsProp<T extends ElementAs> = {
-    elementAs?: T;
-};
-export type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
-type Props<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
-    size?: Size;
-    width?: CSSProperties['width'];
-    isSelected?: boolean;
-    isDisabled?: boolean;
-    variant?: Variant;
-    before?: ReactNode;
-    after?: ReactNode;
-    borderRadius?: CSSProperties['borderRadius'];
-    justifyContent?: JustifyContent;
-}>;
-export declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props<T>) => import("react").JSX.Element;
-export {};

package/dist/button/index.d.ts

@@ -1 +0,0 @@
-export { Button } from './button';

package/dist/checkbox/checkbox.d.ts

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

package/dist/checkbox/checked-icon.d.ts

@@ -1 +0,0 @@
-export declare const CheckedIcon: () => import("react").JSX.Element;

package/dist/checkbox/index.d.ts

@@ -1 +0,0 @@
-export { Checkbox } from './checkbox';

package/dist/checkbox/minus-icon.d.ts

@@ -1 +0,0 @@
-export declare const MinusIcon: () => import("react").JSX.Element;

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

@@ -1,14 +0,0 @@
-import type { MutableRefObject } from 'react';
-type UseDropdownReturnType = {
-    isVisible: boolean;
-    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
-    isDisabled: boolean;
-    portalTargetRef?: MutableRefObject<HTMLElement | null>;
-    targetDimensions: {
-        width: number;
-        height: number;
-    };
-    variant: 'text' | 'outline';
-};
-export declare const DropdownContext: import("react").Context<UseDropdownReturnType>;
-export {};

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

@@ -1,7 +0,0 @@
-import type { MouseEvent, PropsWithChildren } from 'react';
-type Props = {
-    color?: 'gray' | 'red';
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-};
-export declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props>): import("react").JSX.Element;
-export {};

package/dist/dropdown/dropdown-menu.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties, PropsWithChildren } from 'react';
-import type { DropdownHorizontalAlign, DropdownVerticalPosition } from './type';
-type Props = {
-    maxHeight?: CSSProperties['height'];
-    isNoPadding?: boolean;
-    verticalPosition?: DropdownVerticalPosition;
-    horizontalAlign?: DropdownHorizontalAlign;
-};
-export declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props>): false | import("react").JSX.Element;
-export {};

package/dist/dropdown/dropdown.d.ts

@@ -1,26 +0,0 @@
-import type { IconName } from '@zenkigen-inc/component-icons';
-import type { MutableRefObject, PropsWithChildren, ReactElement } from 'react';
-import { DropdownItem } from './dropdown-item';
-import { DropdownMenu } from './dropdown-menu';
-type Props = {
-    size?: 'x-small' | 'small' | 'medium' | 'large';
-    variant?: 'text' | 'outline';
-    title?: string;
-    isDisabled?: boolean;
-    isArrowHidden?: boolean;
-    portalTargetRef?: MutableRefObject<HTMLElement | null>;
-} & ({
-    target: ReactElement;
-    label?: never;
-    icon?: never;
-} | {
-    target?: undefined;
-    label: string;
-    icon?: IconName;
-});
-export declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props>): import("react").JSX.Element;
-export declare namespace Dropdown {
-    var Menu: typeof DropdownMenu;
-    var Item: typeof DropdownItem;
-}
-export {};

package/dist/dropdown/index.d.ts

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

package/dist/dropdown/type.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-export type DropdownItemType = {
-    id: string;
-    content: ReactNode;
-    color?: 'gray' | 'red';
-    onClick?: () => void;
-};
-export type DropdownVerticalPosition = 'top' | 'bottom';
-export type DropdownHorizontalAlign = 'left' | 'center' | 'right';

package/dist/evaluation-star/evaluation-star.d.ts

@@ -1,8 +0,0 @@
-type Props = {
-    value: number;
-    isEditable?: boolean;
-    onChangeRating?: (newRating: number) => void | null;
-    size?: 'medium' | 'large';
-};
-export declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props): import("react").JSX.Element;
-export {};

package/dist/evaluation-star/index.d.ts

@@ -1 +0,0 @@
-export { EvaluationStar } from './evaluation-star';

package/dist/heading/heading.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-type Level = 1 | 2 | 3 | 4 | 5;
-type Props = {
-    level: Level;
-    before?: ReactNode;
-    after?: ReactNode;
-    children?: ReactNode;
-};
-export declare function Heading(props: Props): import("react").JSX.Element;
-export {};

package/dist/heading/index.d.ts

@@ -1 +0,0 @@
-export { Heading } from './heading';

package/dist/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './use-outside-click';

package/dist/hooks/use-outside-click.d.ts

@@ -1,2 +0,0 @@
-import type { RefObject } from 'react';
-export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;

package/dist/icon/icon.d.ts

@@ -1,13 +0,0 @@
-import type { IconName } from '@zenkigen-inc/component-icons';
-import { iconColors } from '@zenkigen-inc/component-theme';
-type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-type Color = keyof typeof iconColors;
-type Props = {
-    name: IconName;
-    size?: Size;
-    color?: Color;
-    isDisabled?: boolean;
-    className?: string;
-};
-export declare const Icon: ({ size, isDisabled, ...props }: Props) => import("react").JSX.Element;
-export {};

package/dist/icon/index.d.ts

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

package/dist/icon-button/icon-button.d.ts

@@ -1,19 +0,0 @@
-import type { IconName } from '@zenkigen-inc/component-icons';
-type Size = 'small' | 'medium' | 'large';
-type Variant = 'outline' | 'text';
-type Props = {
-    icon: IconName;
-    size?: Size;
-    isDisabled?: boolean;
-    isNoPadding?: boolean;
-    variant?: Variant;
-} & ({
-    isAnchor: true;
-    href: string;
-    target?: HTMLAnchorElement['target'];
-} | {
-    isAnchor?: false;
-    onClick?: () => void;
-});
-export declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props): import("react").JSX.Element;
-export {};

package/dist/icon-button/index.d.ts

@@ -1 +0,0 @@
-export { IconButton } from './icon-button';