lynote-ui 0.0.1

package/dist/accordion/index.js

@@ -0,0 +1,618 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../jsx-runtime-CPzt8Nmm.js");
+const lucideReact = require("lucide-react");
+const utils = require("../utils-ij3i9zTT.js");
+const React = require("react");
+const useControlled = require("../useControlled-DTjTIpeU.js");
+const useStableCallback = require("../useStableCallback-CfE_knIO.js");
+const useIsoLayoutEffect = require("../useIsoLayoutEffect-CYDr9Bko.js");
+const useRenderElement = require("../useRenderElement-CtyURhhF.js");
+const CompositeList = require("../CompositeList-CLP_jD9H.js");
+const DirectionContext = require("../DirectionContext-BsZvU9q3.js");
+const createBaseUIEventDetails = require("../createBaseUIEventDetails-D39y2D9R.js");
+const useCollapsiblePanel = require("../useCollapsiblePanel-OP0gCAiW.js");
+const useOpenChangeComplete = require("../useOpenChangeComplete-B0xZNwMu.js");
+const useBaseUiId = require("../useBaseUiId-ZDgjliOe.js");
+const useCompositeListItem = require("../useCompositeListItem-CPSGNf6p.js");
+const isElementDisabled = require("../isElementDisabled-p2fc38Eq.js");
+const composite = require("../composite-BT0EMBUB.js");
+const useButton = require("../useButton-CcvYPR5H.js");
+const event = require("../event-BHxKjfyi.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AccordionRootContext = /* @__PURE__ */ React__namespace.createContext(void 0);
+if (process.env.NODE_ENV !== "production") AccordionRootContext.displayName = "AccordionRootContext";
+function useAccordionRootContext() {
+  const context = React__namespace.useContext(AccordionRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>." : useRenderElement.formatErrorMessage(10));
+  }
+  return context;
+}
+const rootStateAttributesMapping = {
+  value: () => null
+};
+const AccordionRoot = /* @__PURE__ */ React__namespace.forwardRef(function AccordionRoot2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    loopFocus = true,
+    onValueChange: onValueChangeProp,
+    multiple = false,
+    orientation = "vertical",
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    ...elementProps
+  } = componentProps;
+  const direction = DirectionContext.useDirection();
+  if (process.env.NODE_ENV !== "production") {
+    useIsoLayoutEffect.useIsoLayoutEffect(() => {
+      if (hiddenUntilFoundProp && keepMountedProp === false) {
+        useRenderElement.warn("The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
+      }
+    }, [hiddenUntilFoundProp, keepMountedProp]);
+  }
+  const defaultValue = React__namespace.useMemo(() => {
+    if (valueProp === void 0) {
+      return defaultValueProp ?? [];
+    }
+    return void 0;
+  }, [valueProp, defaultValueProp]);
+  const onValueChange = useStableCallback.useStableCallback(onValueChangeProp);
+  const accordionItemRefs = React__namespace.useRef([]);
+  const [value, setValue] = useControlled.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Accordion",
+    state: "value"
+  });
+  const handleValueChange = useStableCallback.useStableCallback((newValue, nextOpen) => {
+    const details = createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.none);
+    if (!multiple) {
+      const nextValue = value[0] === newValue ? [] : [newValue];
+      onValueChange(nextValue, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextValue);
+    } else if (nextOpen) {
+      const nextOpenValues = value.slice();
+      nextOpenValues.push(newValue);
+      onValueChange(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    } else {
+      const nextOpenValues = value.filter((v) => v !== newValue);
+      onValueChange(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    }
+  });
+  const state = React__namespace.useMemo(() => ({
+    value,
+    disabled,
+    orientation
+  }), [value, disabled, orientation]);
+  const contextValue = React__namespace.useMemo(() => ({
+    accordionItemRefs,
+    direction,
+    disabled,
+    handleValueChange,
+    hiddenUntilFound: hiddenUntilFoundProp ?? false,
+    keepMounted: keepMountedProp ?? false,
+    loopFocus,
+    orientation,
+    state,
+    value
+  }), [direction, disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, loopFocus, orientation, state, value]);
+  const element = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      dir: direction,
+      role: "region"
+    }, elementProps],
+    stateAttributesMapping: rootStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(AccordionRootContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CompositeList.CompositeList, {
+      elementsRef: accordionItemRefs,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") AccordionRoot.displayName = "AccordionRoot";
+const AccordionItemContext = /* @__PURE__ */ React__namespace.createContext(void 0);
+if (process.env.NODE_ENV !== "production") AccordionItemContext.displayName = "AccordionItemContext";
+function useAccordionItemContext() {
+  const context = React__namespace.useContext(AccordionItemContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>." : useRenderElement.formatErrorMessage(9));
+  }
+  return context;
+}
+let AccordionItemDataAttributes = /* @__PURE__ */ (function(AccordionItemDataAttributes2) {
+  AccordionItemDataAttributes2["index"] = "data-index";
+  AccordionItemDataAttributes2["disabled"] = "data-disabled";
+  AccordionItemDataAttributes2["open"] = "data-open";
+  return AccordionItemDataAttributes2;
+})({});
+const accordionStateAttributesMapping = {
+  ...useCollapsiblePanel.collapsibleOpenStateMapping,
+  index: (value) => {
+    return Number.isInteger(value) ? {
+      [AccordionItemDataAttributes.index]: String(value)
+    } : null;
+  },
+  ...useOpenChangeComplete.transitionStatusMapping,
+  value: () => null
+};
+const AccordionItem$1 = /* @__PURE__ */ React__namespace.forwardRef(function AccordionItem(componentProps, forwardedRef) {
+  const {
+    className,
+    disabled: disabledProp = false,
+    onOpenChange: onOpenChangeProp,
+    render,
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    ref: listItemRef,
+    index
+  } = useCompositeListItem.useCompositeListItem();
+  const mergedRef = useRenderElement.useMergedRefs(forwardedRef, listItemRef);
+  const {
+    disabled: contextDisabled,
+    handleValueChange,
+    state: rootState,
+    value: openValues
+  } = useAccordionRootContext();
+  const fallbackValue = useBaseUiId.useBaseUiId();
+  const value = valueProp ?? fallbackValue;
+  const disabled = disabledProp || contextDisabled;
+  const isOpen = React__namespace.useMemo(() => {
+    if (!openValues) {
+      return false;
+    }
+    for (let i = 0; i < openValues.length; i += 1) {
+      if (openValues[i] === value) {
+        return true;
+      }
+    }
+    return false;
+  }, [openValues, value]);
+  const onOpenChange = useStableCallback.useStableCallback((nextOpen, eventDetails) => {
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    handleValueChange(value, nextOpen);
+  });
+  const collapsible = useCollapsiblePanel.useCollapsibleRoot({
+    open: isOpen,
+    onOpenChange,
+    disabled
+  });
+  const collapsibleState = React__namespace.useMemo(() => ({
+    open: collapsible.open,
+    disabled: collapsible.disabled,
+    hidden: !collapsible.mounted,
+    transitionStatus: collapsible.transitionStatus
+  }), [collapsible.open, collapsible.disabled, collapsible.mounted, collapsible.transitionStatus]);
+  const collapsibleContext = React__namespace.useMemo(() => ({
+    ...collapsible,
+    onOpenChange,
+    state: collapsibleState
+  }), [collapsible, collapsibleState, onOpenChange]);
+  const state = React__namespace.useMemo(() => ({
+    ...rootState,
+    index,
+    disabled,
+    open: isOpen
+  }), [disabled, index, isOpen, rootState]);
+  const [triggerId, setTriggerId] = React__namespace.useState(useBaseUiId.useBaseUiId());
+  const accordionItemContext = React__namespace.useMemo(() => ({
+    open: isOpen,
+    state,
+    setTriggerId,
+    triggerId
+  }), [isOpen, state, setTriggerId, triggerId]);
+  const element = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: mergedRef,
+    props: elementProps,
+    stateAttributesMapping: accordionStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useCollapsiblePanel.CollapsibleRootContext.Provider, {
+    value: collapsibleContext,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(AccordionItemContext.Provider, {
+      value: accordionItemContext,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") AccordionItem$1.displayName = "AccordionItem";
+const AccordionHeader = /* @__PURE__ */ React__namespace.forwardRef(function AccordionHeader2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useAccordionItemContext();
+  const element = useRenderElement.useRenderElement("h3", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: elementProps,
+    stateAttributesMapping: accordionStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionHeader.displayName = "AccordionHeader";
+const SUPPORTED_KEYS = /* @__PURE__ */ new Set([composite.ARROW_DOWN, composite.ARROW_UP, composite.ARROW_RIGHT, composite.ARROW_LEFT, composite.HOME, composite.END]);
+function getActiveTriggers(accordionItemRefs) {
+  const {
+    current: accordionItemElements
+  } = accordionItemRefs;
+  const output = [];
+  for (let i = 0; i < accordionItemElements.length; i += 1) {
+    const section = accordionItemElements[i];
+    if (!isElementDisabled.isElementDisabled(section)) {
+      const trigger = section == null ? void 0 : section.querySelector('[type="button"], [role="button"]');
+      if (trigger && !isElementDisabled.isElementDisabled(trigger)) {
+        output.push(trigger);
+      }
+    }
+  }
+  return output;
+}
+const AccordionTrigger$1 = /* @__PURE__ */ React__namespace.forwardRef(function AccordionTrigger(componentProps, forwardedRef) {
+  const {
+    disabled: disabledProp,
+    className,
+    id: idProp,
+    render,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    panelId,
+    open,
+    handleTrigger,
+    disabled: contextDisabled
+  } = useCollapsiblePanel.useCollapsibleRootContext();
+  const disabled = disabledProp ?? contextDisabled;
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  const {
+    accordionItemRefs,
+    direction,
+    loopFocus,
+    orientation
+  } = useAccordionRootContext();
+  const isRtl = direction === "rtl";
+  const isHorizontal = orientation === "horizontal";
+  const {
+    state,
+    setTriggerId,
+    triggerId: id
+  } = useAccordionItemContext();
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (idProp) {
+      setTriggerId(idProp);
+    }
+    return () => {
+      setTriggerId(void 0);
+    };
+  }, [idProp, setTriggerId]);
+  const props = React__namespace.useMemo(() => ({
+    "aria-controls": open ? panelId : void 0,
+    "aria-expanded": open,
+    id,
+    tabIndex: 0,
+    onClick: handleTrigger,
+    onKeyDown(event$1) {
+      if (!SUPPORTED_KEYS.has(event$1.key)) {
+        return;
+      }
+      event.stopEvent(event$1);
+      const triggers = getActiveTriggers(accordionItemRefs);
+      const numOfEnabledTriggers = triggers.length;
+      const lastIndex = numOfEnabledTriggers - 1;
+      let nextIndex = -1;
+      const thisIndex = triggers.indexOf(event$1.target);
+      function toNext() {
+        if (loopFocus) {
+          nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
+        } else {
+          nextIndex = Math.min(thisIndex + 1, lastIndex);
+        }
+      }
+      function toPrev() {
+        if (loopFocus) {
+          nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
+        } else {
+          nextIndex = thisIndex - 1;
+        }
+      }
+      switch (event$1.key) {
+        case composite.ARROW_DOWN:
+          if (!isHorizontal) {
+            toNext();
+          }
+          break;
+        case composite.ARROW_UP:
+          if (!isHorizontal) {
+            toPrev();
+          }
+          break;
+        case composite.ARROW_RIGHT:
+          if (isHorizontal) {
+            if (isRtl) {
+              toPrev();
+            } else {
+              toNext();
+            }
+          }
+          break;
+        case composite.ARROW_LEFT:
+          if (isHorizontal) {
+            if (isRtl) {
+              toNext();
+            } else {
+              toPrev();
+            }
+          }
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+      }
+      if (nextIndex > -1) {
+        triggers[nextIndex].focus();
+      }
+    }
+  }), [accordionItemRefs, handleTrigger, id, isHorizontal, isRtl, loopFocus, open, panelId]);
+  const element = useRenderElement.useRenderElement("button", componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [props, elementProps, getButtonProps],
+    stateAttributesMapping: useCollapsiblePanel.triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionTrigger$1.displayName = "AccordionTrigger";
+let AccordionPanelCssVars = /* @__PURE__ */ (function(AccordionPanelCssVars2) {
+  AccordionPanelCssVars2["accordionPanelHeight"] = "--accordion-panel-height";
+  AccordionPanelCssVars2["accordionPanelWidth"] = "--accordion-panel-width";
+  return AccordionPanelCssVars2;
+})({});
+const AccordionPanel = /* @__PURE__ */ React__namespace.forwardRef(function AccordionPanel2(componentProps, forwardedRef) {
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    id: idProp,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    hiddenUntilFound: contextHiddenUntilFound,
+    keepMounted: contextKeepMounted
+  } = useAccordionRootContext();
+  const {
+    abortControllerRef,
+    animationTypeRef,
+    height,
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setHiddenUntilFound,
+    setKeepMounted,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width,
+    setPanelIdState,
+    transitionStatus
+  } = useCollapsiblePanel.useCollapsibleRootContext();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? contextHiddenUntilFound;
+  const keepMounted = keepMountedProp ?? contextKeepMounted;
+  if (process.env.NODE_ENV !== "production") {
+    useIsoLayoutEffect.useIsoLayoutEffect(() => {
+      if (keepMountedProp === false && hiddenUntilFound) {
+        useRenderElement.warn("The `keepMounted={false}` prop on a Accordion.Panel will be ignored when using `contextHiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.");
+      }
+    }, [hiddenUntilFound, keepMountedProp]);
+  }
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (idProp) {
+      setPanelIdState(idProp);
+      return () => {
+        setPanelIdState(void 0);
+      };
+    }
+    return void 0;
+  }, [idProp, setPanelIdState]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    setHiddenUntilFound(hiddenUntilFound);
+  }, [setHiddenUntilFound, hiddenUntilFound]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    setKeepMounted(keepMounted);
+  }, [setKeepMounted, keepMounted]);
+  useOpenChangeComplete.useOpenChangeComplete({
+    open: open && transitionStatus === "idle",
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        return;
+      }
+      setDimensions({
+        width: void 0,
+        height: void 0
+      });
+    }
+  });
+  const {
+    props
+  } = useCollapsiblePanel.useCollapsiblePanel({
+    abortControllerRef,
+    animationTypeRef,
+    externalRef: forwardedRef,
+    height,
+    hiddenUntilFound,
+    id: idProp ?? panelId,
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    panelRef,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimensionRef,
+    visible,
+    width
+  });
+  const {
+    state,
+    triggerId
+  } = useAccordionItemContext();
+  const panelState = React__namespace.useMemo(() => ({
+    ...state,
+    transitionStatus
+  }), [state, transitionStatus]);
+  const element = useRenderElement.useRenderElement("div", componentProps, {
+    state: panelState,
+    ref: [forwardedRef, panelRef],
+    props: [props, {
+      "aria-labelledby": triggerId,
+      role: "region",
+      style: {
+        [AccordionPanelCssVars.accordionPanelHeight]: height === void 0 ? "auto" : `${height}px`,
+        [AccordionPanelCssVars.accordionPanelWidth]: width === void 0 ? "auto" : `${width}px`
+      }
+    }, elementProps],
+    stateAttributesMapping: accordionStateAttributesMapping
+  });
+  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionPanel.displayName = "AccordionPanel";
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    AccordionRoot,
+    {
+      "data-slot": "accordion",
+      className: utils.cn("flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function AccordionItem2({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    AccordionItem$1,
+    {
+      "data-slot": "accordion-item",
+      className: utils.cn("not-last:border-b", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger2({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(AccordionHeader, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    AccordionTrigger$1,
+    {
+      "data-slot": "accordion-trigger",
+      className: utils.cn(
+        "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    AccordionPanel,
+    {
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: utils.cn(
+            "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem2;
+exports.AccordionTrigger = AccordionTrigger2;
+//# sourceMappingURL=index.js.map