@xmart/xorder-ui 0.3.0 → 0.4.0

package/dist/components/alert/alert.css.d.ts

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const header: string;
+export declare const icon: string;
+export declare const title: string;
+export declare const body: string;

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type AlertVariant = 'danger' | 'info' | 'warning';
+type AlertOwnProps = {
+    /**
+     * アラートのバリアント
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * アラートのタイトル
+     * 指定した場合、バリアントに応じたアイコンとともに表示されます
+     */
+    title?: ReactNode;
+};
+type AlertProps = Omit<ComponentPropsWithRef<'div'>, keyof AlertOwnProps> & AlertOwnProps;
+declare const Alert: {
+    (props: AlertProps): import("react").JSX.Element;
+    displayName: string;
+};
+export { Alert };
+export type { AlertProps, AlertVariant };

package/dist/components/alert/alert.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export type { AlertProps, AlertVariant } from './alert';

package/dist/components/button/button.css.d.ts

@@ -1,5 +1,6 @@
 export declare const root: string;
 export declare const outlined: string;
 export declare const white: string;
+export declare const soft: string;
 export declare const loading: string;
 export declare const section: string;

package/dist/components/button/button.d.ts

@@ -6,7 +6,7 @@ type ButtonOwnProps = {
     asChild?: boolean;
     /**
      * ボタンテキストのフォントウェイトを制御します
-     * @default filledとoutlinedバリアントでは'bold'、whiteバリアントでは'normal'
+     * @default filled、outlined、softバリアントでは'bold'、whiteバリアントでは'normal'
      */
     bold?: 'bold' | 'normal';
     /**
@@ -34,7 +34,7 @@ type ButtonOwnProps = {
      * ボタンの視覚的なスタイルを制御します
      * @default 'filled'
      */
-    variant?: 'filled' | 'outlined' | 'white';
+    variant?: 'filled' | 'outlined' | 'white' | 'soft';
 };
 interface ButtonProps extends ComponentPropsWithRef<'button'>, ButtonOwnProps {
 }

package/dist/components/index.d.ts

@@ -1,8 +1,12 @@
+export { Alert, type AlertProps, type AlertVariant } from './alert';
 export { Button, type ButtonProps } from './button';
 export { IconButton, type IconButtonProps } from './icon-button';
 export { Input, type InputProps } from './input';
+export { Modal, type ModalBodyProps, type ModalCloseProps, type ModalFooterActionsActionWidth, type ModalFooterActionsAlign, type ModalFooterActionsProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalTitleProps, } from './modal';
 export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, } from './radio-group';
 export { SelectBox, type SelectBoxOption, type SelectBoxProps } from './select-box';
 export { Spinner, type SpinnerProps } from './spinner';
 export { Switch, type SwitchProps } from './switch';
 export { Tag, type TagProps } from './tag';
+export { Textarea, type TextareaProps } from './textarea';
+export { Text, type TextFontSize, type TextFontWeight, type TextForeground, type TextProps, } from './text';

package/dist/components/input/components/InputClearButton/InputClearButton.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
 type InputClearButtonProps = ComponentPropsWithRef<'button'>;
 declare const InputClearButton: {
-    ({ className, ...props }: InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: InputClearButtonProps): import("react").JSX.Element;
     displayName: string;
 };
 export { InputClearButton };

package/dist/components/input/input.d.ts

@@ -26,10 +26,10 @@ type InputOwnProps = {
 interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
 }
 declare const Input: {
-    ({ clearable, className: classNameProp, disabled, error, leftSection, placeholder, rightSection, value: valueProp, defaultValue, onChange: onChangeProp, ref, ...other }: InputProps): import("react/jsx-runtime").JSX.Element;
+    ({ clearable, className: classNameProp, disabled, error, leftSection, placeholder, rightSection, value: valueProp, defaultValue, onChange: onChangeProp, ref, ...other }: InputProps): import("react").JSX.Element;
     displayName: string;
     ClearButton: {
-        ({ className, ...props }: import('./components/InputClearButton/InputClearButton').InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: import('./components/InputClearButton/InputClearButton').InputClearButtonProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/modal/components/modal-body/modal-body.css.d.ts

@@ -0,0 +1 @@
+export declare const body: string;

package/dist/components/modal/components/modal-body/modal-body.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type ModalBodyOwnProps = {
+    children: ReactNode;
+};
+type ModalBodyProps = Omit<ComponentPropsWithRef<'div'>, keyof ModalBodyOwnProps> & ModalBodyOwnProps;
+export declare const ModalBody: {
+    (props: ModalBodyProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalBodyProps };

package/dist/components/modal/components/modal-close/modal-close.css.d.ts

@@ -0,0 +1 @@
+export declare const closeButton: string;

package/dist/components/modal/components/modal-close/modal-close.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ComponentRef } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+type ModalCloseElement = ComponentRef<typeof Dialog.Close>;
+type ModalCloseProps = ComponentPropsWithRef<typeof Dialog.Close>;
+export declare const ModalClose: {
+    (props: ModalCloseProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalCloseElement, ModalCloseProps };

package/dist/components/modal/components/modal-footer/modal-footer.css.d.ts

@@ -0,0 +1 @@
+export declare const footer: string;

package/dist/components/modal/components/modal-footer/modal-footer.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type ModalFooterOwnProps = {
+    children: ReactNode;
+};
+type ModalFooterProps = Omit<ComponentPropsWithRef<'div'>, keyof ModalFooterOwnProps> & ModalFooterOwnProps;
+export declare const ModalFooter: {
+    (props: ModalFooterProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalFooterProps };

package/dist/components/modal/components/modal-footer-actions/modal-footer-actions.css.d.ts

@@ -0,0 +1,2 @@
+export declare const actionWidth: `var(--${string})`;
+export declare const actions: string;

package/dist/components/modal/components/modal-footer-actions/modal-footer-actions.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type ModalFooterActionsAlign = 'left' | 'center' | 'right';
+type ModalFooterActionsActionWidth = 'auto' | 'fill' | `${number}%` | `${number}px` | `${number}rem` | `${number}em`;
+type ModalFooterActionsOwnProps = {
+    children: ReactNode;
+    /**
+     * アクション群の寄せ方向
+     * @default 'right'
+     */
+    align?: ModalFooterActionsAlign;
+    /**
+     * 各アクションの幅
+     * - auto: 子要素本来の幅
+     * - fill: 子要素を等幅で広げる
+     * - 30% / 240px など: 明示した幅
+     * @default 'auto'
+     */
+    actionWidth?: ModalFooterActionsActionWidth;
+};
+type ModalFooterActionsProps = Omit<ComponentPropsWithRef<'div'>, keyof ModalFooterActionsOwnProps> & ModalFooterActionsOwnProps;
+export declare const ModalFooterActions: {
+    (props: ModalFooterActionsProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalFooterActionsActionWidth, ModalFooterActionsAlign, ModalFooterActionsProps };

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

@@ -0,0 +1 @@
+export declare const header: string;

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type ModalHeaderOwnProps = {
+    children: ReactNode;
+};
+type ModalHeaderProps = Omit<ComponentPropsWithRef<'div'>, keyof ModalHeaderOwnProps> & ModalHeaderOwnProps;
+export declare const ModalHeader: {
+    (props: ModalHeaderProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalHeaderProps };

package/dist/components/modal/components/modal-title/modal-title.css.d.ts

@@ -0,0 +1 @@
+export declare const title: string;

package/dist/components/modal/components/modal-title/modal-title.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ComponentRef } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+type ModalTitleElement = ComponentRef<typeof Dialog.Title>;
+type ModalTitleProps = ComponentPropsWithRef<typeof Dialog.Title>;
+export declare const ModalTitle: {
+    (props: ModalTitleProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type { ModalTitleElement, ModalTitleProps };

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

@@ -0,0 +1,2 @@
+export type { ModalBodyProps, ModalCloseProps, ModalFooterActionsActionWidth, ModalFooterActionsAlign, ModalFooterActionsProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, } from './modal';
+export { Modal } from './modal';

package/dist/components/modal/modal.css.d.ts

@@ -0,0 +1,2 @@
+export declare const overlay: string;
+export declare const content: string;

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,65 @@
+import { ComponentPropsWithRef, ComponentRef, RefObject } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+type ModalRootElement = ComponentRef<typeof Dialog.Content>;
+type ModalRootProps = ComponentPropsWithRef<typeof Dialog.Content> & {
+    /**
+     * モーダルの開閉状態を制御します
+     */
+    open: boolean;
+    /**
+     * モーダルが閉じられるときに呼び出されるコールバック関数
+     */
+    onClose: () => void;
+    /**
+     * モーダルの開閉状態が変更されたときに呼び出されるコールバック関数
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * モーダルのサイズ
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 初期フォーカスを受け取る要素への参照（オプション）
+     * 指定されない場合は Dialog.Content 自体がフォーカスを受け取ります
+     * (Radix デフォルトでは最初のフォーカス可能要素 = Modal.Close ボタンに当たり、
+     *  操作意図に対して不自然なため Content にフォーカスを向け直しています)
+     */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+};
+export declare const Modal: {
+    (props: ModalRootProps): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        (props: import('./modal').ModalHeaderProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        (props: import('./modal').ModalTitleProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        (props: import('./modal').ModalCloseProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        (props: import('./modal').ModalBodyProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        (props: import('./modal').ModalFooterProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    FooterActions: {
+        (props: import('./modal').ModalFooterActionsProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export type { ModalRootProps as ModalProps, ModalRootElement };
+export type { ModalBodyProps } from './components/modal-body/modal-body';
+export type { ModalCloseProps } from './components/modal-close/modal-close';
+export type { ModalFooterActionsActionWidth, ModalFooterActionsAlign, ModalFooterActionsProps, } from './components/modal-footer-actions/modal-footer-actions';
+export type { ModalFooterProps } from './components/modal-footer/modal-footer';
+export type { ModalHeaderProps } from './components/modal-header/modal-header';
+export type { ModalTitleProps } from './components/modal-title/modal-title';

package/dist/components/modal/modal.test.d.ts

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

package/dist/components/select-box/select-box.d.ts

@@ -46,7 +46,7 @@ type SelectBoxOwnProps = {
 };
 type SelectBoxProps = Omit<ComponentPropsWithRef<typeof Select.Root>, keyof SelectBoxOwnProps> & SelectBoxOwnProps;
 declare const SelectBox: {
-    ({ className: classNameProp, disabled, error, placeholder, options, value, defaultValue, onValueChange, ariaLabel, ariaLabelledby, ...other }: SelectBoxProps): import("react/jsx-runtime").JSX.Element;
+    ({ className: classNameProp, disabled, error, placeholder, options, value, defaultValue, onValueChange, ariaLabel, ariaLabelledby, ...other }: SelectBoxProps): import("react").JSX.Element;
     displayName: string;
 };
 export { SelectBox };

package/dist/components/tag/tag.d.ts

@@ -18,7 +18,7 @@ type TagOwnProps = {
 };
 type TagProps = ComponentPropsWithRef<'span'> & TagOwnProps;
 declare const Tag: {
-    (props: TagProps): import("react/jsx-runtime").JSX.Element;
+    (props: TagProps): import("react").JSX.Element;
     displayName: string;
 };
 export { Tag };

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

@@ -0,0 +1,2 @@
+export { Text } from './text';
+export type { TextFontSize, TextFontWeight, TextForeground, TextProps } from './text';

package/dist/components/text/text.css.d.ts

@@ -0,0 +1 @@
+export declare const root: string;

package/dist/components/text/text.d.ts

@@ -0,0 +1,30 @@
+import { useRender } from '@base-ui/react/use-render';
+import { xmVars } from '@xmart/xorder-ui-tokens';
+type TextFontSize = keyof typeof xmVars.fontSize;
+type TextForeground = keyof typeof xmVars.color.foreground;
+type TextFontWeight = keyof typeof xmVars.fontWeight;
+type TextOwnProps = {
+    /**
+     * テキストの色を制御します（`xmVars.color.foreground.*` に対応）
+     * @default 'default'
+     */
+    color?: TextForeground;
+    /**
+     * テキストのサイズを制御します（`xmVars.fontSize.*` に対応）
+     * px や rem などの任意サイズは `style` または `className` で指定してください
+     * @default 'md'
+     */
+    size?: TextFontSize;
+    /**
+     * テキストのフォントウェイトを制御します（`xmVars.fontWeight.*` に対応）
+     * @default 'regular'
+     */
+    weight?: TextFontWeight;
+};
+type TextProps = Omit<useRender.ComponentProps<'p'>, keyof TextOwnProps> & TextOwnProps;
+declare const Text: {
+    (props: TextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+    displayName: string;
+};
+export { Text };
+export type { TextFontSize, TextFontWeight, TextForeground, TextProps };

package/dist/components/text/text.test.d.ts

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

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

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from './textarea';

package/dist/components/textarea/textarea.css.d.ts

@@ -0,0 +1 @@
+export declare const textarea: string;

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef, CSSProperties } from 'react';
+type TextareaOwnProps = {
+    /**
+     * エラー状態を表示するかどうか
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * プレースホルダーテキスト
+     */
+    placeholder?: string;
+    /**
+     * resize CSS プロパティ
+     * @default 'none'
+     */
+    resize?: CSSProperties['resize'];
+    /**
+     * 表示行数（初期の高さ）
+     * @default 3
+     */
+    rows?: number;
+};
+type TextareaProps = Omit<ComponentPropsWithRef<'textarea'>, 'size' | keyof TextareaOwnProps> & TextareaOwnProps;
+declare const Textarea: {
+    ({ className: classNameProp, disabled, error, placeholder, resize, rows, style, value: valueProp, defaultValue, onChange: onChangeProp, ref, ...other }: TextareaProps): import("react").JSX.Element;
+    displayName: string;
+};
+export { Textarea };
+export type { TextareaProps };

package/dist/components/textarea/textarea.test.d.ts

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

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Input, type InputProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, Spinner, type SpinnerProps, Switch, type SwitchProps, } from './components';
+export { Alert, type AlertProps, type AlertVariant, Button, type ButtonProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalBodyProps, type ModalCloseProps, type ModalFooterActionsActionWidth, type ModalFooterActionsAlign, type ModalFooterActionsProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalTitleProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, SelectBox, type SelectBoxOption, type SelectBoxProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tag, type TagProps, Textarea, type TextareaProps, Text, type TextFontSize, type TextFontWeight, type TextForeground, type TextProps, } from './components';
 export { primitive, semantic } from './styles/tokens';