reshaped 3.8.0-canary.6 → 3.8.0-canary.7

package/dist/components/Select/SelectCustomUncontrolled.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import SelectCustomControlled from "./SelectCustomControlled.js";
+const SelectCustomUncontrolled = (props) => {
+    const { defaultValue, onChange, ...controlledProps } = props;
+    const [value, setValue] = React.useState(defaultValue || "");
+    const handleChange = (args) => {
+        setValue(args.value);
+        onChange?.(args);
+    };
+    return _jsx(SelectCustomControlled, { ...controlledProps, value: value, onChange: handleChange });
+};
+SelectCustomUncontrolled.displayName = "SelectCustomUncontrolled";
+export default SelectCustomUncontrolled;

package/dist/components/Select/SelectEndContent.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Select.types";
+declare const SelectEndContent: React.FC<Pick<T.Props, "disabled" | "size">>;
+export default SelectEndContent;

package/dist/components/Select/SelectEndContent.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "../Icon/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import IconArrow from "../../icons/ChevronVertical.js";
+import s from "./Select.module.css";
+const SelectEndContent = (props) => {
+    const { disabled, size } = props;
+    return (_jsx("div", { className: s.arrow, children: _jsx(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
+                return size === "large" || size === "xlarge" ? 5 : 4;
+            }) }) }));
+};
+export default SelectEndContent;

package/dist/components/Select/SelectNative.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectNative: React.FC<T.NativeProps>;
+export default SelectNative;

package/dist/components/Select/SelectNative.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/props.js";
+import SelectStartContent from "./SelectStartContent.js";
+import SelectEndContent from "./SelectEndContent.js";
+import s from "./Select.module.css";
+const SelectNative = (props) => {
+    const { startSlot, icon, size, inputAttributes, onFocus, onBlur, disabled, name, value, defaultValue, onChange, onClick, placeholder, id, children, } = props;
+    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
+    const selectClassNames = classNames(s.input, placeholder && empty && s["input--placeholder"]);
+    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]);
+    return (_jsxs(_Fragment, { children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), _jsxs("select", { ...inputAttributes, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, onClick: onClick || inputAttributes?.onClick, className: selectClassNames, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: id, children: [placeholder && _jsx("option", { value: "", children: placeholder }), children] }), _jsx(SelectEndContent, { disabled: disabled, size: size })] }));
+};
+export default SelectNative;

package/dist/components/Select/SelectOption.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectOption: React.FC<T.OptionProps>;
+export default SelectOption;

package/dist/components/Select/SelectOption.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DropdownMenu from "../DropdownMenu/index.js";
+import { setComponentChildId } from "../../utilities/props.js";
+import s from "./Select.module.css";
+const SelectOption = (props) => {
+    const { value, ...menuItemProps } = props;
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.className, s.option], color: "neutral", attributes: {
+            ...menuItemProps.attributes,
+            value,
+            role: "option",
+        } }));
+};
+SelectOption.displayName = "Select.Option";
+setComponentChildId(SelectOption, "Select.Option");
+export default SelectOption;

package/dist/components/Select/SelectOptionGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectOptionGroup: React.FC<T.OptionGroupProps>;
+export default SelectOptionGroup;

package/dist/components/Select/SelectOptionGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import { setComponentChildId } from "../../utilities/props.js";
+const SelectOptionGroup = (props) => {
+    const { label, children } = props;
+    return (_jsxs(View, { attributes: { role: "group" }, gap: 1, children: [_jsx(View, { paddingInline: 3, paddingTop: 3, children: _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: label }) }), _jsx(View.Item, { children: children })] }));
+};
+SelectOptionGroup.displayName = "Select.OptionGroup";
+setComponentChildId(SelectOptionGroup, "Select.OptionGroup");
+export default SelectOptionGroup;

package/dist/components/Select/SelectRoot.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectRoot: React.FC<T.RootProps>;
+export default SelectRoot;

package/dist/components/Select/SelectRoot.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useElementId from "../../hooks/useElementId.js";
+import { useFormControl } from "../FormControl/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import s from "./Select.module.css";
+const SelectRoot = (passedProps) => {
+    const formControl = useFormControl();
+    const internalId = useElementId(passedProps.id);
+    const props = {
+        ...passedProps,
+        id: formControl?.attributes?.id || passedProps.inputAttributes?.id || internalId,
+        disabled: formControl?.disabled || passedProps.disabled,
+        hasError: formControl?.hasError || passedProps.hasError,
+        inputAttributes: { ...passedProps.inputAttributes, ...formControl?.attributes },
+    };
+    const { children, className, size = "medium", variant = "outline", hasError, disabled, attributes, } = props;
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`]);
+    return (_jsx("div", { ...attributes, className: rootClassName, children: children(props) }));
+};
+export default SelectRoot;

package/dist/components/Select/SelectStartContent.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Select.types";
+declare const SelectStartContent: React.FC<Pick<T.Props, "startSlot" | "icon" | "size">>;
+export default SelectStartContent;

package/dist/components/Select/SelectStartContent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "../Icon/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import s from "./Select.module.css";
+const SelectStartContent = (props) => {
+    const { startSlot, icon, size } = props;
+    if (!startSlot && !icon)
+        return null;
+    if (icon) {
+        return (_jsx("div", { className: s.slot, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {
+                    if (size === "large")
+                        return 5;
+                    if (size === "xlarge")
+                        return 6;
+                    return 4;
+                }), svg: icon }) }));
+    }
+    return _jsx("div", { className: s.slot, children: startSlot });
+};
+export default SelectStartContent;

package/dist/components/Select/SelectTrigger.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectTrigger: React.FC<T.TriggerProps>;
+export default SelectTrigger;

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Actionable from "../Actionable/index.js";
+import Text from "../Text/index.js";
+import SelectStartContent from "./SelectStartContent.js";
+import s from "./Select.module.css";
+import SelectEndContent from "./SelectEndContent.js";
+const SelectTrigger = (props) => {
+    const { children, disabled, onClick, onFocus, onBlur, inputAttributes, startSlot, icon, size, placeholder, value, name, id, } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {
+                    onFocus: onFocus || inputAttributes?.onFocus,
+                    onBlur: onBlur || inputAttributes?.onBlur,
+                    ...inputAttributes,
+                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: value, name: name, id: id })] }));
+};
+export default SelectTrigger;

package/dist/components/Select/tests/Select.stories.d.ts

@@ -1,6 +1,13 @@
+import React from "react";
+import { Mock } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").SelectProps>;
+    component: React.FC<import("../Select.types").NativeProps> & {
+        Custom: React.FC<import("../Select.types").CustomProps>;
+        Option: React.FC<import("../Select.types").OptionProps>;
+        OptionGroup: React.FC<import("../Select.types").OptionGroupProps>;
+    };
     parameters: {
         iframe: {
             url: string;
@@ -8,12 +15,30 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const value: () => import("react").JSX.Element;
-export declare const variants: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const error: () => import("react").JSX.Element;
-export declare const icon: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const triggerComposition: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;
+export declare const nativeRender: StoryObj;
+export declare const customRender: StoryObj;
+export declare const nativeHandlers: StoryObj<{
+    handleChange: Mock;
+    handleControlledChange: Mock;
+    handleFocus: Mock;
+    handleBlur: Mock;
+    handleClick: Mock;
+}>;
+export declare const customHandlers: StoryObj<{
+    handleChange: Mock;
+    handleControlledChange: Mock;
+    handleFocus: Mock;
+    handleBlur: Mock;
+    handleClick: Mock;
+}>;
+export declare const triggerOnly: StoryObj<{
+    handleClick: Mock;
+}>;
+export declare const variant: StoryObj;
+export declare const size: StoryObj;
+export declare const startSlot: StoryObj;
+export declare const error: StoryObj;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;
+export declare const fallback: StoryObj;
+export declare const formControl: StoryObj;