@saas-ui/react 3.0.0-alpha.17 → 3.0.0-alpha.19

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.19
+
+### Patch Changes
+
+- ba3b566: Improved Sidebar contrast
+- 38082d4: Improved horizontal field styles
+- ba3b566: Improved focusRing styles
+- ba3b566: Added SegmentControl stories and made sizing consistent with buttons
+- 3a73bc8: Fixed incorrect props type for GridListRoot
+- ba3b566: Sidebar.Button now renders a div with role="button"
+- 727b902: Allow click event on Sidebar.Track to be prevented
+
+## 3.0.0-alpha.18
+
+### Minor Changes
+
+- eb02362: Improved GridList recipe
+
+### Patch Changes
+
+- e7fe684: Export Pagination Context component
+- eb02362: Add missing PaginationPageTextProps export
+- Updated dependencies [eb02362]
+  - @saas-ui/core@3.0.0-alpha.5
+
 ## 3.0.0-alpha.17
 
 ### Minor Changes

package/dist/{chunk-5ILYOY27.js → chunk-MLJN6IOJ.js}

@@ -11,6 +11,7 @@ import {
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -67,7 +68,6 @@ var PrevButton = forwardRef(function PaginationPrevTrigger(props, ref) {
 var NextButton = forwardRef(function PaginationNextTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = usePaginationContext();
   return /* @__PURE__ */ jsx(ChakraPagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
@@ -89,6 +89,7 @@ var PageText = forwardRef(
 );
 var PrevTrigger = ChakraPagination.PrevTrigger;
 var NextTrigger = ChakraPagination.NextTrigger;
+var Context = ChakraPagination.Context;
 
 export {
   pagination_exports

package/dist/chunk-QVFJV6HJ.js

@@ -0,0 +1,8 @@
+'use client'
+
+// src/components/icon-button/index.ts
+import { IconButton } from "@chakra-ui/react";
+
+export {
+  IconButton
+};

package/dist/{chunk-ULAJ3JEO.js → chunk-S5J6REMC.js}

@@ -18,7 +18,15 @@ var NumberInput = forwardRef(
       ...rest
     } = props;
     return /* @__PURE__ */ jsxs(ChakraNumberInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ jsx(InputGroup, { startElement, endElement, children: /* @__PURE__ */ jsx(ChakraNumberInput.Input, { ref, ...inputProps }) }),
+      /* @__PURE__ */ jsx(
+        InputGroup,
+        {
+          startElement,
+          endElement,
+          width: "full",
+          children: /* @__PURE__ */ jsx(ChakraNumberInput.Input, { ref, ...inputProps })
+        }
+      ),
       !hideControls && !endElement ? /* @__PURE__ */ jsxs(ChakraNumberInput.Control, { children: [
         /* @__PURE__ */ jsx(ChakraNumberInput.IncrementTrigger, {}),
         /* @__PURE__ */ jsx(ChakraNumberInput.DecrementTrigger, {})

package/dist/components/card/index.cjs

@@ -0,0 +1,31 @@
+'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/card/index.ts
+var card_exports = {};
+__export(card_exports, {
+  Card: () => import_react.Card
+});
+module.exports = __toCommonJS(card_exports);
+var import_react = require("@chakra-ui/react");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});

package/dist/components/card/index.d.cts

@@ -0,0 +1 @@
+export { Card } from '@chakra-ui/react';

package/dist/components/card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from '@chakra-ui/react';

package/dist/components/card/index.js

@@ -0,0 +1,8 @@
+'use client'
+import "../../chunk-RTMS5TJN.js";
+
+// src/components/card/index.ts
+import { Card } from "@chakra-ui/react";
+export {
+  Card
+};

package/dist/components/command/index.d.cts

@@ -1,10 +1,7 @@
 import * as react from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { RecipeProps as RecipeProps$1, RecipeDefinition, RecipeVariantProps, HTMLChakraProps, UnstyledProp } from '@chakra-ui/react';
-
-type RecipeProps<T, DefaultRecipe> = RecipeProps$1<T> extends {
-    recipe?: RecipeDefinition;
-} ? RecipeProps$1<T> & DefaultRecipe : RecipeProps$1<T>;
+import { RecipeVariantProps, HTMLChakraProps, UnstyledProp } from '@chakra-ui/react';
+import { R as RecipeProps } from '../../types-DnFoUudY.cjs';
 
 declare const commandRecipe: _chakra_ui_react.RecipeDefinition<{
     size: {

package/dist/components/command/index.d.ts

@@ -1,10 +1,7 @@
 import * as react from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { RecipeProps as RecipeProps$1, RecipeDefinition, RecipeVariantProps, HTMLChakraProps, UnstyledProp } from '@chakra-ui/react';
-
-type RecipeProps<T, DefaultRecipe> = RecipeProps$1<T> extends {
-    recipe?: RecipeDefinition;
-} ? RecipeProps$1<T> & DefaultRecipe : RecipeProps$1<T>;
+import { RecipeVariantProps, HTMLChakraProps, UnstyledProp } from '@chakra-ui/react';
+import { R as RecipeProps } from '../../types-DnFoUudY.js';
 
 declare const commandRecipe: _chakra_ui_react.RecipeDefinition<{
     size: {

package/dist/components/grid-list/index.d.cts

@@ -1,14 +1,76 @@
 import * as react from 'react';
-import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { RecipeVariantProps, HTMLChakraProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
+import { S as SlotRecipeProps } from '../../types-DnFoUudY.cjs';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
+    interactive: {
+        true: {
+            item: {
+                cursor: "button";
+                transitionProperty: "bg";
+                transitionDuration: "fast";
+                _hover: {
+                    bg: "bg.subtle";
+                };
+                _active: {
+                    bg: "bg.subtle";
+                };
+            };
+        };
+    };
+    variant: {
+        simple: {};
+        rounded: {
+            item: {
+                borderRadius: "md";
+                mb: number;
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                textStyle: "sm";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+        md: {
+            root: {
+                textStyle: "md";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+    };
+}>;
+type GridListVariantProps = RecipeVariantProps<typeof gridListSlotRecipe>;
+
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList', GridListVariantProps> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridListRootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/grid-list/index.d.ts

@@ -1,14 +1,76 @@
 import * as react from 'react';
-import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { RecipeVariantProps, HTMLChakraProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
+import { S as SlotRecipeProps } from '../../types-DnFoUudY.js';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+declare const gridListSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
+    interactive: {
+        true: {
+            item: {
+                cursor: "button";
+                transitionProperty: "bg";
+                transitionDuration: "fast";
+                _hover: {
+                    bg: "bg.subtle";
+                };
+                _active: {
+                    bg: "bg.subtle";
+                };
+            };
+        };
+    };
+    variant: {
+        simple: {};
+        rounded: {
+            item: {
+                borderRadius: "md";
+                mb: number;
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                textStyle: "sm";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+        md: {
+            root: {
+                textStyle: "md";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+    };
+}>;
+type GridListVariantProps = RecipeVariantProps<typeof gridListSlotRecipe>;
+
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList', GridListVariantProps> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridListRootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/icon-button/index.cjs

@@ -0,0 +1,31 @@
+'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/icon-button/index.ts
+var icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => import_react.IconButton
+});
+module.exports = __toCommonJS(icon_button_exports);
+var import_react = require("@chakra-ui/react");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});

package/dist/components/icon-button/index.d.cts

@@ -0,0 +1 @@
+export { IconButton, IconButtonProps } from '@chakra-ui/react';

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1 @@
+export { IconButton, IconButtonProps } from '@chakra-ui/react';

package/dist/components/icon-button/index.js

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

package/dist/components/number-input/index.cjs

@@ -68,7 +68,15 @@ var NumberInput = (0, import_react3.forwardRef)(
       ...rest
     } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.NumberInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.Input, { ref, ...inputProps }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        InputGroup,
+        {
+          startElement,
+          endElement,
+          width: "full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.Input, { ref, ...inputProps })
+        }
+      ),
       !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.NumberInput.Control, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.IncrementTrigger, {}),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.DecrementTrigger, {})

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

@@ -1,7 +1,7 @@
 'use client'
 import {
   NumberInput
-} from "../../chunk-ULAJ3JEO.js";
+} from "../../chunk-S5J6REMC.js";
 import "../../chunk-PKI6YH2V.js";
 import "../../chunk-RTMS5TJN.js";
 export {

package/dist/components/pagination/index.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(pagination_exports2);
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -186,7 +187,6 @@ var PrevButton = (0, import_react2.forwardRef)(function PaginationPrevTrigger(pr
 var NextButton = (0, import_react2.forwardRef)(function PaginationNextTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = (0, import_react3.usePaginationContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
@@ -208,6 +208,7 @@ var PageText = (0, import_react2.forwardRef)(
 );
 var PrevTrigger = import_react3.Pagination.PrevTrigger;
 var NextTrigger = import_react3.Pagination.NextTrigger;
+var Context = import_react3.Pagination.Context;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Pagination

package/dist/components/pagination/index.d.cts

@@ -1,3 +1,4 @@
+import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
@@ -19,19 +20,22 @@ interface PageTextProps extends TextProps {
 declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
 declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
 
+declare const pagination_Context: typeof Context;
 declare const pagination_Ellipsis: typeof Ellipsis;
 declare const pagination_Item: typeof Item;
 declare const pagination_Items: typeof Items;
 declare const pagination_NextButton: typeof NextButton;
 declare const pagination_NextTrigger: typeof NextTrigger;
 declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
 declare const pagination_PrevButton: typeof PrevButton;
 declare const pagination_PrevTrigger: typeof PrevTrigger;
 declare const pagination_Root: typeof Root;
 type pagination_RootProps = RootProps;
 declare namespace pagination {
-  export { pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
 }
 
 export { pagination as Pagination };

package/dist/components/pagination/index.d.ts

@@ -1,3 +1,4 @@
+import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
@@ -19,19 +20,22 @@ interface PageTextProps extends TextProps {
 declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
 declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
 
+declare const pagination_Context: typeof Context;
 declare const pagination_Ellipsis: typeof Ellipsis;
 declare const pagination_Item: typeof Item;
 declare const pagination_Items: typeof Items;
 declare const pagination_NextButton: typeof NextButton;
 declare const pagination_NextTrigger: typeof NextTrigger;
 declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
 declare const pagination_PrevButton: typeof PrevButton;
 declare const pagination_PrevTrigger: typeof PrevTrigger;
 declare const pagination_Root: typeof Root;
 type pagination_RootProps = RootProps;
 declare namespace pagination {
-  export { pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
 }
 
 export { pagination as Pagination };

package/dist/components/pagination/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   pagination_exports
-} from "../../chunk-5ILYOY27.js";
+} from "../../chunk-MLJN6IOJ.js";
 import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {