@expcat/tigercat-react 0.0.1

package/dist/chunk-NI2WNZRT.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Space.tsx
+var baseClasses = "inline-flex";
+var Space = ({
+  direction = "horizontal",
+  size = "md",
+  align = "start",
+  wrap = false,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const gapSize = tigercatCore.getSpaceGapSize(size);
+  const mergedStyle = gapSize.style ? { gap: gapSize.style, ...style } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: tigercatCore.classNames(
+        baseClasses,
+        tigercatCore.getSpaceDirectionClass(direction),
+        tigercatCore.getSpaceAlignClass(align),
+        gapSize.class,
+        wrap && "flex-wrap",
+        className
+      ),
+      style: mergedStyle,
+      children
+    }
+  );
+};
+
+exports.Space = Space;

package/dist/chunk-NOOPXNR4.mjs

@@ -0,0 +1,36 @@
+import { getSpaceGapSize, classNames, getSpaceDirectionClass, getSpaceAlignClass } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Space.tsx
+var baseClasses = "inline-flex";
+var Space = ({
+  direction = "horizontal",
+  size = "md",
+  align = "start",
+  wrap = false,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const gapSize = getSpaceGapSize(size);
+  const mergedStyle = gapSize.style ? { gap: gapSize.style, ...style } : style;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: classNames(
+        baseClasses,
+        getSpaceDirectionClass(direction),
+        getSpaceAlignClass(align),
+        gapSize.class,
+        wrap && "flex-wrap",
+        className
+      ),
+      style: mergedStyle,
+      children
+    }
+  );
+};
+
+export { Space };

package/dist/chunk-NSGDRTSQ.mjs

@@ -0,0 +1,138 @@
+import { useMenuContext } from './chunk-WDAMDVLU.mjs';
+import { useCallback } from 'react';
+import { isKeySelected, classNames, getMenuItemClasses, getMenuItemIndent, menuItemIconClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function getMenuButtonsWithin(menuEl) {
+  return Array.from(
+    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
+  ).filter((el) => !el.disabled);
+}
+function roveFocus(current, next) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) {
+    next.focus();
+    return;
+  }
+  const items = getMenuButtonsWithin(menuEl);
+  items.forEach((el) => {
+    el.tabIndex = el === next ? 0 : -1;
+  });
+  next.focus();
+}
+function moveFocus(current, delta) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  const currentIndex = items.indexOf(current);
+  if (currentIndex < 0) return;
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  roveFocus(current, items[nextIndex]);
+}
+function focusEdge(current, edge) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  if (items.length === 0) return;
+  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
+}
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const itemClasses = classNames(
+    menuContext ? getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = useCallback(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocus(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocus(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ jsx("span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+
+export { MenuItem };

package/dist/chunk-O3EUFIOS.mjs

@@ -0,0 +1,142 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { classNames, getPopoverContainerClasses, getPopoverTriggerClasses, getDropdownMenuWrapperClasses, getPopoverContentClasses, getPopoverTitleClasses, getPopoverContentTextClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Popover.tsx
+var popoverIdCounter = 0;
+var createPopoverId = () => `tiger-popover-${++popoverIdCounter}`;
+var Popover = ({
+  visible,
+  defaultVisible = false,
+  title,
+  content,
+  trigger = "click",
+  placement = "top",
+  disabled = false,
+  width,
+  className,
+  style,
+  children,
+  titleContent,
+  contentContent,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const isControlled = visible !== void 0;
+  const [internalVisible, setInternalVisible] = useState(defaultVisible);
+  const currentVisible = isControlled ? visible : internalVisible;
+  const containerRef = useRef(null);
+  const popoverIdRef = useRef(null);
+  if (!popoverIdRef.current) {
+    popoverIdRef.current = createPopoverId();
+  }
+  const popoverId = popoverIdRef.current;
+  const titleId = `${popoverId}-title`;
+  const contentId = `${popoverId}-content`;
+  const setVisible = useCallback(
+    (nextVisible) => {
+      if (disabled && nextVisible) return;
+      if (!isControlled) {
+        setInternalVisible(nextVisible);
+      }
+      onVisibleChange?.(nextVisible);
+    },
+    [disabled, isControlled, onVisibleChange]
+  );
+  const handleTriggerClick = () => {
+    if (disabled || trigger !== "click") return;
+    setVisible(!currentVisible);
+  };
+  const handleTriggerMouseEnter = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(true);
+  };
+  const handleTriggerMouseLeave = () => {
+    if (disabled || trigger !== "hover") return;
+    setVisible(false);
+  };
+  const handleTriggerFocus = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(true);
+  };
+  const handleTriggerBlur = () => {
+    if (disabled || trigger !== "focus") return;
+    setVisible(false);
+  };
+  useEffect(() => {
+    if (!currentVisible || trigger !== "click") return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (containerRef.current?.contains(target)) return;
+      setVisible(false);
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [currentVisible, trigger, setVisible]);
+  useEffect(() => {
+    if (!currentVisible || trigger === "manual") return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setVisible(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [currentVisible, trigger, setVisible]);
+  const containerClasses = classNames(getPopoverContainerClasses(), className);
+  const triggerClasses = getPopoverTriggerClasses(disabled);
+  const contentWrapperClasses = getDropdownMenuWrapperClasses(currentVisible, placement);
+  const contentClasses = getPopoverContentClasses(width);
+  const titleClasses = getPopoverTitleClasses();
+  const contentTextClasses = getPopoverContentTextClasses();
+  const triggerHandlers = {};
+  if (trigger === "click") {
+    triggerHandlers.onClick = handleTriggerClick;
+  } else if (trigger === "hover") {
+    triggerHandlers.onMouseEnter = handleTriggerMouseEnter;
+    triggerHandlers.onMouseLeave = handleTriggerMouseLeave;
+  } else if (trigger === "focus") {
+    triggerHandlers.onFocus = handleTriggerFocus;
+    triggerHandlers.onBlur = handleTriggerBlur;
+  }
+  if (!children) {
+    return null;
+  }
+  const hasTitle = Boolean(title || titleContent);
+  const hasContent = Boolean(content || contentContent);
+  const describedBy = hasContent ? contentId : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: triggerClasses,
+        "aria-haspopup": "dialog",
+        "aria-disabled": disabled ? "true" : void 0,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: popoverId,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": hasTitle ? titleId : void 0,
+        "aria-describedby": describedBy,
+        className: contentClasses,
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+          hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: contentTextClasses, children: contentContent || content })
+        ]
+      }
+    ) })
+  ] });
+};
+
+export { Popover };

package/dist/chunk-OCVQ3LOT.mjs

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/CheckboxGroup.tsx
+var CheckboxGroupContextProvider = createContext(null);
+var useCheckboxGroup = () => {
+  return useContext(CheckboxGroupContextProvider);
+};
+var CheckboxGroup = ({
+  value: controlledValue,
+  defaultValue = [],
+  disabled = false,
+  size = "md",
+  onChange,
+  children,
+  className,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const updateValue = (val, checked) => {
+    if (disabled) return;
+    const currentValue = [...value];
+    const index = currentValue.indexOf(val);
+    if (checked && index === -1) {
+      currentValue.push(val);
+    } else if (!checked && index !== -1) {
+      currentValue.splice(index, 1);
+    }
+    if (!isControlled) {
+      setInternalValue(currentValue);
+    }
+    onChange?.(currentValue);
+  };
+  const context = {
+    value,
+    disabled,
+    size,
+    updateValue
+  };
+  return /* @__PURE__ */ jsx(CheckboxGroupContextProvider.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...props, className, children }) });
+};
+
+export { CheckboxGroup, useCheckboxGroup };

package/dist/chunk-OFCKGWTS.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Content.tsx
+var Content = ({ className, children, ...props }) => {
+  const contentClasses = tigercatCore.classNames(tigercatCore.layoutContentClasses, className);
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: contentClasses, ...props, children });
+};
+
+exports.Content = Content;

package/dist/chunk-OQTPXPAP.mjs

@@ -0,0 +1,10 @@
+import { classNames, layoutContentClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Content.tsx
+var Content = ({ className, children, ...props }) => {
+  const contentClasses = classNames(layoutContentClasses, className);
+  return /* @__PURE__ */ jsx("main", { className: contentClasses, ...props, children });
+};
+
+export { Content };