@cssui/react 1.0.0 → 1.0.1

package/dist/adapter-react/components/radio/RadioGroup.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useId, useMemo, useContext } from 'react';
+import { getRadioGroupClassNames } from '../../../components/radio/index.js';
+import { cn } from '../../../utils/src/index.js';
+import { createComponent } from '../../runtime/createComponent.js';
+import { withInstall } from '../../runtime/withInstall.js';
+import { forwardRef } from '../../runtime/forwardRef.js';
+import { useMergedState } from '../../hooks/useMergedState.js';
+import { Radio } from './Radio.js';
+
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}
+const RadioGroupComponent = createComponent(
+  forwardRef((props, ref) => {
+    const {
+      label,
+      value,
+      defaultValue,
+      disabled = false,
+      error = false,
+      className,
+      name,
+      variant = "default",
+      direction = "horizontal",
+      iconOnly = false,
+      options = [],
+      children,
+      onChange,
+      ...restProps
+    } = props;
+    const generatedName = useId();
+    const [currentValue, setCurrentValue] = useMergedState(defaultValue, {
+      value
+    });
+    const contextValue = useMemo(
+      () => ({
+        name: name ?? generatedName,
+        value: currentValue,
+        disabled,
+        error,
+        variant,
+        iconOnly,
+        onChange: (nextValue, event) => {
+          setCurrentValue(nextValue);
+          onChange?.(nextValue, event);
+        }
+      }),
+      [
+        className,
+        currentValue,
+        disabled,
+        error,
+        generatedName,
+        iconOnly,
+        name,
+        onChange,
+        setCurrentValue,
+        variant
+      ]
+    );
+    const radioItems = options.length ? options.map((option) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled,
+        className: option.className,
+        icon: option.icon
+      },
+      String(option.value)
+    )) : children;
+    const content = /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn(
+          getRadioGroupClassNames({ disabled, error, variant, direction, iconOnly }),
+          className
+        ),
+        ...restProps,
+        children: radioItems
+      }
+    ) });
+    return label ? /* @__PURE__ */ jsxs("div", { className: "css-radio-group-field", children: [
+      /* @__PURE__ */ jsx("span", { className: "css-radio-group-field__label", children: label }),
+      content
+    ] }) : content;
+  })
+);
+RadioGroupComponent.displayName = "CssRadioGroup";
+const RadioGroup = withInstall(RadioGroupComponent);
+
+export { RadioGroup, RadioGroupContext, RadioGroup as default, useRadioGroupContext };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/adapter-react/components/radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../adapter-react/components/radio/RadioGroup.tsx"],"sourcesContent":["import { createContext, useContext, useId, useMemo, type ChangeEvent, type ReactNode } from 'react'\nimport {\n  getRadioGroupClassNames,\n  type RadioGroupOption as BaseRadioGroupOption,\n  type RadioGroupProps as BaseRadioGroupProps,\n  type RadioValue,\n  type RadioVariant,\n  type RadioDirection,\n} from '@cssui/components/radio'\nimport { cn } from '@cssui/utils'\nimport { createComponent, forwardRef, withInstall } from '../../runtime'\nimport { useMergedState } from '../../hooks'\nimport Radio from './Radio'\n\nexport interface RadioGroupOption extends Omit<BaseRadioGroupOption, 'icon'> {\n  icon?: string | ReactNode\n}\n\nexport interface RadioGroupProps extends Omit<BaseRadioGroupProps, 'onChange' | 'options'> {\n  options?: RadioGroupOption[]\n  direction?: RadioDirection\n  onChange?: (value: RadioValue, event?: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport interface RadioGroupContextValue {\n  name?: string\n  value?: RadioValue\n  disabled?: boolean\n  error?: boolean\n  variant?: RadioVariant\n  iconOnly?: boolean\n  onChange?: (value: RadioValue, event: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nexport function useRadioGroupContext() {\n  return useContext(RadioGroupContext)\n}\n\nconst RadioGroupComponent = createComponent(\n  forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {\n    const {\n      label,\n      value,\n      defaultValue,\n      disabled = false,\n      error = false,\n      className,\n      name,\n      variant = 'default',\n      direction = 'horizontal',\n      iconOnly = false,\n      options = [],\n      children,\n      onChange,\n      ...restProps\n    } = props\n\n    const generatedName = useId()\n    const [currentValue, setCurrentValue] = useMergedState<RadioValue | undefined>(defaultValue, {\n      value,\n    })\n\n    const contextValue = useMemo<RadioGroupContextValue>(\n      () => ({\n        name: name ?? generatedName,\n        value: currentValue,\n        disabled,\n        error,\n        variant,\n        iconOnly,\n        onChange: (nextValue, event) => {\n          setCurrentValue(nextValue)\n          onChange?.(nextValue, event)\n        },\n      }),\n      [\n        className,\n        currentValue,\n        disabled,\n        error,\n        generatedName,\n        iconOnly,\n        name,\n        onChange,\n        setCurrentValue,\n        variant,\n      ]\n    )\n\n    const radioItems = options.length\n      ? options.map(option => (\n          <Radio\n            key={String(option.value)}\n            value={option.value}\n            label={option.label}\n            disabled={option.disabled}\n            className={option.className}\n            icon={option.icon}\n          />\n        ))\n      : children\n\n    const content = (\n      <RadioGroupContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          className={cn(\n            getRadioGroupClassNames({ disabled, error, variant, direction, iconOnly }),\n            className\n          )}\n          {...restProps}\n        >\n          {radioItems}\n        </div>\n      </RadioGroupContext.Provider>\n    )\n\n    return label ? (\n      <div className=\"css-radio-group-field\">\n        <span className=\"css-radio-group-field__label\">{label}</span>\n        {content}\n      </div>\n    ) : (\n      content\n    )\n  })\n)\n\nRadioGroupComponent.displayName = 'CssRadioGroup'\n\nexport const RadioGroup = withInstall(RadioGroupComponent)\n\nexport default RadioGroup\n"],"names":[],"mappings":"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"}

package/dist/adapter-react/components/radio/index.d.ts

@@ -0,0 +1,7 @@
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+export * from './Radio';
+export * from './RadioGroup';
+export default Radio;
+export { RadioGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/adapter-react/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/adapter-react/components/select/Select.d.ts

@@ -0,0 +1,9 @@
+import { type MouseEvent } from 'react';
+import { type SelectProps as BaseSelectProps } from '../../../components/select/index';
+import '../../../components/select/style.css';
+export interface SelectProps extends Omit<BaseSelectProps, 'onChange'> {
+    onChange?: (value: string | string[], event?: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const Select: import("../..").ComponentWithInstall<import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLInputElement>>>;
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

package/dist/adapter-react/components/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,UAAU,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAGL,KAAK,WAAW,IAAI,eAAe,EACpC,MAAM,0BAA0B,CAAA;AAOjC,OAAO,oCAAoC,CAAA;AAE3C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CACrF;AAgND,eAAO,MAAM,MAAM,gJAA+B,CAAA;AAElD,eAAe,MAAM,CAAA"}

package/dist/adapter-react/components/select/Select.js

@@ -0,0 +1,189 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo } from 'react';
+import { getSelectClassNames } from '../../../components/select/index.js';
+import { createComponent } from '../../runtime/createComponent.js';
+import { withInstall } from '../../runtime/withInstall.js';
+import { forwardRef } from '../../runtime/forwardRef.js';
+import IconComponent from '../icon/Icon.js';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useClickOutside, useEscClose, mergeRefs } from '../../hooks/index.js';
+import { cn } from '../../../utils/src/index.js';
+import { useMergedState } from '../../hooks/useMergedState.js';
+
+function isMultipleValue(value) {
+  return Array.isArray(value);
+}
+const SelectComponent = createComponent(
+  forwardRef((props, ref) => {
+    const {
+      label,
+      status = "default",
+      disabled = false,
+      value,
+      multiple = false,
+      placeholder = "",
+      options = [],
+      className,
+      onChange
+    } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const [currentValue, setCurrentValue] = useMergedState(
+      multiple ? Array.isArray(value) ? value : [] : value ?? "",
+      { value }
+    );
+    const classNames = cn(getSelectClassNames({ status, disabled, multiple }), className);
+    const selectedLabels = useMemo(() => {
+      if (!multiple) {
+        const opt = options.find((o) => o.value === currentValue);
+        return opt?.label ?? "";
+      }
+      const values = isMultipleValue(currentValue) ? currentValue : [];
+      return options.filter((o) => values.includes(o.value));
+    }, [options, currentValue, multiple]);
+    useClickOutside(rootRef, () => setIsOpen(false));
+    useEscClose(isOpen, () => setIsOpen(false));
+    const toggleDropdown = () => {
+      if (disabled) return;
+      setIsOpen((open) => !open);
+    };
+    const handleDropdownKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggleDropdown();
+      }
+    };
+    const handleRootClick = (event) => {
+      const target = event.target;
+      if (target.closest(".css-select__panel") || target.closest(".css-select__tag-close")) {
+        return;
+      }
+      toggleDropdown();
+    };
+    const handleOptionSelect = (option, event) => {
+      if (multiple) {
+        const current = isMultipleValue(currentValue) ? [...currentValue] : [];
+        const idx = current.indexOf(option.value);
+        if (idx > -1) {
+          current.splice(idx, 1);
+        } else {
+          current.push(option.value);
+        }
+        setCurrentValue(current);
+        onChange?.(current, event);
+      } else {
+        setIsOpen(false);
+        setCurrentValue(option.value);
+        onChange?.(option.value, event);
+      }
+    };
+    const handleTagClose = (tagValue, event) => {
+      event.stopPropagation();
+      const current = isMultipleValue(currentValue) ? [...currentValue] : [];
+      const idx = current.indexOf(tagValue);
+      if (idx > -1) {
+        current.splice(idx, 1);
+      }
+      setCurrentValue(current);
+      onChange?.(current);
+    };
+    const isSelected = (optionValue) => {
+      if (multiple) {
+        return isMultipleValue(currentValue) && currentValue.includes(optionValue);
+      }
+      return currentValue === optionValue;
+    };
+    const content = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: classNames,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        "aria-multiselectable": multiple || void 0,
+        onClick: handleRootClick,
+        onKeyDown: handleDropdownKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "css-select__trigger", children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isMultipleValue(currentValue) && currentValue.length > 0 ? selectedLabels.map((tag) => /* @__PURE__ */ jsxs("span", { className: "css-select__tag", children: [
+              tag.label,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "css-select__tag-close",
+                  onClick: (e) => handleTagClose(tag.value, e),
+                  "aria-label": `\u79FB\u9664 ${tag.label}`,
+                  children: "\u2715"
+                }
+              )
+            ] }, tag.value)) : null,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: mergeRefs(ref, inputRef),
+                type: "text",
+                className: "css-select__control",
+                placeholder: isMultipleValue(currentValue) && currentValue.length > 0 ? "" : placeholder,
+                disabled,
+                readOnly: true
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: mergeRefs(ref, inputRef),
+              type: "text",
+              className: "css-select__control",
+              value: selectedLabels,
+              placeholder,
+              disabled,
+              readOnly: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "css-select__suffix", children: /* @__PURE__ */ jsx(IconComponent, { name: "ArrowDropDown", size: 20 }) }),
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsx("div", { className: "css-select__panel", children: options.map((option) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "css-select__option",
+                isSelected(option.value) && "css-select__option--selected"
+              ),
+              onClick: (event) => handleOptionSelect(option, event),
+              children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected(option.value),
+                    onChange: () => {
+                    },
+                    className: "css-select__option-checkbox"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "css-select__option-label", children: option.label })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "css-select__option-label", children: option.label }),
+                isSelected(option.value) && /* @__PURE__ */ jsx("span", { className: "css-select__option-check", children: /* @__PURE__ */ jsx(IconComponent, { name: "Check", size: 20, className: "css-select__option-check-icon" }) })
+              ] })
+            },
+            option.value
+          )) }) : null
+        ]
+      }
+    );
+    return label ? /* @__PURE__ */ jsxs("div", { className: "css-select-field", children: [
+      /* @__PURE__ */ jsx("span", { className: "css-select-field__label", children: label }),
+      content
+    ] }) : content;
+  })
+);
+SelectComponent.displayName = "CssSelect";
+const Select = withInstall(SelectComponent);
+
+export { Select, Select as default };
+//# sourceMappingURL=Select.js.map

package/dist/adapter-react/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../adapter-react/components/select/Select.tsx"],"sourcesContent":["import { useMemo, useRef, useState, type MouseEvent } from 'react'\nimport {\n  getSelectClassNames,\n  type SelectOption,\n  type SelectProps as BaseSelectProps,\n} from '@cssui/components/select'\nimport { forwardRef, createComponent, withInstall } from '../../runtime'\nimport Icon from '../icon/Icon'\nimport Checkbox from '../checkbox/Checkbox'\nimport { mergeRefs, useClickOutside, useEscClose, useMergedState } from '../../hooks'\nimport { cn } from '@cssui/utils'\n\nimport '@cssui/components/select/style.css'\n\nexport interface SelectProps extends Omit<BaseSelectProps, 'onChange'> {\n  onChange?: (value: string | string[], event?: MouseEvent<HTMLButtonElement>) => void\n}\n\nfunction isMultipleValue(value: unknown): value is string[] {\n  return Array.isArray(value)\n}\n\nconst SelectComponent = createComponent(\n  forwardRef<HTMLInputElement, SelectProps>((props, ref) => {\n    const {\n      label,\n      status = 'default',\n      disabled = false,\n      value,\n      multiple = false,\n      placeholder = '',\n      options = [],\n      className,\n      onChange,\n    } = props\n\n    const [isOpen, setIsOpen] = useState(false)\n    const rootRef = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [currentValue, setCurrentValue] = useMergedState<string | string[]>(\n      multiple ? (Array.isArray(value) ? value : []) : (value ?? ''),\n      { value }\n    )\n\n    const classNames = cn(getSelectClassNames({ status, disabled, multiple }), className)\n\n    const selectedLabels = useMemo(() => {\n      if (!multiple) {\n        const opt = options.find(o => o.value === currentValue)\n        return opt?.label ?? ''\n      }\n      const values = isMultipleValue(currentValue) ? currentValue : []\n      return options.filter(o => values.includes(o.value))\n    }, [options, currentValue, multiple])\n\n    useClickOutside(rootRef as React.RefObject<HTMLElement>, () => setIsOpen(false))\n    useEscClose(isOpen, () => setIsOpen(false))\n\n    const toggleDropdown = () => {\n      if (disabled) return\n      setIsOpen(open => !open)\n    }\n\n    const handleDropdownKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault()\n        toggleDropdown()\n      }\n    }\n\n    const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n      const target = event.target as HTMLElement\n\n      if (target.closest('.css-select__panel') || target.closest('.css-select__tag-close')) {\n        return\n      }\n\n      toggleDropdown()\n    }\n\n    const handleOptionSelect = (option: SelectOption, event: MouseEvent<HTMLButtonElement>) => {\n      if (multiple) {\n        const current = isMultipleValue(currentValue) ? [...currentValue] : []\n        const idx = current.indexOf(option.value)\n        if (idx > -1) {\n          current.splice(idx, 1)\n        } else {\n          current.push(option.value)\n        }\n        setCurrentValue(current)\n        onChange?.(current, event)\n      } else {\n        setIsOpen(false)\n        setCurrentValue(option.value)\n        onChange?.(option.value, event)\n      }\n    }\n\n    const handleTagClose = (tagValue: string, event: MouseEvent) => {\n      event.stopPropagation()\n      const current = isMultipleValue(currentValue) ? [...currentValue] : []\n      const idx = current.indexOf(tagValue)\n      if (idx > -1) {\n        current.splice(idx, 1)\n      }\n      setCurrentValue(current)\n      onChange?.(current)\n    }\n\n    const isSelected = (optionValue: string) => {\n      if (multiple) {\n        return isMultipleValue(currentValue) && currentValue.includes(optionValue)\n      }\n      return currentValue === optionValue\n    }\n\n    const content = (\n      <div\n        ref={rootRef}\n        className={classNames}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n        aria-multiselectable={multiple || undefined}\n        onClick={handleRootClick}\n        onKeyDown={handleDropdownKeyDown}\n      >\n        <div className=\"css-select__trigger\">\n          {multiple ? (\n            <>\n              {isMultipleValue(currentValue) && currentValue.length > 0\n                ? (selectedLabels as SelectOption[]).map(tag => (\n                    <span key={tag.value} className=\"css-select__tag\">\n                      {tag.label}\n                      <button\n                        type=\"button\"\n                        className=\"css-select__tag-close\"\n                        onClick={e => handleTagClose(tag.value, e)}\n                        aria-label={`移除 ${tag.label}`}\n                      >\n                        ✕\n                      </button>\n                    </span>\n                  ))\n                : null}\n              <input\n                ref={mergeRefs(ref as React.Ref<HTMLInputElement>, inputRef)}\n                type=\"text\"\n                className=\"css-select__control\"\n                placeholder={\n                  isMultipleValue(currentValue) && currentValue.length > 0 ? '' : placeholder\n                }\n                disabled={disabled}\n                readOnly\n              />\n            </>\n          ) : (\n            <input\n              ref={mergeRefs(ref as React.Ref<HTMLInputElement>, inputRef)}\n              type=\"text\"\n              className=\"css-select__control\"\n              value={selectedLabels as string}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly\n            />\n          )}\n        </div>\n        <span className=\"css-select__suffix\">\n          <Icon name=\"ArrowDropDown\" size={20} />\n        </span>\n        {isOpen && options.length > 0 ? (\n          <div className=\"css-select__panel\">\n            {options.map(option => (\n              <button\n                key={option.value}\n                type=\"button\"\n                className={cn(\n                  'css-select__option',\n                  isSelected(option.value) && 'css-select__option--selected'\n                )}\n                onClick={event => handleOptionSelect(option, event)}\n              >\n                {multiple ? (\n                  <>\n                    <Checkbox\n                      checked={isSelected(option.value)}\n                      onChange={() => {}}\n                      className=\"css-select__option-checkbox\"\n                    />\n                    <span className=\"css-select__option-label\">{option.label}</span>\n                  </>\n                ) : (\n                  <>\n                    <span className=\"css-select__option-label\">{option.label}</span>\n                    {isSelected(option.value) && (\n                      <span className=\"css-select__option-check\">\n                        <Icon name=\"Check\" size={20} className=\"css-select__option-check-icon\" />\n                      </span>\n                    )}\n                  </>\n                )}\n              </button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    )\n\n    return label ? (\n      <div className=\"css-select-field\">\n        <span className=\"css-select-field__label\">{label}</span>\n        {content}\n      </div>\n    ) : (\n      content\n    )\n  })\n)\n\nSelectComponent.displayName = 'CssSelect'\n\nexport const Select = withInstall(SelectComponent)\n\nexport default Select\n"],"names":["Icon"],"mappings":"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"}

package/dist/adapter-react/components/select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select, default } from './Select';
+export type { SelectProps } from './Select';
+//# sourceMappingURL=index.d.ts.map

package/dist/adapter-react/components/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/adapter-react/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type MouseEvent } from 'react';
+import { type NavMenuValue } from '../../../components/nav-menu/index';
+import { type SidebarItem, type SidebarProps as BaseSidebarProps } from '../../../components/sidebar/index';
+import '../../../components/sidebar/style.css';
+export interface SidebarProps extends Omit<BaseSidebarProps, 'className'>, Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    value?: NavMenuValue;
+    defaultValue?: NavMenuValue;
+    collapsed?: boolean;
+    onChange?: (value: NavMenuValue, item: SidebarItem, event: MouseEvent<HTMLElement>) => void;
+}
+export declare const Sidebar: import("../..").ComponentWithInstall<import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLElement>>>;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/adapter-react/components/sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../components/sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EAMhB,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,IAAI,gBAAgB,EACtC,MAAM,2BAA2B,CAAA;AAMlC,OAAO,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CAC5F;AAgUD,eAAO,MAAM,OAAO,4IAAgC,CAAA;AAEpD,eAAe,OAAO,CAAA"}

package/dist/adapter-react/components/sidebar/Sidebar.js

@@ -0,0 +1,242 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { findNavMenuItemPath, hasNavMenuChildren } from '../../../components/nav-menu/index.js';
+import { getSidebarClassNames, getSidebarItemClassNames } from '../../../components/sidebar/index.js';
+import { cn } from '../../../utils/src/index.js';
+import { useMergedState } from '../../hooks/useMergedState.js';
+import { createComponent } from '../../runtime/createComponent.js';
+import { withInstall } from '../../runtime/withInstall.js';
+import { forwardRef } from '../../runtime/forwardRef.js';
+import IconComponent from '../icon/Icon.js';
+
+const SidebarComponent = createComponent(
+  forwardRef((props, ref) => {
+    const {
+      items = [],
+      value,
+      defaultValue,
+      collapsed = false,
+      className,
+      onChange,
+      ...restProps
+    } = props;
+    const [currentValue, setCurrentValue] = useMergedState(defaultValue, {
+      value
+    });
+    const selectedPath = useMemo(
+      () => findNavMenuItemPath(items, currentValue),
+      [items, currentValue]
+    );
+    const selectedAncestorValues = useMemo(
+      () => selectedPath.slice(0, -1).map((item) => item.value),
+      [selectedPath]
+    );
+    const selectedRootValue = selectedPath[0]?.value;
+    const [expandedValues, setExpandedValues] = useState(selectedAncestorValues);
+    const [openRootValue, setOpenRootValue] = useState(
+      selectedRootValue ?? items[0]?.value
+    );
+    const skipSyncOpenRootRef = useRef(false);
+    const rootRef = useRef(null);
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+        return;
+      }
+      if (ref) {
+        ref.current = node;
+      }
+    };
+    useEffect(() => {
+      setExpandedValues((prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...selectedAncestorValues])));
+    }, [currentValue, selectedAncestorValues]);
+    useEffect(() => {
+      if (!collapsed) {
+        return;
+      }
+      if (skipSyncOpenRootRef.current) {
+        skipSyncOpenRootRef.current = false;
+        return;
+      }
+      setOpenRootValue((previous) => selectedRootValue ?? previous ?? items[0]?.value);
+    }, [collapsed, items, selectedRootValue]);
+    useEffect(() => {
+      if (!collapsed || openRootValue === void 0) {
+        return;
+      }
+      const handlePointerDown = (event) => {
+        const target = event.target;
+        if (!target || !rootRef.current || rootRef.current.contains(target)) {
+          return;
+        }
+        setOpenRootValue(void 0);
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [collapsed, openRootValue]);
+    const expandedSet = useMemo(
+      () => /* @__PURE__ */ new Set([...expandedValues, ...selectedAncestorValues]),
+      [expandedValues, selectedAncestorValues]
+    );
+    const openRootItem = useMemo(
+      () => items.find((item) => item.value === openRootValue),
+      [items, openRootValue]
+    );
+    const toggleExpanded = (value2) => {
+      setExpandedValues(
+        (prev) => prev.includes(value2) ? prev.filter((item) => item !== value2) : [...prev, value2]
+      );
+    };
+    const handlePanelBack = () => {
+      setOpenRootValue(void 0);
+    };
+    const handleSelect = (item, event, level) => {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (collapsed && level === 0) {
+        setOpenRootValue(item.value);
+        if (!hasNavMenuChildren(item)) {
+          setCurrentValue(item.value);
+          onChange?.(item.value, item, event);
+        }
+        return;
+      }
+      if (hasNavMenuChildren(item)) {
+        toggleExpanded(item.value);
+        return;
+      }
+      setCurrentValue(item.value);
+      if (collapsed && level > 0) {
+        skipSyncOpenRootRef.current = true;
+        setOpenRootValue(void 0);
+      }
+      onChange?.(item.value, item, event);
+    };
+    const renderList = (list, level, iconOnly = false) => /* @__PURE__ */ jsx("ul", { className: cn("css-sidebar__list", level > 0 ? "css-sidebar__submenu" : void 0), children: list.map((item) => {
+      const active = currentValue === item.value && !hasNavMenuChildren(item);
+      const expanded = hasNavMenuChildren(item) && (iconOnly ? openRootValue === item.value : expandedSet.has(item.value));
+      const classes = cn(
+        getSidebarItemClassNames({
+          active,
+          expanded,
+          disabled: item.disabled
+        }),
+        iconOnly && "css-sidebar__item--icon-only"
+      );
+      const content = iconOnly ? /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-main", children: /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-icon", children: item.icon ? /* @__PURE__ */ jsx(IconComponent, { name: item.icon, size: 20 }) : /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-symbol", children: item.label.slice(0, 1) }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "css-sidebar__item-main", children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-icon", children: /* @__PURE__ */ jsx(IconComponent, { name: item.icon, size: 20 }) }),
+          /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-label", children: item.label })
+        ] }),
+        hasNavMenuChildren(item) && /* @__PURE__ */ jsx("span", { className: "css-sidebar__item-arrow", children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 20 }) })
+      ] });
+      const style = iconOnly ? { padding: "12px 0" } : { padding: "8px", paddingLeft: 12 + level * 16 };
+      return /* @__PURE__ */ jsxs("li", { children: [
+        item.href && !hasNavMenuChildren(item) ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: item.disabled ? void 0 : item.href,
+            className: classes,
+            style,
+            "aria-disabled": item.disabled || void 0,
+            onClick: (event) => handleSelect(item, event, level),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: classes,
+            style,
+            "aria-expanded": hasNavMenuChildren(item) ? expanded : void 0,
+            onClick: (event) => handleSelect(item, event, level),
+            children: content
+          }
+        ),
+        !iconOnly && hasNavMenuChildren(item) && expanded ? renderList(item.children ?? [], level + 1) : null
+      ] }, item.value);
+    }) });
+    const renderCollapsedPanelList = (list, level = 0) => /* @__PURE__ */ jsx("ul", { className: cn(level === 0 ? "css-sidebar__panel-list" : "css-sidebar__panel-sublist"), children: list.map((item) => {
+      const active = currentValue === item.value && !hasNavMenuChildren(item);
+      const expanded = hasNavMenuChildren(item);
+      const nestedLinkClass = level > 0 ? level > 1 ? "css-sidebar__panel-link--deep" : "css-sidebar__panel-link--nested" : void 0;
+      if (item.href && !hasNavMenuChildren(item)) {
+        return /* @__PURE__ */ jsx("li", { className: "css-sidebar__panel-entry", children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: item.disabled ? void 0 : item.href,
+            className: cn(
+              "css-sidebar__panel-link",
+              active && "css-sidebar__panel-link--active",
+              nestedLinkClass
+            ),
+            "aria-disabled": item.disabled || void 0,
+            onClick: (event) => handleSelect(item, event, level + 1),
+            children: item.label
+          }
+        ) }, item.value);
+      }
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: hasNavMenuChildren(item) ? "css-sidebar__panel-group" : "css-sidebar__panel-entry",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  hasNavMenuChildren(item) ? "css-sidebar__panel-section" : "css-sidebar__panel-link",
+                  hasNavMenuChildren(item) && expanded && "css-sidebar__panel-section--expanded",
+                  !hasNavMenuChildren(item) && active && "css-sidebar__panel-link--active",
+                  !hasNavMenuChildren(item) && nestedLinkClass
+                ),
+                onClick: (event) => handleSelect(item, event, level + 1),
+                children: item.label
+              }
+            ),
+            hasNavMenuChildren(item) ? renderCollapsedPanelList(item.children ?? [], level + 1) : null
+          ]
+        },
+        item.value
+      );
+    }) });
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref: setRootRef,
+        className: cn(getSidebarClassNames(), collapsed && "css-sidebar--collapsed", className),
+        "aria-label": "\u4FA7\u8FB9\u5BFC\u822A",
+        ...restProps,
+        children: collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderList(items, 0, true),
+          openRootItem && hasNavMenuChildren(openRootItem) ? /* @__PURE__ */ jsxs("div", { className: "css-sidebar__panel", children: [
+            /* @__PURE__ */ jsx("div", { className: "css-sidebar__panel-header", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "css-sidebar__panel-header-button",
+                onClick: handlePanelBack,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "css-sidebar__panel-header-icon", children: /* @__PURE__ */ jsx(IconComponent, { name: "ArrowBack", size: 18 }) }),
+                  /* @__PURE__ */ jsx("span", { className: "css-sidebar__panel-header-label", children: openRootItem.label })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "css-sidebar__panel-body", children: renderCollapsedPanelList(openRootItem.children ?? [], 0) })
+          ] }) : null
+        ] }) : renderList(items, 0)
+      }
+    );
+  })
+);
+SidebarComponent.displayName = "CssSidebar";
+const Sidebar = withInstall(SidebarComponent);
+
+export { Sidebar };
+//# sourceMappingURL=Sidebar.js.map