@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/checkbox.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as CheckoxPrimitive from '@radix-ui/react-checkbox';
+
+declare function Checkbox({ label, name, className, disabled, ...props }: CheckoxPrimitive.CheckboxProps & {
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };

package/dist/components/{ui/input/root.js → checkbox.js}

@@ -1,16 +1,34 @@
-// src/components/ui/input/root.tsx
-import { createContext, use } from "react";
+// src/components/checkbox.tsx
+import * as CheckoxPrimitive from "@radix-ui/react-checkbox";
 import { cx as cx2 } from "@xjur-ui/util";
 
-// src/components/ui/input/message.tsx
-import { memo as memo2 } from "react";
+// 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/ui/typography.tsx
+// 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";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var typographyVariants = cva("", {
   variants: {
     variant: {
@@ -71,7 +89,7 @@ var Typography = memo(
     ...props
   }) => {
     const Component = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       Component,
       {
         className: typographyVariants({ variant, size, weight, className }),
@@ -82,82 +100,54 @@ var Typography = memo(
 );
 Typography.displayName = "Typography";
 
-// src/components/ui/input/message.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
+// src/components/checkbox.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 InputRoot({
-  children,
+function Checkbox({
+  label,
+  name,
   className,
-  errorMessage,
-  size = "lg",
-  rounded = false,
-  disabled,
+  disabled = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
-    InputRootContext.Provider,
-    {
-      value: { errorMessage, disabled, size, rounded },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ...props,
-          className: cx2(
-            "group gap-small relative flex flex-col data-[disabled=true]:opacity-60",
-            className
-          ),
-          "data-disabled": disabled,
-          children: [
-            children,
-            errorMessage && /* @__PURE__ */ jsx3(InputMessage, { children: errorMessage })
-          ]
-        }
-      )
-    }
-  );
+  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 {
-  InputRoot,
-  InputRootContext,
-  useInput
+  Checkbox
 };

package/dist/components/chip.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ClassVariantProps } from '@xjur-ui/util';
+import { ComponentProps } from 'react';
+import { Typography } from './typography.js';
+import { Icon, IconType } from './icon.js';
+import { AvatarRoot } from './avatar.js';
+import '@radix-ui/react-avatar';
+
+declare const chipVariants: (props?: ({
+    variant?: "primary" | "neutral" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChipRoot({ className, variant, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof chipVariants>): react_jsx_runtime.JSX.Element;
+declare function ChipText({ variant, size, weight, className, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
+declare function ChipIcon({ className, ...props }: ComponentProps<typeof Icon>): react_jsx_runtime.JSX.Element;
+declare function ChipClose({ className, children, ...props }: ComponentProps<'button'> & {
+    name?: IconType;
+}): react_jsx_runtime.JSX.Element;
+declare function ChipAvatar({ size, avatarFallback, avatarUrl, ...props }: ComponentProps<typeof AvatarRoot> & {
+    avatarUrl?: string;
+    avatarFallback: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { ChipAvatar, ChipClose, ChipIcon, ChipRoot, ChipText };

package/dist/components/chip.js

@@ -0,0 +1,255 @@
+// src/components/chip.tsx
+import { cva as cva2, cx as cx3 } from "@xjur-ui/util";
+import "react";
+
+// 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/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "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/avatar.tsx
+import "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cx as cx2 } from "@xjur-ui/util";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AvatarRoot({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AvatarPrimitive.Root,
+    {
+      className: cx2(
+        "rounded-circle relative flex shrink-0 overflow-hidden",
+        "data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
+        className
+      ),
+      "data-size": size,
+      "data-slot": "avatar",
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AvatarPrimitive.Image,
+    {
+      className: cx2("aspect-square size-full", className),
+      "data-slot": "avatar-image",
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AvatarPrimitive.Fallback,
+    {
+      className: cx2(
+        "bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white",
+        className
+      ),
+      "data-slot": "avatar-fallback",
+      ...props
+    }
+  );
+}
+
+// src/components/chip.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var chipVariants = cva2(
+  [
+    "group/chip relative h-large-2x w-fit rounded-circle px-small py-none flex items-center gap-small_1x-alt",
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover",
+        danger: "bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover",
+        neutral: "bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+function ChipRoot({
+  className,
+  variant = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: cx3(chipVariants({ variant }), className), ...props });
+}
+function ChipText({
+  variant = "label",
+  size = "sm-1x",
+  weight = "medium",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    Typography,
+    {
+      className: cx3(className, "truncate"),
+      size,
+      variant,
+      weight,
+      ...props
+    }
+  );
+}
+function ChipIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    Icon,
+    {
+      className: (cx3(
+        "text-size-body-md",
+        "group-data-[variant=primary]:text-primary-label-idle",
+        "group-data-[variant=danger]:text-danger-label-idle",
+        "group-data-[variant=neutral]:text-icon-neutral-3"
+      ), className),
+      ...props
+    }
+  );
+}
+function ChipClose({
+  className,
+  children = /* @__PURE__ */ jsx4(ChipIcon, { name: "close" }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: cx3(
+        className,
+        "cursor-pointer bg-inherit",
+        "invisible items-center justify-center group-hover/chip:visible",
+        "absolute top-0 right-0",
+        "h-large-2x w-large-2x rounded-circle",
+        "transition-[visibility] duration-200"
+      ),
+      type: "button",
+      ...props,
+      children
+    }
+  );
+}
+function ChipAvatar({
+  size = "xs",
+  avatarFallback = "CN",
+  avatarUrl,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AvatarRoot, { size, style: { marginLeft: "-4px" }, ...props, children: [
+    avatarUrl && /* @__PURE__ */ jsx4(AvatarImage, { src: avatarUrl }),
+    /* @__PURE__ */ jsx4(AvatarFallback, { children: avatarFallback })
+  ] });
+}
+export {
+  ChipAvatar,
+  ChipClose,
+  ChipIcon,
+  ChipRoot,
+  ChipText
+};

package/dist/components/collapsible.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+declare function CollapsibleRoot({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+
+export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -0,0 +1,41 @@
+// src/components/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function CollapsibleRoot({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
+}
+function CollapsibleContent2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      className: cx(
+        className,
+        "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up"
+      ),
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+export {
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger2 as CollapsibleTrigger
+};

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

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