reshaped 1.0.1 → 2.1.0

package/components/Radio/Radio.js

@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import { useRadioGroup } from "../RadioGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import s from "./Radio.module.css";
+const Radio = (props) => {
+    const { children, value, onChange, onFocus, onBlur, className, attributes, inputAttributes } = props;
+    const formControl = useFormControl();
+    const radioGroup = useRadioGroup();
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.hasError);
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.disabled);
+    const checked = radioGroup ? radioGroup.value === value : props.checked;
+    const defaultChecked = radioGroup ? undefined : props.defaultChecked;
+    const name = radioGroup ? radioGroup.name : props.name;
+    const TagName = children ? "label" : "span";
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.onChange)
+            radioGroup.onChange(changeArgs);
+    };
+    return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassName }),
+        React.createElement("span", { className: s.field },
+            React.createElement(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }),
+            React.createElement("div", { className: s.decorator })),
+        children && React.createElement("span", { className: s.text }, children)));
+};
+export default Radio;

package/components/Radio/Radio.module.css

@@ -0,0 +1 @@
+.root{align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%)}.text{-webkit-margin-start:var(--rs-unit-x2);margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/Radio/Radio.types.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    value: string;
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label", Props>;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type ControlledProps = BaseProps & {
+    checked: boolean;
+    defaultChecked?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    checked?: never;
+    defaultChecked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/components/Radio/Radio.types.js

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

package/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Radio";
+export type { Props as RadioProps } from "./Radio.types";

package/components/Radio/index.js

@@ -0,0 +1 @@
+export { default } from "./Radio.js";

package/components/Radio/tests/Radio.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const selection: () => React.JSX.Element;
+export declare const error: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;

package/components/Radio/tests/Radio.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Radio from "../index.js";
+export default { title: "Components/Radio" };
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<Radio name="unselected" value="dog">
+				Radio
+			</Radio>
+		</Example.Item>
+
+		<Example.Item title="checked, uncontrolled">
+			<Radio name="uncontrolled" value="dog" defaultChecked>
+				Radio
+			</Radio>
+		</Example.Item>
+
+		<Example.Item title="checked, controlled">
+			<Radio name="controlled" value="dog" checked>
+				Radio
+			</Radio>
+		</Example.Item>
+	</Example>);
+export const error = () => (<Example>
+		<Example.Item title="error">
+			<Radio name="error" value="dog" hasError>
+				Radio
+			</Radio>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<Radio name="disabled" value="dog" disabled>
+				Radio
+			</Radio>
+		</Example.Item>
+		<Example.Item title="disabled, checked">
+			<Radio name="disabled-checked" value="dog" disabled checked>
+				Radio
+			</Radio>
+		</Example.Item>
+	</Example>);

package/components/RadioGroup/RadioGroup.context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./RadioGroup.types";
+declare const RadioContext: React.Context<T.Context | null>;
+export declare const useRadioGroup: () => T.Context | null;
+export default RadioContext;

package/components/RadioGroup/RadioGroup.context.js

@@ -0,0 +1,5 @@
+"use client";
+import React from "react";
+const RadioContext = React.createContext(null);
+export const useRadioGroup = () => React.useContext(RadioContext);
+export default RadioContext;

package/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./RadioGroup.types";
+declare const RadioGroup: (props: T.Props) => React.JSX.Element;
+export default RadioGroup;

package/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,10 @@
+import React from "react";
+import RadioGroupControlled from "./RadioGroupControlled.js";
+import RadioGroupUncontrolled from "./RadioGroupUncontrolled.js";
+const RadioGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return React.createElement(RadioGroupControlled, Object.assign({}, props));
+    return React.createElement(RadioGroupUncontrolled, Object.assign({}, props));
+};
+export default RadioGroup;

package/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { RadioProps } from "../Radio";
+type BaseProps = {
+    id?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    name: string;
+    hasError?: boolean;
+    onChange?: G.ChangeHandler<string>;
+};
+export type ControlledProps = BaseProps & {
+    value: string | null;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: RadioProps["onChange"];
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    value?: string | null;
+};
+export {};

package/components/RadioGroup/RadioGroup.types.js

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

package/components/RadioGroup/RadioGroupControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./RadioGroup.types";
+declare const RadioGroupControlled: (props: T.ControlledProps) => React.JSX.Element;
+export default RadioGroupControlled;

package/components/RadioGroup/RadioGroupControlled.js

@@ -0,0 +1,14 @@
+"use client";
+import React from "react";
+import Context from "./RadioGroup.context.js";
+const RadioGroupControlled = (props) => {
+    const { onChange, name, disabled, value, children, hasError } = props;
+    const handleChange = ({ event, value }) => {
+        if (!value)
+            return;
+        if (onChange)
+            onChange({ name, value, event });
+    };
+    return (React.createElement(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError } }, children));
+};
+export default RadioGroupControlled;

package/components/RadioGroup/RadioGroupUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./RadioGroup.types";
+declare const RadioGroupUncontrolled: (props: T.UncontrolledProps) => React.JSX.Element;
+export default RadioGroupUncontrolled;

package/components/RadioGroup/RadioGroupUncontrolled.js

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+import RadioGroupControlled from "./RadioGroupControlled.js";
+const RadioGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || null);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (React.createElement(RadioGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
+};
+export default RadioGroupUncontrolled;

package/components/RadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./RadioGroup";
+export { useRadioGroup } from "./RadioGroup.context";
+export type { Props as RadioGroupProps } from "./RadioGroup.types";

package/components/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from "./RadioGroup.js";
+export { useRadioGroup } from "./RadioGroup.context.js";

package/components/RadioGroup/tests/RadioGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const selection: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;

package/components/RadioGroup/tests/RadioGroup.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import RadioGroup from "../index.js";
+import Radio from "../../Radio/index.js";
+export default { title: "Components/RadioGroup" };
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<RadioGroup name="unselected">
+				<View gap={3}>
+					<Radio value="dog">Radio 1</Radio>
+					<Radio value="cat">Radio 2</Radio>
+				</View>
+			</RadioGroup>
+		</Example.Item>
+
+		<Example.Item title="checked, uncontrolled">
+			<RadioGroup name="uncontrolled" defaultValue={"dog"}>
+				<View gap={3}>
+					<Radio value="dog">Radio 1</Radio>
+					<Radio value="cat">Radio 2</Radio>
+				</View>
+			</RadioGroup>
+		</Example.Item>
+
+		<Example.Item title="checked, controlled">
+			<RadioGroup name="controlled" value={"dog"}>
+				<View gap={3}>
+					<Radio value="dog">Radio 1</Radio>
+					<Radio value="cat">Radio 2</Radio>
+				</View>
+			</RadioGroup>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<RadioGroup name="disabled" disabled>
+				<View gap={3}>
+					<Radio value="dog">Dog</Radio>
+					<Radio value="cat">Cat</Radio>
+				</View>
+			</RadioGroup>
+		</Example.Item>
+	</Example>);

package/components/Reshaped/Reshaped.css

@@ -0,0 +1 @@
+:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}input::-moz-placeholder{color:var(--rs-color-neutral-faded);opacity:.5}input::placeholder{color:var(--rs-color-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{height:100%}body{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);scroll-behavior:smooth;text-rendering:optimizespeed}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}

package/components/Reshaped/Reshaped.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./Reshaped.types";
+import "./Reshaped.css";
+declare const Reshaped: (props: T.Props) => React.JSX.Element;
+export default Reshaped;

package/components/Reshaped/Reshaped.js

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Theme, { GlobalColorMode } from "../Theme/index.js";
+import { ToastProvider } from "../Toast/index.js";
+import useSingletonKeyboardMode from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { SingletonEnvironmentContext, useSingletonRTL, } from "../../hooks/_private/useSingletonEnvironment.js";
+import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
+import "./Reshaped.css";
+import s from "./Reshaped.module.css";
+const ReshapedInner = (props) => {
+    const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
+    const rtlState = useSingletonRTL(defaultRTL);
+    useSingletonKeyboardMode();
+    return (React.createElement(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport } },
+        React.createElement(SingletonHotkeysProvider, null,
+            React.createElement(ToastProvider, { options: toastOptions }, children))));
+};
+const Reshaped = (props) => {
+    const { theme, defaultTheme = "reshaped", defaultColorMode, className } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (React.createElement(GlobalColorMode, { defaultMode: defaultColorMode },
+        React.createElement(Theme, { name: theme, defaultName: defaultTheme, className: rootClassNames },
+            React.createElement(ReshapedInner, Object.assign({}, props), props.children))));
+};
+export default Reshaped;

package/components/Reshaped/Reshaped.module.css

@@ -0,0 +1 @@
+.root{color:inherit;height:inherit}

package/components/Reshaped/Reshaped.types.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { GlobalColorModeProps, ThemeProps } from "../Theme";
+import type { ToastProviderProps } from "../Toast";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    defaultRTL?: boolean;
+    defaultColorMode?: GlobalColorModeProps["defaultMode"];
+    defaultViewport?: G.Viewport;
+    className?: G.ClassName;
+    theme?: NonNullable<ThemeProps["name"]>;
+    defaultTheme?: NonNullable<ThemeProps["defaultName"]>;
+    toastOptions?: ToastProviderProps["options"];
+};

package/components/Reshaped/Reshaped.types.js

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

package/components/Reshaped/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Reshaped";
+export type { Props as ReshapedProps } from "./Reshaped.types";

package/components/Reshaped/index.js

@@ -0,0 +1 @@
+export { default } from "./Reshaped.js";

package/components/Scrim/Scrim.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Scrim.types";
+declare const Scrim: (props: T.Props) => React.JSX.Element;
+export default Scrim;

package/components/Scrim/Scrim.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Scrim.module.css";
+const Scrim = (props) => {
+    const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
+    const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
+    const scrimClassNames = classNames(s.scrim, scrimClassName);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }),
+        backgroundSlot,
+        React.createElement("div", { className: scrimClassNames },
+            React.createElement("div", { className: s.content }, children))));
+};
+export default Scrim;

package/components/Scrim/Scrim.module.css

@@ -0,0 +1 @@
+.root,.scrim{inset:0;position:absolute}.root{--rs-overlay-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);padding:var(--rs-unit-x3) var(--rs-unit-x4);transform:translateZ(0)}.content{pointer-events:all;position:relative;z-index:5}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-cover .content{text-align:center}.--position-bottom .content,.--position-cover .content,.--position-top .content{width:100%}.--position-end .content,.--position-start .content{height:100%}.--position-top .scrim{-webkit-padding-after:calc(var(--rs-unit-x10) * 2);background:linear-gradient(to top,var(--rs-overlay-gradient));inset-block-end:auto;padding-block-end:calc(var(--rs-unit-x10) * 2)}.--position-bottom .scrim{-webkit-padding-before:calc(var(--rs-unit-x10) * 2);background:linear-gradient(to bottom,var(--rs-overlay-gradient));inset-block-start:auto;padding-block-start:calc(var(--rs-unit-x10) * 2)}.--position-start .scrim{-webkit-padding-end:calc(var(--rs-unit-x10) * 2);background:linear-gradient(to left,var(--rs-overlay-gradient));inset-inline-end:auto;padding-inline-end:calc(var(--rs-unit-x10) * 2);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-overlay-gradient))}.--position-end .scrim{-webkit-padding-start:calc(var(--rs-unit-x10) * 2);inset-inline-start:auto;padding-inline-start:calc(var(--rs-unit-x10) * 2);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient))}.--with-background{position:relative}

package/components/Scrim/Scrim.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    backgroundSlot?: React.ReactNode;
+    position?: "full" | "top" | "bottom" | "start" | "end";
+    fill?: boolean;
+    scrimClassName?: G.ClassName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Scrim/Scrim.types.js

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

package/components/Scrim/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Scrim";
+export type { Props as ScrimProps } from "./Scrim.types";

package/components/Scrim/index.js

@@ -0,0 +1 @@
+export { default } from "./Scrim.js";

package/components/Scrim/tests/Scrim.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const position: () => React.JSX.Element;
+export declare const composition: () => React.JSX.Element;

package/components/Scrim/tests/Scrim.stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Scrim from "../index.js";
+export default { title: "Components/Scrim" };
+export const position = () => (<Example>
+		<Example.Item title="position: center">
+			<Scrim backgroundSlot={<Placeholder h={200}/>}>Scrim</Scrim>
+		</Example.Item>
+
+		<Example.Item title="position: bottom">
+			<Scrim position="bottom" backgroundSlot={<Placeholder h={200}/>}>
+				Scrim
+			</Scrim>
+		</Example.Item>
+
+		<Example.Item title="position: top">
+			<Scrim position="top" backgroundSlot={<Placeholder h={200}/>}>
+				Scrim
+			</Scrim>
+		</Example.Item>
+
+		<Example.Item title="position: start">
+			<Scrim position="start" backgroundSlot={<Placeholder h={200}/>}>
+				Scrim
+			</Scrim>
+		</Example.Item>
+
+		<Example.Item title="position: end">
+			<Scrim position="end" backgroundSlot={<Placeholder h={200}/>}>
+				Scrim
+			</Scrim>
+		</Example.Item>
+	</Example>);
+export const composition = () => (<Example>
+		<Example.Item title="without backgroundSlot, size is based on the parent component">
+			<div style={{ height: 300, position: "relative" }}>
+				<Scrim>Text</Scrim>
+			</div>
+		</Example.Item>
+	</Example>);

package/components/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const Select: (props: T.Props) => React.JSX.Element;
+export default Select;

package/components/Select/Select.js

@@ -0,0 +1,59 @@
+"use client";
+import React from "react";
+import Icon from "../Icon/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import Actionable from "../Actionable/index.js";
+import Text from "../Text/index.js";
+import IconArrow from "../../icons/ChevronVertical.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import useElementId from "../../hooks/useElementId.js";
+import s from "./Select.module.css";
+const Select = (props) => {
+    var _a, _b;
+    const { onChange, onClick, onFocus, onBlur, name, value, defaultValue, placeholder, options, children, icon, startSlot, size = "medium", variant = "outline", className, attributes, } = props;
+    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
+    const formControl = useFormControl();
+    const id = useElementId(props.id);
+    const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
+    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], empty && options && s["--placeholder"], variant && s[`--variant-${variant}`]);
+    const handleChange = (event) => {
+        const nextValue = event.target.value;
+        // Uncontrolled placeholder
+        if (value === undefined)
+            setEmpty(!nextValue);
+        if (!onChange)
+            return;
+        onChange({ name, value: nextValue, event });
+    };
+    // Controlled placeholder
+    React.useEffect(() => {
+        if (value === undefined)
+            return;
+        setEmpty(!value);
+    }, [value]);
+    const startContent = (startSlot || icon) && (React.createElement("div", { className: s.slot }, icon ? (React.createElement(Icon, { size: responsivePropDependency(size, (size) => {
+            if (size === "large")
+                return 5;
+            if (size === "xlarge")
+                return 6;
+            return 4;
+        }), svg: icon, className: s.icon })) : (startSlot)));
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassName }),
+        options ? (React.createElement(React.Fragment, null,
+            startContent,
+            React.createElement("select", Object.assign({}, inputAttributes, { className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId }),
+                placeholder && React.createElement("option", { value: "" }, placeholder),
+                options.map((option) => (React.createElement("option", { key: option.value, value: option.value, disabled: option.disabled }, option.label)))))) : (React.createElement(React.Fragment, null,
+            React.createElement(Actionable, { className: s.input, disabled: disabled, onClick: onClick, attributes: Object.assign(Object.assign({}, inputAttributes), { onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur) }) },
+                startContent,
+                children || (placeholder ? React.createElement(Text, { color: "neutral-faded" }, placeholder) : null)),
+            React.createElement("input", { type: "hidden", value: value, name: name }))),
+        React.createElement("div", { className: s.arrow },
+            React.createElement(Icon, { svg: IconArrow, color: "neutral-faded", size: responsivePropDependency(size, (size) => {
+                    return size === "large" || size === "xlarge" ? 5 : 4;
+                }) }))));
+};
+export default Select;

package/components/Select/Select.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{-webkit-padding-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}select.input{-webkit-padding-start:var(--rs-select-gap);padding-inline-start:var(--rs-select-gap)}.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{-webkit-padding-start:var(--rs-select-gap);-webkit-padding-end:var(--rs-unit-x1);box-sizing:initial;padding-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-select-gap)}.input .slot{-webkit-padding-start:0;-webkit-padding-end:var(--rs-select-gap);padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:calc(var(--rs-select-gap) + var(--rs-unit-x1));pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:900px){.--size-medium--l{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:1280px){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x1);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}

package/components/Select/Select.types.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { FormControlProps } from "../FormControl";
+import { ActionableProps } from "../Actionable";
+import { IconProps } from "../Icon";
+type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type Option = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type ButtonTriggerProps = {
+    onClick?: () => void;
+    children?: React.ReactNode;
+    inputAttributes?: ActionableProps["attributes"];
+    options?: never;
+    onChange?: never;
+};
+export type SelectTriggerProps = {
+    options: Option[];
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
+    inputAttributes?: G.Attributes<"select", Omit<Props, "id">>;
+    onClick?: never;
+    children?: never;
+};
+type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlProps, "hasError">) & {
+    id?: string;
+    name: string;
+    size?: Size;
+    variant?: "outline" | "faded" | "headless";
+    disabled?: boolean;
+    placeholder?: string;
+    icon?: IconProps["svg"];
+    startSlot?: React.ReactNode;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/components/Select/Select.types.js

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

package/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Select";
+export type { Props as SelectProps } from "./Select.types";

package/components/Select/index.js

@@ -0,0 +1 @@
+export { default } from "./Select.js";