@saas-ui/react 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/chunk-JGHXJ3PI.js

@@ -0,0 +1,102 @@
+'use client'
+import {
+  Button
+} from "./chunk-BCNPBZZK.js";
+import {
+  CheckIcon,
+  ChevronRightIcon
+} from "./chunk-VDXTEASE.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/menu/menu.tsx
+var menu_exports = {};
+__export(menu_exports, {
+  Arrow: () => MenuArrow,
+  Button: () => MenuButton,
+  CheckboxItem: () => MenuCheckboxItem,
+  Content: () => MenuContent,
+  Context: () => MenuContext,
+  ContextTrigger: () => MenuContextTrigger,
+  Item: () => MenuItem,
+  ItemCommand: () => MenuItemCommand,
+  ItemGroup: () => MenuItemGroup,
+  ItemText: () => MenuItemText,
+  RadioItem: () => MenuRadioItem,
+  RadioItemGroup: () => MenuRadioItemGroup,
+  Root: () => MenuRoot,
+  Separator: () => MenuSeparator,
+  Trigger: () => MenuTrigger,
+  TriggerItem: () => MenuTriggerItem
+});
+import { forwardRef } from "react";
+import {
+  AbsoluteCenter,
+  Menu as ChakraMenu,
+  Portal
+} from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MenuContent = forwardRef(
+  function MenuContent2(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(ChakraMenu.Positioner, { children: /* @__PURE__ */ jsx(ChakraMenu.Content, { ref, ...rest }) }) });
+  }
+);
+var MenuArrow = forwardRef(
+  function MenuArrow2(props, ref) {
+    return /* @__PURE__ */ jsx(ChakraMenu.Arrow, { ref, ...props, children: /* @__PURE__ */ jsx(ChakraMenu.ArrowTip, {}) });
+  }
+);
+var MenuCheckboxItem = forwardRef(function MenuCheckboxItem2(props, ref) {
+  return /* @__PURE__ */ jsxs(ChakraMenu.CheckboxItem, { ref, ...props, children: [
+    /* @__PURE__ */ jsx(ChakraMenu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+    props.children
+  ] });
+});
+var MenuRadioItem = forwardRef(
+  function MenuRadioItem2(props, ref) {
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(ChakraMenu.RadioItem, { ps: "8", ref, ...rest, children: [
+      /* @__PURE__ */ jsx(AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ jsx(ChakraMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+      /* @__PURE__ */ jsx(ChakraMenu.ItemText, { children })
+    ] });
+  }
+);
+var MenuItemGroup = forwardRef(
+  function MenuItemGroup2(props, ref) {
+    const { title, children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(ChakraMenu.ItemGroup, { ref, ...rest, children: [
+      title && /* @__PURE__ */ jsx(ChakraMenu.ItemGroupLabel, { userSelect: "none", children: title }),
+      children
+    ] });
+  }
+);
+var MenuTriggerItem = forwardRef(
+  function MenuTriggerItem2(props, ref) {
+    const { startIcon, children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(ChakraMenu.TriggerItem, { ref, ...rest, children: [
+      startIcon,
+      children,
+      /* @__PURE__ */ jsx(ChevronRightIcon, {})
+    ] });
+  }
+);
+var MenuButton = forwardRef(
+  function MenuButton2(props, ref) {
+    return /* @__PURE__ */ jsx(MenuTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, {}) });
+  }
+);
+var MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
+var MenuContextTrigger = ChakraMenu.ContextTrigger;
+var MenuRoot = ChakraMenu.Root;
+var MenuSeparator = ChakraMenu.Separator;
+var MenuContext = ChakraMenu.Context;
+var MenuItem = ChakraMenu.Item;
+var MenuItemText = ChakraMenu.ItemText;
+var MenuItemCommand = ChakraMenu.ItemCommand;
+var MenuTrigger = ChakraMenu.Trigger;
+
+export {
+  menu_exports
+};

package/dist/chunk-L356FPLY.js

@@ -0,0 +1,20 @@
+'use client'
+
+// src/components/checkbox/checkbox.tsx
+import { forwardRef } from "react";
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = forwardRef(
+  function Checkbox2(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props;
+    return /* @__PURE__ */ jsxs(ChakraCheckbox.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraCheckbox.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsx(ChakraCheckbox.Control, { children: icon || /* @__PURE__ */ jsx(ChakraCheckbox.Indicator, {}) }),
+      children != null && /* @__PURE__ */ jsx(ChakraCheckbox.Label, { children })
+    ] });
+  }
+);
+
+export {
+  Checkbox
+};

package/dist/chunk-LIYUBUOP.js

@@ -0,0 +1,119 @@
+'use client'
+import {
+  CloseIcon,
+  SearchIcon
+} from "./chunk-VDXTEASE.js";
+
+// src/components/search-input/search-input.tsx
+import React, { forwardRef } from "react";
+import {
+  Group,
+  IconButton,
+  Input,
+  InputElement,
+  mergeRefs,
+  useControllableState
+} from "@chakra-ui/react";
+import { callAll } from "@saas-ui/core/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchInput = forwardRef(
+  (props, ref) => {
+    const {
+      placeholder = "Search",
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      size,
+      variant,
+      width = "full",
+      icon = /* @__PURE__ */ jsx(SearchIcon, {}),
+      resetIcon,
+      endElement: endElementProp,
+      onChange: onChangeProp,
+      onReset: onResetProp,
+      onKeyDown: onKeyDownProp,
+      disabled,
+      ...inputProps
+    } = props;
+    const inputRef = React.useRef(null);
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValueProp
+    });
+    const onChange = React.useCallback(
+      (e) => {
+        setValue(e.target.value);
+      },
+      [setValue]
+    );
+    const onKeyDown = React.useCallback(
+      (event) => {
+        if (event.key === "Escape") {
+          setValue("");
+          onReset();
+        }
+      },
+      [onResetProp, setValue]
+    );
+    const onReset = () => {
+      var _a;
+      setValue("");
+      onResetProp == null ? void 0 : onResetProp();
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const showReset = value && !props.disabled;
+    const endElement = showReset ? /* @__PURE__ */ jsx(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
+    return /* @__PURE__ */ jsxs(Group, { width, children: [
+      /* @__PURE__ */ jsx(
+        InputElement,
+        {
+          placement: "start",
+          px: "0",
+          aspectRatio: "9/10",
+          fontSize: size,
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder,
+          variant,
+          size,
+          value,
+          disabled,
+          ref: mergeRefs(ref, inputRef),
+          onChange: callAll(onChange, onChangeProp),
+          onKeyDown: callAll(onKeyDown, onKeyDownProp),
+          ps: "calc(var(--input-height) - var(--input-height) / 10)",
+          pe: "calc(var(--input-height) - var(--input-height) / 10)",
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsx(InputElement, { placement: "end", children: endElement })
+    ] });
+  }
+);
+var SearchInputResetButton = forwardRef(
+  (props, ref) => {
+    const { children = /* @__PURE__ */ jsx(CloseIcon, {}), ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        variant: "ghost",
+        "aria-label": "Reset search",
+        me: "-2",
+        aspectRatio: "square",
+        height: "calc(100% - {spacing.2})",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+export {
+  SearchInput
+};

package/dist/chunk-M7FOBCOV.js

@@ -0,0 +1,184 @@
+'use client'
+
+// src/components/persona/persona.tsx
+import * as React2 from "react";
+
+// src/components/persona/persona-primitive.tsx
+import { forwardRef } from "react";
+import {
+  Avatar,
+  chakra
+} from "@chakra-ui/react";
+import { dataAttr } from "@saas-ui/core/utils";
+
+// src/components/persona/persona.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  useStyles: usePersonaStyles,
+  withProvider,
+  withContext
+} = createSlotRecipeContext({
+  key: "suiPersona"
+});
+
+// src/components/persona/persona-primitive.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PersonaRoot = withProvider(
+  forwardRef((props, ref) => {
+    const { outOfOffice, presence, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      chakra.div,
+      {
+        ref,
+        ...rest,
+        "data-out-of-office": dataAttr(outOfOffice),
+        "data-presence": presence,
+        css: [
+          presence ? {
+            "--persona-presence": `colors.presence.${presence}`
+          } : void 0,
+          rest.css
+        ]
+      }
+    );
+  }),
+  "root"
+);
+var PersonaAvatar = forwardRef(
+  (props, ref) => {
+    const {
+      name,
+      getInitials = (name2) => name2 == null ? void 0 : name2[0],
+      icon,
+      loading,
+      onError,
+      src,
+      srcSet,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(Avatar.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ jsx(Avatar.Fallback, { children: getInitials(name) }),
+      /* @__PURE__ */ jsx(
+        Avatar.Image,
+        {
+          src,
+          srcSet,
+          loading,
+          onError
+        }
+      ),
+      children
+    ] });
+  }
+);
+var PersonaPresenceBadge = withContext("span", "presence");
+var PersonaDetails = withContext(
+  "div",
+  "details"
+);
+var PersonaLabel = withContext(
+  "span",
+  "label"
+);
+PersonaLabel.displayName = "PersonaLabel";
+var PersonaSecondaryLabel = withContext(
+  "span",
+  "secondaryLabel"
+);
+var PersonaTertiaryLabel = withContext(
+  "span",
+  "tertiaryLabel"
+);
+
+// src/components/persona/persona.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Persona = React2.forwardRef(
+  (props, ref) => {
+    const {
+      name,
+      presence,
+      presenceIcon,
+      isOutOfOffice,
+      label,
+      secondaryLabel,
+      tertiaryLabel,
+      size,
+      hideDetails,
+      children,
+      /** Avatar props */
+      getInitials,
+      icon,
+      loading,
+      onError,
+      src,
+      srcSet,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs2(
+      PersonaRoot,
+      {
+        ref,
+        outOfOffice: isOutOfOffice,
+        presence,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx2(
+            PersonaAvatar,
+            {
+              name,
+              size,
+              getInitials,
+              icon,
+              loading,
+              onError,
+              src,
+              srcSet,
+              children: /* @__PURE__ */ jsx2(PersonaPresenceBadge, { children: presenceIcon })
+            }
+          ),
+          !hideDetails && /* @__PURE__ */ jsxs2(PersonaDetails, { children: [
+            /* @__PURE__ */ jsx2(PersonaLabel, { children: label || name }),
+            secondaryLabel && /* @__PURE__ */ jsx2(PersonaSecondaryLabel, { children: secondaryLabel }),
+            tertiaryLabel && /* @__PURE__ */ jsx2(PersonaTertiaryLabel, { children: tertiaryLabel }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+Persona.displayName = "Persona";
+var PersonaAvatar2 = React2.forwardRef(function PersonaAvatar3(props, ref) {
+  return /* @__PURE__ */ jsx2(Persona, { ref, ...props, hideDetails: true });
+});
+
+// src/components/persona/presence.ts
+var defaultPresenceOptions = {
+  online: {
+    label: "Online",
+    color: "presence.online"
+  },
+  offline: {
+    label: "Offline",
+    color: "presence.offline"
+  },
+  busy: {
+    label: "Busy",
+    color: "presence.busy"
+  },
+  dnd: {
+    label: "Do-not-disturb",
+    color: "presence.dnd"
+  },
+  away: {
+    label: "Away",
+    color: "presence.away"
+  }
+};
+
+export {
+  Persona,
+  PersonaAvatar2 as PersonaAvatar,
+  defaultPresenceOptions
+};

package/dist/chunk-NSD5HRIP.js

@@ -0,0 +1,46 @@
+'use client'
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/grid-list/grid-list.tsx
+var grid_list_exports = {};
+__export(grid_list_exports, {
+  Cell: () => GridListCell,
+  Header: () => GridListHeader,
+  Item: () => GridListItem,
+  Root: () => GridListRoot
+});
+import { GridList } from "@saas-ui/core/grid-list";
+
+// src/components/grid-list/grid-list.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  withProvider,
+  withContext,
+  useStyles: useGridListStyles
+} = createSlotRecipeContext({
+  key: "suiGridList"
+});
+
+// src/components/grid-list/grid-list.tsx
+var GridListRoot = withProvider(
+  GridList.Root,
+  "root"
+);
+var GridListItem = withContext(
+  GridList.Item,
+  "item"
+);
+var GridListHeader = withContext(
+  GridList.Header,
+  "header"
+);
+var GridListCell = withContext(
+  GridList.Cell,
+  "cell"
+);
+
+export {
+  grid_list_exports
+};

package/dist/chunk-Q6SNJJO2.js

@@ -0,0 +1,63 @@
+'use client'
+import {
+  useLink
+} from "./chunk-O2WVT2BP.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/navbar/navbar.tsx
+var navbar_exports = {};
+__export(navbar_exports, {
+  Brand: () => NavbarBrand,
+  Content: () => NavbarContent,
+  Item: () => NavbarItem,
+  Link: () => NavbarLink,
+  Root: () => NavbarRoot
+});
+import { forwardRef } from "react";
+import { Navbar } from "@saas-ui/core/navbar";
+
+// src/components/navbar/navbar.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  withProvider,
+  withContext,
+  useStyles: useNavbarStyles
+} = createSlotRecipeContext({
+  key: "suiNavbar"
+});
+
+// src/components/navbar/navbar.tsx
+import { jsx } from "react/jsx-runtime";
+var NavbarRoot = withProvider(
+  Navbar.Root,
+  "root"
+);
+var NavbarBrand = withContext(
+  Navbar.Brand,
+  "brand"
+);
+var NavbarContent = withContext(
+  Navbar.Content,
+  "content"
+);
+var NavbarItem = withContext(
+  Navbar.Item,
+  "item"
+);
+var NavbarLink = withContext(
+  forwardRef((props, ref) => {
+    const Link = useLink();
+    const { active, ...rest } = props;
+    return /* @__PURE__ */ jsx(Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ jsx(Link, { "data-active": active ? "" : void 0, ...props }) });
+  }),
+  "link",
+  {
+    forwardAsChild: true
+  }
+);
+
+export {
+  navbar_exports
+};

package/dist/chunk-QSNSWCTM.js

@@ -0,0 +1,32 @@
+'use client'
+
+// src/components/tooltip/tooltip.tsx
+import { forwardRef } from "react";
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props;
+    if (disabled) return children;
+    return /* @__PURE__ */ jsxs(ChakraTooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraTooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(ChakraTooltip.Positioner, { children: /* @__PURE__ */ jsxs(ChakraTooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ jsx(ChakraTooltip.Arrow, { children: /* @__PURE__ */ jsx(ChakraTooltip.ArrowTip, {}) }),
+        content
+      ] }) }) })
+    ] });
+  }
+);
+
+export {
+  Tooltip
+};

package/dist/chunk-S3CQW7GD.js

@@ -0,0 +1,100 @@
+'use client'
+import {
+  CloseButton
+} from "./chunk-FZW2DYK3.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/select/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Content: () => SelectContent,
+  Item: () => SelectItem,
+  ItemGroup: () => SelectItemGroup,
+  ItemText: () => SelectItemText,
+  Label: () => SelectLabel,
+  Root: () => SelectRoot,
+  Trigger: () => SelectTrigger,
+  ValueText: () => SelectValueText
+});
+
+// src/components/select/select.tsx
+import { forwardRef } from "react";
+import { Portal, Select as SelectPrimitive } from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SelectTrigger = forwardRef(
+  function SelectTrigger2(props, ref) {
+    const { children, clearable, ...rest } = props;
+    return /* @__PURE__ */ jsxs(SelectPrimitive.Control, { ...rest, children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref, children }),
+      /* @__PURE__ */ jsxs(SelectPrimitive.IndicatorGroup, { children: [
+        clearable && /* @__PURE__ */ jsx(SelectClearTrigger, {}),
+        /* @__PURE__ */ jsx(SelectPrimitive.Indicator, {})
+      ] })
+    ] });
+  }
+);
+var SelectClearTrigger = forwardRef(function SelectClearTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      size: "xs",
+      variant: "plain",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      pointerEvents: "auto"
+    }
+  ) });
+});
+var SelectContent = forwardRef(
+  function SelectContent2(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(SelectPrimitive.Positioner, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { ...rest, ref }) }) });
+  }
+);
+var SelectItem = forwardRef(
+  function SelectItem2(props, ref) {
+    const { item, children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(SelectPrimitive.Item, { item, ...rest, ref, children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, {})
+    ] }, item.value);
+  }
+);
+var SelectValueText = forwardRef(function SelectValueText2(props, ref) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectPrimitive.ValueText, { ...rest, ref, children: /* @__PURE__ */ jsx(SelectPrimitive.Context, { children: (select) => {
+    const items = select.selectedItems;
+    if (items.length === 0) return props.placeholder;
+    if (children) return children(items);
+    if (items.length === 1)
+      return select.collection.stringifyItem(items[0]);
+    return `${items.length} selected`;
+  } }) });
+});
+var SelectRoot = forwardRef(function SelectRoot2(props, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Root,
+    {
+      ...props,
+      ref,
+      positioning: { sameWidth: true, ...props.positioning }
+    }
+  );
+});
+var SelectItemGroup = forwardRef(
+  function SelectItemGroup2(props, ref) {
+    const { children, label, ...rest } = props;
+    return /* @__PURE__ */ jsxs(SelectPrimitive.ItemGroup, { ...rest, ref, children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemGroupLabel, { children: label }),
+      children
+    ] });
+  }
+);
+var SelectLabel = SelectPrimitive.Label;
+var SelectItemText = SelectPrimitive.ItemText;
+
+export {
+  namespace_exports
+};

package/dist/chunk-SA3OGTOO.js

@@ -0,0 +1,23 @@
+'use client'
+
+// src/components/switch/switch.tsx
+import { Switch as ChakraSwitch } from "@chakra-ui/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef(
+  function Switch2(props, ref) {
+    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
+    return /* @__PURE__ */ jsxs(ChakraSwitch.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraSwitch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsxs(ChakraSwitch.Control, { children: [
+        /* @__PURE__ */ jsx(ChakraSwitch.Thumb, { children: thumbLabel && /* @__PURE__ */ jsx(ChakraSwitch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        trackLabel && /* @__PURE__ */ jsx(ChakraSwitch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
+      ] }),
+      children != null && /* @__PURE__ */ jsx(ChakraSwitch.Label, { children })
+    ] });
+  }
+);
+
+export {
+  Switch
+};