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

package/dist/components/search-input/index.js

@@ -1,120 +1,10 @@
 'use client'
-import "../../chunk-KTLWEUNW.js";
 import {
-  CloseIcon,
-  SearchIcon
-} from "../../chunk-VDXTEASE.js";
+  SearchInput
+} from "../../chunk-LIYUBUOP.js";
+import "../../chunk-KTLWEUNW.js";
+import "../../chunk-VDXTEASE.js";
 import "../../chunk-RTMS5TJN.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/components/segmented-control/index.cjs

@@ -0,0 +1,60 @@
+'use client'
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/segmented-control/index.ts
+var segmented_control_exports = {};
+__export(segmented_control_exports, {
+  SegmentedControl: () => SegmentedControl
+});
+module.exports = __toCommonJS(segmented_control_exports);
+
+// src/components/segmented-control/segmented-control.tsx
+var import_react = require("react");
+var import_react2 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function normalize(items) {
+  return items.map((item) => {
+    if (typeof item === "string") return { value: item, label: item };
+    return item;
+  });
+}
+var SegmentedControl = (0, import_react.forwardRef)(function SegmentedControl2(props, ref) {
+  const { items, ...rest } = props;
+  const data = (0, import_react.useMemo)(() => normalize(items), [items]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.SegmentGroup.Root, { ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SegmentGroup.Indicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react2.SegmentGroup.Item,
+      {
+        value: item.value,
+        disabled: item.disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SegmentGroup.ItemText, { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SegmentGroup.ItemHiddenInput, {})
+        ]
+      },
+      item.value
+    ) })
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedControl
+});

package/dist/components/segmented-control/index.d.cts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { SegmentGroup } from '@chakra-ui/react';
+
+interface Item {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps extends SegmentGroup.RootProps {
+    items: Array<string | Item>;
+}
+declare const SegmentedControl: react.ForwardRefExoticComponent<SegmentedControlProps & react.RefAttributes<HTMLDivElement>>;
+
+export { SegmentedControl, type SegmentedControlProps };

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { SegmentGroup } from '@chakra-ui/react';
+
+interface Item {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps extends SegmentGroup.RootProps {
+    items: Array<string | Item>;
+}
+declare const SegmentedControl: react.ForwardRefExoticComponent<SegmentedControlProps & react.RefAttributes<HTMLDivElement>>;
+
+export { SegmentedControl, type SegmentedControlProps };

package/dist/components/segmented-control/index.js

@@ -0,0 +1,8 @@
+'use client'
+import {
+  SegmentedControl
+} from "../../chunk-SKXSBAOS.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  SegmentedControl
+};

package/dist/components/select/index.js

@@ -1,100 +1,10 @@
 'use client'
 import {
-  CloseButton
-} from "../../chunk-FZW2DYK3.js";
+  namespace_exports
+} from "../../chunk-S3CQW7GD.js";
+import "../../chunk-FZW2DYK3.js";
 import "../../chunk-VDXTEASE.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;
+import "../../chunk-RTMS5TJN.js";
 export {
   namespace_exports as Select
 };

package/dist/components/sidebar/index.cjs

@@ -19,18 +19,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/sidebar/index.ts
-var sidebar_exports = {};
-__export(sidebar_exports, {
-  Sidebar: () => namespace_exports,
-  useSidebar: () => import_sidebar.useSidebar,
+var sidebar_exports2 = {};
+__export(sidebar_exports2, {
+  Sidebar: () => sidebar_exports,
+  useSidebar: () => import_sidebar2.useSidebar,
   useSidebarItemStyles: () => useSidebarItemStyles,
   useSidebarStyles: () => useSidebarStyles
 });
-module.exports = __toCommonJS(sidebar_exports);
+module.exports = __toCommonJS(sidebar_exports2);
 
-// src/components/sidebar/namespace.ts
-var namespace_exports = {};
-__export(namespace_exports, {
+// src/components/sidebar/sidebar.tsx
+var sidebar_exports = {};
+__export(sidebar_exports, {
   Backdrop: () => SidebarBackdrop,
   Body: () => SidebarBody,
   FlyoutTrigger: () => SidebarFlyoutTrigger,
@@ -42,18 +42,17 @@ __export(namespace_exports, {
   GroupTitle: () => SidebarGroupTitle,
   Header: () => SidebarHeader,
   NavButton: () => SidebarNavButton,
+  NavButtonEndElement: () => SidebarNavButtonEndElement,
   NavItem: () => SidebarNavItem,
-  NavItemEndElement: () => SidebarNavItemEndElement,
   Provider: () => SidebarProvider,
   Root: () => SidebarRoot,
   Track: () => SidebarTrack,
   Trigger: () => SidebarTrigger
 });
+var import_sidebar = require("@saas-ui/core/sidebar");
 
-// src/components/sidebar/sidebar.tsx
+// src/components/sidebar/sidebar.context.ts
 var import_react = require("@chakra-ui/react");
-var import_sidebar = require("@saas-ui/core/sidebar");
-var import_jsx_runtime = require("react/jsx-runtime");
 var {
   withContext,
   useRecipeResult,
@@ -61,8 +60,18 @@ var {
   ClassNamesProvider,
   useStyles: useSidebarStyles
 } = (0, import_react.createSlotRecipeContext)({
-  key: "sidebar"
+  key: "suiSidebar"
 });
+var {
+  withProvider: withItemProvider,
+  withContext: withItemContext,
+  useStyles: useSidebarItemStyles
+} = (0, import_react.createSlotRecipeContext)({
+  key: "suiSidebarNavItem"
+});
+
+// src/components/sidebar/sidebar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SidebarProvider = function SidebarProvider2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RecipeProvider, { ...props, children: props.children }) });
 };
@@ -78,21 +87,35 @@ var SidebarRoot = withContext(
   import_sidebar.Sidebar.Root,
   "root"
 );
-var SidebarTrigger = withContext(import_sidebar.Sidebar.Trigger, "trigger", {
-  forwardAsChild: true
-});
+var SidebarTrigger = withContext(
+  import_sidebar.Sidebar.Trigger,
+  "trigger",
+  {
+    forwardAsChild: true
+  }
+);
 var SidebarFlyoutTrigger = withContext(import_sidebar.Sidebar.FlyoutTrigger, "flyoutTrigger", {
   forwardAsChild: true
 });
-var SidebarBackdrop = withContext(import_sidebar.Sidebar.Backdrop, "backdrop", {
-  forwardAsChild: true
-});
-var SidebarHeader = withContext(import_sidebar.Sidebar.Header, "header");
+var SidebarBackdrop = withContext(
+  import_sidebar.Sidebar.Backdrop,
+  "backdrop",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarHeader = withContext(
+  import_sidebar.Sidebar.Header,
+  "header"
+);
 var SidebarBody = withContext(
   import_sidebar.Sidebar.Body,
   "body"
 );
-var SidebarFooter = withContext(import_sidebar.Sidebar.Footer, "footer");
+var SidebarFooter = withContext(
+  import_sidebar.Sidebar.Footer,
+  "footer"
+);
 var SidebarTrack = withContext(
   import_sidebar.Sidebar.Track,
   "track",
@@ -109,22 +132,31 @@ var SidebarGroup = withContext(
     }
   }
 );
-var SidebarGroupHeader = withContext(import_sidebar.Sidebar.GroupHeader, "groupHeader");
+var SidebarGroupHeader = withContext(
+  import_sidebar.Sidebar.GroupHeader,
+  "groupHeader"
+);
 var SidebarGroupTitle = withContext(import_sidebar.Sidebar.GroupTitle, "groupTitle");
 var SidebarGroupEndElement = withContext(import_sidebar.Sidebar.GroupEndElement, "groupEndElement");
-var SidebarGroupContent = withContext(import_sidebar.Sidebar.GroupContent, "groupContent");
-var {
-  withProvider: withItemProvider,
-  withContext: withItemContext,
-  useStyles: useSidebarItemStyles
-} = (0, import_react.createSlotRecipeContext)({
-  key: "sidebarNavItem"
-});
-var SidebarNavItem = withItemProvider(import_sidebar.Sidebar.NavItem, "item");
+var SidebarGroupContent = withContext(
+  import_sidebar.Sidebar.GroupContent,
+  "groupContent"
+);
+var SidebarNavItem = withItemProvider(
+  import_sidebar.Sidebar.NavItem,
+  "item"
+);
 var SidebarNavButton = withItemContext(import_sidebar.Sidebar.NavButton, "button", {
   forwardAsChild: true
 });
-var SidebarNavItemEndElement = withItemContext(import_sidebar.Sidebar.NavItemEndElement, "endElement");
+var SidebarNavButtonEndElement = withItemContext(import_sidebar.Sidebar.NavItemEndElement, "endElement", {
+  defaultProps: {
+    "data-slot": "endElement"
+  }
+});
+
+// src/components/sidebar/index.ts
+var import_sidebar2 = require("@saas-ui/core/sidebar");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Sidebar,