@xanui/ui 1.2.8 → 1.2.11

package/readme.md

@@ -1,10 +1,10 @@
 # Xanui Library
 
-Xanui is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished surfaces quickly while keeping full control over styling tokens.
+Xanui is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished defaults quickly while keeping full control over styling tokens.
 
 ## Highlights
 
-- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
+- **Unified prop default** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
 - **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
 - **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
 - **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
@@ -65,7 +65,7 @@ npm run dev
 
 | Category               | Components                                                                                                                                                      | Docs                                                                                                                                                                                                                                                    |
 | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Layout & Surfaces      | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider                                                                                  | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md`                                                                                |
+| Layout & defaults      | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider                                                                                  | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md`                                                                                |
 | Navigation             | Tabs, Tab, List, ListItem, Menu, Drawer                                                                                                                         | `docs/Tabs.md`, `docs/Tab.md`, `docs/List.md`, `docs/ListItem.md`, `docs/Menu.md`, `docs/Drawer.md`                                                                                                                                                     |
 | Data Display           | Table (and TableBody/TableCell/TableFooter/TableHead/TablePagination/TableRow), Datatable, Chip, Avatar, Image, Badge, CircleProgress, LineProgress, LoadingBox | `docs/Table*.md`, `docs/Datatable.md`, `docs/Chip.md`, `docs/Avatar.md`, `docs/Image.md`, `docs/Badge.md`, `docs/CircleProgress.md`, `docs/LineProgress.md`, `docs/LoadingBox.md`                                                                       |
 | Inputs & Forms         | Button, ButtonGroup, IconButton, Form, Input, Select, Option, Checkbox, Radio, Switch, Calendar, CalendarInput, Label                                           | `docs/Button.md`, `docs/ButtonGroup.md`, `docs/IconButton.md`, `docs/Form.md`, `docs/Input.md`, `docs/Select.md`, `docs/Option.md`, `docs/Checkbox.md`, `docs/Radio.md`, `docs/Switch.md`, `docs/Calendar.md`, `docs/CalendarInput.md`, `docs/Label.md` |
@@ -94,7 +94,7 @@ The development workflow encourages updating `docs/` alongside the corresponding
 
 Guidelines:
 
-- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
+- Keep new components aligned with the `TagProps` default (spacing, layout, color tokens, responsive props).
 - Provide at least one example in `example/` when adding new UI patterns.
 - Maintain the established documentation structure (overview, basic example, props table, scenario demos).
 

package/useBlurCss/index.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 let _d;
 const useBlurCss = (blur, mode) => {
     return React.useMemo(() => {
-        let transparent = { bgcolor: "surface.ghost" };
+        let transparent = { bgcolor: "default.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"default.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useBlurCss/index.js

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 let _d;
 const useBlurCss = (blur, mode) => {
     return useMemo(() => {
-        let transparent = { bgcolor: "surface.ghost" };
+        let transparent = { bgcolor: "default.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"default.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useContextMenu/index.cjs

@@ -18,7 +18,7 @@ const useContextMenu = (_a) => {
                 core.Renderar.unrender(Comp);
             };
         }, []);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "surface.main", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "default.base", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
                         core.Renderar.unrender(Comp);
                         onClickOutside && onClickOutside(e);
                     }, children: children }))] }));

package/useContextMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onExited, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"surface.main\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onExited, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"default.base\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}

package/useContextMenu/index.js

@@ -16,7 +16,7 @@ const useContextMenu = (_a) => {
                 Renderar.unrender(Comp);
             };
         }, []);
-        return (jsxs(Fragment, { children: [jsx(Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "surface.main", height: 0, width: 0 }), jsx(Menu, Object.assign({}, props, { target: target, onClickOutside: (e) => {
+        return (jsxs(Fragment, { children: [jsx(Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "default.base", height: 0, width: 0 }), jsx(Menu, Object.assign({}, props, { target: target, onClickOutside: (e) => {
                         Renderar.unrender(Comp);
                         onClickOutside && onClickOutside(e);
                     }, children: children }))] }));

package/useContextMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onExited, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"surface.main\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onExited, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"default.base\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}