@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/input.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { MaskOptions } from '@react-input/mask';
+export { MaskOptions } from '@react-input/mask';
+import { InputNumberFormatProps } from '@react-input/number-format';
+
+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';
+};
+declare function InputRoot({ className, children, variant, ...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'> & {
+    htmlFor: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InputText({ className, maskOptions, maskType, ...props }: ComponentProps<'input'> & {
+    maskOptions?: MaskOptions;
+    maskType?: InputMaskType;
+}): react_jsx_runtime.JSX.Element;
+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 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 };

package/dist/components/input.js

@@ -0,0 +1,315 @@
+// 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:shadow-focus-primary 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/list.d.ts

@@ -0,0 +1,25 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassVariantProps } from '@xjur-ui/util';
+import { ComponentProps } from 'react';
+import { TypographyProps } from './typography.js';
+
+declare function ListRoot({ className, asChild, ...props }: ComponentProps<'div'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ListHeader({ className, asChild, ...props }: ComponentProps<'div'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ListHeaderTitle({ variant, size, weight, className, ...props }: TypographyProps): react_jsx_runtime.JSX.Element;
+declare function ListContent({ className, asChild, ...props }: ComponentProps<'ul'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const variants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+    isActive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ListItem({ className, size, isActive, asChild, ...props }: ComponentProps<'li'> & ClassVariantProps<typeof variants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { ListContent, ListHeader, ListHeaderTitle, ListItem, ListRoot };

package/dist/components/{ui/input/content.js → list.js}

@@ -1,15 +1,8 @@
-// src/components/ui/input/content.tsx
-import { cx as cx3, cva as cva2 } from "@xjur-ui/util";
+// src/components/list.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cx, cva as cva2 } from "@xjur-ui/util";
 
-// src/components/ui/input/root.tsx
-import { createContext, use } from "react";
-import { cx as cx2 } from "@xjur-ui/util";
-
-// src/components/ui/input/message.tsx
-import { memo as memo2 } from "react";
-import { cx } from "@xjur-ui/util";
-
-// src/components/ui/typography.tsx
+// src/components/typography.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "@xjur-ui/util";
 import { memo } from "react";
@@ -85,99 +78,102 @@ var Typography = memo(
 );
 Typography.displayName = "Typography";
 
-// src/components/ui/input/message.tsx
+// src/components/list.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var InputMessage = memo2(
-  ({
-    children,
-    className,
-    weight = "normal",
-    variant = "body",
-    size = "sm-1x",
-    ...props
-  }) => {
-    const { errorMessage } = useInput();
-    return /* @__PURE__ */ jsx2(
-      Typography,
-      {
-        className: cx(
-          "text-neutral-dark data-[error=true]:text-danger-idle",
-          className
-        ),
-        "data-error": !!errorMessage,
-        size,
-        variant,
-        weight,
-        ...props,
-        children
-      }
-    );
-  }
-);
-InputMessage.displayName = "InputMessage";
-
-// src/components/ui/input/root.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var InputRootContext = createContext({});
-function useInput() {
-  const context = use(InputRootContext);
-  if (!context) {
-    throw new Error(
-      "useInput must be called within <Input.Root> or <Select.Root>"
-    );
-  }
-  return context;
+function ListRoot({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ...props,
+      className: cx(
+        className,
+        "rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border"
+      )
+    }
+  );
+}
+function ListHeader({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx2(Comp, { ...props, className: cx(className, "px-small pt-small-1x") });
+}
+function ListHeaderTitle({
+  variant = "label",
+  size = "sm",
+  weight = "medium",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    Typography,
+    {
+      className: cx(className, "text-neutral-placeholder"),
+      size,
+      variant,
+      weight,
+      ...props
+    }
+  );
+}
+function ListContent({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "ul";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ...props,
+      className: cx("gap-small-1x p-small flex flex-col", className)
+    }
+  );
 }
-
-// src/components/ui/input/content.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
 var variants = cva2(
   [
-    "flex items-center gap-small py-small_1x-alt px-small",
-    "border-1 border-border-layer-2",
-    "bg-layer-2-idle",
-    "group-hover:border-border-layer-3",
-    "transition-[border-color] duration-100 ease",
-    "data-[disabled=true]:pointer-events-none",
-    "has-[input[data-filled=true]]:bg-layer-2-hover"
+    "py-medium px-small flex items-center gap-small rounded-small-1x",
+    "bg-layer-2-idle text-neutral-dark",
+    "hover:bg-layer-2-hover transition-colors duration-100 ease-out",
+    "active:bg-layer-2-pressed"
   ],
   {
     variants: {
-      isError: {
-        true: "border-1 border-danger-idle focus-within:border-danger-idle focus-within:shadow-focus-danger group-hover:border-danger-idle",
-        false: "focus-within:border-primary-idle focus-within:shadow-focus-primary"
+      size: {
+        md: "h-large-4x",
+        lg: "h-large-7x"
       },
-      rounded: {
-        true: "rounded-circle",
-        false: "rounded-small-1x"
+      isActive: {
+        true: "bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed"
       }
     },
     defaultVariants: {
-      rounded: false
+      size: "md",
+      isActive: false
     }
   }
 );
-function InputContent({
+function ListItem({
   className,
-  children,
+  size,
+  isActive,
+  asChild,
   ...props
 }) {
-  const { errorMessage, rounded, disabled } = useInput();
-  const classNames = variants({
-    className,
-    isError: !!errorMessage,
-    rounded
-  });
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      ...props,
-      className: cx3("group", classNames),
-      "data-disabled": disabled,
-      children
-    }
-  );
+  const Comp = asChild ? Slot2 : "li";
+  return /* @__PURE__ */ jsx2(Comp, { ...props, className: cx(variants({ size, isActive }), className) });
 }
 export {
-  InputContent
+  ListContent,
+  ListHeader,
+  ListHeaderTitle,
+  ListItem,
+  ListRoot
 };

package/dist/components/{ui/logo.d.ts → logo.d.ts}

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface LogoProps {
     mode?: 'horizontal' | 'vertical' | 'icon';
     variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray';
 }
-declare const Logo: react.MemoExoticComponent<({ mode, variant }: LogoProps) => react_jsx_runtime.JSX.Element>;
+declare const Logo: React.MemoExoticComponent<({ mode, variant }: LogoProps) => react_jsx_runtime.JSX.Element>;
 
 export { Logo, type LogoProps };

package/dist/components/{ui/logo.js → logo.js}

@@ -1,7 +1,7 @@
-// src/components/ui/logo.tsx
+// src/components/logo.tsx
 import { memo } from "react";
 
-// src/components/resources/logo/horizontal.tsx
+// src/resources/logo/horizontal.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function LogoHorizontalSolid({ color }) {
   return /* @__PURE__ */ jsxs(
@@ -106,7 +106,7 @@ var Horizontal = {
   Colorful: LogoHorizontalColorful
 };
 
-// src/components/resources/logo/vertical.tsx
+// src/resources/logo/vertical.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function LogoVerticalSolid({ color }) {
   return /* @__PURE__ */ jsxs2(
@@ -211,7 +211,7 @@ var Vertical = {
   Colorful: LogoVerticalColorful
 };
 
-// src/components/resources/logo/icon.tsx
+// src/resources/logo/icon.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LogoIconSolid({ color }) {
   return /* @__PURE__ */ jsxs3(
@@ -288,7 +288,7 @@ var Icon = {
   Colorful: LogoIconColorful
 };
 
-// src/components/ui/logo.tsx
+// src/components/logo.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Logo = memo(
   ({ mode = "horizontal", variant = "colorful" }) => {

package/dist/components/{ui/otp-input.js → otp-input.js}

@@ -1,4 +1,4 @@
-// src/components/ui/otp-input.tsx
+// 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";

package/dist/components/radio.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+declare function RadioGroup({ className, orientation, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function RadioItem({ className, id, label, disabled, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { RadioGroup, RadioItem };