@intlayer/design-system 2.0.13 → 3.0.0

package/dist/components/Command/index.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { Dialog, DialogContent } from "@radix-ui/react-dialog";
+import { Command as Command$1 } from "cmdk";
+import { Search } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.mjs";
+const CommandRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex size-full flex-col overflow-hidden rounded-md",
+      className
+    ),
+    ...props
+  }
+));
+CommandRoot.displayName = Command$1.displayName;
+const CommandDialog = ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CommandRoot, { className: "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5", children }) }) });
+const CommandInput = forwardRef(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property, sonarjs/no-unknown-property
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Command$1.Input,
+      {
+        ref,
+        className: cn(
+          "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] })
+));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("bg-border -mx-1 h-px", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: 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",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+const Command = {
+  ...CommandRoot,
+  Dialog: CommandDialog,
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Separator: CommandSeparator,
+  Item: CommandItem,
+  Shortcut: CommandShortcut
+};
+export {
+  Command,
+  CommandRoot
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type FC,\n  forwardRef,\n  type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot = forwardRef<\n  ElementRef<typeof CommandPrimitive>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n));\nCommandRoot.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  // eslint-disable-next-line react/no-unknown-property, sonarjs/no-unknown-property\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      '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',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"names":["jsx","CommandPrimitive","jsxs"],"mappings":"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"}

package/dist/components/Container/index.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const classVarianceAuthority = require("class-variance-authority");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const containerVariants = classVarianceAuthority.cva(
+  "flex flex-col p-10 text-text backdrop-blur dark:text-text-dark",
+  {
+    variants: {
+      roundedSize: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      transparency: {
+        none: "bg-card dark:bg-card-dark",
+        sm: "bg-card/80 dark:bg-card-dark/80",
+        md: "bg-card/60 dark:bg-card-dark/60",
+        lg: "bg-card/40 dark:bg-card-dark/40",
+        xl: "bg-card/20 dark:bg-card-dark/20"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-1",
+        md: "p-2",
+        lg: "p-3",
+        xl: "p-4"
+      },
+      separator: {
+        without: "",
+        x: "divide-x divide-dashed divide-text/20 dark:divide-text-dark/20",
+        y: "divide-y divide-dashed divide-text/20 dark:divide-text-dark/20",
+        both: "divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20"
+      },
+      border: {
+        none: "",
+        with: "border-text dark:border-text-dark border-[1.5px]"
+      },
+      background: {
+        none: "bg-none",
+        with: ""
+      },
+      gap: {
+        none: "gap-0",
+        sm: "gap-1",
+        md: "gap-3",
+        lg: "gap-5",
+        xl: "gap-8",
+        "2xl": "gap-10"
+      }
+    },
+    defaultVariants: {
+      roundedSize: "md",
+      border: "none",
+      transparency: "md",
+      padding: "none",
+      separator: "without",
+      gap: "none"
+    }
+  }
+);
+const Container = require$$0.forwardRef(
+  ({
+    children,
+    roundedSize,
+    padding,
+    transparency,
+    separator,
+    className,
+    border,
+    background,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref,
+      className: utils_cn.cn(
+        containerVariants({
+          roundedSize,
+          transparency,
+          padding,
+          separator,
+          border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
+          background: typeof background === "boolean" ? background ? "with" : "none" : void 0,
+          className
+        })
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Container.displayName = "Container";
+exports.Container = Container;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        sm: 'bg-card/80 dark:bg-card-dark/80',\n        md: 'bg-card/60 dark:bg-card-dark/60',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-text dark:border-text-dark border-[1.5px]',\n      },\n      background: {\n        none: 'bg-none',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\ntype ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IACP;AAAA,EACF;AACF;AAUO,MAAM,YAAYC,WAAA;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,SAAA;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,QAAA,CACD;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,UAAU,cAAc;;"}

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

@@ -1,23 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
-import { TwStyle } from 'twin.macro';
 
-type RoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
-type Transparency = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type Padding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type Separator = 'without' | 'x' | 'y' | 'both';
-type ContainerStyleProps = {
-    $roundedSize?: RoundedSize;
-    $transparency?: Transparency;
-    $padding?: Padding;
-    $separator?: Separator;
-};
-export declare const getContainerStyles: ({ $roundedSize, $transparency, $padding, $separator, }: ContainerStyleProps) => TwStyle[];
-export declare const Container: import('react').ForwardRefExoticComponent<{
-    roundedSize?: RoundedSize;
-    transparency?: Transparency;
-    padding?: Padding;
-    separator?: Separator;
-} & {
+export declare const Container: import('react').ForwardRefExoticComponent<Omit<VariantProps<(props?: ({
+    roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | null | undefined;
+    transparency?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    separator?: "without" | "x" | "y" | "both" | null | undefined;
+    border?: "none" | "with" | null | undefined;
+    background?: "none" | "with" | null | undefined;
+    gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "border" | "background"> & {
     children?: import('react').ReactNode | undefined;
-} & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export {};
+} & HTMLAttributes<HTMLDivElement> & {
+    border?: boolean;
+    background?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAsC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AA0EhF,eAAO,MAAM,SAAS;;;;;;;;;;;aAJT,OAAO;iBACH,OAAO;kDA8CvB,CAAC"}

package/dist/components/Container/index.mjs

@@ -0,0 +1,101 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.mjs";
+const containerVariants = cva(
+  "flex flex-col p-10 text-text backdrop-blur dark:text-text-dark",
+  {
+    variants: {
+      roundedSize: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      transparency: {
+        none: "bg-card dark:bg-card-dark",
+        sm: "bg-card/80 dark:bg-card-dark/80",
+        md: "bg-card/60 dark:bg-card-dark/60",
+        lg: "bg-card/40 dark:bg-card-dark/40",
+        xl: "bg-card/20 dark:bg-card-dark/20"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-1",
+        md: "p-2",
+        lg: "p-3",
+        xl: "p-4"
+      },
+      separator: {
+        without: "",
+        x: "divide-x divide-dashed divide-text/20 dark:divide-text-dark/20",
+        y: "divide-y divide-dashed divide-text/20 dark:divide-text-dark/20",
+        both: "divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20"
+      },
+      border: {
+        none: "",
+        with: "border-text dark:border-text-dark border-[1.5px]"
+      },
+      background: {
+        none: "bg-none",
+        with: ""
+      },
+      gap: {
+        none: "gap-0",
+        sm: "gap-1",
+        md: "gap-3",
+        lg: "gap-5",
+        xl: "gap-8",
+        "2xl": "gap-10"
+      }
+    },
+    defaultVariants: {
+      roundedSize: "md",
+      border: "none",
+      transparency: "md",
+      padding: "none",
+      separator: "without",
+      gap: "none"
+    }
+  }
+);
+const Container = forwardRef(
+  ({
+    children,
+    roundedSize,
+    padding,
+    transparency,
+    separator,
+    className,
+    border,
+    background,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        containerVariants({
+          roundedSize,
+          transparency,
+          padding,
+          separator,
+          border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
+          background: typeof background === "boolean" ? background ? "with" : "none" : void 0,
+          className
+        })
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Container.displayName = "Container";
+export {
+  Container
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        sm: 'bg-card/80 dark:bg-card-dark/80',\n        md: 'bg-card/60 dark:bg-card-dark/60',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-text dark:border-text-dark border-[1.5px]',\n      },\n      background: {\n        none: 'bg-none',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\ntype ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["jsx"],"mappings":";;;;AAIA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IACP;AAAA,EACF;AACF;AAUO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,QAAA,CACD;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,UAAU,cAAc;"}

package/dist/components/ContentEditor/ContentEditor.cjs

@@ -0,0 +1,62 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
+const ContentEditor = ({
+  children,
+  onContentChange,
+  isEditing,
+  ...props
+}) => {
+  const [newValue, setNewValue] = require$$0.useState(children);
+  const [resetIncrementor, setResetIncrementor] = require$$0.useState(0);
+  const isEdited = newValue !== children;
+  const handleCancel = () => {
+    setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
+  };
+  const handleValid = () => {
+    onContentChange(newValue);
+  };
+  const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
+      {
+        className: utils_cn.cn(
+          "break-word m-3 inline w-full bg-transparent outline-none",
+          isEditing ? "cursor-text" : "cursor-pointer"
+        ),
+        onChange: handleOnContentChange,
+        variant: "invisible",
+        defaultValue: children,
+        ...props
+      },
+      resetIncrementor
+    ),
+    isEdited && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        lucideReact.Check,
+        {
+          className: "cursor-pointer hover:scale-110",
+          size: 16,
+          onClick: handleValid
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        lucideReact.X,
+        {
+          className: "cursor-pointer hover:scale-110",
+          size: 16,
+          onClick: handleCancel
+        }
+      )
+    ] })
+  ] });
+};
+exports.ContentEditor = ContentEditor;
+//# sourceMappingURL=ContentEditor.cjs.map

package/dist/components/ContentEditor/ContentEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","Check","X"],"mappings":";;;;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,oBAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,oBAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EAAA;AAExC,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAAA;AAG1B,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCH,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAA,kBAAA;AAAA,QAACG,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAH,2BAAA,kBAAA;AAAA,QAACI,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;;"}

package/dist/components/ContentEditor/ContentEditor.d.ts

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import { HTMLAttributes, FC } from 'react';
 
 export type ContentEditorProps = {
     children: string;
     onContentChange: (content: string) => void;
     isEditing?: boolean;
-};
+} & HTMLAttributes<HTMLTextAreaElement>;
 export declare const ContentEditor: FC<ContentEditorProps>;
+//# sourceMappingURL=ContentEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAExC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkDhD,CAAC"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
+const ContentEditor = ({
+  children,
+  onContentChange,
+  isEditing,
+  ...props
+}) => {
+  const [newValue, setNewValue] = useState(children);
+  const [resetIncrementor, setResetIncrementor] = useState(0);
+  const isEdited = newValue !== children;
+  const handleCancel = () => {
+    setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
+  };
+  const handleValid = () => {
+    onContentChange(newValue);
+  };
+  const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AutoSizedTextArea,
+      {
+        className: cn(
+          "break-word m-3 inline w-full bg-transparent outline-none",
+          isEditing ? "cursor-text" : "cursor-pointer"
+        ),
+        onChange: handleOnContentChange,
+        variant: "invisible",
+        defaultValue: children,
+        ...props
+      },
+      resetIncrementor
+    ),
+    isEdited && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Check,
+        {
+          className: "cursor-pointer hover:scale-110",
+          size: 16,
+          onClick: handleValid
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        X,
+        {
+          className: "cursor-pointer hover:scale-110",
+          size: 16,
+          onClick: handleCancel
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ContentEditor
+};
+//# sourceMappingURL=ContentEditor.mjs.map

package/dist/components/ContentEditor/ContentEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EAAA;AAExC,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAAA;AAG1B,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCD,kCAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/components/ContentEditor/ContentEditorTextArea.cjs

@@ -0,0 +1,68 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
+require("../TextArea/TextArea.cjs");
+const ContentEditorTextArea = ({
+  children,
+  onContentChange,
+  ...props
+}) => {
+  const [newValue, setNewValue] = require$$0.useState(children);
+  const [resetIncrementor, setResetIncrementor] = require$$0.useState(0);
+  const isEdited = newValue !== children;
+  const handleCancel = () => {
+    setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
+  };
+  const handleValid = () => {
+    onContentChange(newValue);
+  };
+  const handleOnContentChange = (e) => setNewValue(e.currentTarget.value ?? "");
+  require$$0.useEffect(() => {
+    setNewValue(children);
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "flex size-full flex-col items-center justify-between gap-2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
+          {
+            onChange: handleOnContentChange,
+            variant: "invisible",
+            className: "size-full",
+            defaultValue: children,
+            ...props
+          },
+          resetIncrementor
+        ),
+        isEdited && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            lucideReact.Check,
+            {
+              className: "cursor-pointer hover:scale-110",
+              size: 20,
+              onClick: handleValid
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            lucideReact.X,
+            {
+              className: "cursor-pointer hover:scale-110",
+              size: 20,
+              onClick: handleCancel
+            }
+          )
+        ] })
+      ]
+    },
+    children
+  );
+};
+exports.ContentEditorTextArea = ContentEditorTextArea;
+//# sourceMappingURL=ContentEditorTextArea.cjs.map

package/dist/components/ContentEditor/ContentEditorTextArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditorTextArea.cjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { useState, type FC, type ChangeEventHandler, useEffect } from 'react';\nimport { AutoSizedTextArea, AutoSizedTextAreaProps } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoSizedTextArea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={20}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={20}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","AutoSizedTextArea","Check","X"],"mappings":";;;;;;;;AAWO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,oBAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,oBAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EAAA;AAExC,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAAA;AAG1B,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzCC,aAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EAAA,GACnB,CAAC,QAAQ,CAAC;AAGX,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAA,kBAAA;AAAA,UAACC,qCAAA;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UAJC;AAAA,QAKP;AAAA,QACC,YACCF,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,UAAAC,2BAAA,kBAAA;AAAA,YAACE,YAAA;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAM;AAAA,cACN,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,UACAF,2BAAA,kBAAA;AAAA,YAACG,YAAA;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAM;AAAA,cACN,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAtBG;AAAA,EAAA;AA0BX;;"}