@xanui/ui 1.0.0

package/GridItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":"4LAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,EAAA,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/GridItem/index.mjs

@@ -0,0 +1,10 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const GridItem = React.forwardRef((_a, ref) => {
+    var { children, xs, sm, md, lg, xl } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
+    let w = {};
+    xs && (w.xs = (100 / 12 * xs) + "%");
+    sm && (w.sm = (100 / 12 * sm) + "%");
+    md && (w.md = (100 / 12 * md) + "%");
+    lg && (w.lg = (100 / 12 * lg) + "%");
+    xl && (w.xl = (100 / 12 * xl) + "%");
+    return (jsx(Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item" }, { children: children })));
+});export{GridItem as default};//# sourceMappingURL=index.mjs.map

package/GridItem/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":"sHAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,EAAA,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/IconButton/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+
+type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, "color" | "size"> & {
+    size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    corner?: useBreakpointPropsType<"square" | "rounded" | "circle">;
+};
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { IconButton as default };
+export type { IconButtonProps };

package/IconButton/index.js

@@ -0,0 +1,48 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../useCorner/index.js');const IconButton = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    rest.sx = rest.sx || {};
+    let [_d] = core.useInterface("IconButton", rest, {}), { variant, corner, color, size } = _d, _props = tslib.__rest(_d, ["variant", "corner", "color", "size"]);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    const p = core.useBreakpointProps(_p);
+    size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
+    color = p.color;
+    variant = p.variant;
+    corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
+    let template = core.useColorTemplate(color || "brand", variant || "fill");
+    const cornerCss = index.default(corner);
+    if (size === 'small') {
+        size = 28;
+    }
+    else if (size === 'medium') {
+        size = 34;
+    }
+    else if (size === 'large') {
+        size = 52;
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: 'button', ref: ref }, cornerCss, _props, template, { baseClass: 'icon-button', sxr: {
+            border: 0,
+            radius: size,
+            height: size,
+            width: size,
+            cursor: "pointer",
+            fontFamily: "default",
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: "transparent",
+            fontSize: (size / 5) * 2,
+            "& svg": {
+                fontSize: (size / 3) * 2
+            }
+        }, hover: Object.assign(Object.assign({}, ((template === null || template === void 0 ? void 0 : template.hover) || {})), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})) }, { children: children })));
+});exports.default=IconButton;//# sourceMappingURL=index.js.map

package/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"default\",\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                bgcolor: \"transparent\",\n                fontSize: (size / 5) * 2,\n                \"& svg\": {\n                    fontSize: (size / 3) * 2\n                }\n            }}\n            hover={{\n                ...((template as any)?.hover || {}),\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsx","Tag"],"mappings":"mOAaA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAwC,EAAyC,EAAE,GAAmB,KAAI;;AAAlE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IAC3F,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;IAChC,IAAI,CAAA,EAAA,CAAA,GAAgDC,iBAAY,CAAM,YAAY,EAAE,IAAI,EAAE,EAAE,CAAC,EAAxF,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAD,YAAA,CAAA,EAAA,EAAzC,CAAA,SAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,CAA2C,CAA6C;IAE7F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;AACzB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,MAAM,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;AAE7B,IAAA,IAAI,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,IAAI,OAAO,EAAE,OAAO,IAAI,MAAM,CAAC;AACpE,IAAA,MAAM,SAAS,GAAGC,aAAS,CAAC,MAAM,CAAC;IAEnC,IAAI,IAAI,KAAK,OAAO,EAAE;QAClB,IAAI,GAAG,EAAE;AACZ,IAAA;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE;QAC1B,IAAI,GAAG,EAAE;AACZ,IAAA;SAAM,IAAI,IAAI,KAAK,OAAO,EAAE;QACzB,IAAI,GAAG,EAAE;AACZ,IAAA;IAGD,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,MAAM,EACN,QAAQ,EAAA,EACZ,SAAS,EAAC,aAAa,EACvB,GAAG,EAAE;AACD,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,YAAA,OAAO,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI;AAC1B;AACJ,SAAA,EACD,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GACG,CAAC,QAAgB,KAAA,IAAA,IAAhB,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAU,KAAK,KAAI,EAAE,EAAC,GAC/B,CAAC,MAAc,KAAA,IAAA,IAAd,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAU,KAAK,KAAI,EAAE,EAAC,EAAA,EAAA,EAAA,QAAA,EAGpC,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/IconButton/index.mjs

@@ -0,0 +1,48 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import useCorner from'../useCorner/index.mjs';const IconButton = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    rest.sx = rest.sx || {};
+    let [_d] = useInterface("IconButton", rest, {}), { variant, corner, color, size } = _d, _props = __rest(_d, ["variant", "corner", "color", "size"]);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    const p = useBreakpointProps(_p);
+    size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
+    color = p.color;
+    variant = p.variant;
+    corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
+    let template = useColorTemplate(color || "brand", variant || "fill");
+    const cornerCss = useCorner(corner);
+    if (size === 'small') {
+        size = 28;
+    }
+    else if (size === 'medium') {
+        size = 34;
+    }
+    else if (size === 'large') {
+        size = 52;
+    }
+    return (jsx(Tag, Object.assign({ component: 'button', ref: ref }, cornerCss, _props, template, { baseClass: 'icon-button', sxr: {
+            border: 0,
+            radius: size,
+            height: size,
+            width: size,
+            cursor: "pointer",
+            fontFamily: "default",
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: "transparent",
+            fontSize: (size / 5) * 2,
+            "& svg": {
+                fontSize: (size / 3) * 2
+            }
+        }, hover: Object.assign(Object.assign({}, ((template === null || template === void 0 ? void 0 : template.hover) || {})), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})) }, { children: children })));
+});export{IconButton as default};//# sourceMappingURL=index.mjs.map

package/IconButton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"default\",\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                bgcolor: \"transparent\",\n                fontSize: (size / 5) * 2,\n                \"& svg\": {\n                    fontSize: (size / 3) * 2\n                }\n            }}\n            hover={{\n                ...((template as any)?.hover || {}),\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":["_jsx"],"mappings":"qNAaA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAwC,EAAyC,EAAE,GAAmB,KAAI;;AAAlE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IAC3F,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;IAChC,IAAI,CAAA,EAAA,CAAA,GAAgD,YAAY,CAAM,YAAY,EAAE,IAAI,EAAE,EAAE,CAAC,EAAxF,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAA,MAAA,CAAA,EAAA,EAAzC,CAAA,SAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,CAA2C,CAA6C;IAE7F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;AACzB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,MAAM,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;AAE7B,IAAA,IAAI,QAAQ,GAAG,gBAAgB,CAAC,KAAK,IAAI,OAAO,EAAE,OAAO,IAAI,MAAM,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IAEnC,IAAI,IAAI,KAAK,OAAO,EAAE;QAClB,IAAI,GAAG,EAAE;AACZ,IAAA;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE;QAC1B,IAAI,GAAG,EAAE;AACZ,IAAA;SAAM,IAAI,IAAI,KAAK,OAAO,EAAE;QACzB,IAAI,GAAG,EAAE;AACZ,IAAA;IAGD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,MAAM,EACN,QAAQ,EAAA,EACZ,SAAS,EAAC,aAAa,EACvB,GAAG,EAAE;AACD,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,YAAA,OAAO,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI;AAC1B;AACJ,SAAA,EACD,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GACG,CAAC,QAAgB,KAAA,IAAA,IAAhB,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAU,KAAK,KAAI,EAAE,EAAC,GAC/B,CAAC,MAAc,KAAA,IAAA,IAAd,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAU,KAAK,KAAI,EAAE,EAAC,EAAA,EAAA,EAAA,QAAA,EAGpC,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/Image/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps } from '@xanui/core';
+
+type ImageProps<T extends TagComponentType = "img"> = TagProps<T> & {
+    errorView?: ReactElement;
+};
+declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
+
+export { Image as default };
+export type { ImageProps };

package/Image/index.js

@@ -0,0 +1,16 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Image = React.forwardRef((_a, ref) => {
+    var { children, src, alt, errorView } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "errorView"]);
+    const [faild, setFaild] = React.useState();
+    if (faild === false) {
+        let t = errorView || (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || children;
+        return (jsxRuntime.jsx(core.Tag, Object.assign({ src: src }, rest, { sxr: {
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, component: "div", baseClass: 'image', ref: ref }, { children: t })));
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ objectFit: "cover" }, rest, { component: "img", alt: alt, src: src, baseClass: 'image', onError: (e) => {
+            setFaild(false);
+            rest.onError && rest.onError(e);
+        }, ref: ref })));
+});exports.default=Image;//# sourceMappingURL=index.js.map

package/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n\n    if (faild === false) {\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\n        return (\n            <Tag\n                src={src}\n                {...rest as any}\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n                component=\"div\"\n                baseClass='image'\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            objectFit=\"cover\"\n            {...rest as any}\n            component=\"img\"\n            alt={alt}\n            src={src}\n            baseClass='image'\n            onError={(e) => {\n                setFaild(false)\n                rest.onError && rest.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Image\n\n\n"],"names":["__rest","useState","_jsx","Tag"],"mappings":"4LAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAxC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,WAAA,CAA0C,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;IAE7C,IAAI,KAAK,KAAK,KAAK,EAAE;AACjB,QAAA,IAAI,CAAC,GAAG,SAAS,KAAI,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,CAAA,IAAI,QAAQ;QAC7D,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAW,EAAA,EACf,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA,EACD,SAAS,EAAC,KAAK,EACf,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,CAAC,EAAA,CAAA,CAAO;AAEjB,IAAA;AACD,IAAA,QACID,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,IAAW,EAAA,EACf,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC1C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC"}

package/Image/index.mjs

@@ -0,0 +1,16 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{useState}from'react';import {Tag}from'@xanui/core';const Image = React.forwardRef((_a, ref) => {
+    var { children, src, alt, errorView } = _a, rest = __rest(_a, ["children", "src", "alt", "errorView"]);
+    const [faild, setFaild] = useState();
+    if (faild === false) {
+        let t = errorView || (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || children;
+        return (jsx(Tag, Object.assign({ src: src }, rest, { sxr: {
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, component: "div", baseClass: 'image', ref: ref }, { children: t })));
+    }
+    return (jsx(Tag, Object.assign({ objectFit: "cover" }, rest, { component: "img", alt: alt, src: src, baseClass: 'image', onError: (e) => {
+            setFaild(false);
+            rest.onError && rest.onError(e);
+        }, ref: ref })));
+});export{Image as default};//# sourceMappingURL=index.mjs.map

package/Image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n\n    if (faild === false) {\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\n        return (\n            <Tag\n                src={src}\n                {...rest as any}\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n                component=\"div\"\n                baseClass='image'\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            objectFit=\"cover\"\n            {...rest as any}\n            component=\"img\"\n            alt={alt}\n            src={src}\n            baseClass='image'\n            onError={(e) => {\n                setFaild(false)\n                rest.onError && rest.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Image\n\n\n"],"names":["_jsx"],"mappings":"gIAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAxC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,WAAA,CAA0C,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;IAE7C,IAAI,KAAK,KAAK,KAAK,EAAE;AACjB,QAAA,IAAI,CAAC,GAAG,SAAS,KAAI,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,CAAA,IAAI,QAAQ;QAC7D,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAW,EAAA,EACf,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA,EACD,SAAS,EAAC,KAAK,EACf,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,CAAC,EAAA,CAAA,CAAO;AAEjB,IAAA;AACD,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,IAAW,EAAA,EACf,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC1C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC"}

package/Input/index.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactElement, MutableRefObject } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+
+type InputProps<T extends TagComponentType = "input"> = Omit<TagProps<T>, "size" | "color"> & {
+    startIcon?: useBreakpointPropsType<ReactElement>;
+    endIcon?: useBreakpointPropsType<ReactElement>;
+    iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
+    focused?: boolean;
+    color?: useBreakpointPropsType<Omit<ColorTemplateColors, "default">>;
+    containerRef?: MutableRefObject<HTMLDivElement | undefined>;
+    variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
+    error?: boolean;
+    helperText?: useBreakpointPropsType<string>;
+    multiline?: boolean;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    rows?: useBreakpointPropsType<number>;
+    minRows?: useBreakpointPropsType<number>;
+    maxRows?: useBreakpointPropsType<number>;
+    slotProps?: {
+        container?: Omit<TagProps<"div">, "children">;
+    };
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Input as default };
+export type { InputProps };

package/Input/index.js

@@ -0,0 +1,149 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Text/index.js');const Input = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { value } = _a, props = tslib.__rest(_a, ["value"]);
+    let [_e] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (iconPlacement)
+        _p.iconPlacement = iconPlacement;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (helperText)
+        _p.helperText = helperText;
+    if (size)
+        _p.size = size;
+    if (rows)
+        _p.rows = rows;
+    if (minRows)
+        _p.minRows = minRows;
+    if (maxRows)
+        _p.maxRows = maxRows;
+    const p = core.useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    iconPlacement = p.iconPlacement;
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
+    helperText = p.helperText;
+    size = (_d = p.size) !== null && _d !== void 0 ? _d : 'medium';
+    rows = p.rows;
+    minRows = p.minRows;
+    maxRows = p.maxRows;
+    ref !== null && ref !== void 0 ? ref : (ref = React.useRef(null));
+    iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
+    if (!value)
+        iconPlacement = 'center';
+    const [_focused, setFocused] = React.useState(false);
+    const conRef = React.useRef(null);
+    let _focus = focused || _focused;
+    React.useEffect(() => {
+        if (containerRef) {
+            containerRef.current = conRef === null || conRef === void 0 ? void 0 : conRef.current;
+        }
+    }, [containerRef]);
+    let _rows = React.useMemo(() => {
+        if (rows)
+            return rows;
+        if (value && multiline) {
+            let lines = value.split(`\n`).length;
+            if (minRows && minRows > lines) {
+                return minRows;
+            }
+            else if (maxRows && maxRows < lines) {
+                return maxRows;
+            }
+            else {
+                return lines;
+            }
+        }
+    }, [value]) || 1;
+    const sizes = {
+        small: {
+            height: 38,
+            gap: .5,
+            fontSize: 14,
+        },
+        medium: {
+            height: 44,
+            gap: 1,
+            fontSize: 16
+        },
+        large: {
+            height: 52,
+            gap: 1,
+            fontSize: 18
+        }
+    };
+    const _size = sizes[size];
+    let borderColor = _focus ? color : (variant === "fill" ? "transparent" : "divider");
+    borderColor = error ? "danger.primary" : borderColor;
+    let multiprops = {};
+    if (multiline) {
+        multiprops = {
+            rows: _rows,
+            sx: {
+                resize: "none"
+            }
+        };
+    }
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = "auto";
+            ref.current.style.height = `${ref.current.scrollHeight}px`;
+        }
+    }, [value]);
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: `input${_focus ? " input-focused" : ""}` }, { children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.container, { sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
+                    flexWrap: "nowrap",
+                    minWidth: 150,
+                    transitionProperty: "border, box-shadow, background",
+                    bgcolor: error ? "danger.alpha" : variant === "fill" ? "background.secondary" : "background.primary",
+                    border: variant === "text" ? 0 : 1,
+                    borderColor: borderColor,
+                    borderRadius: 1,
+                    px: 1,
+                    py: .5,
+                }, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height }, { children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({ sxr: {
+                            height: "100%",
+                            alignItems: 'center',
+                            justifyContent: "center",
+                            display: "flex",
+                            color: error ? "danger.primary" : "text.secondary",
+                        }, baseClass: "input-start-icon" }, { children: startIcon })), jsxRuntime.jsx(core.Tag, Object.assign({ sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            flex: 1,
+                            minHeight: _size.height,
+                            "& textarea": {
+                                resize: "none"
+                            }
+                        } }, { children: jsxRuntime.jsx(core.Tag, Object.assign({ component: multiline ? 'textarea' : 'input' }, multiprops, rest, { sxr: {
+                                border: 0,
+                                outline: 0,
+                                bgcolor: "transparent",
+                                color: error ? "danger.primary" : "text.primary",
+                                fontSize: _size.fontSize,
+                                height: multiline ? "auto" : _size.height + "px!important",
+                                width: "100%",
+                                maxHeight: 200,
+                            }, value: value, baseClass: 'input-box', ref: ref, onFocus: (e) => {
+                                focused !== null && focused !== void 0 ? focused : setFocused(true);
+                                onFocus && onFocus(e);
+                            }, onBlur: (e) => {
+                                focused !== null && focused !== void 0 ? focused : setFocused(false);
+                                onBlur && onBlur(e);
+                            } })) })), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({ sxr: {
+                            height: "100%",
+                            alignItems: 'center',
+                            justifyContent: "center",
+                            display: 'flex',
+                            color: error ? "danger.primary" : "text.secondary",
+                        }, baseClass: "input-end-icon" }, { children: endIcon }))] })), helperText && jsxRuntime.jsx(index.default, Object.assign({ pl: .5, height: _size.height, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary" }, { children: helperText }))] })));
+});exports.default=Input;//# sourceMappingURL=index.js.map

package/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Text from '../Text';\n\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }] = useInterface<any>(\"Input\", props, {})\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 14,\n        },\n        medium: {\n            height: 44,\n            gap: 1,\n            fontSize: 16\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 18\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    minWidth: 150,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.alpha\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : 1,\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        }\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                height={_size.height}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":["__rest","useInterface","useBreakpointProps","useRef","useState","useEffect","useMemo","_jsxs","Tag","_jsx","Text"],"mappings":"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"}

package/Input/index.mjs

@@ -0,0 +1,149 @@
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React,{useRef,useState,useEffect,useMemo}from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import Text from'../Text/index.mjs';const Input = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { value } = _a, props = __rest(_a, ["value"]);
+    let [_e] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (iconPlacement)
+        _p.iconPlacement = iconPlacement;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (helperText)
+        _p.helperText = helperText;
+    if (size)
+        _p.size = size;
+    if (rows)
+        _p.rows = rows;
+    if (minRows)
+        _p.minRows = minRows;
+    if (maxRows)
+        _p.maxRows = maxRows;
+    const p = useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    iconPlacement = p.iconPlacement;
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
+    helperText = p.helperText;
+    size = (_d = p.size) !== null && _d !== void 0 ? _d : 'medium';
+    rows = p.rows;
+    minRows = p.minRows;
+    maxRows = p.maxRows;
+    ref !== null && ref !== void 0 ? ref : (ref = useRef(null));
+    iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
+    if (!value)
+        iconPlacement = 'center';
+    const [_focused, setFocused] = useState(false);
+    const conRef = useRef(null);
+    let _focus = focused || _focused;
+    useEffect(() => {
+        if (containerRef) {
+            containerRef.current = conRef === null || conRef === void 0 ? void 0 : conRef.current;
+        }
+    }, [containerRef]);
+    let _rows = useMemo(() => {
+        if (rows)
+            return rows;
+        if (value && multiline) {
+            let lines = value.split(`\n`).length;
+            if (minRows && minRows > lines) {
+                return minRows;
+            }
+            else if (maxRows && maxRows < lines) {
+                return maxRows;
+            }
+            else {
+                return lines;
+            }
+        }
+    }, [value]) || 1;
+    const sizes = {
+        small: {
+            height: 38,
+            gap: .5,
+            fontSize: 14,
+        },
+        medium: {
+            height: 44,
+            gap: 1,
+            fontSize: 16
+        },
+        large: {
+            height: 52,
+            gap: 1,
+            fontSize: 18
+        }
+    };
+    const _size = sizes[size];
+    let borderColor = _focus ? color : (variant === "fill" ? "transparent" : "divider");
+    borderColor = error ? "danger.primary" : borderColor;
+    let multiprops = {};
+    if (multiline) {
+        multiprops = {
+            rows: _rows,
+            sx: {
+                resize: "none"
+            }
+        };
+    }
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = "auto";
+            ref.current.style.height = `${ref.current.scrollHeight}px`;
+        }
+    }, [value]);
+    return (jsxs(Tag, Object.assign({ baseClass: `input${_focus ? " input-focused" : ""}` }, { children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.container, { sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
+                    flexWrap: "nowrap",
+                    minWidth: 150,
+                    transitionProperty: "border, box-shadow, background",
+                    bgcolor: error ? "danger.alpha" : variant === "fill" ? "background.secondary" : "background.primary",
+                    border: variant === "text" ? 0 : 1,
+                    borderColor: borderColor,
+                    borderRadius: 1,
+                    px: 1,
+                    py: .5,
+                }, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height }, { children: [startIcon && jsx(Tag, Object.assign({ sxr: {
+                            height: "100%",
+                            alignItems: 'center',
+                            justifyContent: "center",
+                            display: "flex",
+                            color: error ? "danger.primary" : "text.secondary",
+                        }, baseClass: "input-start-icon" }, { children: startIcon })), jsx(Tag, Object.assign({ sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            flex: 1,
+                            minHeight: _size.height,
+                            "& textarea": {
+                                resize: "none"
+                            }
+                        } }, { children: jsx(Tag, Object.assign({ component: multiline ? 'textarea' : 'input' }, multiprops, rest, { sxr: {
+                                border: 0,
+                                outline: 0,
+                                bgcolor: "transparent",
+                                color: error ? "danger.primary" : "text.primary",
+                                fontSize: _size.fontSize,
+                                height: multiline ? "auto" : _size.height + "px!important",
+                                width: "100%",
+                                maxHeight: 200,
+                            }, value: value, baseClass: 'input-box', ref: ref, onFocus: (e) => {
+                                focused !== null && focused !== void 0 ? focused : setFocused(true);
+                                onFocus && onFocus(e);
+                            }, onBlur: (e) => {
+                                focused !== null && focused !== void 0 ? focused : setFocused(false);
+                                onBlur && onBlur(e);
+                            } })) })), endIcon && jsx(Tag, Object.assign({ sxr: {
+                            height: "100%",
+                            alignItems: 'center',
+                            justifyContent: "center",
+                            display: 'flex',
+                            color: error ? "danger.primary" : "text.secondary",
+                        }, baseClass: "input-end-icon" }, { children: endIcon }))] })), helperText && jsx(Text, Object.assign({ pl: .5, height: _size.height, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary" }, { children: helperText }))] })));
+});export{Input as default};//# sourceMappingURL=index.mjs.map