@xjur-ui/react 1.0.6 → 2.1.0

package/dist/components/input.js

@@ -1,315 +0,0 @@
-// src/components/input.tsx
-import { cva, cx } from "@xjur-ui/util";
-import { createContext } from "react";
-import { InputMask } from "@react-input/mask";
-import {
-  InputNumberFormat
-} from "@react-input/number-format";
-
-// src/resources/input-mask.ts
-function inputMask(type, options) {
-  switch (type) {
-    case "cpf":
-      return { ...options, ...CPF_MASK };
-    case "cnpj":
-      return { ...options, ...CNPJ_MASK };
-    case "telefone":
-      return { ...options, ...PHONE_MASK };
-    case "cep":
-      return { ...options, ...CEP_MASK };
-    case "numero-processo":
-      return { ...options, ...NUMERO_PROCESSO_MASK };
-    case "data":
-      return { ...options, ...DATE_MASK };
-    case "hora":
-      return { ...options, ...TIME_MASK };
-    case "data-hora":
-      return { ...options, ...DATETIME_MASK };
-    case "custom":
-      if (!options) {
-        throw new Error("Options are required for custom mask");
-      }
-      return options;
-  }
-}
-var CPF_MASK = {
-  mask: "###.###.###-##",
-  replacement: {
-    "#": /\d/
-  }
-};
-var CNPJ_MASK = {
-  mask: "##.###.###/####-##",
-  replacement: {
-    "#": /\d/
-  }
-};
-var PHONE_MASK = {
-  mask: "(##) #####-####",
-  replacement: {
-    "#": /\d/
-  }
-};
-var CEP_MASK = {
-  mask: "#####-###",
-  replacement: {
-    "#": /\d/
-  }
-};
-var NUMERO_PROCESSO_MASK = {
-  mask: "#######-##.####.#.##.####",
-  replacement: {
-    "#": /\d/
-  }
-};
-var DATE_MASK = {
-  mask: "##/##/####",
-  replacement: {
-    "#": /\d/
-  }
-};
-var TIME_MASK = {
-  mask: "##:##",
-  replacement: {
-    "#": /\d/
-  }
-};
-var DATETIME_MASK = {
-  mask: "##/##/#### ##:##",
-  replacement: {
-    "#": /\d/
-  }
-};
-
-// src/components/input.tsx
-import { jsx } from "react/jsx-runtime";
-var FieldContext = createContext({
-  variant: "filled"
-});
-function InputRoot({
-  className,
-  children,
-  variant = "filled",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        "group gap-small relative flex w-full flex-col",
-        className
-      ),
-      ...props,
-      children
-    }
-  ) });
-}
-function InputContent({ className, ...props }) {
-  const variants = cva(
-    [
-      "relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full",
-      "focus-within:border-primary-idle focus-within:border",
-      "group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none",
-      "group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "",
-          outlined: "bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle",
-          filled: "bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1"
-        }
-      }
-    }
-  );
-  return /* @__PURE__ */ jsx(FieldContext.Consumer, { children: ({ variant }) => {
-    return /* @__PURE__ */ jsx("div", { className: cx(className, variants({ variant })), ...props });
-  } });
-}
-function InputLabel({
-  htmlFor,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(FieldContext.Consumer, { children: ({ variant }) => {
-    return /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: cx(
-          "group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left",
-          "ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250",
-          // Filled
-          "group-focus-within:text-primary-idle group-focus-within:-top-[3px]",
-          "group-focus-within:text-size-label-sm-1x group-focus-within:font-medium",
-          "group-has-[input:not(:placeholder-shown)]:-top-[3px]",
-          "group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x",
-          "group-has-[input:not(:placeholder-shown)]:font-medium",
-          "data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle",
-          // If has left slot
-          "group-has-[div[data-slot=input-left-slot]]:left-large-4x",
-          "group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small",
-          "group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
-          // If has right slot
-          "group-has-[div[data-slot=input-right-slot]]:right-large-4x",
-          "group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small",
-          "group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
-          // Animate
-          "group-focus-within:animate-in",
-          "group-has-[input:not(:placeholder-shown)]:animate-out",
-          className
-        ),
-        "data-variant": variant,
-        htmlFor,
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cx(
-              "rounded-small-1x max-w-full",
-              "group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover",
-              "group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover"
-            ),
-            children
-          }
-        )
-      }
-    );
-  } });
-}
-function InputText({
-  className,
-  maskOptions,
-  maskType,
-  ...props
-}) {
-  const Component = maskOptions || maskType ? InputMask : "input";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ...props,
-      ...maskType ? { ...inputMask(maskType) } : maskOptions && { ...maskOptions },
-      className: cx(
-        className,
-        "peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none",
-        "group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x"
-      ),
-      placeholder: props.placeholder || " ",
-      ...maskOptions && { ...maskOptions }
-    }
-  );
-}
-function InputNumber({
-  className,
-  locales = "pt-BR",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    InputNumberFormat,
-    {
-      ...props,
-      className: cx(
-        className,
-        "peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none",
-        "group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x"
-      ),
-      locales,
-      placeholder: props.placeholder || " "
-    }
-  );
-}
-function InputLeftSlot({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "input-left-slot"
-    }
-  );
-}
-function InputRightSlot({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "input-right-slot"
-    }
-  );
-}
-function InputMessage({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ...props,
-      className: cx(
-        "text-size-body-sm text-neutral-dark font-normal",
-        className
-      )
-    }
-  );
-}
-function InputContainer({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(className, "flex items-center"),
-      "data-slot": "input-content"
-    }
-  );
-}
-function InputAction({
-  className,
-  side,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "group h-large-4x flex items-center justify-center"
-      ),
-      "data-side": side,
-      "data-slot": `input-${side}-action-slot`
-    }
-  );
-}
-function InputActionButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center"
-      )
-    }
-  );
-}
-export {
-  InputAction,
-  InputActionButton,
-  InputContainer,
-  InputContent,
-  InputLabel,
-  InputLeftSlot,
-  InputMessage,
-  InputNumber,
-  InputRightSlot,
-  InputRoot,
-  InputText,
-  inputMask
-};

package/dist/components/otp-input.js

@@ -1,47 +0,0 @@
-// src/components/otp-input.tsx
-import * as OTPPasswordField from "@radix-ui/react-one-time-password-field";
-import { cx } from "@xjur-ui/util";
-import { jsx } from "react/jsx-runtime";
-function Root2({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    OTPPasswordField.Root,
-    {
-      className: cx(className, "group gap-small flex items-center"),
-      ...props,
-      children
-    }
-  );
-}
-function Input2({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    OTPPasswordField.Input,
-    {
-      className: cx(
-        className,
-        "text-neutral-dark h-large-6x bg-layer-2-hover rounded-small-1x w-full text-center outline-0",
-        "focus-within:border-primary-idle focus-within:border"
-      ),
-      ...props
-    }
-  );
-}
-function HiddenInput2({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(OTPPasswordField.HiddenInput, { ...props });
-}
-var OTPInput = {
-  Root: Root2,
-  Input: Input2,
-  HiddenInput: HiddenInput2
-};
-export {
-  OTPInput
-};

package/dist/components/radio.js

@@ -1,156 +0,0 @@
-// src/components/radio.tsx
-import "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { cx } from "@xjur-ui/util";
-
-// src/components/typography.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "@xjur-ui/util";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-var typographyVariants = cva("", {
-  variants: {
-    variant: {
-      body: "",
-      label: "",
-      title: "",
-      headline: ""
-    },
-    size: {
-      "sm-2x": "",
-      "sm-1x": "",
-      sm: "",
-      md: "",
-      lg: ""
-    },
-    weight: {
-      thin: "font-thin",
-      extraLight: "font-extralight",
-      light: "font-light",
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
-      extraBold: "font-extrabold",
-      black: "font-black"
-    }
-  },
-  compoundVariants: [
-    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
-    { variant: "body", size: "sm", class: "text-size-body-sm" },
-    { variant: "body", size: "md", class: "text-size-body-md" },
-    { variant: "body", size: "lg", class: "text-size-body-lg" },
-    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
-    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
-    { variant: "label", size: "sm", class: "text-size-label-sm" },
-    { variant: "label", size: "md", class: "text-size-label-md" },
-    { variant: "label", size: "lg", class: "text-size-label-lg" },
-    { variant: "title", size: "sm", class: "text-size-title-sm" },
-    { variant: "title", size: "md", class: "text-size-title-md" },
-    { variant: "title", size: "lg", class: "text-size-title-lg" },
-    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
-    { variant: "headline", size: "md", class: "text-size-headline-md" },
-    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
-  ],
-  defaultVariants: {
-    variant: "body",
-    size: "md",
-    weight: "normal"
-  }
-});
-var Typography = memo(
-  ({
-    variant,
-    size,
-    weight,
-    asChild,
-    className,
-    ...props
-  }) => {
-    const Component = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        className: typographyVariants({ variant, size, weight, className }),
-        ...props
-      }
-    );
-  }
-);
-Typography.displayName = "Typography";
-
-// src/components/radio.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function RadioGroup({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    RadioGroupPrimitive.Root,
-    {
-      className: cx(
-        "gap-small flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
-        className
-      ),
-      "data-orientation": orientation,
-      "data-slot": "radio-group",
-      ...props
-    }
-  );
-}
-function RadioItem({
-  className,
-  id,
-  label,
-  disabled = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "gap-small flex items-center", children: [
-    /* @__PURE__ */ jsx2(
-      RadioGroupPrimitive.Item,
-      {
-        className: cx(
-          // layout
-          "size-large-alt rounded-circle inline-flex items-center justify-center transition-[border-color,box-shadow,background-color] duration-200 outline-none",
-          // base
-          "border-border-layer-2 bg-layer-2-idle cursor-pointer border-2",
-          // hover/focus (desmarcado)
-          "hover:border-primary-idle focus:border-primary-idle focus:shadow-focus-primary",
-          // estado checked
-          "data-[state=checked]:bg-primary-active data-[state=checked]:border-primary-active",
-          // hover quando estiver checked (opcional)
-          "data-[state=checked]:hover:border-primary-idle",
-          // disabled
-          "disabled:hover:border-border-layer-2 disabled:cursor-not-allowed disabled:opacity-[38%]",
-          className
-        ),
-        "data-slot": "radio-group-item",
-        disabled,
-        id,
-        ...props,
-        children: /* @__PURE__ */ jsx2(
-          RadioGroupPrimitive.Indicator,
-          {
-            className: "relative flex items-center justify-center",
-            "data-slot": "radio-group-indicator"
-          }
-        )
-      }
-    ),
-    !!label && /* @__PURE__ */ jsx2(
-      Typography,
-      {
-        asChild: true,
-        className: "text-size-body-sm data-[disabled=true]:opacity-38",
-        "data-disabled": disabled,
-        weight: "medium",
-        children: /* @__PURE__ */ jsx2("label", { htmlFor: id, children: label })
-      }
-    )
-  ] });
-}
-export {
-  RadioGroup,
-  RadioItem
-};