@commercetools/nimbus 0.0.11 → 0.0.13-rc1

package/dist/stack.d.ts

@@ -1,6 +1,13 @@
 import { JSX } from 'react/jsx-runtime';
-import { StackProps as StackProps_2 } from '@chakra-ui/react';
+import { StackProps as StackProps_2 } from '@chakra-ui/react/stack';
 
+/**
+ * # Stack
+ *
+ * An easily customizable Stack component, re-exported from Chakra UI, that provides a consistent layout structure across different products.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/stack}
+ */
 export declare const Stack: {
     (props: StackProps): JSX.Element;
     displayName: string;

package/dist/switch.d.ts

@@ -1,7 +1,7 @@
 import { AriaCheckboxProps } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 
 /**
@@ -10,9 +10,11 @@ import { SlotRecipeDefinition } from '@chakra-ui/react';
 declare type ExcludedSwitchProps = "asChild" | "isIndeterminate" | "colorScheme" | "validationState" | "validationBehavior" | "validate";
 
 /**
- * Switch
- * ============================================================
- * displays a switch toggle and optionally an associated label
+ * # Switch
+ *
+ * A clear, visual toggle, allowing users to activate or deactivate a setting quickly.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/switch}
  */
 export declare const Switch: {
     ({ ref: externalRef, ...props }: SwitchProps): JSX.Element;

package/dist/table.d.ts

@@ -1,4 +1,4 @@
-import { Table } from '@chakra-ui/react';
+import { Table } from '@chakra-ui/react/table';
 
 export { Table }
 

package/dist/tag-group.d.ts

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { JSX } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
-import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { RefAttributes } from 'react';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { Tag } from 'react-aria-components';

package/dist/text-input.d.ts

@@ -1,21 +1,16 @@
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { JSX } from 'react/jsx-runtime';
 import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { TextFieldProps } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
- * TextInput
- * ============================================================
- * An input component that takes in text as input
+ * # TextInput
  *
- * Features:
+ * An input component that takes in a text as input
  *
- * - allows forwarding refs to the underlying DOM element
- * - accepts all native html 'HTMLInputElement' attributes (including aria- & data-attributes)
- * - supports 'variants', 'sizes', etc. configured in the recipe
- * - allows overriding styles by using style-props
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}
  */
 export declare const TextInput: {
     (props: TextInputProps): JSX.Element;

package/dist/text.d.ts

@@ -1,10 +1,12 @@
 import { JSX } from 'react/jsx-runtime';
-import { TextProps as TextProps_2 } from '@chakra-ui/react';
+import { TextProps as TextProps_2 } from '@chakra-ui/react/typography';
 
 /**
- * Text
+ * # Text
  *
- * Use this component to display text.
+ * the Text component is used to display text
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/text}
  */
 declare const Text_2: {
     ({ ref: forwardedRef, ...props }: TextProps): JSX.Element;

package/dist/time-input.d.ts

@@ -1,11 +1,11 @@
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { TimeFieldStateOptions } from 'react-stately';
 import { TimeValue } from 'react-aria';
-import { UnstyledProp } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
  * Properties from TimeFieldStateOptions that would conflict with similarly named

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

@@ -1,9 +1,9 @@
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { PropsWithChildren } from 'react';
-import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { ToggleButton } from 'react-aria-components';
 import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
@@ -93,6 +93,13 @@ export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroup
     ref?: React.Ref<typeof ToggleButtonGroup_2>;
 };
 
+/**
+ * # ToggleButtonGroup
+ *
+ * A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebuttongroup}
+ */
 export declare const _ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
 
 /** Type signature for the main `ToggleButtonGroup` component. */

package/dist/toggle-button.d.ts

@@ -0,0 +1,144 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
+
+/**
+ * Additional properties we want to exclude from the ToggleButton component.
+ * These are chakra-ui props we don't want exposed for non-polymorphic components.
+ */
+declare type ExcludedProps = "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
+/**
+ * # ToggleButton
+ *
+ * A toggleable button component that can be pressed to switch between
+ * selected and unselected states.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebutton}
+ */
+export declare const ToggleButton: {
+    ({ ref: forwardedRef, ...props }: ToggleButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ToggleButtonProps extends ToggleButtonProps_2, Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> {
+    /**
+     * Ref to the underlying button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
+declare const toggleButtonRecipe: RecipeDefinition<    {
+size: {
+"2xs"?: {
+h: "600";
+minW: "600";
+fontSize: "300";
+fontWeight: "500";
+lineHeight: "400";
+px: "200";
+gap: "100";
+_icon: {
+width: "400";
+height: "400";
+};
+} | undefined;
+xs?: {
+h: "800";
+minW: "800";
+fontSize: "350";
+fontWeight: "500";
+lineHeight: "400";
+px: "300";
+gap: "100";
+_icon: {
+width: "500";
+height: "500";
+};
+} | undefined;
+md?: {
+h: "1000";
+minW: "1000";
+fontSize: "400";
+lineHeight: "500";
+px: "400";
+gap: "200";
+_icon: {
+width: "600";
+height: "600";
+};
+} | undefined;
+};
+variant: {
+outline: {
+"--button-bg": "transparent";
+"--button-text": "{colors.colorPalette.11}";
+"--border-width": "{sizes.25}";
+"--border-color": "{colors.colorPalette.7}";
+bg: "var(--button-bg)";
+boxShadow: "0 0 0 var(--border-width) var(--border-color)";
+color: "var(--button-text)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+"--border-color": "{colors.colorPalette.8}";
+};
+"&[data-selected=true]": {
+"--button-bg": "{colors.colorPalette.3}";
+"--border-color": "{colors.colorPalette.8}";
+_hover: {
+"--button-bg": "{colors.colorPalette.4}";
+"--border-color": "{colors.colorPalette.9}";
+};
+};
+};
+ghost: {
+"--button-text": "{colors.neutral.11}";
+"--button-bg": "transparent";
+color: "var(--button-text)";
+bg: "var(--button-bg)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+};
+"&[data-selected='true']": {
+"--button-bg": "{colors.colorPalette.3}";
+"--button-text": "{colors.colorPalette.11}";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.4}";
+};
+};
+};
+};
+tone: {
+primary?: {
+colorPalette: "primary";
+} | undefined;
+critical?: {
+colorPalette: "critical";
+} | undefined;
+neutral?: {
+colorPalette: "neutral";
+} | undefined;
+info?: {
+colorPalette: "info";
+} | undefined;
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the toggle button element.
+ */
+declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof toggleButtonRecipe>, UnstyledProp {
+}
+
+/**
+ * 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 type ToggleButtonRootProps = HTMLChakraProps<"button", ToggleButtonRecipeProps>;
+
+export { }

package/dist/toolbar.d.ts

@@ -0,0 +1,73 @@
+import { FC } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { Ref } from 'react';
+import { ToolbarProps as ToolbarProps_2 } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+declare type DefaultExcludedProps = "css" | "asChild" | "as";
+
+export declare const Toolbar: ToolbarComponent;
+
+export declare type ToolbarComponent = FC<ToolbarProps>;
+
+export declare interface ToolbarProps extends Omit<ToolbarSlotProps, DefaultExcludedProps | "orientation" | "children" | "slot">, Omit<ToolbarProps_2, "orientation" | "className" | "style"> {
+    /**
+     * The orientation of the toolbar.
+     * Supports responsive values for different breakpoints.
+     * @default "horizontal"
+     */
+    orientation?: RecipeVariantProps<typeof toolbarRecipe>["orientation"];
+    ref?: Ref<HTMLDivElement>;
+}
+
+declare const toolbarRecipe: RecipeDefinition<    {
+size: {
+xs: {
+"--toolbar-spacing": "{spacing.100}";
+};
+md: {
+"--toolbar-spacing": "{spacing.200}";
+};
+};
+orientation: {
+horizontal: {
+"--toolbar-direction": "row";
+"& .nimbus-divider": {
+height: "auto";
+mx: "var(--toolbar-spacing)";
+};
+};
+vertical: {
+"--toolbar-direction": "column";
+"& .nimbus-divider": {
+my: "var(--toolbar-spacing)";
+};
+};
+};
+variant: {
+plain: {};
+outline: {
+boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the toolbar recipe.
+ */
+declare interface ToolbarRecipeProps extends RecipeProps<typeof toolbarRecipe>, UnstyledProp {
+}
+
+/**
+ * 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 ToolbarSlotProps extends HTMLChakraProps<"div", ToolbarRecipeProps> {
+}
+
+export { }

package/dist/tooltip.d.ts

@@ -1,17 +1,17 @@
 import { FocusableOptions } from 'react-aria';
 import { ForwardRefExoticComponent } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 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 { RecipeProps } from '@chakra-ui/react/styled-system';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 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';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
  * For use in components that use the polymorphic `as` and `asChild` props
@@ -99,13 +99,11 @@ 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.
+ * # Tooltip
+ *
+ * A contextual popup that displays a description for an element.
  *
- * This acts as the context provider for the compound Tooltip component.
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/tooltip}
  */
 export declare function _TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): JSX.Element;
 

package/dist/visually-hidden.d.ts

@@ -1,6 +1,13 @@
 import { JSX } from 'react/jsx-runtime';
 import { VisuallyHiddenProps as VisuallyHiddenProps_2 } from 'react-aria';
 
+/**
+ * # VisuallyHidden
+ *
+ * makes content accessible to screen readers but hides it visually
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/accessibility/visually-hidden}
+ */
 export declare const VisuallyHidden: {
     (props: VisuallyHiddenProps): JSX.Element;
     displayName: string;

package/i18n/compiled-data/core.json

@@ -0,0 +1,146 @@
+{
+  "Nimbus.alert.dismiss": [
+    {
+      "type": 0,
+      "value": "Dismiss"
+    }
+  ],
+  "Nimbus.avatar.avatar": [
+    {
+      "type": 0,
+      "value": "avatar"
+    }
+  ],
+  "Nimbus.calendar.nextMonth": [
+    {
+      "type": 0,
+      "value": "Next month"
+    }
+  ],
+  "Nimbus.calendar.nextYear": [
+    {
+      "type": 0,
+      "value": "Next year"
+    }
+  ],
+  "Nimbus.calendar.previousMonth": [
+    {
+      "type": 0,
+      "value": "Previous month"
+    }
+  ],
+  "Nimbus.calendar.previousYear": [
+    {
+      "type": 0,
+      "value": "Previous year"
+    }
+  ],
+  "Nimbus.combobox.clearSelection": [
+    {
+      "type": 0,
+      "value": "Clear selection"
+    }
+  ],
+  "Nimbus.combobox.comboboxDialog": [
+    {
+      "type": 0,
+      "value": "Combobox dialog"
+    }
+  ],
+  "Nimbus.combobox.comboboxOptions": [
+    {
+      "type": 0,
+      "value": "Combobox options"
+    }
+  ],
+  "Nimbus.combobox.filterComboboxOptions": [
+    {
+      "type": 0,
+      "value": "Filter combobox options"
+    }
+  ],
+  "Nimbus.combobox.selectedValues": [
+    {
+      "type": 0,
+      "value": "Selected values"
+    }
+  ],
+  "Nimbus.combobox.toggleCombobox": [
+    {
+      "type": 0,
+      "value": "Toggle combobox"
+    }
+  ],
+  "Nimbus.datePicker.clearInput": [
+    {
+      "type": 0,
+      "value": "Clear input value"
+    }
+  ],
+  "Nimbus.datePicker.time.enterTime": [
+    {
+      "type": 0,
+      "value": "Enter time"
+    }
+  ],
+  "Nimbus.datePicker.time.enterTimeHour": [
+    {
+      "type": 0,
+      "value": "Enter time (hour)"
+    }
+  ],
+  "Nimbus.datePicker.time.enterTimeHourMinute": [
+    {
+      "type": 0,
+      "value": "Enter time (hour and minute)"
+    }
+  ],
+  "Nimbus.datePicker.time.enterTimeHourMinuteSecond": [
+    {
+      "type": 0,
+      "value": "Enter time (hour, minute, and second)"
+    }
+  ],
+  "Nimbus.datePicker.time.startTime": [
+    {
+      "type": 0,
+      "value": "Start time"
+    }
+  ],
+  "Nimbus.loadingSpinner.default": [
+    {
+      "type": 0,
+      "value": "Loading data"
+    }
+  ],
+  "Nimbus.numberInput.decrement": [
+    {
+      "type": 0,
+      "value": "Decrement"
+    }
+  ],
+  "Nimbus.numberInput.increment": [
+    {
+      "type": 0,
+      "value": "Increment"
+    }
+  ],
+  "Nimbus.passwordInput.hide": [
+    {
+      "type": 0,
+      "value": "Hide password"
+    }
+  ],
+  "Nimbus.passwordInput.show": [
+    {
+      "type": 0,
+      "value": "Show password"
+    }
+  ],
+  "Nimbus.select.clearSelection": [
+    {
+      "type": 0,
+      "value": "Clear Selection"
+    }
+  ]
+}