@central-ui/react 0.0.0-stage → 0.1.1

package/dist/components/radio/index.js

@@ -0,0 +1,232 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { createContext, useCallback, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+/**
+ * Root owns the chosen value. For each choice keep Item, ItemButton, ItemIndicator, and ItemLabel together. The indicator follows selection automatically; do not manage a separate checked state for each item.
+ *
+ * @example Complete composition
+ * import { Radio } from '@central-ui/react'
+ *
+ * const plans = [
+ *   {
+ *     value: 'basic',
+ *     label: 'Basic',
+ *     description: 'For personal use.',
+ *     disabled: false,
+ *   },
+ *   {
+ *     value: 'team',
+ *     label: 'Team',
+ *     description: 'For shared work.',
+ *     disabled: false,
+ *   },
+ *   {
+ *     value: 'enterprise',
+ *     label: 'Enterprise',
+ *     description: 'Unavailable right now.',
+ *     disabled: true,
+ *   },
+ * ]
+ * function Example() {
+ *   return (
+ *     <Radio.Root name="plan" defaultValue="basic">
+ *       <Radio.Container>
+ *         <Radio.Label>Plan</Radio.Label>
+ *         <Radio.List>
+ *           {plans.map((plan) => (
+ *             <Radio.Item key={plan.value} value={plan.value} disabled={plan.disabled}>
+ *               <Radio.ItemButton>
+ *                 <Radio.ItemIndicator />
+ *               </Radio.ItemButton>
+ *               <Radio.ItemLabel>{plan.label}</Radio.ItemLabel>
+ *               <Radio.ItemDescription>{plan.description}</Radio.ItemDescription>
+ *             </Radio.Item>
+ *           ))}
+ *         </Radio.List>
+ *         <Radio.Description>Choose one plan.</Radio.Description>
+ *       </Radio.Container>
+ *     </Radio.Root>
+ *   )
+ * }
+ *
+ * @example Choose the initial plan
+ * // Keep the same Item compositions; each Item still supplies its own value.
+ * ;<Radio.Root defaultValue="pro" name="plan">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Radio.Root>
+ */
+export function Root({ children, tone = 'neutral', ...props }) {
+    const [labelIds, setLabelIds] = useState([]);
+    const [messageIds, setMessageIds] = useState([]);
+    return (_jsx(ToneProvider, { value: tone, children: _jsx(BaseRadioGroup, { ...props, "aria-labelledby": [props['aria-labelledby'], ...labelIds].filter(Boolean).join(' ') ||
+                undefined, "aria-describedby": [props['aria-describedby'], ...messageIds]
+                .filter(Boolean)
+                .join(' ') || undefined, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, render: (groupProps, state) => {
+                const { children, ...elementProps } = groupProps;
+                return (_jsx(RadioContext.Provider, { value: {
+                        elementProps,
+                        state,
+                        messageIds,
+                        setMessageIds,
+                        setLabelIds,
+                    }, children: _jsx(_Fragment, { children: children }) }));
+            }, children: children }) }));
+}
+export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-component": "radio-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const List = forwardRef(function List({ disableStyle, ...props }, ref) {
+    const { elementProps } = useRadioContext();
+    const { ref: nativeRef, ...nativeProps } = elementProps;
+    return (_jsx("div", { ...nativeProps, ...props, ref: useRootRef(nativeRef, ref), "data-component": "radio-list", "data-style-disabled": disableStyle ? '' : undefined, className: props.className }));
+});
+/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
+export const Label = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+    const generatedId = useId();
+    const labelId = id ?? generatedId;
+    const context = useRadioContext();
+    useEffect(() => {
+        context.setLabelIds((current) => [...current, labelId]);
+        return () => context.setLabelIds((current) => current.filter((value) => value !== labelId));
+    }, [labelId, context.setLabelIds]);
+    return (_jsx("div", { ...props, id: labelId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export function Item({ disableStyle, children, value, disabled, readOnly, required, inputRef, id, className, ...props }) {
+    const generatedId = useId();
+    const group = useRadioContext();
+    const [messageIds, setMessageIds] = useState([]);
+    const [state, setState] = useState({
+        checked: false,
+        disabled: disabled ?? group.state.disabled,
+        readOnly: readOnly ?? group.state.readOnly,
+        required: required ?? group.state.required,
+    });
+    return (_jsx(ItemContext.Provider, { value: {
+            coreProps: {
+                value,
+                disabled,
+                readOnly,
+                required,
+                inputRef,
+                id: id ?? generatedId,
+            },
+            state,
+            setState,
+            messageIds,
+            setMessageIds,
+        }, children: _jsx("div", { ...props, "data-component": "radio-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }) }));
+}
+export const ItemButton = forwardRef(function ItemButton({ disableStyle, className, ...props }, ref) {
+    const item = useItemContext();
+    const group = useRadioContext();
+    const tone = useToneContext();
+    return (_jsx(BaseRadio.Root, { ...props, ...item.coreProps, ref: ref, "aria-describedby": [props['aria-describedby'], ...group.messageIds, ...item.messageIds]
+            .filter(Boolean)
+            .join(' ') || undefined, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "data-tone": tone, "data-component": "radio-itembutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(RadioButtonSurface, { ...buttonProps, state: state })) }));
+});
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export const ItemIndicator = forwardRef(function ItemIndicator({ disableStyle, children, className, ...props }, ref) {
+    return (_jsx(BaseRadio.Indicator, { ...props, ref: ref, "data-component": "radio-itemindicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children }));
+});
+export const ItemLabel = forwardRef(function ItemLabel({ disableStyle, className, ...props }, ref) {
+    const item = useItemContext();
+    return (_jsx("label", { ...props, ref: ref, htmlFor: item.coreProps.id, "data-disabled": item.state.disabled ? '' : undefined, "data-component": "radio-itemlabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const ItemDescription = forwardRef(function ItemDescription({ disableStyle, className, id, ...props }, ref) {
+    const generatedId = useId();
+    const messageId = id ?? generatedId;
+    const item = useItemContext();
+    useEffect(() => {
+        item.setMessageIds((current) => [...current, messageId]);
+        return () => item.setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, item.setMessageIds]);
+    return (_jsx("span", { ...props, ref: ref, id: messageId, "data-disabled": item.state.disabled ? '' : undefined, "data-checked": item.state.checked ? '' : undefined, "data-component": "radio-itemdescription", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const context = useRadioContext();
+    return (_jsx("div", { ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const context = useRadioContext();
+    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+    const messageId = useMessageId(id);
+    const context = useRadioContext();
+    return (_jsx("div", { role: "status", "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-disabled": context.state.disabled ? '' : undefined, "data-component": "radio-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+});
+const RadioContext = createContext(null);
+function useRadioContext() {
+    const context = useContext(RadioContext);
+    if (!context)
+        throw new globalThis.Error('Radio parts must be inside Radio.Root');
+    return context;
+}
+const ItemContext = createContext(null);
+function useItemContext() {
+    const context = useContext(ItemContext);
+    if (!context)
+        throw new globalThis.Error('Radio item parts must be inside Radio.Item');
+    return context;
+}
+const RadioButtonSurface = forwardRef(function RadioButtonSurface({ state, ...props }, ref) {
+    const { setState } = useItemContext();
+    useEffect(() => {
+        setState({
+            checked: state.checked,
+            disabled: state.disabled,
+            readOnly: state.readOnly,
+            required: state.required,
+        });
+    }, [state.checked, state.disabled, state.readOnly, state.required, setState]);
+    return _jsx("span", { ...props, ref: ref });
+});
+function useMessageId(id) {
+    const generatedId = useId();
+    const messageId = id ?? generatedId;
+    const { setMessageIds } = useRadioContext();
+    useEffect(() => {
+        setMessageIds((current) => [...current, messageId]);
+        return () => setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, setMessageIds]);
+    return messageId;
+}
+function useRootRef(nativeRef, forwardedRef) {
+    return useCallback((element) => {
+        const nativeCleanup = typeof nativeRef === 'function'
+            ? nativeRef(element)
+            : nativeRef
+                ? ((nativeRef.current = element), undefined)
+                : undefined;
+        const forwardedCleanup = typeof forwardedRef === 'function'
+            ? forwardedRef(element)
+            : forwardedRef
+                ? ((forwardedRef.current = element), undefined)
+                : undefined;
+        if (typeof nativeCleanup === 'function' ||
+            typeof forwardedCleanup === 'function')
+            return () => {
+                if (typeof nativeCleanup === 'function')
+                    nativeCleanup();
+                else if (typeof nativeRef === 'function')
+                    nativeRef(null);
+                else if (nativeRef)
+                    nativeRef.current = null;
+                if (typeof forwardedCleanup === 'function')
+                    forwardedCleanup();
+                else if (typeof forwardedRef === 'function')
+                    forwardedRef(null);
+                else if (forwardedRef)
+                    forwardedRef.current = null;
+            };
+    }, [nativeRef, forwardedRef]);
+}
+//# sourceMappingURL=index.js.map

package/dist/components/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+import type { StyleProps } from '../../types/Style.ts';
+import { type RatingGroupControlProps, type RatingGroupItemProps, type RatingGroupLabelProps, type RatingGroupRootProps } from '@ark-ui/react/rating-group';
+import type { LucideProps } from 'lucide-react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+/**
+ * Root configures the scale and selection. StarsList supplies indices; use StarButton with StarIcon for each rating. Highlight, checked, and half-star appearance are built in; do not recreate hover state.
+ *
+ * @example Complete composition
+ * import { RatingInput } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <RatingInput.Root count={5}>
+ *       <RatingInput.Container>
+ *         <RatingInput.Label>How was your delivery?</RatingInput.Label>
+ *         <RatingInput.StarsList>
+ *           {(index) => (
+ *             <RatingInput.StarButton key={index} index={index}>
+ *               <RatingInput.StarIcon />
+ *             </RatingInput.StarButton>
+ *           )}
+ *         </RatingInput.StarsList>
+ *         <RatingInput.Description>Choose up to five stars.</RatingInput.Description>
+ *       </RatingInput.Container>
+ *     </RatingInput.Root>
+ *   )
+ * }
+ *
+ * @example Allow half-star ratings
+ * // Keep the same StarsList and StarIcon; half-star rendering is built in.
+ * ;<RatingInput.Root count={5} allowHalf defaultValue={2.5}>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </RatingInput.Root>
+ */
+export declare function Root({ children, tone, ...props }: Omit<RatingGroupRootProps, 'asChild'> & {
+    /** Visual feedback only; defaults to neutral. */
+    tone?: 'neutral' | 'valid' | 'invalid';
+}): import("react").JSX.Element;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Label({ disableStyle, className, ...props }: Omit<RatingGroupLabelProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+/** Calls children for each rating index. Pass the supplied index to StarButton; do not create a second hover or selection state. */
+export declare function StarsList({ disableStyle, className, children, ...props }: (Omit<RatingGroupControlProps, 'asChild' | 'children'> & {
+    /** Render StarButton with the supplied index and put StarIcon inside it. */
+    children: (index: number) => ReactNode;
+}) & StyleProps): import("react").JSX.Element;
+export declare function StarButton({ disableStyle, children, className, ...props }: (Omit<RatingGroupItemProps, 'asChild' | 'children'> & {
+    /** Use StarIcon for built-in highlight and half-star visuals, or a custom icon that accepts the forwarded state attributes. */
+    children: ReactElement;
+}) & StyleProps): import("react").JSX.Element;
+/** Built-in icon; no children needed. Use it inside its matching control. */
+export declare function StarIcon({ disableStyle, className, strokeWidth, style, ...props }: Omit<LucideProps, 'children'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare function Error({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare function Success({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ratinginput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ratinginput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAIL,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EACV,cAAc,EAEd,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAA;AAKd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;CACvC,+BAUA;AAED,eAAO,MAAM,SAAS,uNAmBpB,CAAA;AAEF,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,GAAG,UAAU,+BASrD;AAED,oIAAoI;AACpI,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC1D,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CACvC,CAAC,GACA,UAAU,+BAcX;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IACvD,+HAA+H;IAC/H,QAAQ,EAAE,YAAY,CAAA;CACvB,CAAC,GACA,UAAU,+BAuCX;AAED,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,UAAU,+BA8B5C;AAED,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,+BASpC;AAED,iHAAiH;AACjH,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,+BASpC;AAED,iHAAiH;AACjH,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,+BASpC"}

package/dist/components/ratinginput/index.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, } from '@ark-ui/react/rating-group';
+import { Star as DefaultStarIcon } from 'lucide-react';
+import { cloneElement, forwardRef, useId, Fragment } from 'react';
+import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+/**
+ * Root configures the scale and selection. StarsList supplies indices; use StarButton with StarIcon for each rating. Highlight, checked, and half-star appearance are built in; do not recreate hover state.
+ *
+ * @example Complete composition
+ * import { RatingInput } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <RatingInput.Root count={5}>
+ *       <RatingInput.Container>
+ *         <RatingInput.Label>How was your delivery?</RatingInput.Label>
+ *         <RatingInput.StarsList>
+ *           {(index) => (
+ *             <RatingInput.StarButton key={index} index={index}>
+ *               <RatingInput.StarIcon />
+ *             </RatingInput.StarButton>
+ *           )}
+ *         </RatingInput.StarsList>
+ *         <RatingInput.Description>Choose up to five stars.</RatingInput.Description>
+ *       </RatingInput.Container>
+ *     </RatingInput.Root>
+ *   )
+ * }
+ *
+ * @example Allow half-star ratings
+ * // Keep the same StarsList and StarIcon; half-star rendering is built in.
+ * ;<RatingInput.Root count={5} allowHalf defaultValue={2.5}>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </RatingInput.Root>
+ */
+export function Root({ children, tone = 'neutral', ...props }) {
+    const rating = useRatingGroup(props);
+    return (_jsx(ToneProvider, { value: tone, children: _jsx(RatingGroup.RootProvider, { value: rating, asChild: true, children: _jsx(_Fragment, { children: children }) }) }));
+}
+export const Container = forwardRef(({ disableStyle, children, className, ...props }, ref) => {
+    const tone = useToneContext();
+    return (_jsxs("div", { ...props, ref: ref, "data-tone": tone, "data-component": "ratinginput-container", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [children, _jsx(RatingGroup.HiddenInput, { style: { display: 'none' } })] }));
+});
+export function Label({ disableStyle, className, ...props }) {
+    return (_jsx(RatingGroup.Label, { ...props, "data-component": "ratinginput-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** Calls children for each rating index. Pass the supplied index to StarButton; do not create a second hover or selection state. */
+export function StarsList({ disableStyle, className, children, ...props }) {
+    const context = useRatingGroupContext();
+    return (_jsx(RatingGroup.Control, { ...props, "data-component": "ratinginput-starslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: context.items.map((index) => (_jsx(Fragment, { children: children(index) }, index))) }));
+}
+export function StarButton({ disableStyle, children, className, ...props }) {
+    const tone = useToneContext();
+    const rating = useRatingGroupContext();
+    const input = rating.getHiddenInputProps();
+    return (_jsx(RatingGroup.Item, { ...props, "data-tone": tone, "data-component": "ratinginput-starbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsx(RatingGroup.ItemContext, { children: ({ highlighted, half, checked }) => cloneElement(children, {
+                'data-highlighted': highlighted ? '' : undefined,
+                'data-half': half ? '' : undefined,
+                'data-checked': checked ? '' : undefined,
+                'data-disabled': input.disabled ? '' : undefined,
+                'data-readonly': input.readOnly ? '' : undefined,
+                'data-tone': tone,
+                'aria-hidden': true,
+            }) }) }));
+}
+/** Built-in icon; no children needed. Use it inside its matching control. */
+export function StarIcon({ disableStyle, className, strokeWidth, style, ...props }) {
+    const gradient_id = useId();
+    return (_jsx(DefaultStarIcon, { ...props, strokeWidth: strokeWidth ?? 1.5, style: {
+            '--star-half-fill': `url("#${gradient_id}-ltr")`,
+            '--star-half-fill-rtl': `url("#${gradient_id}-rtl")`,
+            ...style,
+        }, "data-component": "ratinginput-staricon", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: _jsxs("defs", { children: [_jsxs("linearGradient", { id: `${gradient_id}-ltr`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor" }), _jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: `${gradient_id}-rtl`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "50%", stopColor: "currentColor" })] })] }) }));
+}
+export function Description({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "ratinginput-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export function Error({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "ratinginput-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export function Success({ disableStyle, className, ...props }) {
+    return (_jsx("div", { ...props, "data-component": "ratinginput-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/ratinginput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ratinginput/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,205 @@
+import type { StyleProps } from '../../types/Style.ts';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { LucideProps } from 'lucide-react';
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+export type ItemShape = {
+    /** Used automatically for the displayed selection. No label accessor needed. */
+    label: string;
+    /** Keep identifiers stable so recreated items still match the current selection. */
+    value: string;
+};
+export type GroupShape = {
+    /** Use an empty label and omit GroupLabel when the list should look flat. */
+    label: string;
+    /** Keep this group wrapper even without a visible heading. */
+    items: readonly ItemShape[];
+};
+/** Use GroupType<typeof rootItems> for the GroupsList callback, with the exact items passed to Root. */
+export type GroupType<T extends readonly GroupShape[]> = T[number];
+/** Use SelectionsType<typeof rootItems> for a custom multiple-value callback, with the exact items passed to Root. */
+export type SelectionsType<T extends readonly GroupShape[]> = ItemType<T>[];
+/** Use ItemType<typeof rootItems> for an ItemsList or custom single-value callback, with the exact items passed to Root. */
+export type ItemType<T extends readonly GroupShape[]> = GroupType<T>['items'][number];
+export type RootProps<T extends readonly GroupShape[], Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<ItemType<T>, Multiple>, 'items' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue'> & {
+    /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
+    items: T;
+    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
+    tone?: 'neutral' | 'valid' | 'invalid';
+};
+/**
+ * Prepare groups in items. A flat-looking list is one group with an empty label and no GroupLabel; keep Group around ItemsList. OpenButtonValue already formats the selection: omit children unless a custom display is needed. Keep ScrollArea → GroupsList → Group → ItemsList → Item in Popup.
+ *
+ * @example Complete composition
+ * import { Select } from '@central-ui/react'
+ *
+ * const cities = [
+ *   { value: 'rabat', label: 'Rabat', country: 'Morocco', population: 580000 },
+ *   {
+ *     value: 'casablanca',
+ *     label: 'Casablanca',
+ *     country: 'Morocco',
+ *     population: 3359818,
+ *   },
+ *   {
+ *     value: 'marrakesh',
+ *     label: 'Marrakesh',
+ *     country: 'Morocco',
+ *     population: 928850,
+ *   },
+ * ]
+ * const allCities = [{ label: '', items: cities }]
+ * type City = Select.ItemType<typeof allCities>
+ * type Country = Select.GroupType<typeof allCities>
+ * function Example() {
+ *   return (
+ *     <Select.Root items={allCities} name="city">
+ *       <Select.Container>
+ *         <Select.Label>City</Select.Label>
+ *         <Select.OpenButton>
+ *           <Select.OpenButtonValue placeholder="Choose a city" />
+ *           <Select.OpenButtonIcon />
+ *         </Select.OpenButton>
+ *         <Select.Description>Choose a city.</Select.Description>
+ *
+ *         <Select.Popup>
+ *           <Select.ScrollArea // Required listbox and scrolling viewport.
+ *           >
+ *             <Select.GroupsList // Required groups container.
+ *             >
+ *               {(group: Country) => (
+ *                 <Select.Group
+ *                   key={group.label}
+ *                   items={group.items}
+ *                   aria-label={group.label}
+ *                 >
+ *                   <Select.ItemsList>
+ *                     {(city: City) => (
+ *                       <Select.Item
+ *                         key={city.value}
+ *                         value={city}
+ *                         disabled={city.value === 'marseille'}
+ *                       >
+ *                         <Select.ItemText>{city.label}</Select.ItemText>
+ *                         <Select.ItemIndicator />
+ *                       </Select.Item>
+ *                     )}
+ *                   </Select.ItemsList>
+ *                 </Select.Group>
+ *               )}
+ *             </Select.GroupsList>
+ *           </Select.ScrollArea>
+ *         </Select.Popup>
+ *       </Select.Container>
+ *     </Select.Root>
+ *   )
+ * }
+ *
+ * @example Custom selection display only when needed
+ * // Default usage is <Select.OpenButtonValue /> with no children.
+ * // For this custom single-selection display, items={allCities} is passed to Root.
+ * ;<Select.OpenButtonValue>
+ *   {(city: Select.ItemType<typeof allCities> | null) =>
+ *     city ? city.label + ' — ' + city.country : 'Choose a city'
+ *   }
+ * </Select.OpenButtonValue>
+ *
+ * @example Select more than one city
+ * // Keep the same popup items and OpenButtonValue; both already support multiple selection.
+ * ;<Select.Root items={allCities} multiple>
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Select.Root>
+ */
+export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, items, id, tone, open, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export type OpenButtonValueProps<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null> = Omit<ComponentPropsWithRef<typeof BaseSelect.Value>, 'className' | 'children'> & {
+    className?: string;
+    /** Omit to keep the automatic formatted selection. Only for a custom display, annotate the callback with ItemType<typeof rootItems> or SelectionsType<typeof rootItems> for multiple selection, using the same items as Root. */
+    children?: ReactNode | ((value: Value) => ReactNode);
+} & StyleProps;
+/** Omit children to keep the built-in formatted value. Supply children only for a special display; do not format the selection yourself for the usual case. */
+export declare function OpenButtonValue<Value extends ItemShape | ItemShape[] | null = ItemShape | ItemShape[] | null>({ disableStyle, className, ...props }: OpenButtonValueProps<Value> & StyleProps): import("react").JSX.Element;
+export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseSelect.List>, 'children' | 'className'> & {
+    className?: string;
+    children?: ReactNode;
+} & StyleProps;
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "children" | "className"> & {
+    className?: string;
+    children?: ReactNode;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** Return Group with ItemsList. Manually annotate group with Select.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
+    children: ReactNode | ((group: Group, index: number) => ReactNode);
+} & StyleProps;
+/** Let this list render the groups. Manually annotate its children callback with Select.GroupType<typeof rootItems>, using the SAME items variable passed to Root. */
+export declare function GroupsList<Group extends GroupShape = GroupShape>({ disableStyle, children, className, style, ...props }: GroupsListProps<Group> & StyleProps): import("react").JSX.Element;
+export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> & {
+    className?: string;
+    /** Return Item with ItemText and ItemIndicator. Manually annotate item with Select.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
+    children: (item: Item, index: number) => ReactNode;
+} & StyleProps;
+/** Let this list render the surrounding group. Manually annotate its callback with Select.ItemType<typeof rootItems>, using the SAME items variable passed to Root. */
+export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item> & StyleProps): import("react").JSX.Element;
+export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Group>, 'className'> & {
+    className?: string;
+    /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
+    /** Prepare groups before passing items. For a flat-looking list, use one group with label: empty string and omit GroupLabel; keep Group and ItemsList. */
+    items: readonly Item[];
+} & StyleProps;
+export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, items, children, className, ...props }: GroupProps<Item> & StyleProps): import("react").JSX.Element;
+export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseSelect.Item>, 'value' | 'className'> & {
+    className?: string;
+    /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
+    /** Pass the item from ItemsList; matching uses its value identifier, so recreated item objects still select correctly. */
+    value: Item;
+} & StyleProps;
+export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item> & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseSelect.Popup>, 'className'> & {
+    className?: string;
+} & Pick<BaseSelect.Portal.Props, 'container'> & Pick<BaseSelect.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance' | 'alignItemWithTrigger'> & StyleProps;
+/** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
+export declare function Popup({ disableStyle, container, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, alignItemWithTrigger, className, style, ...props }: PopupProps & StyleProps): import("react").JSX.Element;
+export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
+export declare const PopupOpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "children" | "className" | "render"> & {
+    className?: string;
+    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
+    children: ReactElement;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Omit for an unlabeled/flat-looking group; keep the Group wrapper. Supply the heading only when grouping should be visible. */
+export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectSeparatorProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemTextProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
+export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Built-in icon; no children needed. Use it inside its matching control. */
+export declare const OpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
+export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "children"> & Pick<import("@base-ui/react").SelectItemIndicatorProps, "keepMounted"> & {
+    /** Optional replacement SVG icon. It receives this indicator's props and ref. */
+    children?: ReactElement<LucideProps>;
+} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ScrollUpArrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollUpArrowProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "className"> & {
+    className?: string;
+} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map