@commercetools/nimbus 0.0.9-rc6 → 0.0.9-rc8

package/dist/toggle-button-group.d.ts

@@ -0,0 +1,107 @@
+import { AriaToggleButtonGroupProps } from 'react-aria';
+import { AriaToggleButtonProps } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { ToggleButton } from 'react-aria-components';
+import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
+import { ToggleButtonGroupButtonComponent as ToggleButtonGroupButtonComponent_2 } from './toggle-button-group.types';
+import { ToggleButtonGroupRootComponent as ToggleButtonGroupRootComponent_2 } from './toggle-button-group.types';
+
+/**
+ * Recipe configuration for the ToggleButtonGroup component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const buttonGroupRecipe: SlotRecipeDefinition<"button" | "root", {
+size: {
+xs: {
+button: {
+h: "800";
+minW: "800";
+fontSize: "350";
+fontWeight: "500";
+lineHeight: "400";
+px: "300";
+gap: "100";
+_icon: {
+width: "500";
+height: "500";
+};
+} | undefined;
+};
+md: {
+button: {
+h: "1000";
+minW: "1000";
+fontSize: "400";
+lineHeight: "500";
+px: "400";
+gap: "200";
+_icon: {
+width: "600";
+height: "600";
+};
+} | undefined;
+};
+};
+tone: {
+primary: {
+button: {
+colorPalette: "primary";
+};
+};
+critical: {
+button: {
+colorPalette: "critical";
+};
+};
+neutral: {
+button: {
+colorPalette: "neutral";
+};
+};
+};
+}>;
+
+/**
+ * ToggleButtonGroup
+ * ============================================================
+ * To group multiple `Button` components together, visually and logically, representing a set of related actions.
+ */
+export declare const ToggleButtonGroup: {
+    Root: ToggleButtonGroupRootComponent_2;
+    Button: ToggleButtonGroupButtonComponent_2;
+};
+
+export declare const _ToggleButtonGroupButton: ToggleButtonGroupButtonComponent;
+
+/** Type signature for the `ToggleButtonGroup.Button` sub-component. */
+export declare type ToggleButtonGroupButtonComponent = React.FC<ToggleButtonGroupButtonProps>;
+
+/** Combined props for the button element (Chakra styles + Aria behavior). */
+export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps & {
+    ref?: React.Ref<typeof ToggleButton>;
+};
+
+/** Base Chakra styling props for the `button` slot. */
+declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
+
+/** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
+export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps> & {
+    ref?: React.Ref<typeof ToggleButtonGroup_2>;
+};
+
+export declare const _ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
+
+/** Type signature for the main `ToggleButtonGroup` component. */
+export declare type ToggleButtonGroupRootComponent = React.FC<ToggleButtonGroupProps>;
+
+/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
+declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps & RecipeVariantProps<typeof buttonGroupRecipe>;
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+export { }

package/dist/tooltip.d.ts

@@ -0,0 +1,134 @@
+import { FocusableOptions } from 'react-aria';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeVariantRecord } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
+import { TooltipTriggerComponentProps } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * For use in components that use the polymorphic `as` and `asChild` props
+ * internally, but do not make them available to the consumer.
+ *
+ * Long rambling background:
+ * React-Aria's components cannot be configured to use `as` and `asChild` internally,
+ * and cannot be directly styled by chakra's styledSystem. Therefore components
+ * from `react-aria-components` should be wrapped in a chakra `withContext`
+ * root component to set the styles onto the `r-a-c` component using `asChild`.
+ * This means that we need to allow polymorphism internally, but should not
+ * allow it in the external props api since it would not work.
+ */
+declare type ExcludePolymorphicFromProps<T> = Omit<T, "as" | "asChild">;
+
+/**
+ * MakeElementFocusable
+ * ============================================================
+ * A helper component that adds props from `react-aria`s `useFocusable` hook
+ * to its child so that it can be used as a trigger element for a `Tooltip`
+ *
+ * Caveats:
+ * - Using non-interactive elements as tooltip triggers is against ARIA best-practices,
+ *   it is your responsibility to ensure that the underlying trigger element handles
+ *   focus and hover interactions correctly for keyboard-only users
+ *
+ * Features:
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)
+ *
+ * Further Context:
+ * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
+ * - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)
+ * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
+ */
+export declare const MakeElementFocusable: ForwardRefExoticComponent<FocusableOptions<HTMLElement> & {
+children?: ReactNode | undefined;
+} & RefAttributes<HTMLElement>>;
+
+export declare const Tooltip: {
+    Root: typeof _TooltipRoot;
+    Content: typeof _TooltipContent;
+};
+
+/**
+ * TooltipContent
+ * ============================================================
+ * A contextual popup that displays a description for an element, uses `Tooltip` component from `react-aria-components`.
+ *
+ * Features:
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
+ * - allows overriding styles by using style-props
+ *
+ * Further Context:
+ * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
+ * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
+ */
+export declare function _TooltipContent({ children, placement, ref, ...props }: TooltipProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace _TooltipContent {
+    var displayName: string;
+}
+
+/**
+ * Main props interface for the Tooltip components
+ * Extends TooltipVariantProps to include root props, variant props,
+ * and react-aria props, while adding support for React children.
+ */
+export declare interface TooltipProps extends PropsWithChildren<TooltipVariantProps> {
+}
+
+/**
+ * Recipe configuration for the Tooltip component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const tooltipRecipe: RecipeDefinition<RecipeVariantRecord>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ */
+declare interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {
+}
+
+/**
+ * TooltipRoot
+ * ============================================================
+ * Root component that wraps around a trigger element and Tooltip content.
+ * It handles opening and closing the Tooltip when the user hovers over or focuses the trigger,
+ * and positioning the Tooltip relative to the trigger.
+ *
+ * This acts as the context provider for the compound Tooltip component.
+ */
+export declare function _TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): JSX.Element;
+
+export declare namespace _TooltipRoot {
+    var displayName: string;
+}
+
+/**
+ * Root props interface that extends Chakra's HTML props with our recipe props.
+ * This creates a complete set of props for the root element, combining
+ * HTML attributes, Chakra's styling system, and our custom recipe props.
+ */
+declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeProps> {
+}
+
+/**
+ * Combines the root props with Chakra UI's recipe variant props, and
+ * react-aria-component's TooltipProps
+ * This allows the component to accept:
+ * - structural props from Root
+ * - styling variants from the recipe
+ * - a11y/state related props from react-aria-components Tooltip
+ */
+declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
+
+export { }

package/dist/visually-hidden.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react/jsx-runtime';
+import { VisuallyHiddenProps as VisuallyHiddenProps_2 } from 'react-aria';
+
+export declare const VisuallyHidden: {
+    (props: VisuallyHiddenProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2, "elementType"> {
+    /** specifies the element type to render, use `span` for inline content
+     * and `div` for block content */
+    as?: "span" | "div";
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.9-rc6",
+  "version": "0.0.9-rc8",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "type": "module",
@@ -62,7 +62,7 @@
     "@storybook/react-vite": "^9.0.13",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.2.4",
@@ -70,16 +70,18 @@
     "@vueless/storybook-dark-mode": "^9.0.5",
     "apca-w3": "^0.1.9",
     "axe-core": "^4.10.2",
+    "glob": "^11.0.3",
     "playwright": "^1.52.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rollup-plugin-tree-shakeable": "^1.0.3",
     "storybook": "^9.0.13",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-tokens": "^0.0.3",
-    "@commercetools/nimbus-icons": "^0.0.4"
+    "@commercetools/nimbus-icons": "^0.0.4",
+    "@commercetools/nimbus-tokens": "^0.0.3"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.19.2",