@commercetools/nimbus 0.0.0-canary-20250919154858 → 0.0.0-canary-20250922152719

package/dist/time-input.d.ts

@@ -3,18 +3,18 @@ import { JSX } from 'react/jsx-runtime';
 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 { TimeFieldProps } from 'react-aria-components';
 import { TimeValue } from 'react-aria';
 import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
- * Properties from TimeFieldStateOptions that would conflict with similarly named
+ * Properties from TimeFieldProps that would conflict with similarly named
  * properties in TimeInputRootProps. We use this to prevent TypeScript interface
- * merging conflicts by prioritizing the TimeFieldStateOptions implementation.
+ * merging conflicts by prioritizing the TimeFieldProps implementation.
  *
  * Examples include: value, defaultValue, onChange, onBlur, onFocus, etc.
  */
-declare type ConflictingFieldStateProps = keyof TimeFieldStateOptions<TimeValue>;
+declare type ConflictingFieldStateProps = keyof TimeFieldProps<TimeValue>;
 
 /**
  * Additional properties we want to exclude from the TimeInput component.
@@ -39,33 +39,69 @@ export declare const TimeInput: {
  * 1. Conflicting props from TimeInputRootProps to avoid TypeScript errors
  * 2. Explicitly excluded props that we don't want users to access
  */
-export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps>, Omit<TimeFieldStateOptions<TimeValue>, ExcludedProps>, RecipeVariantProps<typeof timeInputRecipe> {
+export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps>, Omit<TimeFieldProps<TimeValue>, ExcludedProps>, RecipeVariantProps<typeof timeInputRecipe> {
+    /**
+     * Optional element to display at the start of the input
+     * Will respect text direction (left in LTR, right in RTL)
+     */
+    leadingElement?: React.ReactNode;
+    /**
+     * Optional element to display at the end of the input
+     * Will respect text direction (right in LTR, left in RTL)
+     */
+    trailingElement?: React.ReactNode;
 }
 
 /**
  * Recipe configuration for the TimeInput component.
  * Defines the styling variants and base styles using Chakra UI's recipe system.
  */
-declare const timeInputRecipe: SlotRecipeDefinition<"root" | "segmentGroup" | "segment", {
+declare const timeInputRecipe: SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", {
 size: {
 sm: {
-segmentGroup: {
+root: {
 h: number;
-textStyle: "sm";
+gap: number;
 px: number;
 };
+segment: {
+textStyle: "sm";
+};
+leadingElement: {
+"& svg": {
+boxSize: "400";
+};
+};
+trailingElement: {
+"& svg": {
+boxSize: "400";
+};
+};
 };
 md: {
-segmentGroup: {
+root: {
 h: number;
-textStyle: "md";
+gap: number;
 px: number;
 };
+segment: {
+textStyle: "md";
+};
+leadingElement: {
+"& svg": {
+boxSize: "500";
+};
+};
+trailingElement: {
+"& svg": {
+boxSize: "500";
+};
+};
 };
 };
 variant: {
 solid: {
-segmentGroup: {
+root: {
 "--border-width": "sizes.25";
 "--border-color": "colors.neutral.7";
 backgroundColor: "neutral.1";
@@ -75,7 +111,7 @@ backgroundColor: "primary.2";
 };
 };
 ghost: {
-segmentGroup: {
+root: {
 _hover: {
 backgroundColor: "primary.2";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.0-canary-20250919154858",
+  "version": "0.0.0-canary-20250922152719",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "type": "module",
@@ -93,15 +93,15 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20250919154858",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250919154858"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20250922152719",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250922152719"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.26.0",
     "react": "^19.0.0",
     "react-intl": "^7.1.11",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20250919154858",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250919154858"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20250922152719",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20250922152719"
   },
   "scripts": {
     "build": "pnpm run build-theme-typings && pnpm run build:lib",