@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/date-picker.js

@@ -0,0 +1,232 @@
+// 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 data-[state=open]:shadow-focus-primary",
+        "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/divider.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+declare function Divider({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+export { Divider };

package/dist/components/divider.js

@@ -0,0 +1,28 @@
+// src/components/divider.tsx
+import "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Divider({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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",
+        className
+      ),
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      ...props
+    }
+  );
+}
+export {
+  Divider
+};

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ListContent, ListHeader, ListHeaderTitle, ListItem } from './list.js';
+import { Typography } from './typography.js';
+import { Divider } from './divider.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
+import '@radix-ui/react-separator';
+
+declare function DropdownMenuRoot({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, align, side, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuList({ ...props }: React.ComponentProps<typeof ListContent>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuHeader({ ...props }: React.ComponentProps<typeof ListHeader>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuHeaderTitle({ ...props }: React.ComponentProps<typeof ListHeaderTitle>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, ...props }: React.ComponentProps<typeof ListItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItemText({ ...props }: React.ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItemDivider({ ...props }: React.ComponentProps<typeof Divider>): react_jsx_runtime.JSX.Element;
+
+export { DropdownMenuContent, DropdownMenuHeader, DropdownMenuHeaderTitle, DropdownMenuItem, DropdownMenuItemDivider, DropdownMenuItemText, DropdownMenuList, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,294 @@
+// src/components/dropdown-menu.tsx
+import "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cx as cx3 } 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/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/list.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+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)
+    }
+  );
+}
+var variants = cva2(
+  [
+    "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: {
+      size: {
+        md: "h-large-4x",
+        lg: "h-large-7x"
+      },
+      isActive: {
+        true: "bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      isActive: false
+    }
+  }
+);
+function ListItem({
+  className,
+  size,
+  isActive,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "li";
+  return /* @__PURE__ */ jsx2(Comp, { ...props, className: cx(variants({ size, isActive }), className) });
+}
+
+// src/components/divider.tsx
+import "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cx as cx2 } from "@xjur-ui/util";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Divider({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    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",
+        className
+      ),
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      ...props
+    }
+  );
+}
+
+// src/components/dropdown-menu.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DropdownMenuRoot({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Content,
+    {
+      align,
+      className: cx3(
+        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[240px]",
+        className
+      ),
+      "data-slot": "dropdown-menu-content",
+      side,
+      sideOffset,
+      ...props,
+      children: /* @__PURE__ */ jsx4(ListRoot, { children })
+    }
+  ) });
+}
+function DropdownMenuList({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(ListContent, { ...props });
+}
+function DropdownMenuHeader({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(ListHeader, { ...props });
+}
+function DropdownMenuHeaderTitle({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(ListHeaderTitle, { ...props });
+}
+function DropdownMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(ListItem, { className: cx3(className, "cursor-pointer"), ...props });
+}
+function DropdownMenuItemText({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(Typography, { ...props });
+}
+function DropdownMenuItemDivider({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(Divider, { ...props });
+}
+export {
+  DropdownMenuContent,
+  DropdownMenuHeader,
+  DropdownMenuHeaderTitle,
+  DropdownMenuItem,
+  DropdownMenuItemDivider,
+  DropdownMenuItemText,
+  DropdownMenuList,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+};

package/dist/components/{resources/icons.d.ts → icon.d.ts}

@@ -1,4 +1,13 @@
-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"];
+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"];
 type IconType = (typeof icons)[number];
 
-export { type IconType, icons };
+type IconProps = {
+    name: IconType;
+    filled?: boolean;
+} & ComponentProps<'span'>;
+declare function Icon({ className, filled, name, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Icon, type IconProps, type IconType, icons };

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

@@ -1,7 +1,7 @@
-// src/components/ui/icon.tsx
+// src/components/icon.tsx
 import { cx } from "@xjur-ui/util";
 
-// src/components/resources/icons.ts
+// src/resources/icons.ts
 var icons = [
   "account_balance",
   "ad_units",
@@ -129,10 +129,25 @@ var icons = [
   "wifi_off",
   "wifi",
   "work",
-  "workspaces"
+  "workspaces",
+  "article",
+  "id_card",
+  "badge",
+  "home",
+  "save",
+  "code",
+  "favorite",
+  "analytics",
+  "reports",
+  "event",
+  "account_circle",
+  "history",
+  "security",
+  "bar_chart",
+  "category"
 ];
 
-// src/components/ui/icon.tsx
+// src/components/icon.tsx
 import { jsx } from "react/jsx-runtime";
 function Icon({ className, filled = false, name, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -141,7 +156,7 @@ function Icon({ className, filled = false, name, ...props }) {
       ...props,
       className: cx(
         "material-symbols-outlined",
-        "text-size-body-lg text-icon-neutral-3",
+        "text-size-body-lg",
         className
       ),
       style: {