@intlayer/design-system 5.1.5 → 5.1.7

package/dist/components/Auth/useAuth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Auth/useAuth/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,OAAO,EACR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACxD,iBAAiB,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC7D,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,OAAO,sDAGjB;IACD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,qBAAqB,CAAC,EAAE,cAAc,CAAC;CACxC,wBAgCA,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Auth/useAuth/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,OAAO,EACR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACxD,iBAAiB,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC7D,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,OAAO,sDAGjB;IACD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,qBAAqB,CAAC,EAAE,cAAc,CAAC;CACxC,wBAiCA,CAAC"}

package/dist/components/Auth/useAuth/index.mjs

@@ -22,6 +22,7 @@ const useAuth = ({
       csrfToken,
       csrfTokenFetched,
       oAuth2AccessToken,
+      isAuthenticated: Boolean(session || oAuth2AccessToken),
       isProjectAdmin: session?.isProjectAdmin,
       isOrganizationAdmin: session?.isOrganizationAdmin
     }),

package/dist/components/Auth/useAuth/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../src/components/Auth/useAuth/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  OAuth2Token,\n  OrganizationAPI,\n  ProjectAPI,\n  UserAPI,\n} from '@intlayer/backend';\nimport { type IntlayerConfig } from '@intlayer/config/client';\nimport { useMemo } from 'react';\nimport { useCSRF } from './useCSRF';\nimport { useOAuth2 } from './useOAuth2';\nimport { useSession } from './useSession';\n\nexport type Session = {\n  user: UserAPI | null;\n  organization: OrganizationAPI | null;\n  project: ProjectAPI | null;\n  isOrganizationAdmin: boolean;\n  isProjectAdmin: boolean;\n};\n\ntype SessionContextProps = {\n  session: Session | null | undefined;\n  setSession: (session: Session | null) => void;\n  fetchSession: () => Promise<Session | null | undefined>;\n  revalidateSession: () => Promise<Session | null | undefined>;\n  csrfToken: string | null | undefined;\n  csrfTokenFetched: boolean;\n  oAuth2AccessToken: OAuth2Token | null | undefined;\n  isProjectAdmin: boolean | null | undefined;\n  isOrganizationAdmin: boolean | null | undefined;\n};\n\nexport const useAuth = ({\n  session: sessionProp,\n  intlayerConfiguration,\n}: {\n  session?: Session | null;\n  intlayerConfiguration?: IntlayerConfig;\n} = {}) => {\n  const { csrfToken, csrfTokenFetched } = useCSRF(intlayerConfiguration);\n  const { session, fetchSession, revalidateSession, setSession } = useSession(\n    sessionProp,\n    intlayerConfiguration\n  );\n  const { oAuth2AccessToken } = useOAuth2(csrfToken, intlayerConfiguration);\n\n  const memoValue: SessionContextProps = useMemo(\n    () => ({\n      session,\n      fetchSession,\n      setSession,\n      revalidateSession,\n      csrfToken,\n      csrfTokenFetched,\n      oAuth2AccessToken,\n      isProjectAdmin: session?.isProjectAdmin,\n      isOrganizationAdmin: session?.isOrganizationAdmin,\n    }),\n    [\n      session,\n      setSession,\n      fetchSession,\n      revalidateSession,\n      csrfToken,\n      csrfTokenFetched,\n      oAuth2AccessToken,\n    ]\n  );\n\n  return memoValue;\n};\n"],"names":[],"mappings":";;;;;AAkCO,MAAM,UAAU,CAAC;AAAA,EACtB,SAAS;AAAA,EACT;AACF,IAGI,OAAO;AACT,QAAM,EAAE,WAAW,qBAAqB,QAAQ,qBAAqB;AACrE,QAAM,EAAE,SAAS,cAAc,mBAAmB,WAAe,IAAA;AAAA,IAC/D;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,kBAAsB,IAAA,UAAU,WAAW,qBAAqB;AAExE,QAAM,YAAiC;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,SAAS;AAAA,MACzB,qBAAqB,SAAS;AAAA,IAAA;AAAA,IAEhC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AACT;"}
+{"version":3,"file":"index.mjs","sources":["../../../../src/components/Auth/useAuth/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  OAuth2Token,\n  OrganizationAPI,\n  ProjectAPI,\n  UserAPI,\n} from '@intlayer/backend';\nimport { type IntlayerConfig } from '@intlayer/config/client';\nimport { useMemo } from 'react';\nimport { useCSRF } from './useCSRF';\nimport { useOAuth2 } from './useOAuth2';\nimport { useSession } from './useSession';\n\nexport type Session = {\n  user: UserAPI | null;\n  organization: OrganizationAPI | null;\n  project: ProjectAPI | null;\n  isOrganizationAdmin: boolean;\n  isProjectAdmin: boolean;\n};\n\ntype SessionContextProps = {\n  session: Session | null | undefined;\n  setSession: (session: Session | null) => void;\n  fetchSession: () => Promise<Session | null | undefined>;\n  revalidateSession: () => Promise<Session | null | undefined>;\n  csrfToken: string | null | undefined;\n  csrfTokenFetched: boolean;\n  isAuthenticated: boolean;\n  oAuth2AccessToken: OAuth2Token | null | undefined;\n  isProjectAdmin: boolean | null | undefined;\n  isOrganizationAdmin: boolean | null | undefined;\n};\n\nexport const useAuth = ({\n  session: sessionProp,\n  intlayerConfiguration,\n}: {\n  session?: Session | null;\n  intlayerConfiguration?: IntlayerConfig;\n} = {}) => {\n  const { csrfToken, csrfTokenFetched } = useCSRF(intlayerConfiguration);\n  const { session, fetchSession, revalidateSession, setSession } = useSession(\n    sessionProp,\n    intlayerConfiguration\n  );\n  const { oAuth2AccessToken } = useOAuth2(csrfToken, intlayerConfiguration);\n\n  const memoValue: SessionContextProps = useMemo(\n    () => ({\n      session,\n      fetchSession,\n      setSession,\n      revalidateSession,\n      csrfToken,\n      csrfTokenFetched,\n      oAuth2AccessToken,\n      isAuthenticated: Boolean(session || oAuth2AccessToken),\n      isProjectAdmin: session?.isProjectAdmin,\n      isOrganizationAdmin: session?.isOrganizationAdmin,\n    }),\n    [\n      session,\n      setSession,\n      fetchSession,\n      revalidateSession,\n      csrfToken,\n      csrfTokenFetched,\n      oAuth2AccessToken,\n    ]\n  );\n\n  return memoValue;\n};\n"],"names":[],"mappings":";;;;;AAmCO,MAAM,UAAU,CAAC;AAAA,EACtB,SAAS;AAAA,EACT;AACF,IAGI,OAAO;AACT,QAAM,EAAE,WAAW,qBAAqB,QAAQ,qBAAqB;AACrE,QAAM,EAAE,SAAS,cAAc,mBAAmB,WAAe,IAAA;AAAA,IAC/D;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,kBAAsB,IAAA,UAAU,WAAW,qBAAqB;AAExE,QAAM,YAAiC;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB,QAAQ,WAAW,iBAAiB;AAAA,MACrD,gBAAgB,SAAS;AAAA,MACzB,qBAAqB,SAAS;AAAA,IAAA;AAAA,IAEhC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AACT;"}

package/dist/components/Avatar/index.cjs

@@ -27,13 +27,13 @@ const Avatar = ({
     Container,
     {
       className: utils_cn.cn(
-        `border-text dark:border-text-dark size-9 rounded-full border-[1.5px] p-[1.5px]`,
+        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,
         isClickable && `cursor-pointer`,
         className
       ),
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-text text-text-dark dark:bg-text-dark dark:text-text absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
         displayLoader && /* @__PURE__ */ jsxRuntime.jsx(components_Loader_index.Loader, { className: "w-3/4" }),
         displayAvatar && /* @__PURE__ */ jsxRuntime.jsx(
           "img",

package/dist/components/Avatar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text dark:border-text-dark size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props","jsx","cn","jsxs","Loader","User"],"mappings":";;;;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAeC,2BAAAA,IAAA,UAAA,EAAQ,GAAGD,OAAAA,CAAO,IAAKC,2BAAA,IAAC,OAAK,EAAA,GAAGD,OAAO,CAAA;AAGtD,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,yCAAC,OAAI,EAAA,WAAU,gEACb,UAACC,2BAAAA,KAAA,OAAA,EAAI,WAAU,kJACZ,UAAA;AAAA,QAAiB,iBAAAF,2BAAAA,IAACG,wBAAAA,QAAO,EAAA,WAAU,QAAQ,CAAA;AAAA,QAC3C,iBACCH,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED,mBACCA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,2CAAa,QAAoB,EAAA,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAClE;AAAA,QAED,mBAAmBA,2BAAAA,IAACI,YAAAA,MAAK,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,CACtC,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props","jsx","cn","jsxs","Loader","User"],"mappings":";;;;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAeC,2BAAAA,IAAA,UAAA,EAAQ,GAAGD,OAAAA,CAAO,IAAKC,2BAAA,IAAC,OAAK,EAAA,GAAGD,OAAO,CAAA;AAGtD,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,yCAAC,OAAI,EAAA,WAAU,gEACb,UAACC,2BAAAA,KAAA,OAAA,EAAI,WAAU,qHACZ,UAAA;AAAA,QAAiB,iBAAAF,2BAAAA,IAACG,wBAAAA,QAAO,EAAA,WAAU,QAAQ,CAAA;AAAA,QAC3C,iBACCH,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED,mBACCA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,2CAAa,QAAoB,EAAA,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAClE;AAAA,QAED,mBAAmBA,2BAAAA,IAACI,YAAAA,MAAK,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,CACtC,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}

package/dist/components/Avatar/index.mjs

@@ -25,13 +25,13 @@ const Avatar = ({
     Container,
     {
       className: cn(
-        `border-text dark:border-text-dark size-9 rounded-full border-[1.5px] p-[1.5px]`,
+        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,
         isClickable && `cursor-pointer`,
         className
       ),
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-text text-text-dark dark:bg-text-dark dark:text-text absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "relative flex size-full flex-row items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full", children: [
         displayLoader && /* @__PURE__ */ jsx(Loader, { className: "w-3/4" }),
         displayAvatar && /* @__PURE__ */ jsx(
           "img",

package/dist/components/Avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text dark:border-text-dark size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-dark dark:bg-text-dark dark:text-text absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props"],"mappings":";;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAe,oBAAA,UAAA,EAAQ,GAAGA,OAAAA,CAAO,IAAK,oBAAC,OAAK,EAAA,GAAGA,OAAO,CAAA;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,OAAI,EAAA,WAAU,gEACb,UAAC,qBAAA,OAAA,EAAI,WAAU,kJACZ,UAAA;AAAA,QAAiB,iBAAA,oBAAC,QAAO,EAAA,WAAU,QAAQ,CAAA;AAAA,QAC3C,iBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,gCAAa,QAAoB,EAAA,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAClE;AAAA,QAED,mBAAmB,oBAAC,MAAK,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,CACtC,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { User } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst getCapitals = (name: string): string[] =>\n  name\n    .split(' ') // split by space\n    .map((word) => word[0]) // get first letter of each word\n    .filter(Boolean) // remove empty strings\n    .map((char) => char.toUpperCase()); // convert to uppercase\n\nexport type AvatarProps = ComponentProps<'button'> & {\n  src?: string;\n  fullname?: string;\n  isLoading?: boolean;\n  isLoggedIn?: boolean;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  fullname,\n  className,\n  isLoading,\n  isLoggedIn,\n  src,\n  onClick,\n  ...props\n}) => {\n  const isImageDefined = Boolean(src);\n  const isNameDefined = Boolean((fullname ?? '').length > 0);\n  const capitals = fullname ? getCapitals(fullname) : undefined;\n\n  const displayLoader = isLoading;\n  const displayAvatar =\n    isLoggedIn && !displayLoader && !displayLoader && isImageDefined;\n  const displayInitials =\n    isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;\n  const displayUserIcon =\n    isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;\n\n  const isClickable = onClick !== undefined;\n\n  const Container = (props: HTMLAttributes<HTMLElement>) =>\n    isClickable ? <button {...props} /> : <div {...props} />;\n\n  return (\n    <Container\n      className={cn(\n        `border-text size-9 rounded-full border-[1.5px] p-[1.5px]`,\n        isClickable && `cursor-pointer`,\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        <div className=\"bg-text text-text-opposite absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-full\">\n          {displayLoader && <Loader className=\"w-3/4\" />}\n          {displayAvatar && (\n            <img\n              className=\"size-full rounded-full\"\n              src={src}\n              srcSet={src}\n              alt={`avatar of ${fullname}`}\n              width={59}\n              height={59}\n            />\n          )}\n          {displayInitials && (\n            <div\n              className=\"flex size-full items-center justify-center gap-[0.1rem] text-sm font-bold max-md:py-1\"\n              aria-label=\"Initials of user's name\"\n            >\n              {capitals?.map((capital) => <span key={capital}>{capital}</span>)}\n            </div>\n          )}\n          {displayUserIcon && <User size={25} />}\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["props"],"mappings":";;;;AAKA,MAAM,cAAc,CAAC,SACnB,KACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,aAAa;AAS9B,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,iBAAiB,QAAQ,GAAG;AAClC,QAAM,gBAAgB,SAAS,YAAY,IAAI,SAAS,CAAC;AACzD,QAAM,WAAW,WAAW,YAAY,QAAQ,IAAI;AAEpD,QAAM,gBAAgB;AACtB,QAAM,gBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB;AACpD,QAAM,kBACJ,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;AAErD,QAAM,cAAc,YAAY;AAEhC,QAAM,YAAY,CAACA,WACjB,cAAe,oBAAA,UAAA,EAAQ,GAAGA,OAAAA,CAAO,IAAK,oBAAC,OAAK,EAAA,GAAGA,OAAO,CAAA;AAGtD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,OAAI,EAAA,WAAU,gEACb,UAAC,qBAAA,OAAA,EAAI,WAAU,qHACZ,UAAA;AAAA,QAAiB,iBAAA,oBAAC,QAAO,EAAA,WAAU,QAAQ,CAAA;AAAA,QAC3C,iBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,QAAQ;AAAA,YACR,KAAK,aAAa,QAAQ;AAAA,YAC1B,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,UAAA,UAAU,IAAI,CAAC,gCAAa,QAAoB,EAAA,UAAA,QAAA,GAAV,OAAkB,CAAO;AAAA,UAAA;AAAA,QAClE;AAAA,QAED,mBAAmB,oBAAC,MAAK,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,CACtC,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Badge/index.cjs

@@ -4,24 +4,24 @@ const jsxRuntime = require("react/jsx-runtime");
 const classVarianceAuthority = require("class-variance-authority");
 const utils_cn = require("../../utils/cn.cjs");
 const badgeVariants = classVarianceAuthority.cva(
-  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       color: {
-        primary: "border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300",
-        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100",
-        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200",
-        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400",
+        primary: "border-primary bg-primary text-primary hover:bg-primary-500",
+        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
+        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
+        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
         light: "border-white bg-white text-white hover:bg-neutral-500",
-        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700",
-        text: "border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark",
+        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
+        text: "border-text bg-text text-text hover:opacity-80",
         custom: ""
       },
       variant: {
-        default: "rounded-lg text-text-opposite dark:text-text-opposite-dark",
-        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0",
-        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
-        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
+        default: "rounded-lg text-text-opposite",
+        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
+        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30",
+        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
       }
     },
     defaultVariants: {

package/dist/components/Badge/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AAIO,MAAM,gBAAgBA,uBAAA;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAKa,MAAA,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpDC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,YAAG,cAAc,EAAE,SAAS,MAAM,CAAC,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary bg-primary text-primary hover:bg-primary-500',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        neutral: 'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        text: 'border-text bg-text text-text hover:opacity-80',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        outline: 'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AAIO,MAAM,gBAAgBA,uBAAA;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WACE;AAAA,QACF,aACE;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAKa,MAAA,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpDC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,YAAG,cAAc,EAAE,SAAS,MAAM,CAAC,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;;;"}

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

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
 export declare const badgeVariants: (props?: ({
-    color?: "text" | "light" | "dark" | "primary" | "secondary" | "destructive" | "neutral" | "custom" | null | undefined;
-    variant?: "none" | "default" | "outline" | "hoverable" | null | undefined;
+    color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "custom" | null | undefined;
+    variant?: "default" | "none" | "outline" | "hoverable" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
 export declare const Badge: ({ className, variant, color, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,eAAO,MAAM,aAAa;;;8EAgCzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GACrD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,4CAA6C,UAAU,4CAKxE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,eAAO,MAAM,aAAa;;;8EA6BzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GACrD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,4CAA6C,UAAU,4CAKxE,CAAC"}

package/dist/components/Badge/index.mjs

@@ -2,24 +2,24 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.mjs";
 const badgeVariants = cva(
-  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       color: {
-        primary: "border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300",
-        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100",
-        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200",
-        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400",
+        primary: "border-primary bg-primary text-primary hover:bg-primary-500",
+        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
+        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
+        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
         light: "border-white bg-white text-white hover:bg-neutral-500",
-        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700",
-        text: "border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark",
+        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
+        text: "border-text bg-text text-text hover:opacity-80",
         custom: ""
       },
       variant: {
-        default: "rounded-lg text-text-opposite dark:text-text-opposite-dark",
-        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0",
-        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
-        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
+        default: "rounded-lg text-text-opposite",
+        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
+        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30",
+        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
       }
     },
     defaultVariants: {

package/dist/components/Badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;;AAIO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAKa,MAAA,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,cAAc,EAAE,SAAS,MAAM,CAAC,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary bg-primary text-primary hover:bg-primary-500',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        neutral: 'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        text: 'border-text bg-text text-text hover:opacity-80',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        outline: 'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;;AAIO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WACE;AAAA,QACF,aACE;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAKa,MAAA,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,cAAc,EAAE,SAAS,MAAM,CAAC,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;"}

package/dist/components/Button/Button.cjs

@@ -25,7 +25,7 @@ const buttonIconVariants = classVarianceAuthority.cva("", {
   }
 });
 const buttonVariants = classVarianceAuthority.cva(
-  "relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -38,33 +38,33 @@ const buttonVariants = classVarianceAuthority.cva(
         "icon-lg": "p-2",
         "icon-xl": "p-3"
       },
+      color: {
+        primary: "text-primary *:text-text-light",
+        secondary: "text-secondary *:text-text-light",
+        destructive: "text-destructive *:text-text-light",
+        neutral: "text-neutral *:text-text-light",
+        light: "text-white *:text-text-light",
+        dark: "text-neutral-800 *:text-text-light",
+        text: "text-text *:text-text-opposite",
+        "text-inverse": "text-text-opposite *:text-text",
+        error: "text-error *:text-text-light",
+        success: "text-success *:text-text-light",
+        custom: ""
+      },
       variant: {
-        default: "rounded-lg text-text-opposite dark:text-text-opposite-dark",
-        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0",
-        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
-        link: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent",
-        "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10",
+        default: "rounded-lg bg-current",
+        none: "border-none bg-current/0 text-inherit hover:bg-current/0",
+        outline: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30",
+        link: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
+        "invisible-link": "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
+        hoverable: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
         input: [
-          "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
-          "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
-          "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+          "*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all",
+          "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+          "aria-[invalid=true]:border-error",
           "disabled:opacity-50"
         ]
       },
-      color: {
-        primary: "border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300",
-        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100",
-        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200",
-        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400",
-        light: "border-white bg-white text-white hover:bg-neutral-500",
-        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700",
-        text: "border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark",
-        "text-inverse": "border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80",
-        error: "border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300",
-        success: "border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300",
-        custom: ""
-      },
       textAlign: {
         left: "text-left",
         center: "text-center",
@@ -75,7 +75,7 @@ const buttonVariants = classVarianceAuthority.cva(
         false: ""
       },
       hasIconLeft: {
-        true: "pl-12",
+        true: "px-12",
         false: ""
       },
       hasIconRight: {
@@ -159,7 +159,7 @@ const Button = ({
             isLoading: isLoading ?? false
           }
         ),
-        children,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
         IconRight && /* @__PURE__ */ jsxRuntime.jsx(
           IconRight,
           {

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-3',\n      'icon-md': 'size-4',\n      'icon-lg': 'size-5',\n      'icon-xl': 'size-6',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-lg',\n        xl: 'min-h-11 px-10 max-md:py-4 text-xl',\n        'icon-sm': 'p-1.5',\n        'icon-md': 'p-1.5',\n        'icon-lg': 'p-2',\n        'icon-xl': 'p-3',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'pl-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: 'left',\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      {children}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'right',\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["cva","jsxs","jsx","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-3',\n      'icon-md': 'size-4',\n      'icon-lg': 'size-5',\n      'icon-xl': 'size-6',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-lg',\n        xl: 'min-h-11 px-10 max-md:py-4 text-xl',\n        'icon-sm': 'p-1.5',\n        'icon-md': 'p-1.5',\n        'icon-lg': 'p-2',\n        'icon-xl': 'p-3',\n      },\n      color: {\n        primary: 'text-primary *:text-text-light',\n        secondary: 'text-secondary *:text-text-light',\n        destructive: 'text-destructive *:text-text-light',\n        neutral: 'text-neutral *:text-text-light',\n        light: 'text-white *:text-text-light',\n        dark: 'text-neutral-800 *:text-text-light',\n        text: 'text-text *:text-text-opposite',\n        'text-inverse': 'text-text-opposite *:text-text',\n        error: 'text-error *:text-text-light',\n        success: 'text-success *:text-text-light',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg bg-current',\n        none: 'border-none bg-current/0 text-inherit hover:bg-current/0',\n        outline:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30',\n        link: '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        'invisible-link':\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        hoverable:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        input: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: 'left',\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      <span>{children}</span>\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'right',\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["cva","jsxs","jsx","Loader"],"mappings":"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"}

package/dist/components/Button/Button.d.ts

@@ -3,9 +3,9 @@ import { LucideIcon } from 'lucide-react';
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
 declare const buttonVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | null | undefined;
-    variant?: "none" | "default" | "link" | "input" | "outline" | "invisible-link" | "hoverable" | null | undefined;
-    color?: "text" | "light" | "dark" | "success" | "error" | "primary" | "secondary" | "destructive" | "neutral" | "text-inverse" | "custom" | null | undefined;
-    textAlign?: "center" | "right" | "left" | null | undefined;
+    color?: "text" | "error" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "success" | "custom" | null | undefined;
+    variant?: "default" | "link" | "none" | "input" | "outline" | "invisible-link" | "hoverable" | null | undefined;
+    textAlign?: "left" | "right" | "center" | null | undefined;
     isFullWidth?: boolean | null | undefined;
     hasIconLeft?: boolean | null | undefined;
     hasIconRight?: boolean | null | undefined;

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAyBf,QAAA,MAAM,cAAc;;;;;;;;8EAkFnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6ElC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAyBf,QAAA,MAAM,cAAc;;;;;;;;8EA2EnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6ElC,CAAC"}

package/dist/components/Button/Button.mjs

@@ -23,7 +23,7 @@ const buttonIconVariants = cva("", {
   }
 });
 const buttonVariants = cva(
-  "relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -36,33 +36,33 @@ const buttonVariants = cva(
         "icon-lg": "p-2",
         "icon-xl": "p-3"
       },
+      color: {
+        primary: "text-primary *:text-text-light",
+        secondary: "text-secondary *:text-text-light",
+        destructive: "text-destructive *:text-text-light",
+        neutral: "text-neutral *:text-text-light",
+        light: "text-white *:text-text-light",
+        dark: "text-neutral-800 *:text-text-light",
+        text: "text-text *:text-text-opposite",
+        "text-inverse": "text-text-opposite *:text-text",
+        error: "text-error *:text-text-light",
+        success: "text-success *:text-text-light",
+        custom: ""
+      },
       variant: {
-        default: "rounded-lg text-text-opposite dark:text-text-opposite-dark",
-        none: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0",
-        outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
-        link: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent",
-        "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10",
+        default: "rounded-lg bg-current",
+        none: "border-none bg-current/0 text-inherit hover:bg-current/0",
+        outline: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30",
+        link: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
+        "invisible-link": "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
+        hoverable: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
         input: [
-          "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
-          "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
-          "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+          "*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all",
+          "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+          "aria-[invalid=true]:border-error",
           "disabled:opacity-50"
         ]
       },
-      color: {
-        primary: "border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300",
-        secondary: "border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100",
-        destructive: "border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200",
-        neutral: "border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400",
-        light: "border-white bg-white text-white hover:bg-neutral-500",
-        dark: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700",
-        text: "border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark",
-        "text-inverse": "border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80",
-        error: "border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300",
-        success: "border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300",
-        custom: ""
-      },
       textAlign: {
         left: "text-left",
         center: "text-center",
@@ -73,7 +73,7 @@ const buttonVariants = cva(
         false: ""
       },
       hasIconLeft: {
-        true: "pl-12",
+        true: "px-12",
         false: ""
       },
       hasIconRight: {
@@ -157,7 +157,7 @@ const Button = ({
             isLoading: isLoading ?? false
           }
         ),
-        children,
+        /* @__PURE__ */ jsx("span", { children }),
         IconRight && /* @__PURE__ */ jsx(
           IconRight,
           {

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-3',\n      'icon-md': 'size-4',\n      'icon-lg': 'size-5',\n      'icon-xl': 'size-6',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-lg',\n        xl: 'min-h-11 px-10 max-md:py-4 text-xl',\n        'icon-sm': 'p-1.5',\n        'icon-md': 'p-1.5',\n        'icon-lg': 'p-2',\n        'icon-xl': 'p-3',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'pl-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: 'left',\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      {children}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'right',\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-3',\n      'icon-md': 'size-4',\n      'icon-lg': 'size-5',\n      'icon-xl': 'size-6',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-lg',\n        xl: 'min-h-11 px-10 max-md:py-4 text-xl',\n        'icon-sm': 'p-1.5',\n        'icon-md': 'p-1.5',\n        'icon-lg': 'p-2',\n        'icon-xl': 'p-3',\n      },\n      color: {\n        primary: 'text-primary *:text-text-light',\n        secondary: 'text-secondary *:text-text-light',\n        destructive: 'text-destructive *:text-text-light',\n        neutral: 'text-neutral *:text-text-light',\n        light: 'text-white *:text-text-light',\n        dark: 'text-neutral-800 *:text-text-light',\n        text: 'text-text *:text-text-opposite',\n        'text-inverse': 'text-text-opposite *:text-text',\n        error: 'text-error *:text-text-light',\n        success: 'text-success *:text-text-light',\n        custom: '',\n      },\n      variant: {\n        default: 'rounded-lg bg-current',\n        none: 'border-none bg-current/0 text-inherit hover:bg-current/0',\n        outline:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30',\n        link: '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        'invisible-link':\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        hoverable:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        input: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: 'left',\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      <span>{children}</span>\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'right',\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Command/index.cjs

@@ -29,7 +29,7 @@ const CommandInput = ({
     cmdk.Command.Input,
     {
       className: utils_cn.cn(
-        "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground outline-hidden flex w-full rounded-md bg-transparent text-sm disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -74,7 +74,7 @@ const CommandItem = ({
   cmdk.Command.Item,
   {
     className: utils_cn.cn(
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     ),
     ...props