@xjur-ui/react 1.0.4 → 2.0.0

package/dist/components/icon.js

@@ -1,177 +1,2 @@
-// src/components/icon.tsx
-import { cx } from "@xjur-ui/util";
-
-// src/resources/icons.ts
-var icons = [
-  "account_balance",
-  "ad_units",
-  "add_a_photo",
-  "add",
-  "adjust",
-  "archive",
-  "arrow_downward_alt",
-  "arrow_downward",
-  "arrow_drop_down",
-  "arrow_drop_up",
-  "arrow_split",
-  "arrow_upward_alt",
-  "arrow_upward",
-  "attach_file",
-  "attach_money",
-  "autorenew",
-  "brightness_1",
-  "calendar_today",
-  "call",
-  "chat_bubble",
-  "check_circle",
-  "check",
-  "chevron_left",
-  "chevron_right",
-  "close",
-  "collapse_all",
-  "contacts",
-  "content_copy",
-  "dangerous",
-  "dashboard",
-  "delete",
-  "download",
-  "draft",
-  "drafts",
-  "drag_handle",
-  "drag_indicator",
-  "edit_document",
-  "edit_square",
-  "edit",
-  "error",
-  "expand_all",
-  "file_export",
-  "filter_alt",
-  "filter_list",
-  "first_page",
-  "flag_2",
-  "folder_open",
-  "folder",
-  "format_bold",
-  "format_italic",
-  "format_italic",
-  "format_size",
-  "format_strikethrough",
-  "gavel",
-  "group",
-  "headphones",
-  "help",
-  "hourglass_bottom",
-  "imagesmode",
-  "import_contacts",
-  "inbox",
-  "info",
-  "inventory_2",
-  "keep",
-  "keep",
-  "keyboard_arrow_down",
-  "keyboard_arrow_up",
-  "keyboard_return",
-  "label_off",
-  "label",
-  "last_page",
-  "left_panel_close",
-  "left_panel_open",
-  "link_off",
-  "link",
-  "linked_services",
-  "list",
-  "location_on",
-  "lock",
-  "logout",
-  "mail",
-  "menu",
-  "mic",
-  "more_vert",
-  "notifications",
-  "numbers",
-  "person_add",
-  "person_off",
-  "person",
-  "play_circle",
-  "progress_activity",
-  "question_mark",
-  "radio_button_unchecked",
-  "refresh",
-  "remove",
-  "reply",
-  "right_panel_close",
-  "right_panel_open",
-  "schedule",
-  "search",
-  "sell",
-  "send",
-  "settings",
-  "share",
-  "smart_display",
-  "star",
-  "star",
-  "swap_vert",
-  "thumb_down",
-  "thumb_up",
-  "tune",
-  "unarchive",
-  "undo",
-  "upload",
-  "verified_user",
-  "videocam",
-  "view_list",
-  "view_module",
-  "view_object_track",
-  "visibility_off",
-  "visibility",
-  "warning",
-  "wifi_2_bar",
-  "wifi_off",
-  "wifi",
-  "work",
-  "workspaces",
-  "article",
-  "id_card",
-  "badge",
-  "home",
-  "save",
-  "code",
-  "favorite",
-  "analytics",
-  "reports",
-  "event",
-  "account_circle",
-  "history",
-  "security",
-  "bar_chart",
-  "category",
-  "format_underlined",
-  "format_list_bulleted",
-  "format_list_numbered",
-  "redo"
-];
-
-// src/components/icon.tsx
-import { jsx } from "react/jsx-runtime";
-function Icon({ className, filled = false, name, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...props,
-      className: cx(
-        "material-symbols-outlined",
-        "text-size-body-lg",
-        className
-      ),
-      style: {
-        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
-        ...props.style
-      },
-      children: name
-    }
-  );
-}
-export {
-  Icon,
-  icons
-};
+export{b as Icon,a as icons}from'../chunk-SHHXKVVR.js';//# sourceMappingURL=icon.js.map
+//# sourceMappingURL=icon.js.map

package/dist/components/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icon.js"}

package/dist/components/input.d.ts

@@ -3,16 +3,21 @@ import { ComponentProps } from 'react';
 import { MaskOptions } from '@react-input/mask';
 export { MaskOptions } from '@react-input/mask';
 import { InputNumberFormatProps } from '@react-input/number-format';
+import { Typography } from './typography.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
 
 type InputMaskType = 'cpf' | 'cnpj' | 'telefone' | 'cep' | 'numero-processo' | 'custom' | 'data' | 'hora' | 'data-hora';
 declare function inputMask(type: InputMaskType, options?: MaskOptions): MaskOptions;
 
 type InputProps = {
     variant?: 'outlined' | 'filled';
+    disabled?: boolean;
+    hasError?: boolean;
 };
-declare function InputRoot({ className, children, variant, ...props }: ComponentProps<'div'> & InputProps): react_jsx_runtime.JSX.Element;
+declare function InputRoot({ className, children, variant, disabled, hasError, ...props }: ComponentProps<'div'> & InputProps): react_jsx_runtime.JSX.Element;
 declare function InputContent({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function InputLabel({ htmlFor, className, children, ...props }: ComponentProps<'label'> & {
+declare function InputLabel({ htmlFor, className, children, ...props }: ComponentProps<typeof Typography> & {
     htmlFor: string;
 }): react_jsx_runtime.JSX.Element;
 declare function InputText({ className, maskOptions, maskType, ...props }: ComponentProps<'input'> & {
@@ -22,11 +27,11 @@ declare function InputText({ className, maskOptions, maskType, ...props }: Compo
 declare function InputNumber({ className, locales, ...props }: InputNumberFormatProps): react_jsx_runtime.JSX.Element;
 declare function InputLeftSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function InputRightSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function InputMessage({ className, ...props }: ComponentProps<'p'>): react_jsx_runtime.JSX.Element;
+declare function InputCaption({ className, variant, size, weight, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
 declare function InputContainer({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function InputAction({ className, side, ...props }: ComponentProps<'div'> & {
     side: 'left' | 'right';
 }): react_jsx_runtime.JSX.Element;
 declare function InputActionButton({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
-export { InputAction, InputActionButton, InputContainer, InputContent, InputLabel, InputLeftSlot, type InputMaskType, InputMessage, InputNumber, type InputProps, InputRightSlot, InputRoot, InputText, inputMask };
+export { InputAction, InputActionButton, InputCaption, InputContainer, InputContent, InputLabel, InputLeftSlot, type InputMaskType, InputNumber, type InputProps, InputRightSlot, InputRoot, InputText, inputMask };

package/dist/components/input.js

@@ -1,315 +1,2 @@
-// 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
-};
+import {a}from'../chunk-EIG6CBTQ.js';import {twMerge,tv}from'@xjur-ui/util';import {createContext,useMemo,useContext}from'react';import {InputMask}from'@react-input/mask';import {InputNumberFormat}from'@react-input/number-format';import {jsx}from'react/jsx-runtime';function c(e,t){switch(e){case "cpf":return {...t,...h};case "cnpj":return {...t,...f};case "telefone":return {...t,...g};case "cep":return {...t,...x};case "numero-processo":return {...t,...b};case "data":return {...t,...v};case "hora":return {...t,...y};case "data-hora":return {...t,...w};case "custom":if(!t)throw new Error("Options are required for custom mask");return t}}var h={mask:"###.###.###-##",replacement:{"#":/\d/}},f={mask:"##.###.###/####-##",replacement:{"#":/\d/}},g={mask:"(##) #####-####",replacement:{"#":/\d/}},x={mask:"#####-###",replacement:{"#":/\d/}},b={mask:"#######-##.####.#.##.####",replacement:{"#":/\d/}},v={mask:"##/##/####",replacement:{"#":/\d/}},y={mask:"##:##",replacement:{"#":/\d/}},w={mask:"##/##/#### ##:##",replacement:{"#":/\d/}};var p=createContext({variant:"filled",disabled:false,hasError:false});function u(){let e=useContext(p);if(!e)throw new Error("useInput must be used within a InputRoot");return e}function _({className:e,children:t,variant:r="filled",disabled:a=false,hasError:l=false,...s}){let i=useMemo(()=>({variant:r,disabled:a,hasError:l}),[r,a,l]);return jsx(p.Provider,{value:i,children:jsx("div",{className:twMerge("group relative flex w-full flex-col",e),...s,children:t})})}function K({className:e,...t}){let r=tv({base:twMerge("border border-transparent relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full","group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none","group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none","focus-within:border-primary-idle focus-within:hover:border-primary-idle","hover:border-border-layer-1"),variants:{variant:{filled:"bg-layer-2-hover",outlined:"bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3",disabled:"hover:border-transparent border-none bg-layer-2-idle"},state:{idle:"",error:"focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle"}},defaultVariants:{variant:"filled",state:"idle"}});return jsx(p.Consumer,{children:({variant:a,disabled:l,hasError:s})=>jsx("div",{className:r({variant:l?"disabled":a,state:s?"error":"idle",className:e}),...t})})}function z({htmlFor:e,className:t,children:r,...a$1}){return jsx(p.Consumer,{children:({variant:l,disabled:s,hasError:i})=>jsx(a,{asChild:true,className:twMerge("group 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","group-focus-within:!text-primary-idle group-focus-within:data-[has-error=true]:!text-danger-label-active 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","group-has-[input:not(:placeholder-shown)]:!text-primary-idle","group-has-[input:not(:placeholder-shown)]:!text-danger-label-active","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","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","group-focus-within:animate-in","group-has-[input:not(:placeholder-shown)]:animate-out","data-[disabled=true]:hidden",t),"data-disabled":s,"data-has-error":i,"data-variant":l,...a$1,children:jsx("label",{htmlFor:e,children:jsx("span",{className:twMerge("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:r})})})})}function R({className:e,maskOptions:t,maskType:r,...a}){let{disabled:l}=u();return jsx(t||r?InputMask:"input",{...a,disabled:l,...r?{...c(r)}:t&&{...t},className:twMerge(e,"peer !text-size-body-md text-neutral-dark flex-1 outline-none","group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x"),placeholder:a.placeholder||" ",...t&&{...t}})}function j({className:e,locales:t="pt-BR",...r}){let{disabled:a}=u();return jsx(InputNumberFormat,{...r,className:twMerge(e,"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"),disabled:a,locales:t,placeholder:r.placeholder||" "})}function B({className:e,...t}){return jsx("div",{...t,className:twMerge(e,"left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"),"data-slot":"input-left-slot"})}function D({className:e,...t}){return jsx("div",{...t,className:twMerge(e,"right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"),"data-slot":"input-right-slot"})}function L({className:e,variant:t="body",size:r="sm",weight:a$1="normal",...l}){let{hasError:s}=u(),i=tv({base:"text-size-body-sm mt-small-1x font-normal",variants:{state:{error:"text-danger-label-active",idle:"text-neutral-dark"}}});return jsx(a,{className:i({state:s?"error":"idle",className:e}),size:r,variant:t,weight:a$1,...l})}function V({className:e,...t}){return jsx("div",{...t,className:twMerge(e,"flex items-center"),"data-slot":"input-content"})}function q({className:e,side:t,...r}){let{disabled:a}=u();return jsx("div",{...r,className:twMerge(e,"group h-large-4x flex items-center justify-center data-[disabled=true]:hidden"),"data-disabled":a,"data-side":t,"data-slot":`input-${t}-action-slot`})}function H({className:e,...t}){return jsx("div",{...t,className:twMerge(e,"h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center")})}export{q as InputAction,H as InputActionButton,L as InputCaption,V as InputContainer,K as InputContent,z as InputLabel,B as InputLeftSlot,j as InputNumber,D as InputRightSlot,_ as InputRoot,R as InputText,c as inputMask};//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/resources/input-mask.ts","../../src/components/input.tsx"],"names":["inputMask","type","options","CPF_MASK","CNPJ_MASK","PHONE_MASK","CEP_MASK","NUMERO_PROCESSO_MASK","DATE_MASK","TIME_MASK","DATETIME_MASK","FieldContext","createContext","useInput","context","useContext","InputRoot","className","children","variant","disabled","hasError","props","providerValue","useMemo","jsx","twMerge","InputContent","content","tv","InputLabel","htmlFor","Typography","InputText","maskOptions","maskType","InputMask","InputNumber","locales","InputNumberFormat","InputLeftSlot","InputRightSlot","InputCaption","size","weight","caption","InputContainer","InputAction","side","InputActionButton"],"mappings":"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","file":"input.js","sourcesContent":["import type { MaskOptions } from '@react-input/mask'\n\nexport type InputMaskType =\n  | 'cpf'\n  | 'cnpj'\n  | 'telefone'\n  | 'cep'\n  | 'numero-processo'\n  | 'custom'\n  | 'data'\n  | 'hora'\n  | 'data-hora'\n\nexport function inputMask(\n  type: InputMaskType,\n  options?: MaskOptions\n): MaskOptions {\n  switch (type) {\n    case 'cpf':\n      return { ...options, ...CPF_MASK }\n    case 'cnpj':\n      return { ...options, ...CNPJ_MASK }\n    case 'telefone':\n      return { ...options, ...PHONE_MASK }\n    case 'cep':\n      return { ...options, ...CEP_MASK }\n    case 'numero-processo':\n      return { ...options, ...NUMERO_PROCESSO_MASK }\n    case 'data':\n      return { ...options, ...DATE_MASK }\n    case 'hora':\n      return { ...options, ...TIME_MASK }\n    case 'data-hora':\n      return { ...options, ...DATETIME_MASK }\n    case 'custom':\n      if (!options) {\n        throw new Error('Options are required for custom mask')\n      }\n\n      return options\n  }\n}\n\nconst CPF_MASK: MaskOptions = {\n  mask: '###.###.###-##',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst CNPJ_MASK: MaskOptions = {\n  mask: '##.###.###/####-##',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst PHONE_MASK: MaskOptions = {\n  mask: '(##) #####-####',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst CEP_MASK: MaskOptions = {\n  mask: '#####-###',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst NUMERO_PROCESSO_MASK: MaskOptions = {\n  mask: '#######-##.####.#.##.####',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst DATE_MASK: MaskOptions = {\n  mask: '##/##/####',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst TIME_MASK: MaskOptions = {\n  mask: '##:##',\n  replacement: {\n    '#': /\\d/\n  }\n}\nconst DATETIME_MASK: MaskOptions = {\n  mask: '##/##/#### ##:##',\n  replacement: {\n    '#': /\\d/\n  }\n}\n","import { tv, twMerge } from '@xjur-ui/util'\nimport type { ComponentProps } from 'react'\nimport { createContext, useContext, useMemo } from 'react'\nimport { InputMask, type MaskOptions } from '@react-input/mask'\nimport {\n  InputNumberFormat,\n  type InputNumberFormatProps\n} from '@react-input/number-format'\nimport { inputMask, type InputMaskType } from '../resources/input-mask'\nimport { Typography } from './typography'\n\nexport { inputMask, type InputMaskType, type MaskOptions }\n\nexport type InputProps = {\n  variant?: 'outlined' | 'filled'\n  disabled?: boolean\n  hasError?: boolean\n}\n\nconst FieldContext = createContext<InputProps>({\n  variant: 'filled',\n  disabled: false,\n  hasError: false\n})\n\nfunction useInput() {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useInput must be used within a InputRoot')\n  }\n  return context\n}\n\nexport function InputRoot({\n  className,\n  children,\n  variant = 'filled',\n  disabled = false,\n  hasError = false,\n  ...props\n}: ComponentProps<'div'> & InputProps) {\n  const providerValue = useMemo(\n    () => ({ variant, disabled, hasError }),\n    [variant, disabled, hasError]\n  )\n\n  return (\n    <FieldContext.Provider value={providerValue}>\n      <div\n        className={twMerge('group relative flex w-full flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </FieldContext.Provider>\n  )\n}\n\nexport function InputContent({ className, ...props }: ComponentProps<'div'>) {\n  const content = tv({\n    base: twMerge(\n      'border border-transparent relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',\n      'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',\n      'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none',\n      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',\n      'hover:border-border-layer-1'\n    ),\n    variants: {\n      variant: {\n        filled: 'bg-layer-2-hover',\n        outlined:\n          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',\n        disabled: 'hover:border-transparent border-none bg-layer-2-idle'\n      },\n      state: {\n        idle: '',\n        error:\n          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle'\n      }\n    },\n    defaultVariants: {\n      variant: 'filled',\n      state: 'idle'\n    }\n  })\n\n  return (\n    <FieldContext.Consumer>\n      {({ variant, disabled, hasError }) => {\n        return (\n          <div\n            className={content({\n              variant: disabled ? 'disabled' : variant,\n              state: hasError ? 'error' : 'idle',\n              className\n            })}\n            {...props}\n          />\n        )\n      }}\n    </FieldContext.Consumer>\n  )\n}\n\nexport function InputLabel({\n  htmlFor,\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Typography> & { htmlFor: string }) {\n  return (\n    <FieldContext.Consumer>\n      {({ variant, disabled, hasError }) => {\n        return (\n          <Typography\n            asChild={true}\n            className={twMerge(\n              'group inline-block max-w-full truncate text-left',\n              'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',\n              // Filled\n              'group-focus-within:!text-primary-idle group-focus-within:data-[has-error=true]:!text-danger-label-active group-focus-within:-top-[3px]',\n              'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',\n              'group-has-[input:not(:placeholder-shown)]:-top-[3px]',\n              'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',\n              'group-has-[input:not(:placeholder-shown)]:font-medium',\n              'group-has-[input:not(:placeholder-shown)]:!text-primary-idle',\n              'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active',\n              // If has left slot\n              'group-has-[div[data-slot=input-left-slot]]:left-large-4x',\n              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',\n              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',\n              // If has right slot\n              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',\n              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',\n              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',\n              // Animate\n              'group-focus-within:animate-in',\n              'group-has-[input:not(:placeholder-shown)]:animate-out',\n              'data-[disabled=true]:hidden',\n              className\n            )}\n            data-disabled={disabled}\n            data-has-error={hasError}\n            data-variant={variant}\n            {...props}\n          >\n            <label htmlFor={htmlFor}>\n              <span\n                className={twMerge(\n                  'rounded-small-1x max-w-full',\n                  'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',\n                  'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'\n                )}\n              >\n                {children}\n              </span>\n            </label>\n          </Typography>\n        )\n      }}\n    </FieldContext.Consumer>\n  )\n}\n\nexport function InputText({\n  className,\n  maskOptions,\n  maskType,\n  ...props\n}: ComponentProps<'input'> & {\n  maskOptions?: MaskOptions\n  maskType?: InputMaskType\n}) {\n  const { disabled } = useInput()\n  const Component = maskOptions || maskType ? InputMask : 'input'\n\n  return (\n    <Component\n      {...props}\n      disabled={disabled}\n      {...(maskType\n        ? { ...inputMask(maskType) }\n        : maskOptions && { ...maskOptions })}\n      className={twMerge(\n        className,\n        'peer !text-size-body-md text-neutral-dark flex-1 outline-none',\n        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'\n      )}\n      placeholder={props.placeholder || ' '}\n      {...(maskOptions && { ...maskOptions })}\n    />\n  )\n}\n\nexport function InputNumber({\n  className,\n  locales = 'pt-BR',\n  ...props\n}: InputNumberFormatProps) {\n  const { disabled } = useInput()\n  return (\n    <InputNumberFormat\n      {...props}\n      className={twMerge(\n        className,\n        'peer !text-size-body-md text-neutral-dark flex-1 font-medium outline-none',\n        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'\n      )}\n      disabled={disabled}\n      locales={locales}\n      placeholder={props.placeholder || ' '}\n    />\n  )\n}\n\nexport function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"input-left-slot\"\n    />\n  )\n}\n\nexport function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"input-right-slot\"\n    />\n  )\n}\n\nexport function InputCaption({\n  className,\n  variant = 'body',\n  size = 'sm',\n  weight = 'normal',\n  ...props\n}: ComponentProps<typeof Typography>) {\n  const { hasError } = useInput()\n\n  const caption = tv({\n    base: 'text-size-body-sm mt-small-1x font-normal',\n    variants: {\n      state: {\n        error: 'text-danger-label-active',\n        idle: 'text-neutral-dark'\n      }\n    }\n  })\n\n  return (\n    <Typography\n      className={caption({\n        state: hasError ? 'error' : 'idle',\n        className\n      })}\n      size={size}\n      variant={variant}\n      weight={weight}\n      {...props}\n    />\n  )\n}\n\nexport function InputContainer({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(className, 'flex items-center')}\n      data-slot=\"input-content\"\n    />\n  )\n}\n\nexport function InputAction({\n  className,\n  side,\n  ...props\n}: ComponentProps<'div'> & {\n  side: 'left' | 'right'\n}) {\n  const { disabled } = useInput()\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'group h-large-4x flex items-center justify-center data-[disabled=true]:hidden'\n      )}\n      data-disabled={disabled}\n      data-side={side}\n      data-slot={`input-${side}-action-slot`}\n    />\n  )\n}\n\nexport function InputActionButton({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'\n      )}\n    />\n  )\n}\n"]}