@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/EstimateCost/Components/LineThrough.js

@@ -0,0 +1,13 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+const LineThrough = styled("span", {
+  shouldForwardProp: (prop) => !["isActive"].includes(prop)
+})`
+  ${({ isActive, theme }) => isActive ? css`
+          text-decoration-line: line-through;
+          text-decoration-color: ${theme.colors.warning.border};
+        ` : null}
+`;
+export {
+  LineThrough
+};

package/dist/components/EstimateCost/Components/NumberInput.d.ts

@@ -0,0 +1,9 @@
+type NumberInputProps = {
+    amount?: number;
+    itemCallback?: (amount?: number | null, isVariant?: boolean) => void;
+    getAmountValue?: (amount?: number | null) => void;
+    minValue?: number;
+    maxValue?: number;
+};
+export declare const NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, }: NumberInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/NumberInput.js

@@ -0,0 +1,36 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NumberInputV2 } from "@ultraviolet/ui";
+import { useState, useEffect } from "react";
+import { useOverlay } from "../OverlayContext.js";
+import { ItemResourceName } from "../componentStyle.js";
+import { Regular } from "./Regular.js";
+const NumberInput = ({
+  amount,
+  minValue = 0,
+  maxValue = 100,
+  getAmountValue,
+  itemCallback
+}) => {
+  const { isOverlay } = useOverlay();
+  const [value, setValue] = useState(amount);
+  useEffect(() => {
+    getAmountValue?.(amount);
+  }, [getAmountValue, amount]);
+  return isOverlay ? /* @__PURE__ */ jsx(ItemResourceName, { animated: false, children: /* @__PURE__ */ jsx(Regular, { children: amount }) }) : /* @__PURE__ */ jsx(
+    NumberInputV2,
+    {
+      min: minValue,
+      max: maxValue,
+      size: "small",
+      onChange: (newValue) => {
+        setValue(newValue);
+        itemCallback?.(newValue, true);
+        getAmountValue?.(newValue);
+      },
+      value
+    }
+  );
+};
+export {
+  NumberInput
+};

package/dist/components/EstimateCost/Components/Region.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
+import { Item } from './Item';
+type RegionProps = {
+    shouldBeHidden?: boolean;
+    priceText?: ReactNode;
+    animated?: boolean;
+    isFirstElement?: boolean;
+    isLastElement?: boolean;
+    productsCallback?: {
+        add: (product: EstimateProduct) => void;
+        remove: (product: BareEstimateProduct) => void;
+    };
+    iteration?: Iteration;
+    discount?: number;
+    label: string;
+    image: string;
+    noBorder?: boolean;
+    noPrice?: boolean;
+} & Pick<ComponentProps<typeof Item>, 'hideFromOverlay'>;
+export declare const Region: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/Region.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEstimateCost } from "../EstimateCostProvider.js";
+import { Item } from "./Item.js";
+import { Strong } from "./Strong.js";
+const StyledImage = styled.img`
+  width: 15px;
+  margin-right: ${({ theme }) => theme.space["1"]};
+`;
+const Region = ({
+  label,
+  image,
+  shouldBeHidden = false,
+  priceText,
+  animated = false,
+  isFirstElement,
+  isLastElement,
+  productsCallback,
+  iteration,
+  discount,
+  noBorder,
+  noPrice,
+  hideFromOverlay
+}) => {
+  const { locales } = useEstimateCost();
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      label: locales["estimate.cost.region.label"],
+      shouldBeHidden,
+      priceText,
+      animated,
+      isFirstElement,
+      isLastElement,
+      productsCallback,
+      iteration,
+      discount,
+      noBorder,
+      noPrice,
+      hideFromOverlay,
+      children: /* @__PURE__ */ jsxs(Strong, { children: [
+        /* @__PURE__ */ jsx(StyledImage, { alt: label, src: image }),
+        label
+      ] })
+    }
+  );
+};
+export {
+  Region
+};

package/dist/components/EstimateCost/Components/Regular.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type RegularProps = {
+    variant?: 'normal' | 'small' | 'big' | 'capitalized';
+    isDisabledOnOverlay?: boolean;
+    children?: ReactNode;
+    className?: string;
+};
+export declare const Regular: ({ variant, isDisabledOnOverlay, children, className, }: RegularProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/EstimateCost/Components/Regular.js

@@ -0,0 +1,41 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useOverlay } from "../OverlayContext.js";
+const StyledRegular = styled("div", {
+  shouldForwardProp: (prop) => !["variant", "isOverlay"].includes(prop)
+})`
+  display: ${({ isOverlay }) => isOverlay ? "flex" : "inline-flex"};
+  max-width: 500px;
+  align-items: center;
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.neutral.textStrong};
+  margin-right: 4px;
+
+  ${({ theme, variant }) => variant === "small" && css`
+      display: block;
+      font-size: 14px;
+      line-height: 8px;
+      color: ${theme.colors.neutral.text};
+    `};
+`;
+const Regular = ({
+  variant = "normal",
+  isDisabledOnOverlay = false,
+  children = null,
+  className
+}) => {
+  const { isOverlay } = useOverlay();
+  return !isDisabledOnOverlay || !isOverlay ? /* @__PURE__ */ jsx(
+    StyledRegular,
+    {
+      className,
+      variant,
+      isOverlay,
+      children
+    }
+  ) : null;
+};
+export {
+  Regular
+};

package/dist/components/EstimateCost/Components/Strong.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+type StrongProps = {
+    variant?: 'normal' | 'small' | 'big' | 'capitalized';
+    children?: ReactNode;
+    isDisabledOnOverlay?: boolean;
+};
+export declare const StyledStrong: import("@emotion/styled").StyledComponent<{
+    variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+    isDisabledOnOverlay?: boolean | undefined;
+    children?: ReactNode;
+    className?: string | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & StrongProps, {}, {}>;
+export declare const Strong: ({ variant, children, isDisabledOnOverlay, }: StrongProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/Strong.js

@@ -0,0 +1,23 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Regular } from "./Regular.js";
+const StyledStrong = styled(Regular, {
+  shouldForwardProp: (prop) => !["variant"].includes(prop)
+})`
+  display: inline-flex;
+  align-items: center;
+  font-size: ${({ variant }) => variant === "big" ? 24 : 16}px;
+  ${({ variant }) => variant === "capitalized" ? `text-transform: capitalize;` : ""}
+  color: ${({ theme }) => theme.colors.neutral.textStrong};
+  font-weight: 500;
+  margin-right: 4px;
+`;
+const Strong = ({
+  variant = "normal",
+  children = null,
+  isDisabledOnOverlay = false
+}) => /* @__PURE__ */ jsx(StyledStrong, { variant, isDisabledOnOverlay, children });
+export {
+  Strong,
+  StyledStrong
+};

package/dist/components/EstimateCost/Components/Unit.d.ts

@@ -0,0 +1,8 @@
+type UnitProps = {
+    amount?: number;
+    itemCallback?: (amount?: number, isVariant?: boolean) => void;
+    getAmountValue?: (amount?: number) => void;
+    unit?: string;
+};
+export declare const Unit: ({ amount, itemCallback, getAmountValue, unit, }: UnitProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/Unit.js

@@ -0,0 +1,54 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { TextInput } from "@ultraviolet/ui";
+import { useState, useEffect } from "react";
+import { useOverlay } from "../OverlayContext.js";
+import { ItemResourceName } from "../componentStyle.js";
+import { Regular } from "./Regular.js";
+const StyledTextInput = styled(TextInput)`
+  /* Removes arrows for an input type number */
+  /* Chrome, Safari, Edge, Opera */
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+const Unit = ({
+  amount,
+  itemCallback,
+  getAmountValue,
+  unit
+}) => {
+  const { isOverlay } = useOverlay();
+  const [capacity, setCapacity] = useState(amount === 0 ? void 0 : amount);
+  useEffect(() => {
+    itemCallback?.(capacity, true);
+    getAmountValue?.(capacity);
+  }, [getAmountValue, itemCallback, capacity]);
+  return isOverlay ? /* @__PURE__ */ jsx(ItemResourceName, { animated: false, children: /* @__PURE__ */ jsx(Regular, { children: capacity }) }) : /* @__PURE__ */ jsx("div", { style: { width: "150px" }, children: /* @__PURE__ */ jsx(
+    StyledTextInput,
+    {
+      type: "number",
+      size: "small",
+      unit,
+      placeholder: "00",
+      name: "capacity",
+      value: capacity?.toString(),
+      onChange: (capacityText) => {
+        setCapacity(Number(capacityText) < 0 ? 0 : Number(capacityText));
+        getAmountValue?.(capacity);
+      }
+    }
+  ) });
+};
+export {
+  Unit
+};

package/dist/components/EstimateCost/Components/UnitInput.d.ts

@@ -0,0 +1,33 @@
+import { SelectInput, TextInput } from '@ultraviolet/ui';
+import type { ComponentProps, FocusEvent } from 'react';
+type SelectOption = Exclude<NonNullable<ComponentProps<typeof SelectInput>['value']>, string>;
+export declare const sizesHeight: Record<string, number>;
+type UnitInputValue = {
+    inputValue: number;
+    unit: SelectOption['value'];
+};
+type UnitInputProps = {
+    className?: string;
+    name: string;
+    disabled?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    value?: UnitInputValue['inputValue'];
+    unitValue?: UnitInputValue['unit'];
+    onChange: (value: UnitInputValue['inputValue']) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChangeUnitValue: (value: UnitInputValue['unit']) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    size?: string;
+    textBoxWidth?: string | number;
+    'data-testid'?: string;
+    notice?: ComponentProps<typeof TextInput>['notice'];
+    label?: ComponentProps<typeof TextInput>['label'];
+    required?: boolean;
+    valueError?: string;
+    unitError?: string;
+    type?: ComponentProps<typeof TextInput>['type'];
+};
+export declare const UnitInput: ({ name, maxValue, minValue, size, placeholder, onChange, onBlur, onChangeUnitValue, value, unitValue, textBoxWidth, disabled, options, className, notice, label, required, valueError, unitError, type, "data-testid": dataTestId, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/UnitInput.js

@@ -0,0 +1,136 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { TextInput, SelectInput, Row } from "@ultraviolet/ui";
+const sizesHeight = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const CustomTextInput = styled(TextInput)`
+  input {
+    border-radius: ${({ theme }) => theme.radii.default} 0 0
+      ${({ theme }) => theme.radii.default};
+    min-width: 60px;
+    border-right: 0;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-right-width: 1px;
+      border-right-style: solid;
+      border-color: ${({ theme }) => theme.colors.primary.borderWeak};
+    }
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+const CustomSelectInput = styled(SelectInput)`
+  ${({ width }) => width && `width: ${width}px;`}
+  ${({ height }) => height && `height: ${height}px;`}
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    border-color: ${({ theme }) => theme.colors.primary.borderWeak};
+    box-shadow: none;
+  }
+`;
+const customSelectStyle = (height) => () => ({
+  control: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: "none",
+    height,
+    minHeight: height
+  },
+  singleValue: {
+    marginTop: 0
+  }
+});
+const UnitInput = ({
+  name = "",
+  maxValue = 99999,
+  minValue = 1,
+  size = "medium",
+  placeholder = "0",
+  onChange,
+  onBlur,
+  onChangeUnitValue,
+  value,
+  unitValue,
+  textBoxWidth = 100,
+  disabled = false,
+  options,
+  className,
+  notice,
+  label,
+  required,
+  valueError,
+  unitError,
+  type = "number",
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr auto", "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsx(
+    CustomTextInput,
+    {
+      height: sizesHeight[size],
+      width: textBoxWidth,
+      type,
+      name: `${name}-value`,
+      max: maxValue,
+      min: minValue,
+      required,
+      value,
+      placeholder,
+      onChange: (input) => {
+        const numericValue = parseInt(input, 10);
+        onChange(numericValue);
+      },
+      onBlur: (event) => {
+        const numericValue = parseInt(event.target.value, 10);
+        if (Number.isNaN(numericValue) || numericValue < minValue) {
+          onChange(minValue);
+        }
+        if (numericValue > maxValue) {
+          onChange(maxValue);
+        }
+        onBlur?.(event);
+      },
+      className,
+      disabled,
+      notice,
+      label,
+      error: valueError
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    CustomSelectInput,
+    {
+      noTopLabel: true,
+      height: sizesHeight[size],
+      id: `${name}-unit`,
+      name: `${name}-unit`,
+      onChange: (newValue) => {
+        onChangeUnitValue(newValue.value);
+      },
+      error: unitError,
+      value: options.find((option) => option.value === unitValue) || options[0],
+      options,
+      customStyle: customSelectStyle(sizesHeight[size]),
+      disabled: disabled || options.length === 1
+    }
+  )
+] });
+export {
+  UnitInput,
+  sizesHeight
+};

package/dist/components/EstimateCost/Components/Zone.d.ts

@@ -0,0 +1,20 @@
+import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
+type RegionProps = {
+    shouldBeHidden?: boolean;
+    priceText?: string;
+    animated?: boolean;
+    isFirstElement?: boolean;
+    isLastElement?: boolean;
+    productsCallback?: {
+        add: (product: EstimateProduct) => void;
+        remove: (product: BareEstimateProduct) => void;
+    };
+    iteration?: Iteration;
+    discount?: number;
+    label: string;
+    image: string;
+    noBorder?: boolean;
+    noPrice?: boolean;
+};
+export declare const Zone: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EstimateCost/Components/Zone.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEstimateCost } from "../EstimateCostProvider.js";
+import { Item } from "./Item.js";
+import { Strong } from "./Strong.js";
+const StyledImage = styled.img`
+  width: 15px;
+  margin-right: ${({ theme }) => theme.space["1"]};
+`;
+const Zone = ({
+  label,
+  image,
+  shouldBeHidden = false,
+  priceText,
+  animated = false,
+  isFirstElement,
+  isLastElement,
+  productsCallback,
+  iteration,
+  discount,
+  noBorder,
+  noPrice
+}) => {
+  const { locales } = useEstimateCost();
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      label: locales["estimate.cost.az.label"],
+      shouldBeHidden,
+      priceText,
+      animated,
+      isFirstElement,
+      isLastElement,
+      productsCallback,
+      iteration,
+      discount,
+      noBorder,
+      noPrice,
+      children: /* @__PURE__ */ jsxs(Strong, { children: [
+        /* @__PURE__ */ jsx(StyledImage, { alt: label, src: image }),
+        label
+      ] })
+    }
+  );
+};
+export {
+  Zone
+};