@xjur-ui/react 1.0.2 → 1.0.4

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @xjur-ui/react@1.0.1 build
+> @xjur-ui/react@1.0.3 build
 > tsup
 
-CLI Building entry: src/index.ts, src/components/avatar.tsx, src/components/badge.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/typography.tsx
+CLI Building entry: src/index.ts, src/components/avatar-group.tsx, src/components/avatar.tsx, src/components/badge.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/rich-editor.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/skeleton.tsx, src/components/switch.tsx, src/components/table.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/tooltip.tsx, src/components/typography.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
 CLI Using tsup config: /home/vsts/work/1/s/packages/react/tsup.config.ts
@@ -11,33 +11,39 @@ CLI Cleaning output folder
 ESM Build start
 DTS Build start
 ESM dist/index.js                    0 B
-ESM dist/components/avatar.js        1.23 KB
-ESM dist/index.css                   54.65 KB
+ESM dist/components/avatar-group.js  4.98 KB
+ESM dist/index.css                   63.18 KB
+ESM dist/components/avatar.js        1.38 KB
 ESM dist/components/badge.js         3.08 KB
 ESM dist/components/button.js        2.73 KB
 ESM dist/components/calendar.js      19.27 KB
 ESM dist/components/checkbox.js      4.64 KB
-ESM dist/components/chip.js          6.34 KB
+ESM dist/components/chip.js          6.49 KB
 ESM dist/components/collapsible.js   998.00 B
-ESM dist/components/date-picker.js   6.90 KB
-ESM dist/components/divider.js       697.00 B
-ESM dist/components/dropdown-menu.js 7.19 KB
-ESM dist/components/icon.js          2.72 KB
-ESM dist/components/input.js         8.07 KB
+ESM dist/components/divider.js       708.00 B
+ESM dist/components/date-picker.js   6.87 KB
+ESM dist/components/dropdown-menu.js 7.23 KB
+ESM dist/components/icon.js          2.80 KB
+ESM dist/components/input.js         8.04 KB
 ESM dist/components/list.js          4.34 KB
 ESM dist/components/logo.js          20.93 KB
-ESM dist/components/otp-input.js     1.00 KB
+ESM dist/components/otp-input.js     993.00 B
 ESM dist/components/radio.js         4.52 KB
-ESM dist/components/search-input.js  7.70 KB
-ESM dist/components/select.js        15.44 KB
+ESM dist/components/rich-editor.js   20.54 KB
+ESM dist/components/search-input.js  7.67 KB
+ESM dist/components/select.js        15.37 KB
 ESM dist/components/sheet.js         6.89 KB
+ESM dist/components/skeleton.js      349.00 B
 ESM dist/components/switch.js        1.13 KB
+ESM dist/components/table.js         4.35 KB
 ESM dist/components/tabs.js          1.43 KB
 ESM dist/components/tag.js           4.77 KB
+ESM dist/components/tooltip.js       1.96 KB
 ESM dist/components/typography.js    2.21 KB
-ESM ⚡️ Build success in 1286ms
-DTS ⚡️ Build success in 5617ms
+ESM ⚡️ Build success in 1411ms
+DTS ⚡️ Build success in 6457ms
 DTS dist/index.d.ts                    13.00 B
+DTS dist/components/avatar-group.d.ts  815.00 B
 DTS dist/components/badge.d.ts         607.00 B
 DTS dist/components/calendar.d.ts      448.00 B
 DTS dist/components/checkbox.d.ts      305.00 B
@@ -50,14 +56,18 @@ DTS dist/components/divider.d.ts       336.00 B
 DTS dist/components/logo.d.ts          373.00 B
 DTS dist/components/otp-input.d.ts     662.00 B
 DTS dist/components/radio.d.ts         531.00 B
+DTS dist/components/rich-editor.d.ts   1.73 KB
 DTS dist/components/select.d.ts        2.48 KB
 DTS dist/components/list.d.ts          1.28 KB
 DTS dist/components/search-input.d.ts  1.10 KB
 DTS dist/components/button.d.ts        872.00 B
 DTS dist/components/sheet.d.ts         1.62 KB
+DTS dist/components/skeleton.d.ts      225.00 B
 DTS dist/components/switch.d.ts        300.00 B
+DTS dist/components/table.d.ts         1.28 KB
 DTS dist/components/tabs.d.ts          737.00 B
 DTS dist/components/tag.d.ts           1.07 KB
+DTS dist/components/tooltip.d.ts       808.00 B
 DTS dist/components/typography.d.ts    993.00 B
 DTS dist/components/input.d.ts         2.12 KB
-DTS dist/components/icon.d.ts          2.25 KB
+DTS dist/components/icon.d.ts          2.32 KB

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @xjur-ui/react
 
+## 1.0.4
+
+### Patch Changes
+
+- 05ff877: Adiciona tooltip
+- 92ace06: Add rich text area editor
+- fd4127f: Release
+- 6436dc8: Adiciona componente skeleton
+- Updated dependencies [fd4127f]
+- Updated dependencies [6436dc8]
+  - @xjur-ui/util@1.0.2
+  - @xjur-ui/styles@1.0.2
+
+## 1.0.3
+
+### Patch Changes
+
+- fb1a2db: Create avatar group component
+- 31a7409: Adiciona componente de tabela
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/components/avatar-group.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AvatarGroupProps {
+    /**
+     * Lista de avatares para exibir
+     */
+    avatars: Array<{
+        src?: string;
+        alt?: string;
+        fallback?: string;
+    }>;
+    /**
+     * Número máximo de avatares a exibir antes de mostrar o indicador de overflow
+     * @default 3
+     */
+    max?: number;
+    /**
+     * Tamanho dos avatares
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+    /**
+     * Espaçamento entre os avatares (em pixels)
+     * @default -8
+     */
+    spacing?: number;
+}
+declare function AvatarGroup({ avatars, max, size, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/components/avatar-group.js

@@ -0,0 +1,179 @@
+// src/components/avatar-group.tsx
+import { cx as cx2 } from "@xjur-ui/util";
+
+// src/components/avatar.tsx
+import "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function AvatarRoot({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      className: cx(
+        "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",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
+        className
+      ),
+      "data-size": size,
+      "data-slot": "avatar",
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      className: cx("aspect-square size-full", className),
+      "data-slot": "avatar-image",
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      className: cx(
+        "bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white",
+        className
+      ),
+      "data-slot": "avatar-fallback",
+      ...props
+    }
+  );
+}
+
+// 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/avatar-group.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function AvatarGroup({
+  avatars,
+  max = 3,
+  size = "md",
+  className
+}) {
+  const visibleAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx2("-space-x-small-1x flex items-center", className),
+      "data-slot": "avatar-group",
+      children: [
+        visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsxs(
+          AvatarRoot,
+          {
+            className: "border-icon-neutral-5 border-2",
+            size,
+            children: [
+              avatar.src && /* @__PURE__ */ jsx3(
+                AvatarImage,
+                {
+                  alt: avatar.alt || `Avatar ${index + 1}`,
+                  src: avatar.src
+                }
+              ),
+              /* @__PURE__ */ jsx3(AvatarFallback, { children: avatar.fallback || `A${index + 1}` })
+            ]
+          },
+          index
+        )),
+        remainingCount > 0 && /* @__PURE__ */ jsx3(AvatarRoot, { className: "bg-layer-1-hover", size, children: /* @__PURE__ */ jsx3(AvatarFallback, { className: "bg-layer-1-hover font-medium", children: /* @__PURE__ */ jsxs(Typography, { className: "text-neutral-dark", weight: "medium", children: [
+          "+",
+          remainingCount
+        ] }) }) })
+      ]
+    }
+  );
+}
+export {
+  AvatarGroup
+};

package/dist/components/avatar.js

@@ -14,6 +14,7 @@ function AvatarRoot({
       className: cx(
         "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",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
         className
       ),
       "data-size": size,

package/dist/components/chip.js

@@ -116,6 +116,7 @@ function AvatarRoot({
       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",
+        "data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
         className
       ),
       "data-size": size,

package/dist/components/date-picker.js

@@ -94,7 +94,7 @@ function DatePickerTrigger({
         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 data-[state=open]:shadow-focus-primary",
+        "data-[state=open]:border-primary-idle",
         "has-[input:not(:placeholder-shown)]:text-primary-idle",
         "has-[input:not(:placeholder-shown)]:border-primary-idle"
       ),

package/dist/components/divider.js

@@ -13,7 +13,8 @@ function Divider({
     SeparatorPrimitive.Root,
     {
       className: cx(
-        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       "data-slot": "separator",

package/dist/components/dropdown-menu.js

@@ -191,7 +191,8 @@ function Divider({
     SeparatorPrimitive.Root,
     {
       className: cx2(
-        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       "data-slot": "separator",
@@ -238,7 +239,7 @@ function DropdownMenuContent({
     {
       align,
       className: cx3(
-        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[240px]",
+        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]",
         className
       ),
       "data-slot": "dropdown-menu-content",

package/dist/components/icon.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentProps } from 'react';
 
-declare const icons: readonly ["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"];
+declare const icons: readonly ["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"];
 type IconType = (typeof icons)[number];
 
 type IconProps = {

package/dist/components/icon.js

@@ -144,7 +144,11 @@ var icons = [
   "history",
   "security",
   "bar_chart",
-  "category"
+  "category",
+  "format_underlined",
+  "format_list_bulleted",
+  "format_list_numbered",
+  "redo"
 ];
 
 // src/components/icon.tsx

package/dist/components/input.js

@@ -108,7 +108,7 @@ 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",
+      "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"
     ],

package/dist/components/otp-input.js

@@ -26,7 +26,7 @@ function Input2({
       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:shadow-focus-primary focus-within:border"
+        "focus-within:border-primary-idle focus-within:border"
       ),
       ...props
     }

package/dist/components/rich-editor.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { EditorOptions, Extension, EditorContent } from '@tiptap/react';
+export { useCurrentEditor as useRichTextEditor, useEditorState as useRichTextEditorState } from '@tiptap/react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
+
+declare function RichEditorRoot({ className, editorOptions, ...props }: ComponentProps<'div'> & {
+    editorOptions?: Partial<Omit<EditorOptions, 'extensions'> & {
+        extensions?: Extension[];
+    }>;
+}): react_jsx_runtime.JSX.Element;
+declare function RichEditorContent({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function RichEditorCaption({ className, ...props }: ComponentProps<'p'>): react_jsx_runtime.JSX.Element;
+declare function RichEditorAreaText({ className, ...props }: Omit<ComponentProps<typeof EditorContent>, 'editor'>): react_jsx_runtime.JSX.Element;
+declare function RichEditorToolbar({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function ToolbarButton({ appearance, variant, onMouseDown, onPointerDown, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type ToggleButtonName = 'bold' | 'italic' | 'underline' | 'strike' | 'bulletList' | 'orderedList' | 'undo' | 'redo';
+declare function ToggleButton({ name, ...props }: ButtonProps & {
+    name: ToggleButtonName;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingButton({ appearance, variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { HeadingButton, RichEditorAreaText, RichEditorCaption, RichEditorContent, RichEditorRoot, RichEditorToolbar, ToggleButton, ToolbarButton };