reshaped 3.8.0-canary.0 → 3.8.0-canary.10

package/dist/components/Select/SelectOptionGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Text from "../Text/index.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";
+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: typeof value === "string" ? value : JSON.stringify(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,33 @@ 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 multiple: StoryObj<{
+    handleChange: 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;