@lotte-innovate/ui-component-test 0.1.36 → 0.1.38

package/dist/cjs/lib/components/Separator/index.jsx

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var themes_1 = require("@radix-ui/themes");
+var separatorVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+        color: (0, constants_1.bgColorStyle)(),
+    },
+});
+exports.Separator = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var orientation = _a.orientation, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'slate' : _b, className = _a.className, children = _a.children, props = __rest(_a, ["orientation", "scaling", "size", "color", "className", "children"]);
+    var sizeTheme = '1';
+    if (size === 'medium')
+        sizeTheme = '2';
+    if (size === 'large')
+        sizeTheme = '3';
+    if (size === 'fill-large')
+        sizeTheme = '4';
+    return (<themes_1.Theme hasBackground={false} className="flex justify-center items-center">
+        <themes_1.Separator orientation={orientation} size={sizeTheme} className={(0, utils_1.cn)("bg-".concat(color, "A-6 dark:bg-").concat(color, "DarkA-6"), separatorVariants({ scaling: scaling }), className)} {...props}>
+          {children}
+        </themes_1.Separator>
+      </themes_1.Theme>);
+});
+exports.Separator.displayName = 'Separator';
+exports.default = exports.Separator;

package/dist/cjs/lib/components/Skeleton/index.jsx

@@ -0,0 +1,51 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var themes_1 = require("@radix-ui/themes");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var separatorVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+    },
+    defaultVariants: {
+        radius: 'medium',
+    },
+});
+exports.Skeleton = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, className = _a.className, radius = _a.radius, loading = _a.loading, width = _a.width, height = _a.height, skeletonProps = __rest(_a, ["children", "className", "radius", "loading", "width", "height"]);
+    return (<themes_1.Theme>
+      <themes_1.Skeleton ref={forwardedRef} loading={loading} width={width} height={height} className={(0, utils_1.cn)('', radius && (0, utils_1.cn)(separatorVariants({ radius: radius }), className))} {...skeletonProps}>
+        {children}
+      </themes_1.Skeleton>
+    </themes_1.Theme>);
+});
+exports.Skeleton.displayName = 'Skeleton';
+exports.default = exports.Skeleton;

package/dist/cjs/lib/components/Slider/index.jsx

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var themes_1 = require("@radix-ui/themes");
+var sliderVariants = (0, class_variance_authority_1.cva)('relative flex items-center select-none touch-none w-[200px] h-5', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+        // color: bgColorStyle(),
+    },
+});
+exports.Slider = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, color = _a.color, size = _a.size, appearance = _a.appearance, _b = _a.scaling, scaling = _b === void 0 ? '100%' : _b, radius = _a.radius, tabIndex = _a.tabIndex, sliderProps = __rest(_a, ["className", "color", "size", "appearance", "scaling", "radius", "tabIndex"]);
+    if (!color)
+        color = 'red';
+    if (radius === 'medium' || radius === 'large')
+        radius = 'full';
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    if (size === 'large')
+        sizeTheme = '3';
+    return (<themes_1.Theme accentColor={color} scaling={scaling} hasBackground={false}>
+        <themes_1.Slider ref={forwardedRef} variant={appearance} size={sizeTheme} radius={radius} color={color} className={(0, utils_1.cn)(sliderVariants({ radius: radius }), className)} {...sliderProps}/>
+      </themes_1.Theme>);
+});
+exports.Slider.displayName = 'Slider';
+exports.default = exports.Slider;

package/dist/cjs/lib/components/Spinner/index.jsx

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var themes_1 = require("@radix-ui/themes");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var spinnerVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+exports.Spinner = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, size = _a.size, scaling = _a.scaling, loading = _a.loading, spinnerProps = __rest(_a, ["className", "children", "size", "scaling", "loading"]);
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    if (size === 'large')
+        sizeTheme = '3';
+    return (<themes_1.Theme hasBackground={false}>
+      <themes_1.Spinner ref={forwardedRef} loading={loading} size={sizeTheme} className={(0, utils_1.cn)('', spinnerVariants({ scaling: scaling }), className)} {...spinnerProps}>
+        {children}
+      </themes_1.Spinner>
+    </themes_1.Theme>);
+});
+exports.Spinner.displayName = 'Spinner';
+exports.default = exports.Spinner;

package/dist/cjs/lib/components/TabNav/index.jsx

@@ -0,0 +1,50 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.Root = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var themes_1 = require("@radix-ui/themes");
+var utils_1 = require("lib/utils/utils");
+var tabNavVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {},
+});
+exports.Root = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, size = _a.size, color = _a.color, rootProps = __rest(_a, ["className", "children", "size", "color"]);
+    if (!color)
+        color = 'red';
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    return (<themes_1.Theme accentColor={color} hasBackground={false}>
+      <themes_1.TabNav.Root ref={ref} size={sizeTheme} className={(0, utils_1.cn)('', tabNavVariants({}), className)} {...rootProps}>
+        {children}
+      </themes_1.TabNav.Root>
+    </themes_1.Theme>);
+});
+exports.Root.displayName = 'TabNav.Root';
+exports.Link = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, href = _a.href, linkProps = __rest(_a, ["className", "children", "href"]);
+    return (<themes_1.TabNav.Link ref={ref} className={(0, utils_1.cn)('text-slateA-11 data-[state=active]:text-slateA-12 dark:text-slateDarkA-11 dark:data-[state=active]:text-slateDarkA-12', tabNavVariants({}), className)} href={href} {...linkProps}>
+      {children}
+    </themes_1.TabNav.Link>);
+});
+exports.Link.displayName = 'TabNav.Link';
+var TabNav = {
+    Root: exports.Root,
+    Link: exports.Link,
+};
+exports.default = TabNav;

package/dist/cjs/lib/components/Table/index.jsx

@@ -0,0 +1,119 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowHeaderCell = exports.ColumnHeaderCell = exports.Cell = exports.Row = exports.Body = exports.Header = exports.Root = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var themes_1 = require("@radix-ui/themes");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var tableVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+        radius: __assign({}, constants_1.radiusVariants['base']),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+var tableRowVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        size: {
+            small: 'h-[36px]',
+            medium: 'h-[44px]',
+            large: 'h-[48px] p-3',
+        },
+    },
+});
+exports.Root = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, appearance = _a.appearance, scaling = _a.scaling, size = _a.size, radius = _a.radius, tableProps = __rest(_a, ["className", "children", "appearance", "scaling", "size", "radius"]);
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    if (size === 'large')
+        sizeTheme = '3';
+    if (radius === 'full')
+        radius = 'large';
+    return (<themes_1.Theme hasBackground={false}>
+      <themes_1.Table.Root ref={ref} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling, radius: radius }), className)} variant={appearance} size={sizeTheme} {...tableProps}>
+        {children}
+      </themes_1.Table.Root>
+    </themes_1.Theme>);
+});
+exports.Root.displayName = 'Table.Root';
+exports.Header = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    return (<themes_1.Table.Header ref={forwardedRef} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), className)} {...props}>
+    {children}
+  </themes_1.Table.Header>);
+});
+exports.Header.displayName = 'Table.Header';
+exports.Body = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    return (<themes_1.Table.Body ref={forwardedRef} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), className)} {...props}>
+    {children}
+  </themes_1.Table.Body>);
+});
+exports.Body.displayName = 'Table.Body';
+exports.Row = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    return (<themes_1.Table.Row ref={forwardedRef} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), className)} {...props}>
+    {children}
+  </themes_1.Table.Row>);
+});
+exports.Row.displayName = 'Table.Row';
+exports.Cell = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, cellProps = __rest(_a, ["className", "children", "scaling"]);
+    return (<themes_1.Table.Cell className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), className)} {...cellProps} ref={forwardedRef}>
+    {children}
+  </themes_1.Table.Cell>);
+});
+exports.Cell.displayName = 'Table.Cell';
+exports.ColumnHeaderCell = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, props = __rest(_a, ["className", "children", "scaling", "size"]);
+    return (<themes_1.Table.ColumnHeaderCell ref={forwardedRef} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), tableRowVariants({ size: size }), className)} {...props}>
+    {children}
+  </themes_1.Table.ColumnHeaderCell>);
+});
+exports.ColumnHeaderCell.displayName = 'Table.ColumnHeaderCell';
+exports.RowHeaderCell = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    return (<themes_1.Table.RowHeaderCell ref={forwardedRef} className={(0, utils_1.cn)('', tableVariants({ scaling: scaling }), className)} {...props}>
+    {children}
+  </themes_1.Table.RowHeaderCell>);
+});
+exports.RowHeaderCell.displayName = 'Table.RowHeaderCell';
+var Table = {
+    Root: exports.Root,
+    Header: exports.Header,
+    Body: exports.Body,
+    Row: exports.Row,
+    Cell: exports.Cell,
+    ColumnHeaderCell: exports.ColumnHeaderCell,
+    RowHeaderCell: exports.RowHeaderCell,
+};
+exports.default = Table;

package/dist/cjs/lib/components/Tabs/index.jsx

@@ -0,0 +1,80 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.Trigger = exports.List = exports.Root = void 0;
+var themes_1 = require("@radix-ui/themes");
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("lib/utils/utils");
+var class_variance_authority_1 = require("class-variance-authority");
+var constants_1 = require("lib/constants");
+var tabsVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        weight: __assign({}, constants_1.weightVariants),
+    },
+});
+exports.Root = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, color = _a.color, rootProps = __rest(_a, ["className", "children", "color"]);
+    if (!color)
+        color = 'red';
+    return (<themes_1.Theme accentColor={color} hasBackground={false}>
+      <themes_1.Tabs.Root {...rootProps} ref={forwardedRef} className={(0, utils_1.cn)('', className)}>
+        {children}
+      </themes_1.Tabs.Root>
+    </themes_1.Theme>);
+});
+exports.Root.displayName = 'Tabs.Root';
+exports.List = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, weight = _a.weight, children = _a.children, size = _a.size, listProps = __rest(_a, ["className", "weight", "children", "size"]);
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    return (<themes_1.Tabs.List ref={forwardedRef} size={sizeTheme} {...listProps} className={(0, utils_1.cn)('', className)}>
+      {children}
+    </themes_1.Tabs.List>);
+});
+exports.List.displayName = 'Tabs.List';
+exports.Trigger = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, weight = _a.weight, children = _a.children, triggerProps = __rest(_a, ["className", "weight", "children"]);
+    return (<themes_1.Tabs.Trigger ref={forwardedRef} className={(0, utils_1.cn)('text-slateA-11 data-[state=active]:text-slateA-12 dark:text-slateDarkA-11 dark:data-[state=active]:text-slateDarkA-12', className)} {...triggerProps}>
+      {children}
+    </themes_1.Tabs.Trigger>);
+});
+exports.Trigger.displayName = 'Tabs.Trigger';
+exports.Content = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, weight = _a.weight, children = _a.children, contentProps = __rest(_a, ["className", "weight", "children"]);
+    return (<themes_1.Tabs.Content ref={forwardedRef} {...contentProps} className={(0, utils_1.cn)('mt-3', className)}>
+      {children}
+    </themes_1.Tabs.Content>);
+});
+exports.Content.displayName = 'Tabs.Content';
+var Tabs = {
+    Root: exports.Root,
+    List: exports.List,
+    Trigger: exports.Trigger,
+    Content: exports.Content,
+};
+exports.default = Tabs;

package/dist/cjs/lib/components/TextArea/index.jsx

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var themes_1 = require("@radix-ui/themes");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var textAreaNavVariants = (0, class_variance_authority_1.cva)('w-[250px]', {
+    variants: {
+        size: {
+            small: 'text-xs h-[48px]',
+            medium: 'text-sm h-[64px]',
+            large: 'text-base h-[80px]',
+            'x-large': 'text-lg h-[96px]',
+        },
+        scaling: __assign({}, constants_1.scalingVariants),
+        radius: __assign({}, constants_1.radiusVariants['extra-large']),
+    },
+    defaultVariants: {
+        size: 'medium',
+        scaling: '100%',
+        radius: 'medium',
+    },
+});
+exports.TextArea = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, children = _a.children, size = _a.size, appearance = _a.appearance, scaling = _a.scaling, radius = _a.radius, color = _a.color, textAreaProps = __rest(_a, ["className", "children", "size", "appearance", "scaling", "radius", "color"]);
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    if (size === 'large')
+        sizeTheme = '3';
+    if (!color)
+        color = 'red';
+    return (<themes_1.Theme hasBackground={false} accentColor={color}>
+        <themes_1.TextArea ref={forwardedRef} variant={appearance} size={sizeTheme} className={(0, utils_1.cn)(textAreaNavVariants({ size: size, scaling: scaling, radius: radius }), size === 'x-large' && 'rt-r-size-4', className)} {...textAreaProps}></themes_1.TextArea>
+      </themes_1.Theme>);
+});
+exports.TextArea.displayName = 'TextArea';
+exports.default = exports.TextArea;

package/dist/cjs/lib/components/TextField/index.jsx

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slot = exports.Root = void 0;
+var react_1 = __importDefault(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var themes_1 = require("@radix-ui/themes");
+var textFieldVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+        color: (0, constants_1.bgColorStyle)(),
+    },
+});
+exports.Root = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, color = _a.color, size = _a.size, appearance = _a.appearance, _b = _a.scaling, scaling = _b === void 0 ? '100%' : _b, radius = _a.radius, children = _a.children, sliderProps = __rest(_a, ["className", "color", "size", "appearance", "scaling", "radius", "children"]);
+    if (!color)
+        color = 'red';
+    var sizeTheme = '2';
+    if (size === 'small')
+        sizeTheme = '1';
+    if (size === 'large')
+        sizeTheme = '3';
+    return (<themes_1.Theme scaling={scaling} accentColor={color} hasBackground={false}>
+        <themes_1.TextField.Root ref={forwardedRef} variant={appearance} size={sizeTheme} radius={radius} color={color} className={(0, utils_1.cn)(textFieldVariants({ radius: radius }), className)} {...sliderProps}>
+          {children}
+        </themes_1.TextField.Root>
+      </themes_1.Theme>);
+});
+exports.Root.displayName = 'TextField.Root';
+exports.Slot = react_1.default.forwardRef(function (_a, forwardedRef) {
+    var className = _a.className, color = _a.color, side = _a.side, radius = _a.radius, children = _a.children, sliderProps = __rest(_a, ["className", "color", "side", "radius", "children"]);
+    return (<themes_1.TextField.Slot ref={forwardedRef} color={color} side={side} className={(0, utils_1.cn)(textFieldVariants({ radius: radius }), className)} {...sliderProps}>
+      {children}
+    </themes_1.TextField.Slot>);
+});
+exports.Slot.displayName = 'TextField.Slot';
+var TextField = {
+    Root: exports.Root,
+    Slot: exports.Slot,
+};
+exports.default = TextField;