@xjur-ui/react 1.0.1 → 1.0.3

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @xjur-ui/react@1.0.0 build
+> @xjur-ui/react@1.0.2 build
 > tsup
 
-CLI Building entry: src/index.ts, src/components/avatar.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/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/table.tsx, src/components/tabs.tsx, src/components/tag.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,32 +11,37 @@ 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                   51.62 KB
+ESM dist/components/avatar-group.js  4.98 KB
+ESM dist/index.css                   58.59 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.55 KB
+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.69 KB
-ESM dist/components/input.js         7.41 KB
+ESM dist/components/icon.js          2.72 KB
+ESM dist/components/input.js         8.07 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/radio.js         4.52 KB
 ESM dist/components/search-input.js  7.70 KB
-ESM dist/components/select.js        15.07 KB
+ESM dist/components/select.js        15.44 KB
 ESM dist/components/sheet.js         6.89 KB
 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/typography.js    2.21 KB
-ESM ⚡️ Build success in 1663ms
-DTS ⚡️ Build success in 5675ms
+ESM ⚡️ Build success in 1185ms
+DTS ⚡️ Build success in 5286ms
 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
 DTS dist/components/chip.d.ts          1.36 KB
@@ -54,8 +59,9 @@ 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/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/typography.d.ts    993.00 B
-DTS dist/components/input.d.ts         2.11 KB
-DTS dist/components/icon.d.ts          2.22 KB
+DTS dist/components/input.d.ts         2.12 KB
+DTS dist/components/icon.d.ts          2.25 KB

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # @xjur-ui/react
 
+## 1.0.3
+
+### Patch Changes
+
+- fb1a2db: Create avatar group component
+- 31a7409: Adiciona componente de tabela
+
+## 1.0.2
+
+### Patch Changes
+
+- ca57b41: New release
+
 ## 1.0.1
 
 ### Patch Changes
 
+- d3673d9: Melhorias no fluxo de inputs e novos components
 - 78f16bc: Criação dos componentes principais para execução das telas de agenda
 - ea53c28: Refactor package structure
 - Updated dependencies [78f16bc]

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/badge.d.ts

@@ -0,0 +1,13 @@
+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';
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ variant, children, className }: ClassVariantProps<typeof badgeVariants> & {
+    children: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Badge };

package/dist/components/badge.js

@@ -0,0 +1,111 @@
+// src/components/badge.tsx
+import { cva as cva2, 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/badge.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  [
+    "flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-idle",
+        secondary: "bg-secondary-idle",
+        neutral: "bg-alt-2-idle",
+        success: "bg-success-idle",
+        warning: "bg-warning-idle",
+        danger: "bg-danger-idle"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Badge({
+  variant = "neutral",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx2("span", { className: cx(badgeVariants({ variant }), className), children: /* @__PURE__ */ jsx2(Typography, { className: "text-inherit", size: "sm-2x", variant: "label", children }) });
+}
+export {
+  Badge
+};

package/dist/components/chip.d.ts

@@ -8,7 +8,7 @@ import { AvatarRoot } from './avatar.js';
 import '@radix-ui/react-avatar';
 
 declare const chipVariants: (props?: ({
-    variant?: "primary" | "danger" | "neutral" | null | undefined;
+    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;

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

@@ -115,7 +115,7 @@ function DatePickerContent({
       align,
       className: cx(
         className,
-        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)]"
+        "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,
@@ -156,25 +156,27 @@ function DatePickerLabel({
     {
       asChild: true,
       className: cx(
-        "bg-layer-2-idle w-fit font-normal",
-        "pointer-events-none absolute top-[50%] left-auto -translate-y-1/2",
-        "ease pointer-events-none transition-all duration-150",
+        "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]:bg-layer-2-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)]:bg-layer-2-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-auto",
-        "group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto",
+        "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",
@@ -183,7 +185,7 @@ function DatePickerLabel({
       ),
       weight: "medium",
       ...props,
-      children: /* @__PURE__ */ jsx2("label", { htmlFor, children })
+      children: /* @__PURE__ */ jsx2("label", { htmlFor, children: /* @__PURE__ */ jsx2("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
     }
   );
 }

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"];
+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"];
 type IconType = (typeof icons)[number];
 
 type IconProps = {

package/dist/components/icon.js

@@ -142,7 +142,9 @@ var icons = [
   "event",
   "account_circle",
   "history",
-  "security"
+  "security",
+  "bar_chart",
+  "category"
 ];
 
 // src/components/icon.tsx

package/dist/components/input.d.ts

@@ -12,7 +12,7 @@ type InputProps = {
 };
 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, ...props }: ComponentProps<'label'> & {
+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'> & {

package/dist/components/input.js

@@ -116,7 +116,7 @@ function InputContent({ className, ...props }) {
       variants: {
         variant: {
           default: "",
-          outlined: "bg-layer-2-idle border-border-layer-2 border hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle",
+          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"
         }
       }
@@ -129,6 +129,7 @@ function InputContent({ className, ...props }) {
 function InputLabel({
   htmlFor,
   className,
+  children,
   ...props
 }) {
   return /* @__PURE__ */ jsx(FieldContext.Consumer, { children: ({ variant }) => {
@@ -136,10 +137,10 @@ function InputLabel({
       "label",
       {
         className: cx(
-          "rounded-small-1x text-size-body-md text-neutral-dark data-[variant=outlined]:bg-layer-2-idle bg-layer-2-hover w-fit font-normal",
-          "ease animate-in pointer-events-none absolute top-1/2 left-auto -translate-y-1/2 transition-all duration-250",
+          "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:bg-layer-2-hover data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-focus-within:-top-[3px]",
+          "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",
@@ -147,8 +148,12 @@ function InputLabel({
           "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-auto",
-          "group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto",
+          "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",
@@ -156,7 +161,18 @@ function InputLabel({
         ),
         "data-variant": variant,
         htmlFor,
-        ...props
+        ...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
+          }
+        )
       }
     );
   } });