@lotte-innovate/ui-component-test 0.1.73 → 0.1.75

package/dist/lib/components/AlertDialog/AlertDialogContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { VariantProps } from 'class-variance-authority';
+export interface AlertDialogContentProps extends VariantProps<typeof alertDialogContentVariants> {
+}
+export declare const alertDialogContentVariants: (props?: ({
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/AlertDialog/AlertDialogContent.js

@@ -1,2 +1,51 @@
-import{j as t}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{Portal as a,Overlay as r,Content as s}from"../../../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs.js";import{cva as o}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as n}from"../../utils/utils.js";import{scalingVariants as i,radiusVariants as l}from"../../constants.js";import{useAlertDialogContext as p}from"./AlertDialogRoot.js";var m=function(){return m=Object.assign||function(t){for(var e,a=1,r=arguments.length;a<r;a++)for(var s in e=arguments[a])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t},m.apply(this,arguments)},c=function(t,e){var a={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(a[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(t);s<r.length;s++)e.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(t,r[s])&&(a[r[s]]=t[r[s]])}return a},d=o("fixed max-h-[85vh] top-[50%] left-[50%] focus:outline-none\n  translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-contentShow bg-white dark:bg-slateDark-1 \n  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]",{variants:{size:{small:"p-3 w-[300px]",medium:"p-4 w-[400px]",large:"p-5 w-[500px]","x-large":"p-6 w-[600px]"},scaling:m({},i),radius:m({},l["extra-large"])},defaultVariants:{radius:"large",size:"large"}}),x=e((function(e,o){var i=e.className,l=e.children,x=c(e,["className","children"]),u=p(),f=u.radius,_=u.size,j=u.scaling;return t.jsxs(a,{children:[t.jsx(r,{className:"fixed data-[state=open]:animate-overlayShow inset-0"}),t.jsx(s,m({className:n(d({radius:f,size:_,scaling:j}),i),ref:o},x,{children:l}))]})}));x.displayName="AlertDialog.Content";export{x as AlertDialogContent,d as alertDialogContentVariants};
-//# sourceMappingURL=AlertDialogContent.js.map
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { radiusVariants, scalingVariants } from '../../../lib/constants';
+import { useAlertDialogContext } from './AlertDialogRoot';
+export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[50%] focus:outline-none\n  translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-contentShow bg-white dark:bg-slateDark-1 \n  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]", {
+    variants: {
+        size: {
+            small: 'p-3 w-[300px]',
+            medium: 'p-4 w-[400px]',
+            large: 'p-5 w-[500px]',
+            'x-large': 'p-6 w-[600px]',
+        },
+        scaling: __assign({}, scalingVariants),
+        radius: __assign({}, radiusVariants['extra-large']),
+    },
+    defaultVariants: {
+        radius: 'large',
+        size: 'large',
+    },
+});
+export var AlertDialogContent = forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, scaling = _b.scaling;
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
+});
+AlertDialogContent.displayName = 'AlertDialog.Content';

package/dist/lib/components/AlertDialog/AlertDialogDescription.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { VariantProps } from 'class-variance-authority';
+export interface AlertDialogDescriptionProps extends VariantProps<typeof alertDialogDescriptionVariants> {
+    contentText?: string;
+}
+export declare const alertDialogDescriptionVariants: (props?: ({
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/lib/components/AlertDialog/AlertDialogDescription.js

@@ -1,2 +1,47 @@
-import{j as t}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{Description as r}from"../../../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs.js";import{cva as o}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as a}from"../../utils/utils.js";import{useAlertDialogContext as i}from"./AlertDialogRoot.js";var s=function(){return s=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},s.apply(this,arguments)},n=function(t,e){var r={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(t);a<o.length;a++)e.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a])&&(r[o[a]]=t[o[a]])}return r},l=o("text-slate-12 dark:text-slateDark-12 font-normal",{variants:{size:{small:"text-xs mb-3",medium:"text-sm mb-4",large:"text-base mb-5","x-large":"text-lg mb-6"}},defaultVariants:{size:"medium"}}),m=e((function(e,o){var m=e.className,c=e.children,p=e.contentText,u=n(e,["className","children","contentText"]),f=i().size;return t.jsx(r,s({className:a(l({size:f}),m),ref:o},u,{children:null!=p?p:c}))}));m.displayName="AlertDialog.Description";export{m as AlertDialogDescription,l as alertDialogDescriptionVariants};
-//# sourceMappingURL=AlertDialogDescription.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { useAlertDialogContext } from './AlertDialogRoot';
+export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDark-12 font-normal", {
+    variants: {
+        size: {
+            small: 'text-xs mb-3',
+            medium: 'text-sm mb-4',
+            large: 'text-base mb-5',
+            'x-large': 'text-lg mb-6',
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+export var AlertDialogDescription = forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, contentText = _a.contentText, props = __rest(_a, ["className", "children", "contentText"]);
+    var size = useAlertDialogContext().size;
+    return (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
+});
+AlertDialogDescription.displayName = 'AlertDialog.Description';

package/dist/lib/components/AlertDialog/AlertDialogRoot.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { VariantProps } from 'class-variance-authority';
+import { IAppearance, IColor } from '../../../lib/types';
+import { alertDialogContentVariants } from './AlertDialogContent';
+import { alertDialogTitleVariants } from './AlertDialogTitle';
+import { alertDialogDescriptionVariants } from './AlertDialogDescription';
+import { alertDialogActionVariants } from './AlertDialogAction';
+export interface AlertDialogProps extends VariantProps<typeof alertDialogContentVariants>, VariantProps<typeof alertDialogTitleVariants>, VariantProps<typeof alertDialogDescriptionVariants>, VariantProps<typeof alertDialogActionVariants> {
+    titleText?: string;
+    contentText?: string;
+    color?: IColor;
+    appearance?: IAppearance;
+}
+export declare const useAlertDialogContext: () => AlertDialogProps;
+export declare const AlertDialogRoot: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogProps & AlertDialogProps & React.RefAttributes<never>>;

package/dist/lib/components/AlertDialog/AlertDialogRoot.js

@@ -1,2 +1,46 @@
-import{j as r}from"../../../../_virtual/jsx-runtime.js";import{createContext as e,forwardRef as o,useMemo as t,useContext as i}from"react";import{Root as n}from"../../../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs.js";var a=function(){return a=Object.assign||function(r){for(var e,o=1,t=arguments.length;o<t;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r},a.apply(this,arguments)},l=function(r,e){var o={};for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&e.indexOf(t)<0&&(o[t]=r[t]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(t=Object.getOwnPropertySymbols(r);i<t.length;i++)e.indexOf(t[i])<0&&Object.prototype.propertyIsEnumerable.call(r,t[i])&&(o[t[i]]=r[t[i]])}return o},s=e({size:"medium",scaling:"100%",color:"red",radius:"medium",appearance:"solid"}),c=function(){return i(s)},u=o((function(e,o){var i=e.children,c=e.radius,u=e.size,d=e.scaling,p=e.color,f=l(e,["children","radius","size","scaling","color"]),m=t((function(){return{radius:c,size:u,scaling:d,color:p}}),[c,u,d,p]);return r.jsx(s.Provider,{value:m,children:r.jsx("div",{ref:o,children:r.jsx(n,a({},f,{children:i}))})})}));u.displayName="AlertDialog.Root";export{u as AlertDialogRoot,c as useAlertDialogContext};
-//# sourceMappingURL=AlertDialogRoot.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, createContext, useContext, useMemo, } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+var AlertDialogContext = createContext({
+    size: 'medium',
+    scaling: '100%',
+    color: 'red',
+    radius: 'medium',
+    appearance: 'solid',
+});
+export var useAlertDialogContext = function () {
+    return useContext(AlertDialogContext);
+};
+export var AlertDialogRoot = forwardRef(function (_a, ref) {
+    var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, color = _a.color, props = __rest(_a, ["children", "radius", "size", "scaling", "color"]);
+    var contextValue = useMemo(function () { return ({
+        radius: radius,
+        size: size,
+        scaling: scaling,
+        color: color,
+    }); }, [radius, size, scaling, color]);
+    return (_jsx(AlertDialogContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, children: _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children })) }) }));
+});
+AlertDialogRoot.displayName = 'AlertDialog.Root';

package/dist/lib/components/AlertDialog/AlertDialogTitle.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { VariantProps } from 'class-variance-authority';
+export interface AlertDialogTitleProps extends VariantProps<typeof alertDialogTitleVariants> {
+    titleText?: string;
+}
+export declare const alertDialogTitleVariants: (props?: ({
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/lib/components/AlertDialog/AlertDialogTitle.js

@@ -1,2 +1,47 @@
-import{j as t}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{Title as r}from"../../../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs.js";import{cva as l}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as a}from"../../utils/utils.js";import{useAlertDialogContext as i}from"./AlertDialogRoot.js";var o=function(){return o=Object.assign||function(t){for(var e,r=1,l=arguments.length;r<l;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},o.apply(this,arguments)},s=function(t,e){var r={};for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&e.indexOf(l)<0&&(r[l]=t[l]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(l=Object.getOwnPropertySymbols(t);a<l.length;a++)e.indexOf(l[a])<0&&Object.prototype.propertyIsEnumerable.call(t,l[a])&&(r[l[a]]=t[l[a]])}return r},n=l("m-0 text-slate-12 dark:text-slateDark-12 font-bold",{variants:{size:{small:"text-sm mb-1",medium:"text-lg mb-2",large:"text-xl mb-3","x-large":"text-2xl mb-4"}},defaultVariants:{size:"large"}}),m=e((function(e,l){var m=e.className,c=e.children,p=e.titleText,f=s(e,["className","children","titleText"]),u=i().size;return t.jsx(r,o({className:a(n({size:u}),m),ref:l},f,{children:null!=p?p:c}))}));m.displayName="AlertDialog.Title";export{m as AlertDialogTitle,n as alertDialogTitleVariants};
-//# sourceMappingURL=AlertDialogTitle.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { useAlertDialogContext } from './AlertDialogRoot';
+export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark-12 font-bold", {
+    variants: {
+        size: {
+            small: 'text-sm mb-1',
+            medium: 'text-lg mb-2',
+            large: 'text-xl mb-3',
+            'x-large': 'text-2xl mb-4',
+        },
+    },
+    defaultVariants: {
+        size: 'large',
+    },
+});
+export var AlertDialogTitle = forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, titleText = _a.titleText, props = __rest(_a, ["className", "children", "titleText"]);
+    var size = useAlertDialogContext().size;
+    return (_jsx(AlertDialogPrimitive.Title, __assign({ className: cn(alertDialogTitleVariants({ size: size }), className), ref: ref }, props, { children: titleText !== null && titleText !== void 0 ? titleText : children })));
+});
+AlertDialogTitle.displayName = 'AlertDialog.Title';

package/dist/lib/components/AlertDialog/AlertDialogTrigger.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { VariantProps } from 'class-variance-authority';
+import { IAppearance, IColor } from '../../../lib/types';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    color?: IColor;
+    appearance?: IAppearance;
+}
+declare const buttonVariants: (props?: ({
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/lib/components/AlertDialog/AlertDialogTrigger.js

@@ -1,2 +1,55 @@
-import{j as e}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as r}from"react";import{Trigger as t}from"../../../../node_modules/@radix-ui/react-alert-dialog/dist/index.mjs.js";import{cva as i}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as a}from"../../utils/utils.js";import{radiusVariants as s,scalingVariants as o,weightVariants as l,primaryColorStyle as n,appearanceStyle as c}from"../../constants.js";var d=function(){return d=Object.assign||function(e){for(var r,t=1,i=arguments.length;t<i;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},d.apply(this,arguments)},p=function(e,r){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(e);a<i.length;a++)r.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(e,i[a])&&(t[i[a]]=e[i[a]])}return t},m=i("inline-flex items-center transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8",{variants:{radius:d({},s.base),size:{small:"text-xs h-[24px] px-2",medium:"text-sm h-[32px] px-3",large:"text-base h-[40px] px-4","x-large":"text-lg h-[48px] px-6"},scaling:d({},o),weight:d({},l),color:n()},defaultVariants:{radius:"large",scaling:"100%",weight:"medium",color:"red",size:"medium"}}),u=r((function(r,i){var s=r.children,o=r.className,l=r.radius,n=r.scaling,u=r.size,g=r.weight,x=r.color,f=void 0===x?"red":x,h=r.appearance,j=void 0===h?"solid":h,b=p(r,["children","className","radius","scaling","size","weight","color","appearance"]),y=a(m({radius:l,scaling:n,size:u,weight:g,color:f}),c(j,f),o);return e.jsx(t,d({asChild:!0,ref:i,className:y},b,{children:s}))}));u.displayName="AlertDialog.Trigger";export{u as AlertDialogTrigger};
-//# sourceMappingURL=AlertDialogTrigger.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../../lib/constants';
+var buttonVariants = cva("inline-flex items-center transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8", {
+    variants: {
+        radius: __assign({}, radiusVariants['base']),
+        size: {
+            small: 'text-xs h-[24px] px-2',
+            medium: 'text-sm h-[32px] px-3',
+            large: 'text-base h-[40px] px-4',
+            'x-large': 'text-lg h-[48px] px-6',
+        },
+        scaling: __assign({}, scalingVariants),
+        weight: __assign({}, weightVariants),
+        color: primaryColorStyle(),
+    },
+    defaultVariants: {
+        radius: 'large',
+        scaling: '100%',
+        weight: 'medium',
+        color: 'red',
+        size: 'medium',
+    },
+});
+export var AlertDialogTrigger = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, weight = _a.weight, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "weight", "color", "appearance"]);
+    var buttonClassName = cn(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
+    return (_jsx(AlertDialogPrimitive.Trigger, __assign({ asChild: true, ref: ref, className: buttonClassName }, props, { children: children })));
+});
+AlertDialogTrigger.displayName = 'AlertDialog.Trigger';

package/dist/lib/components/AlertDialog/index.d.ts

@@ -0,0 +1,10 @@
+declare const AlertDialog: {
+    Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogProps & import("./AlertDialogRoot").AlertDialogProps & import("react").RefAttributes<never>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogTrigger").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./AlertDialogContent").AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("./AlertDialogTitle").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("./AlertDialogDescription").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Cancel: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogCancel").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Action: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogAction").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default AlertDialog;

package/dist/lib/components/AlertDialog/index.js

@@ -1,2 +1,17 @@
-import{AlertDialogRoot as o}from"./AlertDialogRoot.js";import{AlertDialogTrigger as r}from"./AlertDialogTrigger.js";import{AlertDialogContent as t}from"./AlertDialogContent.js";import{AlertDialogTitle as i}from"./AlertDialogTitle.js";import{AlertDialogDescription as e}from"./AlertDialogDescription.js";import{AlertDialogCancel as l}from"./AlertDialogCancel.js";import{AlertDialogAction as m}from"./AlertDialogAction.js";var a={Root:o,Trigger:r,Content:t,Title:i,Description:e,Cancel:l,Action:m};export{a as default};
-//# sourceMappingURL=index.js.map
+import { AlertDialogRoot as Root } from './AlertDialogRoot';
+import { AlertDialogTrigger as Trigger } from './AlertDialogTrigger';
+import { AlertDialogContent as Content } from './AlertDialogContent';
+import { AlertDialogTitle as Title } from './AlertDialogTitle';
+import { AlertDialogDescription as Description } from './AlertDialogDescription';
+import { AlertDialogCancel as Cancel } from './AlertDialogCancel';
+import { AlertDialogAction as Action } from './AlertDialogAction';
+var AlertDialog = {
+    Root: Root,
+    Trigger: Trigger,
+    Content: Content,
+    Title: Title,
+    Description: Description,
+    Cancel: Cancel,
+    Action: Action
+};
+export default AlertDialog;

package/dist/lib/components/AspectRatio/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import { VariantProps } from 'class-variance-authority';
+export interface AspectRatioProps extends VariantProps<typeof aspectRatioVariants> {
+}
+export declare const aspectRatioVariants: (props?: ({
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+export default AspectRatio;

package/dist/lib/components/AspectRatio/index.js

@@ -1,2 +1,42 @@
-import{j as r}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as t}from"react";import{Root as a}from"../../../../node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs.js";import{cva as e}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as o}from"../../utils/utils.js";import{scalingVariants as i}from"../../constants.js";var n=function(){return n=Object.assign||function(r){for(var t,a=1,e=arguments.length;a<e;a++)for(var o in t=arguments[a])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},n.apply(this,arguments)},s=function(r,t){var a={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&t.indexOf(e)<0&&(a[e]=r[e]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(e=Object.getOwnPropertySymbols(r);o<e.length;o++)t.indexOf(e[o])<0&&Object.prototype.propertyIsEnumerable.call(r,e[o])&&(a[e[o]]=r[e[o]])}return a},l=e("",{variants:{scaling:n({},i)},defaultVariants:{scaling:"100%"}}),c=t((function(t,e){var i=t.children,c=t.className,p=t.ratio,m=void 0===p?16/9:p,f=t.scaling,u=s(t,["children","className","ratio","scaling"]);return r.jsx(a,n({ratio:m,ref:e},u,{className:o(l({scaling:f}),c),children:i}))}));c.displayName="AspectRatio";export{l as aspectRatioVariants,c as default};
-//# sourceMappingURL=index.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { scalingVariants } from '../../../lib/constants';
+export var aspectRatioVariants = cva('', {
+    variants: {
+        scaling: __assign({}, scalingVariants),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+var AspectRatio = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.ratio, ratio = _b === void 0 ? 16 / 9 : _b, scaling = _a.scaling, props = __rest(_a, ["children", "className", "ratio", "scaling"]);
+    return (_jsx(AspectRatioPrimitive.Root, __assign({ ratio: ratio, ref: ref }, props, { className: cn(aspectRatioVariants({ scaling: scaling }), className), children: children })));
+});
+AspectRatio.displayName = 'AspectRatio';
+export default AspectRatio;

package/dist/lib/components/Avatar/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+export interface AvatarProps extends VariantProps<typeof AvatarVariants> {
+    imagePath?: string;
+    alt?: string;
+    fallbackText?: string;
+    appearance?: 'solid' | 'soft';
+    fallbackClassName?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    title?: string;
+    delayMs?: number;
+}
+declare const AvatarVariants: (props?: ({
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export default Avatar;

package/dist/lib/components/Avatar/index.js

@@ -1,2 +1,58 @@
-import{j as e}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as a}from"react";import{Root as t,Image as r,Fallback as l}from"../../../../node_modules/@radix-ui/react-avatar/dist/index.mjs.js";import{cva as i}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as s}from"../../utils/utils.js";import{radiusVariants as o,scalingVariants as n,primaryColorStyle as p,appearanceStyle as x}from"../../constants.js";var c=function(){return c=Object.assign||function(e){for(var a,t=1,r=arguments.length;t<r;t++)for(var l in a=arguments[t])Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l]);return e},c.apply(this,arguments)},d=function(e,a){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(r=Object.getOwnPropertySymbols(e);l<r.length;l++)a.indexOf(r[l])<0&&Object.prototype.propertyIsEnumerable.call(e,r[l])&&(t[r[l]]=e[r[l]])}return t},f=i("font-medium",{variants:{radius:c({},o.base),size:{1:"h-[24px] w-[24px] text-[12px]",2:"h-[32px] w-[32px] text-[14px]",3:"h-[40px] w-[40px] text-[16px]",4:"h-[48px] w-[48px] text-[18px]",5:"h-[64px] w-[64px] text-[24px]",6:"h-[80px] w-[80px] text-[28px]",7:"h-[96px] w-[96px] text-[28px]",8:"h-[128px] w-[128px] text-[35px]",9:"h-[160px] w-[160px] text-[60px]"},scaling:c({},n),color:p()},defaultVariants:{radius:"full",color:"red",size:"3"}}),m=a((function(a,i){var o=a.className;a.fallbackClassName;var n=a.radius,p=a.scaling,m=a.size,u=a.fallbackText,b=a.imagePath,h=a.alt,y=a.appearance,j=void 0===y?"solid":y,v=a.color,w=void 0===v?"red":v,g=a.ariaLabel,O=a.ariaLabelledby,N=a.title,P=a.delayMs,z=void 0===P?300:P,k=d(a,["className","fallbackClassName","radius","scaling","size","fallbackText","imagePath","alt","appearance","color","ariaLabel","ariaLabelledby","title","delayMs"]),L=h||g||u||"Avatar Image";return e.jsxs(t,c({className:s("inline-flex select-none items-center justify-center overflow-hidden align-middle",f({radius:n,scaling:p,size:m,color:w}),x(j,w,!1),o)},k,{ref:i,role:"img","aria-label":g||L,"aria-labelledby":O,title:N||L,tabIndex:0,children:[e.jsx(r,{className:"h-full w-full border-none object-cover",src:b,alt:L,title:N||L}),e.jsx(l,{className:s("leading-1 flex h-full w-full items-center justify-center",o),delayMs:z,"aria-hidden":"true",children:u})]}))}));m.displayName="Avatar";export{m as default};
-//# sourceMappingURL=index.js.map
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
+var AvatarVariants = cva('font-medium', {
+    variants: {
+        radius: __assign({}, radiusVariants['base']),
+        size: {
+            '1': 'h-[24px] w-[24px] text-[12px]',
+            '2': 'h-[32px] w-[32px] text-[14px]',
+            '3': 'h-[40px] w-[40px] text-[16px]',
+            '4': 'h-[48px] w-[48px] text-[18px]',
+            '5': 'h-[64px] w-[64px] text-[24px]',
+            '6': 'h-[80px] w-[80px] text-[28px]',
+            '7': 'h-[96px] w-[96px] text-[28px]',
+            '8': 'h-[128px] w-[128px] text-[35px]',
+            '9': 'h-[160px] w-[160px] text-[60px]',
+        },
+        scaling: __assign({}, scalingVariants),
+        color: primaryColorStyle(),
+    },
+    defaultVariants: {
+        radius: 'full',
+        color: 'red',
+        size: '3',
+    },
+});
+var Avatar = forwardRef(function (_a, ref) {
+    var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, _d = _a.delayMs, delayMs = _d === void 0 ? 300 : _d, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title", "delayMs"]);
+    var imgAltText = alt || ariaLabel || fallbackText || 'Avatar Image';
+    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className) }, props, { ref: ref, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full border-none object-cover", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: delayMs, "aria-hidden": "true", children: fallbackText })] })));
+});
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/dist/lib/components/Badge/index.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { IColor, IAppearance, ISize, IWeight } from '../../../lib/types';
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof BadgeVariants> {
+    color?: IColor;
+    appearance?: Exclude<IAppearance, 'classic' | 'ghost'>;
+    size?: Exclude<ISize, 'x-small' | 'x-large'>;
+    weight?: IWeight;
+}
+declare const BadgeVariants: (props?: ({
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default Badge;

package/dist/lib/components/Badge/index.js

@@ -1,2 +1,54 @@
-import{j as e}from"../../../../_virtual/jsx-runtime.js";import{forwardRef as r}from"react";import{cva as i}from"../../../../node_modules/class-variance-authority/dist/index.mjs.js";import{cn as t}from"../../utils/utils.js";import{radiusVariants as s,scalingVariants as o,weightVariants as a,primaryColorStyle as n,appearanceStyle as l}from"../../constants.js";var c=function(){return c=Object.assign||function(e){for(var r,i=1,t=arguments.length;i<t;i++)for(var s in r=arguments[i])Object.prototype.hasOwnProperty.call(r,s)&&(e[s]=r[s]);return e},c.apply(this,arguments)},p=function(e,r){var i={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(i[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(t=Object.getOwnPropertySymbols(e);s<t.length;s++)r.indexOf(t[s])<0&&Object.prototype.propertyIsEnumerable.call(e,t[s])&&(i[t[s]]=e[t[s]])}return i},u=i("inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit",{variants:{radius:c({},s.base),size:{small:"text-xs h-[20px] px-1.5 py-0.5",medium:"text-xs h-[24px] px-2 py-1",large:"text-sm h-[28px] px-2.5 py-1"},scaling:c({},o),weight:c({},a),color:n()},defaultVariants:{radius:"medium",size:"medium",scaling:"100%",weight:"medium",color:"red"}}),m=r((function(r,i){var s=r.className,o=r.children,a=r.radius,n=r.scaling,m=r.weight,f=r.size,d=r.color,g=void 0===d?"red":d,x=r.appearance,h=void 0===x?"solid":x,y=p(r,["className","children","radius","scaling","weight","size","color","appearance"]),j=t(u({radius:a,scaling:n,weight:m,size:f,color:g}),l(h,g,!1),s);return e.jsx("div",c({ref:i,className:j},y,{children:o}))}));m.displayName="Badge";export{m as default};
-//# sourceMappingURL=index.js.map
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils/utils';
+import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, weightVariants, } from '../../../lib/constants';
+var BadgeVariants = cva('inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit', {
+    variants: {
+        radius: __assign({}, radiusVariants['base']),
+        size: {
+            small: 'text-xs h-[20px] px-1.5 py-0.5',
+            medium: 'text-xs h-[24px] px-2 py-1',
+            large: 'text-sm h-[28px] px-2.5 py-1',
+        },
+        scaling: __assign({}, scalingVariants),
+        weight: __assign({}, weightVariants),
+        color: primaryColorStyle(),
+    },
+    defaultVariants: {
+        radius: 'medium',
+        size: 'medium',
+        scaling: '100%',
+        weight: 'medium',
+        color: 'red',
+    },
+});
+var Badge = forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "scaling", "weight", "size", "color", "appearance"]);
+    var badgeClassName = cn(BadgeVariants({ radius: radius, scaling: scaling, weight: weight, size: size, color: color }), appearanceStyle(appearance, color, false), className);
+    return (_jsx("div", __assign({ ref: ref, className: badgeClassName }, props, { children: children })));
+});
+Badge.displayName = 'Badge';
+export default Badge;