analytica-frontend-lib 1.0.91 → 1.0.93

package/dist/CheckBox/CheckboxList/index.mjs

@@ -1,415 +0,0 @@
-// src/components/CheckBox/CheckboxList.tsx
-import {
-  forwardRef as forwardRef2,
-  useId as useId2,
-  useEffect,
-  useRef,
-  Children,
-  cloneElement,
-  isValidElement
-} from "react";
-import { create, useStore } from "zustand";
-
-// src/components/CheckBox/CheckBox.tsx
-import {
-  forwardRef,
-  useState,
-  useId
-} from "react";
-
-// src/utils/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/Text/Text.tsx
-import { jsx } from "react/jsx-runtime";
-var Text = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color = "text-text-950",
-  as,
-  className = "",
-  ...props
-}) => {
-  let sizeClasses = "";
-  let weightClasses = "";
-  const sizeClassMap = {
-    "2xs": "text-2xs",
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-    "2xl": "text-2xl",
-    "3xl": "text-3xl",
-    "4xl": "text-4xl",
-    "5xl": "text-5xl",
-    "6xl": "text-6xl"
-  };
-  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
-  const weightClassMap = {
-    hairline: "font-hairline",
-    light: "font-light",
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-    extrabold: "font-extrabold",
-    black: "font-black"
-  };
-  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
-  const baseClasses = "font-primary";
-  const Component = as ?? "p";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
-      ...props,
-      children
-    }
-  );
-};
-var Text_default = Text;
-
-// src/components/CheckBox/CheckBox.tsx
-import { Check, Minus } from "phosphor-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SIZE_CLASSES = {
-  small: {
-    checkbox: "w-4 h-4",
-    // 16px x 16px
-    textSize: "sm",
-    spacing: "gap-1.5",
-    // 6px
-    borderWidth: "border-2",
-    iconSize: 14,
-    // pixels for Phosphor icons
-    labelHeight: "h-[21px]"
-  },
-  medium: {
-    checkbox: "w-5 h-5",
-    // 20px x 20px
-    textSize: "md",
-    spacing: "gap-2",
-    // 8px
-    borderWidth: "border-2",
-    iconSize: 16,
-    // pixels for Phosphor icons
-    labelHeight: "h-6"
-  },
-  large: {
-    checkbox: "w-6 h-6",
-    // 24px x 24px
-    textSize: "lg",
-    spacing: "gap-2",
-    // 8px
-    borderWidth: "border-[3px]",
-    // 3px border
-    iconSize: 20,
-    // pixels for Phosphor icons
-    labelHeight: "h-[27px]"
-  }
-};
-var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
-var STATE_CLASSES = {
-  default: {
-    unchecked: "border-border-400 bg-background hover:border-border-500",
-    checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
-  },
-  hovered: {
-    unchecked: "border-border-500 bg-background",
-    checked: "border-primary-800 bg-primary-800 text-text"
-  },
-  focused: {
-    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
-    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
-  },
-  invalid: {
-    unchecked: "border-error-700 bg-background hover:border-error-600",
-    checked: "border-error-700 bg-primary-950 text-text"
-  },
-  disabled: {
-    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
-    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
-  }
-};
-var CheckBox = forwardRef(
-  ({
-    label,
-    size = "medium",
-    state = "default",
-    indeterminate = false,
-    errorMessage,
-    helperText,
-    className = "",
-    labelClassName = "",
-    checked: checkedProp,
-    disabled,
-    id,
-    onChange,
-    ...props
-  }, ref) => {
-    const generatedId = useId();
-    const inputId = id ?? `checkbox-${generatedId}`;
-    const [internalChecked, setInternalChecked] = useState(false);
-    const isControlled = checkedProp !== void 0;
-    const checked = isControlled ? checkedProp : internalChecked;
-    const handleChange = (event) => {
-      if (!isControlled) {
-        setInternalChecked(event.target.checked);
-      }
-      onChange?.(event);
-    };
-    const currentState = disabled ? "disabled" : state;
-    const sizeClasses = SIZE_CLASSES[size];
-    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
-    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
-    const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
-    const checkboxClasses = cn(
-      BASE_CHECKBOX_CLASSES,
-      sizeClasses.checkbox,
-      borderWidthClass,
-      stylingClasses,
-      className
-    );
-    const renderIcon = () => {
-      if (indeterminate) {
-        return /* @__PURE__ */ jsx2(
-          Minus,
-          {
-            size: sizeClasses.iconSize,
-            weight: "bold",
-            color: "currentColor"
-          }
-        );
-      }
-      if (checked) {
-        return /* @__PURE__ */ jsx2(
-          Check,
-          {
-            size: sizeClasses.iconSize,
-            weight: "bold",
-            color: "currentColor"
-          }
-        );
-      }
-      return null;
-    };
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-row items-center",
-            sizeClasses.spacing,
-            disabled ? "opacity-40" : ""
-          ),
-          children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                ref,
-                type: "checkbox",
-                id: inputId,
-                checked,
-                disabled,
-                onChange: handleChange,
-                className: "sr-only",
-                ...props
-              }
-            ),
-            /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ jsx2(
-              "div",
-              {
-                className: cn(
-                  "flex flex-row items-center",
-                  sizeClasses.labelHeight
-                ),
-                children: /* @__PURE__ */ jsx2(
-                  Text_default,
-                  {
-                    as: "label",
-                    htmlFor: inputId,
-                    size: sizeClasses.textSize,
-                    weight: "normal",
-                    className: cn(
-                      "cursor-pointer select-none leading-[150%] flex items-center font-roboto",
-                      labelClassName
-                    ),
-                    children: label
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      errorMessage && /* @__PURE__ */ jsx2(
-        Text_default,
-        {
-          size: "sm",
-          weight: "normal",
-          className: "mt-1.5",
-          color: "text-error-600",
-          children: errorMessage
-        }
-      ),
-      helperText && !errorMessage && /* @__PURE__ */ jsx2(
-        Text_default,
-        {
-          size: "sm",
-          weight: "normal",
-          className: "mt-1.5",
-          color: "text-text-500",
-          children: helperText
-        }
-      )
-    ] });
-  }
-);
-CheckBox.displayName = "CheckBox";
-var CheckBox_default = CheckBox;
-
-// src/components/CheckBox/CheckboxList.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var createCheckboxListStore = (name, defaultValues, disabled, onValuesChange) => create((set, get) => ({
-  values: defaultValues,
-  setValues: (values) => {
-    if (!get().disabled) {
-      set({ values });
-      get().onValuesChange?.(values);
-    }
-  },
-  toggleValue: (value) => {
-    if (!get().disabled) {
-      const currentValues = get().values;
-      const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
-      set({ values: newValues });
-      get().onValuesChange?.(newValues);
-    }
-  },
-  onValuesChange,
-  disabled,
-  name
-}));
-var useCheckboxListStore = (externalStore) => {
-  if (!externalStore) {
-    throw new Error("CheckboxListItem must be used within a CheckboxList");
-  }
-  return externalStore;
-};
-var injectStore = (children, store) => Children.map(children, (child) => {
-  if (!isValidElement(child)) return child;
-  const typedChild = child;
-  const shouldInject = typedChild.type === CheckboxListItem;
-  return cloneElement(typedChild, {
-    ...shouldInject ? { store } : {},
-    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
-  });
-});
-var CheckboxList = forwardRef2(
-  ({
-    values: propValues,
-    defaultValues = [],
-    onValuesChange,
-    name: propName,
-    disabled = false,
-    className = "",
-    children,
-    ...props
-  }, ref) => {
-    const generatedId = useId2();
-    const name = propName || `checkbox-list-${generatedId}`;
-    const storeRef = useRef(null);
-    storeRef.current ??= createCheckboxListStore(
-      name,
-      defaultValues,
-      disabled,
-      onValuesChange
-    );
-    const store = storeRef.current;
-    const { setValues } = useStore(store, (s) => s);
-    useEffect(() => {
-      const currentValues = store.getState().values;
-      if (currentValues.length > 0 && onValuesChange) {
-        onValuesChange(currentValues);
-      }
-    }, []);
-    useEffect(() => {
-      if (propValues !== void 0) {
-        setValues(propValues);
-      }
-    }, [propValues, setValues]);
-    useEffect(() => {
-      store.setState({ disabled });
-    }, [disabled, store]);
-    return /* @__PURE__ */ jsx3(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 w-full", className),
-        "aria-label": name,
-        ...props,
-        children: injectStore(children, store)
-      }
-    );
-  }
-);
-CheckboxList.displayName = "CheckboxList";
-var CheckboxListItem = forwardRef2(
-  ({
-    value,
-    store: externalStore,
-    disabled: itemDisabled,
-    size = "medium",
-    state = "default",
-    className = "",
-    id,
-    ...props
-  }, ref) => {
-    const store = useCheckboxListStore(externalStore);
-    const {
-      values: groupValues,
-      toggleValue,
-      disabled: groupDisabled,
-      name
-    } = useStore(store);
-    const generatedId = useId2();
-    const inputId = id ?? `checkbox-item-${generatedId}`;
-    const isChecked = groupValues.includes(value);
-    const isDisabled = groupDisabled || itemDisabled;
-    const currentState = isDisabled ? "disabled" : state;
-    return /* @__PURE__ */ jsx3(
-      CheckBox_default,
-      {
-        ref,
-        id: inputId,
-        name,
-        value,
-        checked: isChecked,
-        disabled: isDisabled,
-        size,
-        state: currentState,
-        className,
-        onChange: () => {
-          if (!isDisabled) {
-            toggleValue(value);
-          }
-        },
-        ...props
-      }
-    );
-  }
-);
-CheckboxListItem.displayName = "CheckboxListItem";
-var CheckboxList_default = CheckboxList;
-export {
-  CheckboxListItem,
-  CheckboxList_default as default,
-  useCheckboxListStore
-};