@nergora/ui 0.0.0-stage → 1.0.9

package/dist/esm/components/attachment/attachment.js

@@ -0,0 +1,84 @@
+import { cva } from "cva";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { IconButton } from "../icon-button/index.js";
+import { clx } from "../../utils/clx.js";
+const attachmentVariants = cva({
+    base: clx("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap border bg-ui-bg-base text-ui-fg-base transition-fg", "focus-within:shadow-borders-focus", "has-[>a,>button]:hover:bg-ui-bg-base-hover", "data-[state=error]:border-ui-tag-red-border data-[state=idle]:border-dashed"),
+    variants: {
+        size: {
+            base: clx("txt-compact-small gap-2 rounded-lg", "has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2", "has-data-[slot=attachment-media]:p-2"),
+            small: clx("txt-compact-xsmall gap-2 rounded-md", "has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5", "has-data-[slot=attachment-media]:p-1.5"),
+            xsmall: clx("txt-compact-xsmall gap-1.5 rounded-md", "has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1", "has-data-[slot=attachment-media]:p-1"),
+        },
+        orientation: {
+            horizontal: "min-w-40 items-center",
+            vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+        orientation: "horizontal",
+    },
+});
+const AttachmentRoot = React.forwardRef(({ className, state = "done", size = "base", orientation = "horizontal", ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, "data-slot": "attachment", "data-state": state, "data-size": size, "data-orientation": orientation, className: clx(attachmentVariants({ size, orientation }), className), ...props }));
+});
+AttachmentRoot.displayName = "Attachment";
+const attachmentMediaVariants = cva({
+    base: clx("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-ui-bg-subtle text-ui-fg-subtle", "group-data-[orientation=vertical]/attachment:w-full", "group-data-[size=small]/attachment:w-8", "group-data-[size=xsmall]/attachment:w-7 group-data-[size=xsmall]/attachment:rounded", "group-data-[state=error]/attachment:bg-ui-tag-red-bg group-data-[state=error]/attachment:text-ui-tag-red-icon", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", "group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6", "group-data-[size=xsmall]/attachment:[&_svg:not([class*='size-'])]:size-3.5"),
+    variants: {
+        variant: {
+            icon: "",
+            image: clx("opacity-70 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100", "*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"),
+        },
+    },
+    defaultVariants: {
+        variant: "icon",
+    },
+});
+const AttachmentMedia = React.forwardRef(({ className, variant = "icon", ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, "data-slot": "attachment-media", "data-variant": variant, className: clx(attachmentMediaVariants({ variant }), className), ...props }));
+});
+AttachmentMedia.displayName = "Attachment.Media";
+const AttachmentContent = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, "data-slot": "attachment-content", className: clx("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className), ...props }));
+});
+AttachmentContent.displayName = "Attachment.Content";
+const AttachmentTitle = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("span", { ref: ref, "data-slot": "attachment-title", className: clx("txt-compact-small-plus block max-w-full min-w-0 truncate", "group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse", className), ...props }));
+});
+AttachmentTitle.displayName = "Attachment.Title";
+const AttachmentDescription = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("span", { ref: ref, "data-slot": "attachment-description", className: clx("txt-compact-xsmall mt-0.5 block max-w-full min-w-0 truncate text-ui-fg-muted", "group-data-[state=error]/attachment:text-ui-tag-red-text", className), ...props }));
+});
+AttachmentDescription.displayName = "Attachment.Description";
+const AttachmentActions = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, "data-slot": "attachment-actions", className: clx("relative z-20 flex shrink-0 items-center", "group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-2 group-data-[orientation=vertical]/attachment:top-2 group-data-[orientation=vertical]/attachment:gap-1", className), ...props }));
+});
+AttachmentActions.displayName = "Attachment.Actions";
+const AttachmentAction = React.forwardRef(({ className, variant = "transparent", size = "xsmall", ...props }, ref) => {
+    return (React.createElement(IconButton, { ref: ref, "data-slot": "attachment-action", variant: variant, size: size, className: className, ...props }));
+});
+AttachmentAction.displayName = "Attachment.Action";
+const AttachmentTrigger = React.forwardRef(({ className, asChild = false, type, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "button";
+    return (React.createElement(Component, { ref: ref, "data-slot": "attachment-trigger", type: asChild ? undefined : (type !== null && type !== void 0 ? type : "button"), className: clx("absolute inset-0 z-10 outline-none", className), ...props }));
+});
+AttachmentTrigger.displayName = "Attachment.Trigger";
+const AttachmentGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, "data-slot": "attachment-group", className: clx("flex min-w-0 snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain py-1", "*:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className), ...props }));
+});
+AttachmentGroup.displayName = "Attachment.Group";
+const Attachment = Object.assign(AttachmentRoot, {
+    Media: AttachmentMedia,
+    Content: AttachmentContent,
+    Title: AttachmentTitle,
+    Description: AttachmentDescription,
+    Actions: AttachmentActions,
+    Action: AttachmentAction,
+    Trigger: AttachmentTrigger,
+    Group: AttachmentGroup,
+});
+export { Attachment, attachmentMediaVariants, attachmentVariants };
+//# sourceMappingURL=attachment.js.map

package/dist/esm/components/attachment/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../../../src/components/attachment/attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { VariantProps, cva } from \"cva\"\nimport { Slot } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { IconButton } from \"@/components/icon-button\"\nimport { clx } from \"@/utils/clx\"\n\nconst attachmentVariants = cva({\n  base: clx(\n    \"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap border bg-ui-bg-base text-ui-fg-base transition-fg\",\n    \"focus-within:shadow-borders-focus\",\n    \"has-[>a,>button]:hover:bg-ui-bg-base-hover\",\n    \"data-[state=error]:border-ui-tag-red-border data-[state=idle]:border-dashed\"\n  ),\n  variants: {\n    size: {\n      base: clx(\n        \"txt-compact-small gap-2 rounded-lg\",\n        \"has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2\",\n        \"has-data-[slot=attachment-media]:p-2\"\n      ),\n      small: clx(\n        \"txt-compact-xsmall gap-2 rounded-md\",\n        \"has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5\",\n        \"has-data-[slot=attachment-media]:p-1.5\"\n      ),\n      xsmall: clx(\n        \"txt-compact-xsmall gap-1.5 rounded-md\",\n        \"has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1\",\n        \"has-data-[slot=attachment-media]:p-1\"\n      ),\n    },\n    orientation: {\n      horizontal: \"min-w-40 items-center\",\n      vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n    orientation: \"horizontal\",\n  },\n})\n\ninterface AttachmentProps\n  extends React.ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof attachmentVariants> {\n  state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\"\n}\n\nconst AttachmentRoot = React.forwardRef<HTMLDivElement, AttachmentProps>(\n  (\n    {\n      className,\n      state = \"done\",\n      size = \"base\",\n      orientation = \"horizontal\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"attachment\"\n        data-state={state}\n        data-size={size}\n        data-orientation={orientation}\n        className={clx(attachmentVariants({ size, orientation }), className)}\n        {...props}\n      />\n    )\n  }\n)\nAttachmentRoot.displayName = \"Attachment\"\n\nconst attachmentMediaVariants = cva({\n  base: clx(\n    \"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-ui-bg-subtle text-ui-fg-subtle\",\n    \"group-data-[orientation=vertical]/attachment:w-full\",\n    \"group-data-[size=small]/attachment:w-8\",\n    \"group-data-[size=xsmall]/attachment:w-7 group-data-[size=xsmall]/attachment:rounded\",\n    \"group-data-[state=error]/attachment:bg-ui-tag-red-bg group-data-[state=error]/attachment:text-ui-tag-red-icon\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n    \"group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6\",\n    \"group-data-[size=xsmall]/attachment:[&_svg:not([class*='size-'])]:size-3.5\"\n  ),\n  variants: {\n    variant: {\n      icon: \"\",\n      image: clx(\n        \"opacity-70 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100\",\n        \"*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\"\n      ),\n    },\n  },\n  defaultVariants: {\n    variant: \"icon\",\n  },\n})\n\ninterface AttachmentMediaProps\n  extends React.ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof attachmentMediaVariants> {}\n\nconst AttachmentMedia = React.forwardRef<HTMLDivElement, AttachmentMediaProps>(\n  ({ className, variant = \"icon\", ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"attachment-media\"\n        data-variant={variant}\n        className={clx(attachmentMediaVariants({ variant }), className)}\n        {...props}\n      />\n    )\n  }\n)\nAttachmentMedia.displayName = \"Attachment.Media\"\n\nconst AttachmentContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"attachment-content\"\n      className={clx(\n        \"max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAttachmentContent.displayName = \"Attachment.Content\"\n\nconst AttachmentTitle = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"attachment-title\"\n      className={clx(\n        \"txt-compact-small-plus block max-w-full min-w-0 truncate\",\n        \"group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAttachmentTitle.displayName = \"Attachment.Title\"\n\nconst AttachmentDescription = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"attachment-description\"\n      className={clx(\n        \"txt-compact-xsmall mt-0.5 block max-w-full min-w-0 truncate text-ui-fg-muted\",\n        \"group-data-[state=error]/attachment:text-ui-tag-red-text\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAttachmentDescription.displayName = \"Attachment.Description\"\n\nconst AttachmentActions = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"attachment-actions\"\n      className={clx(\n        \"relative z-20 flex shrink-0 items-center\",\n        \"group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-2 group-data-[orientation=vertical]/attachment:top-2 group-data-[orientation=vertical]/attachment:gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAttachmentActions.displayName = \"Attachment.Actions\"\n\ninterface AttachmentActionProps\n  extends React.ComponentPropsWithoutRef<typeof IconButton> {}\n\nconst AttachmentAction = React.forwardRef<HTMLButtonElement, AttachmentActionProps>(\n  ({ className, variant = \"transparent\", size = \"xsmall\", ...props }, ref) => {\n    return (\n      <IconButton\n        ref={ref}\n        data-slot=\"attachment-action\"\n        variant={variant}\n        size={size}\n        className={className}\n        {...props}\n      />\n    )\n  }\n)\nAttachmentAction.displayName = \"Attachment.Action\"\n\ninterface AttachmentTriggerProps extends React.ComponentPropsWithoutRef<\"button\"> {\n  asChild?: boolean\n}\n\nconst AttachmentTrigger = React.forwardRef<HTMLButtonElement, AttachmentTriggerProps>(\n  ({ className, asChild = false, type, ...props }, ref) => {\n    const Component = asChild ? Slot.Root : \"button\"\n\n    return (\n      <Component\n        ref={ref}\n        data-slot=\"attachment-trigger\"\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={clx(\"absolute inset-0 z-10 outline-none\", className)}\n        {...props}\n      />\n    )\n  }\n)\nAttachmentTrigger.displayName = \"Attachment.Trigger\"\n\nconst AttachmentGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"attachment-group\"\n      className={clx(\n        \"flex min-w-0 snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain py-1\",\n        \"*:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAttachmentGroup.displayName = \"Attachment.Group\"\n\nconst Attachment = Object.assign(AttachmentRoot, {\n  Media: AttachmentMedia,\n  Content: AttachmentContent,\n  Title: AttachmentTitle,\n  Description: AttachmentDescription,\n  Actions: AttachmentActions,\n  Action: AttachmentAction,\n  Trigger: AttachmentTrigger,\n  Group: AttachmentGroup,\n})\n\nexport { Attachment, attachmentMediaVariants, attachmentVariants }\nexport type {\n  AttachmentActionProps,\n  AttachmentMediaProps,\n  AttachmentProps,\n  AttachmentTriggerProps,\n}\n"]}

package/dist/esm/components/attachment/index.d.ts

@@ -0,0 +1,3 @@
+export { Attachment } from "./attachment";
+export type { AttachmentActionProps, AttachmentMediaProps, AttachmentProps, AttachmentTriggerProps, } from "./attachment";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/attachment/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/attachment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,GACvB,MAAM,cAAc,CAAA"}

package/dist/esm/components/attachment/index.js

@@ -0,0 +1,2 @@
+export { Attachment } from "./attachment";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/attachment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/attachment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA","sourcesContent":["export { Attachment } from \"./attachment\"\nexport type {\n  AttachmentActionProps,\n  AttachmentMediaProps,\n  AttachmentProps,\n  AttachmentTriggerProps,\n} from \"./attachment\"\n"]}

package/dist/esm/components/avatar/avatar.d.ts

@@ -0,0 +1,71 @@
+import { type VariantProps } from "cva";
+import { Avatar as RadixAvatar } from "radix-ui";
+import * as React from "react";
+declare const avatarVariants: (props?: ({
+    variant?: "squared" | "rounded" | undefined;
+    size?: "base" | "small" | "2xsmall" | "xsmall" | "large" | "xlarge" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixAvatar.Root>, "asChild" | "children" | "size">, VariantProps<typeof avatarVariants> {
+    src?: string;
+    fallback: string;
+}
+/**
+ * This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/esm/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,KAAK,CAAA;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAoDlB,CAAA;AAwDF,UAAU,WACR,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EACvD,SAAS,GAAG,UAAU,GAAG,MAAM,CAChC,EACD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,qFAqDX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/esm/components/avatar/avatar.js

@@ -0,0 +1,138 @@
+"use client";
+import { cva } from "cva";
+import { Avatar as RadixAvatar } from "radix-ui";
+import * as React from "react";
+import { clx } from "../../utils/clx.js";
+const avatarVariants = cva({
+    base: "flex shrink-0 items-center justify-center overflow-hidden shadow-borders-base bg-ui-bg-base",
+    variants: {
+        variant: {
+            squared: "",
+            rounded: "rounded-full",
+        },
+        size: {
+            "2xsmall": "h-5 w-5",
+            xsmall: "h-6 w-6",
+            small: "h-7 w-7",
+            base: "h-8 w-8",
+            large: "h-10 w-10",
+            xlarge: "h-12 w-12",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "squared",
+            size: "2xsmall",
+            className: "rounded",
+        },
+        {
+            variant: "squared",
+            size: "xsmall",
+            className: "rounded-md",
+        },
+        {
+            variant: "squared",
+            size: "small",
+            className: "rounded-md",
+        },
+        {
+            variant: "squared",
+            size: "base",
+            className: "rounded-md",
+        },
+        {
+            variant: "squared",
+            size: "large",
+            className: "rounded-lg",
+        },
+        {
+            variant: "squared",
+            size: "xlarge",
+            className: "rounded-xl",
+        },
+    ],
+    defaultVariants: {
+        variant: "rounded",
+        size: "base",
+    },
+});
+const innerVariants = cva({
+    base: "aspect-square object-cover object-center",
+    variants: {
+        variant: {
+            squared: "",
+            rounded: "rounded-full",
+        },
+        size: {
+            "2xsmall": "txt-compact-xsmall-plus size-4",
+            xsmall: "txt-compact-xsmall-plus size-5",
+            small: "txt-compact-small-plus size-6",
+            base: "txt-compact-small-plus size-7",
+            large: "txt-compact-medium-plus size-9",
+            xlarge: "txt-compact-large-plus size-11",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "squared",
+            size: "2xsmall",
+            className: "rounded-sm",
+        },
+        {
+            variant: "squared",
+            size: "xsmall",
+            className: "rounded",
+        },
+        {
+            variant: "squared",
+            size: "small",
+            className: "rounded",
+        },
+        {
+            variant: "squared",
+            size: "base",
+            className: "rounded",
+        },
+        {
+            variant: "squared",
+            size: "large",
+            className: "rounded-md",
+        },
+        {
+            variant: "squared",
+            size: "xlarge",
+            className: "rounded-[10px]",
+        },
+    ],
+    defaultVariants: {
+        variant: "rounded",
+        size: "base",
+    },
+});
+/**
+ * This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
+ */
+const Avatar = React.forwardRef(({ 
+/**
+ * The URL of the image used in the Avatar.
+ */
+src, 
+/**
+ * Text to show in the avatar if the URL provided in `src` can't be opened.
+ */
+fallback, 
+/**
+ * The style of the avatar.
+ */
+variant = "rounded", 
+/**
+ * The size of the avatar's border radius.
+ */
+size = "base", className, ...props }, ref) => {
+    return (React.createElement(RadixAvatar.Root, { ref: ref, ...props, className: clx(avatarVariants({ variant, size }), className) },
+        src && (React.createElement(RadixAvatar.Image, { src: src, className: innerVariants({ variant, size }) })),
+        React.createElement(RadixAvatar.Fallback, { className: clx(innerVariants({ variant, size }), "bg-ui-bg-component-hover text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center") }, fallback)));
+});
+Avatar.displayName = "Avatar";
+export { Avatar };
+//# sourceMappingURL=avatar.js.map

package/dist/esm/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"cva\"\nimport { Avatar as RadixAvatar } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst avatarVariants = cva({\n  base: \"flex shrink-0 items-center justify-center overflow-hidden shadow-borders-base bg-ui-bg-base\",\n  variants: {\n    variant: {\n      squared: \"\",\n      rounded: \"rounded-full\",\n    },\n    size: {\n      \"2xsmall\": \"h-5 w-5\",\n      xsmall: \"h-6 w-6\",\n      small: \"h-7 w-7\",\n      base: \"h-8 w-8\",\n      large: \"h-10 w-10\",\n      xlarge: \"h-12 w-12\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"squared\",\n      size: \"2xsmall\",\n      className: \"rounded\",\n    },\n    {\n      variant: \"squared\",\n      size: \"xsmall\",\n      className: \"rounded-md\",\n    },\n    {\n      variant: \"squared\",\n      size: \"small\",\n      className: \"rounded-md\",\n    },\n    {\n      variant: \"squared\",\n      size: \"base\",\n      className: \"rounded-md\",\n    },\n    {\n      variant: \"squared\",\n      size: \"large\",\n      className: \"rounded-lg\",\n    },\n    {\n      variant: \"squared\",\n      size: \"xlarge\",\n      className: \"rounded-xl\",\n    },\n  ],\n  defaultVariants: {\n    variant: \"rounded\",\n    size: \"base\",\n  },\n})\n\nconst innerVariants = cva({\n  base: \"aspect-square object-cover object-center\",\n  variants: {\n    variant: {\n      squared: \"\",\n      rounded: \"rounded-full\",\n    },\n    size: {\n      \"2xsmall\": \"txt-compact-xsmall-plus size-4\",\n      xsmall: \"txt-compact-xsmall-plus size-5\",\n      small: \"txt-compact-small-plus size-6\",\n      base: \"txt-compact-small-plus size-7\",\n      large: \"txt-compact-medium-plus size-9\",\n      xlarge: \"txt-compact-large-plus size-11\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"squared\",\n      size: \"2xsmall\",\n      className: \"rounded-sm\",\n    },\n    {\n      variant: \"squared\",\n      size: \"xsmall\",\n      className: \"rounded\",\n    },\n    {\n      variant: \"squared\",\n      size: \"small\",\n      className: \"rounded\",\n    },\n    {\n      variant: \"squared\",\n      size: \"base\",\n      className: \"rounded\",\n    },\n    {\n      variant: \"squared\",\n      size: \"large\",\n      className: \"rounded-md\",\n    },\n    {\n      variant: \"squared\",\n      size: \"xlarge\",\n      className: \"rounded-[10px]\",\n    },\n  ],\n  defaultVariants: {\n    variant: \"rounded\",\n    size: \"base\",\n  },\n})\n\ninterface AvatarProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof RadixAvatar.Root>,\n      \"asChild\" | \"children\" | \"size\"\n    >,\n    VariantProps<typeof avatarVariants> {\n  src?: string\n  fallback: string\n}\n\n/**\n * This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof RadixAvatar.Root>,\n  AvatarProps\n>(\n  (\n    {\n      /**\n       * The URL of the image used in the Avatar.\n       */\n      src,\n      /**\n       * Text to show in the avatar if the URL provided in `src` can't be opened.\n       */\n      fallback,\n      /**\n       * The style of the avatar.\n       */\n      variant = \"rounded\",\n      /**\n       * The size of the avatar's border radius.\n       */\n      size = \"base\",\n      className,\n      ...props\n    }: AvatarProps,\n    ref\n  ) => {\n    return (\n      <RadixAvatar.Root\n        ref={ref}\n        {...props}\n        className={clx(         \n          avatarVariants({ variant, size }),\n          className\n        )}\n      >\n        {src && (\n          <RadixAvatar.Image\n            src={src}\n            className={innerVariants({ variant, size })}\n          />\n        )}\n        <RadixAvatar.Fallback\n          className={clx(\n            innerVariants({ variant, size }),\n            \"bg-ui-bg-component-hover text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center\"\n          )}\n        >\n          {fallback}\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    )\n  }\n)\nAvatar.displayName = \"Avatar\"\n\nexport { Avatar }\n"]}

package/dist/esm/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./avatar";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/esm/components/avatar/index.js

@@ -0,0 +1,2 @@
+export * from "./avatar";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA","sourcesContent":["export * from \"./avatar\"\n"]}

package/dist/esm/components/badge/badge.d.ts

@@ -0,0 +1,126 @@
+import { VariantProps } from "cva";
+import * as React from "react";
+declare const badgeColorVariants: (props?: ({
+    color?: "green" | "red" | "blue" | "orange" | "grey" | "purple" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+declare const badgeSizeVariants: (props?: ({
+    size?: "base" | "small" | "2xsmall" | "xsmall" | "large" | undefined;
+    rounded?: "base" | "full" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeSizeVariants>, VariantProps<typeof badgeColorVariants> {
+    asChild?: boolean;
+}
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeColorVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/esm/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAO,MAAM,KAAK,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAiBtB,CAAA;AAEF,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAuErB,CAAA;AAEF,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;GAEG;AACH,QAAA,MAAM,KAAK,oFAuCV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,118 @@
+import { cva } from "cva";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { clx } from "../../utils/clx.js";
+const badgeColorVariants = cva({
+    variants: {
+        color: {
+            green: "bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border",
+            red: "bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border",
+            blue: "bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border",
+            orange: "bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border",
+            grey: "bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border",
+            purple: "bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border",
+        },
+    },
+    defaultVariants: {
+        color: "grey",
+    },
+});
+const badgeSizeVariants = cva({
+    base: "inline-flex items-center gap-x-0.5 border box-border",
+    variants: {
+        size: {
+            "2xsmall": "txt-compact-xsmall-plus h-5",
+            xsmall: "txt-compact-xsmall-plus py-px h-6",
+            small: "txt-compact-xsmall-plus py-[3px] h-7",
+            base: "txt-compact-small-plus py-[5px] h-8",
+            large: "txt-compact-medium-plus py-[7px] h-10",
+        },
+        rounded: {
+            base: "rounded-md",
+            full: "rounded-full",
+        },
+    },
+    compoundVariants: [
+        {
+            size: "2xsmall",
+            rounded: "full",
+            className: "px-1.5",
+        },
+        {
+            size: "2xsmall",
+            rounded: "base",
+            className: "px-1",
+        },
+        {
+            size: "xsmall",
+            rounded: "full",
+            className: "px-2",
+        },
+        {
+            size: "xsmall",
+            rounded: "base",
+            className: "px-1.5",
+        },
+        {
+            size: "small",
+            rounded: "full",
+            className: "px-2.5",
+        },
+        {
+            size: "small",
+            rounded: "base",
+            className: "px-2",
+        },
+        {
+            size: "base",
+            rounded: "full",
+            className: "px-3",
+        },
+        {
+            size: "base",
+            rounded: "base",
+            className: "px-2.5",
+        },
+        {
+            size: "large",
+            rounded: "full",
+            className: "px-3.5",
+        },
+        {
+            size: "large",
+            rounded: "base",
+            className: "px-3",
+        },
+    ],
+    defaultVariants: {
+        size: "base",
+        rounded: "base",
+    },
+});
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+const Badge = React.forwardRef(({ className, 
+/**
+ * The badge's size.
+ */
+size = "base", 
+/**
+ * The style of the badge's border radius.
+ */
+rounded = "base", 
+/**
+ * The badge's color.
+ */
+color = "grey", 
+/**
+ * Whether to remove the wrapper `span` element and use the
+ * passed child element instead.
+ */
+asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "span";
+    return (React.createElement(Component, { ref: ref, className: clx(badgeColorVariants({ color }), badgeSizeVariants({ size, rounded }), className), ...props }));
+});
+Badge.displayName = "Badge";
+export { Badge, badgeColorVariants };
+//# sourceMappingURL=badge.js.map

package/dist/esm/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { VariantProps, cva } from \"cva\"\nimport { Slot } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst badgeColorVariants = cva({\n  variants: {\n    color: {\n      green:\n        \"bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border\",\n      red: \"bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border\",\n      blue: \"bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border\",\n      orange:\n        \"bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border\",\n      grey: \"bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border\",\n      purple:\n        \"bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border\",\n    },\n  },\n  defaultVariants: {\n    color: \"grey\",\n  },\n})\n\nconst badgeSizeVariants = cva({\n  base: \"inline-flex items-center gap-x-0.5 border box-border\",\n  variants: {\n    size: {\n      \"2xsmall\": \"txt-compact-xsmall-plus h-5\",\n      xsmall: \"txt-compact-xsmall-plus py-px h-6\",\n      small: \"txt-compact-xsmall-plus py-[3px] h-7\",\n      base: \"txt-compact-small-plus py-[5px] h-8\",\n      large: \"txt-compact-medium-plus py-[7px] h-10\",\n    },\n    rounded: {\n      base: \"rounded-md\",\n      full: \"rounded-full\",\n    },\n  },\n  compoundVariants: [\n    {\n      size: \"2xsmall\",\n      rounded: \"full\",\n      className: \"px-1.5\",\n    },\n    {\n      size: \"2xsmall\",\n      rounded: \"base\",\n      className: \"px-1\",\n    },\n    {\n      size: \"xsmall\",\n      rounded: \"full\",\n      className: \"px-2\",\n    },\n    {\n      size: \"xsmall\",\n      rounded: \"base\",\n      className: \"px-1.5\",\n    },\n    {\n      size: \"small\",\n      rounded: \"full\",\n      className: \"px-2.5\",\n    },\n    {\n      size: \"small\",\n      rounded: \"base\",\n      className: \"px-2\",\n    },\n    {\n      size: \"base\",\n      rounded: \"full\",\n      className: \"px-3\",\n    },\n    {\n      size: \"base\",\n      rounded: \"base\",\n      className: \"px-2.5\",\n    },\n    {\n      size: \"large\",\n      rounded: \"full\",\n      className: \"px-3.5\",\n    },\n    {\n      size: \"large\",\n      rounded: \"base\",\n      className: \"px-3\",\n    },\n  ],\n  defaultVariants: {\n    size: \"base\",\n    rounded: \"base\",\n  },\n})\n\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\n    VariantProps<typeof badgeSizeVariants>,\n    VariantProps<typeof badgeColorVariants> {\n  asChild?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      /**\n       * The badge's size.\n       */\n      size = \"base\",\n      /**\n       * The style of the badge's border radius.\n       */\n      rounded = \"base\",\n      /**\n       * The badge's color.\n       */\n      color = \"grey\",\n      /**\n       * Whether to remove the wrapper `span` element and use the\n       * passed child element instead.\n       */\n      asChild = false,\n      ...props\n    }: BadgeProps,\n    ref\n  ) => {\n    const Component = asChild ? Slot.Root : \"span\"\n\n    return (\n      <Component\n        ref={ref}\n        className={clx(\n          badgeColorVariants({ color }),\n          badgeSizeVariants({ size, rounded }),\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeColorVariants }\n"]}