@ultraviolet/ui 3.0.0-beta.24 → 3.0.0-beta.25

package/dist/components/Toggle/index.js

@@ -22,7 +22,8 @@ const Toggle = forwardRef(({
   "data-testid": dataTestId,
   value,
   error,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const uniqueId = useId();
   return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("label", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${label({
@@ -41,7 +42,7 @@ const Toggle = forwardRef(({
       disabled,
       error: !!error,
       size
-    }), children: /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, type: "checkbox", value }) })
+    }), children: /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, style, type: "checkbox", value }) })
   ] }) });
 });
 export {

package/dist/components/ToggleGroup/index.cjs

@@ -17,7 +17,8 @@ const ToggleGroupToggle = ({
   helper,
   error,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = react.useContext(ToggleGroupContext);
   if (!context) {
@@ -31,7 +32,7 @@ const ToggleGroupToggle = ({
   } = context;
   const ToggleName = `${groupName}.${name}`;
   const ToggleValue = `${value}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(index$3.Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, value: ToggleValue });
+  return /* @__PURE__ */ jsxRuntime.jsx(index$3.Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, style, value: ToggleValue });
 };
 const ToggleGroup = ({
   legend,
@@ -45,7 +46,8 @@ const ToggleGroup = ({
   onChange,
   name,
   description,
-  required = false
+  required = false,
+  style
 }) => {
   const contextValue = react.useMemo(() => ({
     error: !!error,
@@ -54,7 +56,7 @@ const ToggleGroup = ({
     onChange
   }), [name, value, onChange, error]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.fieldset}`, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1.5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.fieldset}`, style, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 0.5, children: [
         legend ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
         description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null

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

@@ -6,7 +6,7 @@ type ToggleGroupToggleProps = Omit<ComponentProps<typeof Toggle>, 'onChange' | '
 /**
  * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
  */
-export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 type ToggleGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -18,9 +18,9 @@ type ToggleGroupProps = {
     children: ReactNode;
     required?: boolean;
     description?: ReactNode;
-} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required' | 'style'>;
 export declare const ToggleGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/ToggleGroup/index.js

@@ -15,7 +15,8 @@ const ToggleGroupToggle = ({
   helper,
   error,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = useContext(ToggleGroupContext);
   if (!context) {
@@ -29,7 +30,7 @@ const ToggleGroupToggle = ({
   } = context;
   const ToggleName = `${groupName}.${name}`;
   const ToggleValue = `${value}`;
-  return /* @__PURE__ */ jsx(Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, value: ToggleValue });
+  return /* @__PURE__ */ jsx(Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, style, value: ToggleValue });
 };
 const ToggleGroup = ({
   legend,
@@ -43,7 +44,8 @@ const ToggleGroup = ({
   onChange,
   name,
   description,
-  required = false
+  required = false,
+  style
 }) => {
   const contextValue = useMemo(() => ({
     error: !!error,
@@ -52,7 +54,7 @@ const ToggleGroup = ({
     onChange
   }), [name, value, onChange, error]);
   return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, style, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
         legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
         description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null

package/dist/components/UnitInput/index.cjs

@@ -44,7 +44,8 @@ const UnitInput = ({
   onBlur,
   onKeyDown,
   dropdownAlign,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const [val, setVal] = react.useState(value);
   const localId = react.useId();
@@ -93,7 +94,7 @@ const UnitInput = ({
             setVal(numericValue);
             onChange?.(numericValue);
           }
-        }, placeholder, readOnly, required, step, type: "number", value: val }),
+        }, placeholder, readOnly, required, step, style, type: "number", value: val }),
         error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.AlertCircleIcon, { sentiment: "danger" }) : null,
         success && !error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleIcon, { sentiment: "success" }) : null
       ] }),

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

@@ -30,6 +30,6 @@ type UnitInputProps = {
     step?: number | string;
     dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign'];
     templateColumns?: ComponentProps<typeof Row>['templateColumns'];
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown'>;
-export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style'>;
+export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UnitInput/index.js

@@ -42,7 +42,8 @@ const UnitInput = ({
   onBlur,
   onKeyDown,
   dropdownAlign,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const [val, setVal] = useState(value);
   const localId = useId();
@@ -91,7 +92,7 @@ const UnitInput = ({
             setVal(numericValue);
             onChange?.(numericValue);
           }
-        }, placeholder, readOnly, required, step, type: "number", value: val }),
+        }, placeholder, readOnly, required, step, style, type: "number", value: val }),
         error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
         success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
       ] }),

package/dist/components/VerificationCode/index.cjs

@@ -27,7 +27,8 @@ const VerificationCode = ({
   label,
   labelDescription,
   helper,
-  success
+  success,
+  style
 }) => {
   const uniqueId = react.useId();
   const id = inputId || uniqueId;
@@ -137,7 +138,7 @@ const VerificationCode = ({
     }
     return "neutral";
   }, [error, success]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.filedSetClass}`, "data-testid": dataTestId, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.filedSetClass}`, "data-testid": dataTestId, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsxRuntime.jsx(index.Label, { htmlFor: `${id}-0`, id: `${id}-label`, labelDescription, required, size: size === "xlarge" ? "large" : size, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: values.map((value, index2) => /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": `${ariaLabel} ${index2}`, autoComplete: "off", className: `${styles_css.inputSizes[size]} ${styles_css.inputClass}`, "data-success": !!success, "data-testid": index2, disabled, id: `${id}-${index2}`, onChange: inputOnChange(index2), onFocus: inputOnFocus, onKeyDown: inputOnKeyDown(index2), onPaste: inputOnPaste(index2), pattern: type === "number" ? "[0-9]*" : void 0, placeholder: placeholder?.[index2] ?? "", ref: inputRefs[index2], required, type: type === "number" ? "tel" : type, value }, `field-${index2}`)) }),
     error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export declare const verificationCodeSizes: Size[];
 type VerificationCodeProps = {
@@ -33,9 +33,10 @@ type VerificationCodeProps = {
     labelDescription?: ReactNode;
     helper?: ReactNode;
     success?: boolean | string;
+    style?: CSSProperties;
 };
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, }: VerificationCodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VerificationCode/index.js

@@ -25,7 +25,8 @@ const VerificationCode = ({
   label,
   labelDescription,
   helper,
-  success
+  success,
+  style
 }) => {
   const uniqueId = useId();
   const id = inputId || uniqueId;
@@ -135,7 +136,7 @@ const VerificationCode = ({
     }
     return "neutral";
   }, [error, success]);
-  return /* @__PURE__ */ jsxs("fieldset", { className: `${className ? `${className} ` : ""}${filedSetClass}`, "data-testid": dataTestId, children: [
+  return /* @__PURE__ */ jsxs("fieldset", { className: `${className ? `${className} ` : ""}${filedSetClass}`, "data-testid": dataTestId, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-0`, id: `${id}-label`, labelDescription, required, size: size === "xlarge" ? "large" : size, children: label }) : null,
     /* @__PURE__ */ jsx("div", { children: values.map((value, index) => /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": `${ariaLabel} ${index}`, autoComplete: "off", className: `${inputSizes[size]} ${inputClass}`, "data-success": !!success, "data-testid": index, disabled, id: `${id}-${index}`, onChange: inputOnChange(index), onFocus: inputOnFocus, onKeyDown: inputOnKeyDown(index), onPaste: inputOnPaste(index), pattern: type === "number" ? "[0-9]*" : void 0, placeholder: placeholder?.[index] ?? "", ref: inputRefs[index], required, type: type === "number" ? "tel" : type, value }, `field-${index}`)) }),
     error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,