@xmart/xorder-ui 0.3.1 → 0.5.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/checkbox/checkbox.css.d.ts

@@ -0,0 +1,5 @@
+export declare const box: string;
+export declare const control: string;
+export declare const indicator: string;
+export declare const checkIcon: string;
+export declare const label: string;

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

@@ -0,0 +1,25 @@
+import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type CheckboxOwnProps = {
+    /**
+     * チェック状態が変化した時のコールバック
+     * @param checked 新しい状態
+     */
+    onCheckedChange?: (checked: boolean) => void;
+};
+export type CheckboxProps = Omit<BaseUICheckbox.Root.Props, 'children' | 'indeterminate' | 'onCheckedChange'> & CheckboxOwnProps;
+export declare const Checkbox: {
+    (props: CheckboxProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface CheckboxLabelProps extends ComponentPropsWithRef<'label'> {
+    /**
+     * 通常 `<Checkbox />` とラベル文字列を含めます
+     */
+    children?: ReactNode;
+}
+export declare const CheckboxLabel: {
+    (props: CheckboxLabelProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};

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

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

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

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

package/dist/components/index.d.ts

@@ -1,8 +1,13 @@
+export { Alert, type AlertProps, type AlertVariant } from './alert';
 export { Button, type ButtonProps } from './button';
+export { Checkbox, CheckboxLabel, type CheckboxLabelProps, type CheckboxProps } from './checkbox';
 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/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/radio-group/radio-group.css.d.ts

@@ -1,5 +1,4 @@
 export declare const root: string;
-export declare const horizontal: string;
 export declare const item: string;
 export declare const indicator: string;
 export declare const indicatorInner: string;

package/dist/components/radio-group/radio-group.d.ts

@@ -1,34 +1,31 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
 type RadioGroupRootOwnProps = {
-    /**
-     * ラジオグループの値が変更されたときに呼び出されるコールバック関数
-     * @param value 選択された値
-     */
-    onChange?: (value: string) => void;
     /**
      * ラジオグループの方向を制御します
      * @default 'vertical'
      */
     orientation?: 'horizontal' | 'vertical';
 };
-type RadioGroupRootProps = Omit<ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>, 'onValueChange' | keyof RadioGroupRootOwnProps> & RadioGroupRootOwnProps;
-declare const RadioGroupRoot: import('react').ForwardRefExoticComponent<Omit<Omit<RadixRadioGroup.RadioGroupProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "onValueChange" | keyof RadioGroupRootOwnProps> & RadioGroupRootOwnProps & import('react').RefAttributes<HTMLDivElement>>;
-type RadioGroupItemOwnProps = {
-    /**
-     * trueの場合、ラジオボタンのレンダリングを子要素に委譲します
-     */
-    asChild?: boolean;
-    /**
-     * ラジオボタンの子要素
-     */
-    children?: ReactNode;
+type RadioGroupRootProps<TValue> = BaseUIRadioGroup.Props<TValue> & RadioGroupRootOwnProps;
+declare const RadioGroupRoot: {
+    <TValue>(props: RadioGroupRootProps<TValue>): import("react").JSX.Element;
+    displayName: string;
+};
+type RadioGroupItemProps<TValue> = Radio.Root.Props<TValue>;
+declare const RadioGroupItem: {
+    <TValue>(props: RadioGroupItemProps<TValue>): import("react").JSX.Element;
+    displayName: string;
 };
-type RadioGroupItemProps = ComponentPropsWithoutRef<typeof RadixRadioGroup.Item> & RadioGroupItemOwnProps;
-declare const RadioGroupItem: import('react').ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & RadioGroupItemOwnProps & import('react').RefAttributes<HTMLButtonElement>>;
 declare const RadioGroup: {
-    Root: import('react').ForwardRefExoticComponent<Omit<Omit<RadixRadioGroup.RadioGroupProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "onValueChange" | keyof RadioGroupRootOwnProps> & RadioGroupRootOwnProps & import('react').RefAttributes<HTMLDivElement>>;
-    Item: import('react').ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & RadioGroupItemOwnProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Root: {
+        <TValue>(props: RadioGroupRootProps<TValue>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        <TValue>(props: RadioGroupItemProps<TValue>): import("react").JSX.Element;
+        displayName: string;
+    };
 };
 export { RadioGroup, RadioGroupItem, RadioGroupRoot };
 export type { RadioGroupItemProps, RadioGroupRootProps };

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, SelectBox, type SelectBoxOption, type SelectBoxProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tag, type TagProps, } from './components';
+export { Alert, type AlertProps, type AlertVariant, Button, type ButtonProps, Checkbox, CheckboxLabel, type CheckboxLabelProps, type CheckboxProps, 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';