@xjur-ui/react 1.0.6 → 2.1.0

package/dist/components/checkbox.js

@@ -1,153 +0,0 @@
-// src/components/checkbox.tsx
-import * as CheckoxPrimitive from "@radix-ui/react-checkbox";
-import { cx as cx2 } from "@xjur-ui/util";
-
-// src/components/icon.tsx
-import { cx } from "@xjur-ui/util";
-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
-    }
-  );
-}
-
-// src/components/typography.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "@xjur-ui/util";
-import { memo } from "react";
-import { jsx as jsx2 } 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__ */ jsx2(
-      Component,
-      {
-        className: typographyVariants({ variant, size, weight, className }),
-        ...props
-      }
-    );
-  }
-);
-Typography.displayName = "Typography";
-
-// src/components/checkbox.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function Checkbox({
-  label,
-  name,
-  className,
-  disabled = false,
-  ...props
-}) {
-  const fieldId = `field-checkbox-${name}`;
-  return /* @__PURE__ */ jsxs("div", { className: "group gap-small flex items-center", children: [
-    /* @__PURE__ */ jsx3(
-      CheckoxPrimitive.Root,
-      {
-        disabled,
-        ...props,
-        className: cx2(
-          // layout
-          "size-large-alt rounded-small-1x 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
-        ),
-        id: fieldId,
-        name,
-        children: /* @__PURE__ */ jsx3(CheckoxPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx3(Icon, { className: "text-neutral-label", name: "check" }) })
-      }
-    ),
-    !!label && /* @__PURE__ */ jsx3(
-      Typography,
-      {
-        asChild: true,
-        className: "text-size-body-sm data-[disabled=true]:opacity-38",
-        "data-disabled": disabled,
-        weight: "medium",
-        children: /* @__PURE__ */ jsx3("label", { htmlFor: fieldId, children: label })
-      }
-    )
-  ] });
-}
-export {
-  Checkbox
-};

package/dist/components/date-picker.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps } from 'react';
-import * as RadixPopover from '@radix-ui/react-popover';
-import { TypographyProps } from './typography.js';
-import 'class-variance-authority/types';
-import '@xjur-ui/util';
-
-declare function DatePickerRoot(props: ComponentProps<typeof RadixPopover.Root>): react_jsx_runtime.JSX.Element;
-declare function DatePickerTrigger({ className, ...props }: ComponentProps<typeof RadixPopover.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DatePickerContent({ className, sideOffset, side, align, ...props }: ComponentProps<typeof RadixPopover.Content>): react_jsx_runtime.JSX.Element;
-declare function DatePickerValue({ className, displayValue, value, ...props }: ComponentProps<'input'> & {
-    displayValue?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function DatePickerLabel({ className, htmlFor, children, ...props }: TypographyProps & {
-    htmlFor?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function DatePickerLeftSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function DatePickerRightSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-
-export { DatePickerContent, DatePickerLabel, DatePickerLeftSlot, DatePickerRightSlot, DatePickerRoot, DatePickerTrigger, DatePickerValue };

package/dist/components/date-picker.js

@@ -1,232 +0,0 @@
-// src/components/date-picker.tsx
-import * as RadixPopover from "@radix-ui/react-popover";
-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/date-picker.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function DatePickerRoot(props) {
-  return /* @__PURE__ */ jsx2(RadixPopover.Root, { ...props });
-}
-function DatePickerTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    RadixPopover.Trigger,
-    {
-      className: cx(
-        className,
-        "group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center",
-        "bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border",
-        "data-[state=open]:border-primary-idle",
-        "has-[input:not(:placeholder-shown)]:text-primary-idle",
-        "has-[input:not(:placeholder-shown)]:border-primary-idle"
-      ),
-      ...props
-    }
-  );
-}
-function DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = "bottom",
-  align = "start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(RadixPopover.Portal, { children: /* @__PURE__ */ jsx2(
-    RadixPopover.Content,
-    {
-      align,
-      className: cx(
-        className,
-        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]"
-      ),
-      side,
-      sideOffset,
-      ...props
-    }
-  ) });
-}
-function DatePickerValue({
-  className,
-  displayValue = "",
-  value,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!displayValue && /* @__PURE__ */ jsx2(Typography, { className: "text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x", children: displayValue }),
-    /* @__PURE__ */ jsx2(
-      "input",
-      {
-        ...props,
-        "aria-readonly": true,
-        className: cx("pointer-events-none", className),
-        hidden: true,
-        placeholder: props.placeholder ?? " ",
-        readOnly: true,
-        value: value ?? ""
-      }
-    )
-  ] });
-}
-function DatePickerLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    Typography,
-    {
-      asChild: true,
-      className: cx(
-        "inline-block max-w-full truncate text-left font-normal",
-        "left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2",
-        "ease transition-all duration-250",
-        // Content Open
-        "group-data-[state=open]:text-primary-idle",
-        "group-data-[state=open]:-top-[3px]",
-        "group-data-[state=open]:text-size-label-sm-1x",
-        "group-data-[state=open]:font-medium",
-        // Filled
-        "group-has-[input:not(:placeholder-shown)]:text-primary-idle",
-        "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",
-        // If has left slot
-        "group-has-[div[data-slot=date-picker-left-slot]]:left-large-4x",
-        "group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small",
-        "group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
-        // If has right slot
-        "group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x",
-        "group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small",
-        "group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
-        // Animate
-        "group-data-[state=open]:animate-in",
-        "group-data-[state=closed]:animate-out",
-        "group-has-[input:not(:placeholder-shown)]:animate-out",
-        className
-      ),
-      weight: "medium",
-      ...props,
-      children: /* @__PURE__ */ jsx2("label", { htmlFor, children: /* @__PURE__ */ jsx2("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
-    }
-  );
-}
-function DatePickerLeftSlot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "date-picker-left-slot"
-    }
-  );
-}
-function DatePickerRightSlot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "date-picker-right-slot"
-    }
-  );
-}
-export {
-  DatePickerContent,
-  DatePickerLabel,
-  DatePickerLeftSlot,
-  DatePickerRightSlot,
-  DatePickerRoot,
-  DatePickerTrigger,
-  DatePickerValue
-};

package/dist/components/input.d.ts

@@ -1,32 +0,0 @@
-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 };