@digital-ai/dot-components 5.9.0 → 5.10.0

package/index.esm.js

@@ -8591,6 +8591,7 @@ function DotCheckbox({
   className,
   'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
+  defaultChecked,
   disabled,
   disableRipple,
   id,
@@ -8616,6 +8617,7 @@ function DotCheckbox({
     color: "primary",
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
+    defaultChecked: defaultChecked,
     disableRipple: disableRipple,
     disabled: disabled,
     id: id,
@@ -14596,6 +14598,7 @@ function DotRadioButton({
   className,
   'data-pendoid': dataPendoId = rootClassName$X,
   'data-testid': dataTestId,
+  defaultChecked,
   disabled,
   id,
   inputRef,
@@ -14620,6 +14623,7 @@ function DotRadioButton({
     color: "primary",
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
+    defaultChecked: defaultChecked,
     disabled: disabled,
     id: id,
     inputRef: inputRef,
@@ -25857,13 +25861,13 @@ const DotChatBubble = ({
 };
 
 const rootClassName = 'dot-loading-dots';
-const dotAnimation = keyframes`
+const dotAnimation = y => keyframes`
   0%,
   100% {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-8px);
+    transform: translateY(${y}px);
   }
 `;
 const StyledLoadingDots = styled.div`
@@ -25871,7 +25875,8 @@ const StyledLoadingDots = styled.div`
   theme,
   $size,
   $duration,
-  $count
+  $count,
+  $verticalOffset
 }) => {
   const dotSize = typeof $size === 'number' ? `${$size}px` : $size;
   const spacing = typeof $size === 'number' ? `${$size * 0.75}px` : '6px';
@@ -25886,7 +25891,8 @@ const StyledLoadingDots = styled.div`
           height: ${dotSize};
           border-radius: 50%;
           background-color: ${theme.palette.figma.typography.black};
-          animation: ${dotAnimation} ${$duration}s infinite ease-in-out;
+          animation: ${dotAnimation($verticalOffset)} ${$duration}s infinite
+            ease-in-out;
 
           ${Array.from({
     length: $count
@@ -25910,7 +25916,8 @@ const DotLoadingDots = ({
   'data-pendoid': dataPendoId = rootClassName,
   'data-testid': dataTestId,
   size = 8,
-  speed = 0.8
+  speed = 0.8,
+  verticalOffset = -8
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName, className);
   useEffect(() => {
@@ -25929,6 +25936,7 @@ const DotLoadingDots = ({
     "$size": size,
     "$duration": animationDuration,
     "$count": dotCount,
+    "$verticalOffset": verticalOffset,
     children: Array.from({
       length: dotCount
     }, (_, i) => jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/checkbox/Checkbox.d.ts

@@ -9,4 +9,4 @@ export interface CheckboxProps extends RadioButtonProps {
     /** if true the checkbox will display with intermediate */
     indeterminate?: boolean;
 }
-export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, defaultChecked, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/loading-dots/LoadingDots.d.ts

@@ -6,5 +6,7 @@ export interface LoadingDotsProps extends CommonProps {
     size?: number | string;
     /** Animation speed multiplier (higher = faster) */
     speed?: number;
+    /** Vertical movement of the dots in pixels */
+    verticalOffset?: number;
 }
-export declare const DotLoadingDots: ({ ariaLabel, className, count, "data-pendoid": dataPendoId, "data-testid": dataTestId, size, speed, }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotLoadingDots: ({ ariaLabel, className, count, "data-pendoid": dataPendoId, "data-testid": dataTestId, size, speed, verticalOffset, }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/loading-dots/LoadingDots.styles.d.ts

@@ -3,6 +3,7 @@ interface StyledLoadingDotsProps {
     $count: number;
     $duration: number;
     $size: number | string;
+    $verticalOffset: number;
 }
 export declare const StyledLoadingDots: import("styled-components").StyledComponent<"div", any, StyledLoadingDotsProps, never>;
 export {};

package/src/lib/components/radio/RadioButton.d.ts

@@ -21,6 +21,8 @@ export interface RadioButtonBaseProps extends CommonProps {
 export interface RadioButtonProps extends RadioButtonBaseProps {
     /** if the radio button is selected */
     checked?: boolean;
+    /** the default checked state. Use when the component is not controlled. */
+    defaultChecked?: boolean;
     /** if true makes the radio button disabled */
     disabled?: boolean;
     /** text displayed next to the radio button */
@@ -28,4 +30,4 @@ export interface RadioButtonProps extends RadioButtonBaseProps {
     /** A function that should be executed when the value of the radio buttom changes */
     onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
 }
-export declare function DotRadioButton({ ariaLabel, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function DotRadioButton({ ariaLabel, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, defaultChecked, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;