@laser-ui/components 0.0.1

package/popover/types.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { ButtonProps } from '../button';
+import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface PopoverRef {
+    updatePosition: () => void;
+}
+export interface PopoverProps extends BaseProps<'popover', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
+    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    content: React.ReactNode;
+    header?: React.ReactElement | string;
+    footer?: React.ReactElement;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    trigger?: 'hover' | 'click';
+    placement?: PopupPlacement;
+    placementFixed?: boolean;
+    arrow?: boolean;
+    escClosable?: boolean;
+    gap?: number;
+    inWindow?: number | false;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    modal?: boolean;
+    skipFirstTransition?: boolean;
+    destroyAfterClose?: boolean;
+    zIndex?: number | string;
+    scrolling?: RefExtra;
+    onVisibleChange?: (visible: boolean) => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export interface PopoverHeaderProps extends BaseProps<'popover', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    actions?: React.ReactNode[];
+    closeProps?: ButtonProps;
+    onCloseClick?: () => any | Promise<any>;
+}
+export interface PopoverFooterProps extends BaseProps<'popover', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    align?: 'left' | 'center' | 'right';
+    actions?: React.ReactNode[];
+    cancelProps?: ButtonProps;
+    okProps?: ButtonProps;
+    onCancelClick?: () => any | Promise<any>;
+    onOkClick?: () => any | Promise<any>;
+}

package/popover/types.js

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

package/popover/vars.d.ts

@@ -0,0 +1,30 @@
+export declare const CLASSES: {
+    popover: string;
+    'popover--top': string;
+    'popover--top-left': string;
+    'popover--top-right': string;
+    'popover--right': string;
+    'popover--right-top': string;
+    'popover--right-bottom': string;
+    'popover--bottom': string;
+    'popover--bottom-left': string;
+    'popover--bottom-right': string;
+    'popover--left': string;
+    'popover--left-top': string;
+    'popover--left-bottom': string;
+    popover__mask: string;
+    popover__content: string;
+    popover__arrow: string;
+    popover__header: string;
+    'popover__header-title': string;
+    'popover__header-actions': string;
+    popover__body: string;
+    popover__footer: string;
+    'popover__footer--left': string;
+    'popover__footer--center': string;
+    'popover__footer--right': string;
+};
+export declare const TTANSITION_DURING: {
+    enter: number;
+    leave: number;
+};

package/popover/vars.js

@@ -0,0 +1,27 @@
+export const CLASSES = {
+    popover: '^popover',
+    'popover--top': '^popover--top',
+    'popover--top-left': '^popover--top-left',
+    'popover--top-right': '^popover--top-right',
+    'popover--right': '^popover--right',
+    'popover--right-top': '^popover--right-top',
+    'popover--right-bottom': '^popover--right-bottom',
+    'popover--bottom': '^popover--bottom',
+    'popover--bottom-left': '^popover--bottom-left',
+    'popover--bottom-right': '^popover--bottom-right',
+    'popover--left': '^popover--left',
+    'popover--left-top': '^popover--left-top',
+    'popover--left-bottom': '^popover--left-bottom',
+    popover__mask: '^popover__mask',
+    popover__content: '^popover__content',
+    popover__arrow: '^popover__arrow',
+    popover__header: '^popover__header',
+    'popover__header-title': '^popover__header-title',
+    'popover__header-actions': '^popover__header-actions',
+    popover__body: '^popover__body',
+    popover__footer: '^popover__footer',
+    'popover__footer--left': '^popover__footer--left',
+    'popover__footer--center': '^popover__footer--center',
+    'popover__footer--right': '^popover__footer--right',
+};
+export const TTANSITION_DURING = { enter: 86, leave: 100 };

package/progress/Progress.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ProgressProps } from './types';
+export declare function Progress(props: ProgressProps): JSX.Element | null;

package/progress/Progress.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
+import { ReactComponent as WarningFilled } from '@material-design-icons/svg/filled/warning.svg';
+import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import { isUndefined } from 'lodash';
+import { useId } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function Progress(props) {
+    const _a = useComponentProps('Progress', props), { styleOverrides, styleProvider, percent, pattern = 'line', state: stateProp, label, size = 120, wave = false, lineCap = 'round', lineWidth = 8, gapDegree = 75, linearGradient } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "percent", "pattern", "state", "label", "size", "wave", "lineCap", "lineWidth", "gapDegree", "linearGradient"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { progress: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.progress }, styleOverrides);
+    const uniqueId = useId();
+    const state = isUndefined(stateProp) ? (percent === 100 ? 'success' : 'process') : stateProp;
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('progress', `progress--${pattern}`, `progress--${state}`), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, children: [pattern === 'line' ? (_jsx("div", Object.assign({}, mergeCS(styled('progress__line-track'), {
+                style: { height: lineWidth, borderRadius: lineCap === 'round' ? lineWidth / 2 : 0 },
+            }), { children: _jsx("div", Object.assign({}, mergeCS(styled('progress__line-bar'), {
+                    style: {
+                        opacity: percent === 0 ? 0 : 1,
+                        width: `${percent}%`,
+                        backgroundImage: linearGradient
+                            ? `linear-gradient(to right, ${linearGradient[0]} 0%, ${linearGradient[100]} 100%)`
+                            : undefined,
+                    },
+                }), { children: wave && percent > 0 && _jsx("div", Object.assign({}, styled('progress__line-wave'))) })) }))) : ((() => {
+                const r = 60 - lineWidth / 2;
+                const c = 2 * Math.PI * r;
+                const dash = c - (pattern === 'circle' ? 0 : (gapDegree / 360) * c);
+                return (_jsx(Icon, { size: size, children: _jsxs("svg", Object.assign({}, mergeCS(styled('progress__svg'), {
+                        style: { transform: pattern === 'circle' ? 'rotate(-90deg)' : `rotate(${90 + gapDegree / 2}deg)` },
+                    }), { viewBox: "0 0 120 120", children: [linearGradient && (_jsx("defs", { children: _jsxs("linearGradient", { id: `${namespace}-progress-gradient-${uniqueId}-1`, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: linearGradient[0] }), _jsx("stop", { offset: "100%", stopColor: linearGradient[100] })] }) })), _jsx("circle", { cx: 60, cy: 60, r: r, strokeLinecap: lineCap, strokeWidth: lineWidth, stroke: "var(--background-color)", fill: "none", strokeDasharray: `${dash} ${c}` }), _jsx("circle", { style: { opacity: percent === 0 ? 0 : 1 }, cx: 60, cy: 60, r: r, strokeLinecap: lineCap, strokeWidth: lineWidth, stroke: isUndefined(linearGradient) ? 'var(--color)' : `url(#${namespace}-progress-gradient-${uniqueId}-1)`, fill: "none", strokeDasharray: `${dash * (percent / 100)} ${c}` })] })) }));
+            })()), label !== false && (_jsx("div", Object.assign({}, mergeCS(styled('progress__label'), {
+                style: { fontSize: pattern === 'line' ? undefined : `calc(${size}px / 5)` },
+            }), { children: checkNodeExist(label) ? (label) : state === 'process' ? (`${percent}%`) : (_jsx(Icon, { size: "1.25em", children: state === 'success' ? (pattern === 'line' ? (_jsx(CheckCircleFilled, {})) : (_jsx(CheckOutlined, {}))) : state === 'warning' ? (pattern === 'line' ? (_jsx(WarningFilled, {})) : (_jsx(WarningAmberOutlined, {}))) : pattern === 'line' ? (_jsx(CancelFilled, {})) : (_jsx(CloseOutlined, {})) })) })))] })));
+}

package/progress/index.d.ts

@@ -0,0 +1,2 @@
+export type { ProgressProps } from './types';
+export { Progress } from './Progress';

package/progress/index.js

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

package/progress/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface ProgressProps extends BaseProps<'progress', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    percent: number;
+    pattern?: 'line' | 'circle' | 'dashboard';
+    state?: 'success' | 'warning' | 'error' | 'process';
+    label?: React.ReactNode;
+    size?: number;
+    wave?: boolean;
+    lineCap?: 'butt' | 'round';
+    lineWidth?: number;
+    gapDegree?: number;
+    linearGradient?: {
+        0: string;
+        100: string;
+    };
+}

package/progress/types.js

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

package/progress/vars.d.ts

@@ -0,0 +1,15 @@
+export declare const CLASSES: {
+    progress: string;
+    'progress--line': string;
+    'progress--circle': string;
+    'progress--dashboard': string;
+    'progress--success': string;
+    'progress--warning': string;
+    'progress--error': string;
+    'progress--process': string;
+    'progress__line-track': string;
+    'progress__line-bar': string;
+    'progress__line-wave': string;
+    progress__svg: string;
+    progress__label: string;
+};

package/progress/vars.js

@@ -0,0 +1,15 @@
+export const CLASSES = {
+    progress: '^progress',
+    'progress--line': '^progress--line',
+    'progress--circle': '^progress--circle',
+    'progress--dashboard': '^progress--dashboard',
+    'progress--success': '^progress--success',
+    'progress--warning': '^progress--warning',
+    'progress--error': '^progress--error',
+    'progress--process': '^progress--process',
+    'progress__line-track': '^progress__line-track',
+    'progress__line-bar': '^progress__line-bar',
+    'progress__line-wave': '^progress__line-wave',
+    progress__svg: '^progress__svg',
+    progress__label: '^progress__label',
+};

package/radio/Radio.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { RadioProps } from './types';
+import { RadioGroup } from './RadioGroup';
+export declare const Radio: {
+    (props: RadioProps): JSX.Element | null;
+    Group: typeof RadioGroup;
+};

package/radio/Radio.js

@@ -0,0 +1,38 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { useRef } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
+import { Wave } from '../internal/wave';
+import { mergeCS } from '../utils';
+export const Radio = (props) => {
+    const _a = useComponentProps('Radio', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, disabled: disabledProp = false, inputRef, inputRender, onModelChange, _pattern, _size } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "disabled", "inputRef", "inputRender", "onModelChange", "_pattern", "_size"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { radio: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.radio }, styleOverrides);
+    const waveRef = useRef(null);
+    const [checked, changeChecked] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : false, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const designProps = useDesign({ compose: _pattern ? { active: checked, disabled } : undefined });
+    const inputNode = (_jsx("input", Object.assign({}, styled('radio__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: inputRef, type: "radio", checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
+            changeChecked(true);
+        } })));
+    return (_jsxs("label", Object.assign({}, restProps, mergeCS(styled('radio', {
+        'radio.is-checked': checked,
+        'radio.is-disabled': disabled,
+        'radio--button': _pattern,
+        [`radio--button-${_pattern}`]: _pattern,
+        [`radio--button-${_size}`]: _size,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { onClick: (e) => {
+            var _a, _b;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (_pattern) {
+                (_b = waveRef.current) === null || _b === void 0 ? void 0 : _b.call(waveRef);
+            }
+        }, children: [_jsx(Wave, { ref: waveRef, color: `var(--${namespace}-color-primary)` }), _jsx("div", Object.assign({}, styled('radio__input-wrapper'), { children: inputRender ? inputRender(inputNode) : inputNode })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('radio__label'), { children: children }))] })));
+};
+Radio.Group = RadioGroup;

package/radio/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RadioGroupItem, RadioGroupProps } from './types';
+export declare function RadioGroup<V extends React.Key, T extends RadioGroupItem<V>>(props: RadioGroupProps<V, T>): JSX.Element | null;

package/radio/RadioGroup.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { nth } from 'lodash';
+import { cloneElement, useId } from 'react';
+import { Radio } from './Radio';
+import { useComponentProps, useControlled, useScopedProps } from '../hooks';
+export function RadioGroup(props) {
+    var _a, _b, _c;
+    const { children, formControl, list, model, defaultModel, pattern, size: sizeProp, name: nameProp, disabled: disabledProp = false, onModelChange, } = useComponentProps('RadioGroup', props);
+    const uniqueId = useId();
+    const name = nameProp !== null && nameProp !== void 0 ? nameProp : uniqueId;
+    const [value, changeValue] = useControlled((_b = defaultModel !== null && defaultModel !== void 0 ? defaultModel : (_a = nth(list, 0)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null, model, (val) => {
+        if (onModelChange) {
+            onModelChange(val, list.find((o) => o.value === val));
+        }
+    }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const childrenNode = children(list.map((option) => (_jsx(Radio, { _pattern: pattern, _size: size, model: option.value === value, disabled: option.disabled || disabled, inputRender: (el) => cloneElement(el, Object.assign(Object.assign({}, formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), { value: option.value, name })), onModelChange: () => {
+            changeValue(option.value);
+        }, children: option.label }, option.value))));
+    return cloneElement(childrenNode, { role: (_c = childrenNode.props.role) !== null && _c !== void 0 ? _c : 'radiogroup' });
+}

package/radio/index.d.ts

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

package/radio/index.js

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

package/radio/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface RadioProps extends BaseProps<'radio', typeof CLASSES>, React.LabelHTMLAttributes<HTMLLabelElement> {
+    formControl?: FormControlProvider;
+    model?: boolean;
+    defaultModel?: boolean;
+    disabled?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (checked: boolean) => void;
+}
+export interface RadioGroupItem<V extends React.Key> {
+    label: React.ReactNode;
+    value: V;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<V extends React.Key, T extends RadioGroupItem<V>> {
+    children: (nodes: React.ReactElement[]) => React.ReactElement;
+    formControl?: FormControlProvider;
+    list: T[];
+    model?: V | null;
+    defaultModel?: V;
+    pattern?: 'outline' | 'fill';
+    size?: Size;
+    name?: string;
+    disabled?: boolean;
+    onModelChange?: (value: V, origin: T) => void;
+}

package/radio/types.js

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

package/radio/vars.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    radio: string;
+    'radio.is-checked': string;
+    'radio.is-disabled': string;
+    'radio--button': string;
+    'radio--button-outline': string;
+    'radio--button-fill': string;
+    'radio--button-small': string;
+    'radio--button-medium': string;
+    'radio--button-large': string;
+    'radio__input-wrapper': string;
+    radio__input: string;
+    radio__label: string;
+};

package/radio/vars.js

@@ -0,0 +1,14 @@
+export const CLASSES = {
+    radio: '^radio',
+    'radio.is-checked': 'is-checked',
+    'radio.is-disabled': 'is-disabled',
+    'radio--button': '^radio--button',
+    'radio--button-outline': '^radio--button-outline',
+    'radio--button-fill': '^radio--button-fill',
+    'radio--button-small': '^radio--button-small',
+    'radio--button-medium': '^radio--button-medium',
+    'radio--button-large': '^radio--button-large',
+    'radio__input-wrapper': '^radio__input-wrapper',
+    radio__input: '^radio__input',
+    radio__label: '^radio__label',
+};

package/rating/Rating.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RatingProps } from './types';
+export declare function Rating(props: RatingProps): JSX.Element | null;

package/rating/Rating.js

@@ -0,0 +1,34 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as StarFilled } from '@material-design-icons/svg/filled/star.svg';
+import { isFunction } from 'lodash';
+import { useId, useState } from 'react';
+import { RatingStar } from './internal/RatingStar';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useScopedProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function Rating(props) {
+    const _a = useComponentProps('Rating', props), { styleOverrides, styleProvider, formControl, model, defaultModel, total = 5, icon, tooltip, name, half = false, readOnly = false, disabled: disabledProp = false, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "total", "icon", "tooltip", "name", "half", "readOnly", "disabled", "onModelChange"]);
+    const styled = useStyled(CLASSES, { rating: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.rating }, styleOverrides);
+    const uniqueId = useId();
+    const [hover, setHover] = useState(null);
+    const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('rating', {
+        'rating.is-disabled': disabled,
+        'rating--read-only': readOnly,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { role: "radiogroup", onMouseLeave: (e) => {
+            var _a;
+            (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setHover(null);
+        }, children: Array.from({ length: total }).map((_, i) => (_jsx(RatingStar, { styled: styled, value: i + 1, hover: hover, checked: value, icon: isFunction(icon) ? (icon(i + 1)) : checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: _jsx(StarFilled, {}) })), tooltip: tooltip, name: name !== null && name !== void 0 ? name : uniqueId, half: half, disabled: disabled || readOnly, inputProps: formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, onCheck: (v) => {
+                changeValue(v);
+            }, onHoverChange: (v) => {
+                setHover(v);
+            } }, i + 1))) })));
+}

package/rating/index.d.ts

@@ -0,0 +1,2 @@
+export type { RatingProps } from './types';
+export { Rating } from './Rating';

package/rating/index.js

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

package/rating/internal/RatingStar.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface RatingStarProps {
+    styled: Styled<typeof CLASSES>;
+    value: number;
+    hover: number | null;
+    checked: number | null;
+    icon: React.ReactNode;
+    tooltip: ((value: number) => React.ReactNode) | undefined;
+    name: string;
+    half: boolean;
+    disabled: boolean;
+    inputProps: any;
+    onCheck: (value: number) => void;
+    onHoverChange: (value: number) => void;
+}
+export declare function RatingStar(props: RatingStarProps): JSX.Element | null;
+export {};

package/rating/internal/RatingStar.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isUndefined } from 'lodash';
+import { useId, useState } from 'react';
+import { useNamespace } from '../../hooks';
+import { Tooltip } from '../../tooltip';
+export function RatingStar(props) {
+    var _a, _b;
+    const { styled, value, hover, checked: checkedProp, icon, tooltip, name, half, disabled, inputProps, onCheck, onHoverChange } = props;
+    const namespace = useNamespace();
+    const uniqueId = useId();
+    const inputId = `${namespace}-rating-star-input-${uniqueId}`;
+    const halfInputId = `${namespace}-rating-star-half-input-${uniqueId}`;
+    const checked = value === checkedProp;
+    const halfValue = value - 0.5;
+    const halfChecked = halfValue === checkedProp;
+    const [tooltipValue, setTooltipValue] = useState(value);
+    const node = (_jsxs("div", Object.assign({}, styled('rating__star'), { children: [half && (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({}, styled('rating__input', 'rating__input--half'), inputProps, { id: halfInputId, type: "radio", name: name, checked: halfChecked, disabled: disabled, "aria-checked": halfChecked, onChange: () => {
+                            onCheck(halfValue);
+                        }, onMouseEnter: () => {
+                            if (!isUndefined(tooltip)) {
+                                setTooltipValue(halfValue);
+                            }
+                            onHoverChange(halfValue);
+                        } })), _jsx("label", Object.assign({}, styled('rating__icon', 'rating__icon--half', {
+                        'rating__icon.is-checked': halfValue <= ((_a = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _a !== void 0 ? _a : 0),
+                    }), { htmlFor: halfInputId, children: icon }))] })), _jsxs("label", Object.assign({}, styled('rating__icon', {
+                'rating__icon.is-checked': value <= ((_b = hover !== null && hover !== void 0 ? hover : checkedProp) !== null && _b !== void 0 ? _b : 0),
+            }), { children: [_jsx("input", Object.assign({}, styled('rating__input'), { id: inputId, type: "radio", name: name, checked: checked, disabled: disabled, "aria-checked": checked, onChange: () => {
+                            onCheck(value);
+                        }, onMouseEnter: () => {
+                            if (!isUndefined(tooltip)) {
+                                setTooltipValue(value);
+                            }
+                            onHoverChange(value);
+                        } })), icon] }))] })));
+    return isUndefined(tooltip) ? node : _jsx(Tooltip, { title: tooltip === null || tooltip === void 0 ? void 0 : tooltip(tooltipValue), children: node });
+}

package/rating/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps } from '../types';
+export {};
+export interface RatingProps extends BaseProps<'rating', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    formControl?: FormControlProvider;
+    model?: number;
+    defaultModel?: number;
+    total?: number;
+    icon?: React.ReactNode | ((value: number) => React.ReactNode);
+    tooltip?: (value: number) => React.ReactNode;
+    name?: string;
+    half?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onModelChange?: (value: number) => void;
+}

package/rating/types.js

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

package/rating/vars.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    rating: string;
+    'rating.is-disabled': string;
+    'rating--read-only': string;
+    rating__star: string;
+    rating__input: string;
+    'rating__input--half': string;
+    rating__icon: string;
+    'rating__icon.is-checked': string;
+    'rating__icon--half': string;
+};

package/rating/vars.js

@@ -0,0 +1,11 @@
+export const CLASSES = {
+    rating: '^rating',
+    'rating.is-disabled': 'is-disabled',
+    'rating--read-only': '^rating--read-only',
+    rating__star: '^rating__star',
+    rating__input: '^rating__input',
+    'rating__input--half': '^rating__input--half',
+    rating__icon: '^rating__icon',
+    'rating__icon.is-checked': 'is-checked',
+    'rating__icon--half': '^rating__icon--half',
+};