@intlayer/design-system 8.4.3 → 8.4.5

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\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  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":"+HAaA,MAAa,EAAoB,EAAI,wCAAyC,CAC5E,SAAU,CACR,YAAa,CACX,KAAM,eACN,GAAI,iFACJ,GAAI,iFACJ,GAAI,iFACJ,GAAI,kFACJ,MACE,mFACF,MACE,mFACF,MACE,wFACF,KAAM,eACP,CACD,aAAc,CACZ,KAAM,UACN,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,GAAI,aACJ,KAAM,GACP,CACD,QAAS,CACP,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,MAAO,aACR,CACD,UAAW,CACT,QAAS,GACT,EAAG,wCACH,EAAG,wCACH,KAAM,iDACP,CACD,OAAQ,CACN,KAAM,GACN,KAAM,iBACP,CACD,YAAa,CACX,QAAS,iBACT,UAAW,mBACX,QAAS,iBACT,KAAM,cACN,KAAM,cACN,MAAO,eACP,QAAS,iBACT,QAAS,iBACV,CACD,WAAY,CACV,KAAM,GACN,UACE,2KACF,KAAM,GACP,CACD,IAAK,CACH,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,MAAO,SACR,CACF,CACD,gBAAiB,CACf,YAAa,KACb,OAAQ,OACR,YAAa,OACb,aAAc,KACd,QAAS,OACT,UAAW,UACX,IAAK,OACN,CACD,iBAAkB,CAChB,CACE,WAAY,OACZ,MAAO,iBACR,CACF,CACF,CAAC,CAGF,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,OAAA,MACA,EAAA,KAAA,aACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,KAAA,aACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,WACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,EAAA,IACA,EAAA,EAAA,IACA,EAAA,KAAA,aACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,QAAA,gBACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,KAAA,aACD,CAGW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,OAAA,YACD,CAwCD,MAAa,GAAiC,CAC5C,WACA,cACA,UACA,eACA,YACA,YACA,SACA,cACA,aACA,MACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EACT,EAAkB,CAChB,cACA,eACA,UACA,YACA,OACE,OAAO,GAAW,UAAa,EAAS,OAAS,OAAU,IAAA,GAC7D,aACA,cACA,MACD,CAAC,CACF,EACD,CACD,GAAI,EAEH,WACG,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      xs: 'bg-card/95',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\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  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;EACR,CACF;CACF,CAAC;;AAGF,IAAY,uBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;AAGD,IAAY,wBAAL;AACL;AACA;AACA;AACA;AACA;AACA;;KACD;;AAGD,IAAY,mBAAL;AACL;AACA;AACA;AACA;AACA;;KACD;;AAGD,IAAY,qBAAL;AACL;AACA;AACA;AACA;;KACD;;AAGD,IAAY,uBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;AAGD,IAAY,sBAAL;AACL;AACA;AACA;;KACD;;AAGD,IAAY,eAAL;AACL;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCD,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;CACG"}

package/dist/esm/components/ContentEditor/ContentEditor.mjs

@@ -1,2 +1,108 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{InputVariant as t}from"../Input/Input.mjs";import{AutoSizedTextArea as n}from"../TextArea/AutoSizeTextArea.mjs";import{useState as r}from"react";import{Check as i,X as a}from"lucide-react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({children:c,onContentChange:l,isEditing:u,...d})=>{let[f,p]=r(c),[m,h]=r(0),g=f!==c,_=()=>{p(c),h(e=>e+1)},v=()=>{l(f)},y=e=>p(e.target.value??``),b=e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)?(e.preventDefault(),v()):e.key===`Escape`&&(e.preventDefault(),_())};return s(`div`,{className:`flex flex-row items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor`,children:[o(n,{className:e(`break-word m-3 inline w-full bg-transparent outline-hidden`,u?`cursor-text`:`cursor-pointer`),onChange:y,onKeyDown:b,variant:t.INVISIBLE,defaultValue:c,"aria-label":`Editable content`,"aria-describedby":g?`content-editor-actions`:void 0,...d},m),g&&s(`div`,{id:`content-editor-actions`,className:`flex flex-row items-center justify-between gap-2`,role:`group`,"aria-label":`Edit actions`,children:[o(i,{className:`cursor-pointer text-green-600 hover:scale-110`,size:16,onClick:v,role:`button`,tabIndex:0,"aria-label":`Save changes (Ctrl+Enter)`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v())}}),o(a,{className:`cursor-pointer text-red-600 hover:scale-110`,size:16,onClick:_,role:`button`,tabIndex:0,"aria-label":`Cancel changes (Escape)`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),_())}})]})]})};export{c as ContentEditor};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { InputVariant } from "../Input/Input.mjs";
+import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
+import { useState } from "react";
+import { Check, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditor.tsx
+/**
+* ContentEditor Component
+*
+* An inline editing component that allows users to edit text content with
+* validation and cancellation options. Built on top of AutoSizedTextArea
+* for flexible text editing experiences.
+*
+* ## Features
+* - **Inline Editing**: Edit content directly in place with visual feedback
+* - **Auto-sizing**: Textarea automatically adjusts to content size
+* - **Validation Controls**: Check and X buttons appear when content is modified
+* - **Keyboard Support**: Full keyboard navigation and accessibility
+* - **State Management**: Handles editing states and content validation
+*
+* ## Accessibility
+* - Proper ARIA labels for all interactive elements
+* - Keyboard navigation support (Tab, Enter, Escape)
+* - Screen reader announcements for state changes
+* - Focus management between edit and display modes
+*
+* @param children - The current content to display and edit
+* @param onContentChange - Callback when content is saved
+* @param isEditing - Whether editor is in editing mode
+* @param props - Additional AutoSizedTextArea props
+*/
+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 ?? "");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			handleValid();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-row items-center justify-between gap-2",
+		role: "group",
+		"aria-label": "Content editor",
+		children: [/* @__PURE__ */ jsx(AutoSizedTextArea, {
+			className: cn("break-word m-3 inline w-full bg-transparent outline-hidden", isEditing ? "cursor-text" : "cursor-pointer"),
+			onChange: handleOnContentChange,
+			onKeyDown: handleKeyDown,
+			variant: InputVariant.INVISIBLE,
+			defaultValue: children,
+			"aria-label": "Editable content",
+			"aria-describedby": isEdited ? "content-editor-actions" : void 0,
+			...props
+		}, resetIncrementor), isEdited && /* @__PURE__ */ jsxs("div", {
+			id: "content-editor-actions",
+			className: "flex flex-row items-center justify-between gap-2",
+			role: "group",
+			"aria-label": "Edit actions",
+			children: [/* @__PURE__ */ jsx(Check, {
+				className: "cursor-pointer text-green-600 hover:scale-110",
+				size: 16,
+				onClick: handleValid,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Save changes (Ctrl+Enter)",
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						handleValid();
+					}
+				}
+			}), /* @__PURE__ */ jsx(X, {
+				className: "cursor-pointer text-red-600 hover:scale-110",
+				size: 16,
+				onClick: handleCancel,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Cancel changes (Escape)",
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						handleCancel();
+					}
+				}
+			})]
+		})]
+	});
+};
+
+//#endregion
+export { ContentEditor };
 //# sourceMappingURL=ContentEditor.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"2SA8CA,MAAa,GAAyC,CACpD,WACA,kBACA,YACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAU,GAAe,EAAiB,EAAS,CACpD,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAAkE,GACtE,EAAY,EAAE,OAAO,OAAS,GAAG,CAE7B,EAAiB,GAAgD,CACjE,EAAE,MAAQ,UAAY,EAAE,SAAW,EAAE,UACvC,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,OACE,EAAC,MAAD,CACE,UAAU,mDACV,KAAK,QACL,aAAW,0BAHb,CAKE,EAAC,EAAD,CACE,UAAW,EACT,6DACA,EAAY,cAAgB,iBAC7B,CACD,SAAU,EACV,UAAW,EAEX,QAAS,EAAa,UACtB,aAAc,EACd,aAAW,mBACX,mBAAkB,EAAW,yBAA2B,IAAA,GACxD,GAAI,EACJ,CANK,EAML,CACD,GACC,EAAC,MAAD,CACE,GAAG,yBACH,UAAU,mDACV,KAAK,QACL,aAAW,wBAJb,CAME,EAAC,EAAD,CACE,UAAU,gDACV,KAAM,GACN,QAAS,EACT,KAAK,SACL,SAAU,EACV,aAAW,4BACX,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,GAAa,GAGjB,CAAA,CACF,EAAC,EAAD,CACE,UAAU,8CACV,KAAM,GACN,QAAS,EACT,KAAK,SACL,SAAU,EACV,aAAW,0BACX,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,GAAc,GAGlB,CAAA,CACE,GAEJ"}
+{"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,GAAG;CAEnC,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,QACE,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAW;YAHb,CAKE,oBAAC,mBAAD;GACE,WAAW,GACT,8DACA,YAAY,gBAAgB,iBAC7B;GACD,UAAU;GACV,WAAW;GAEX,SAAS,aAAa;GACtB,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;GACJ,EANK,iBAML,EACD,YACC,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAME,oBAAC,OAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,mBAAa;;;IAGjB,GACF,oBAAC,GAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,oBAAc;;;IAGlB,EACE;KAEJ"}

package/dist/esm/components/ContentEditor/ContentEditorInput.mjs

@@ -1,2 +1,111 @@
-"use client";import{Button as e,ButtonColor as t,ButtonSize as n,ButtonVariant as r}from"../Button/Button.mjs";import{Input as i,InputVariant as a}from"../Input/Input.mjs";import{useEffect as o,useState as s}from"react";import{Check as c,X as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:p,onContentChange:m,disabled:h,validate:g,additionalButtons:_,...v})=>{let[y,b]=s(p),[x,S]=s(0),C=y!==p,w=()=>{b(p),S(e=>e+1)},T=()=>{m(y)},E=e=>{b(e.currentTarget.value)},D=e=>{e.key===`Enter`&&!h&&O?(e.preventDefault(),T()):e.key===`Escape`&&(e.preventDefault(),w())};o(()=>{b(p),S(e=>e+1)},[p]);let O=g?.(y)??!0;return f(`div`,{className:`flex size-full flex-col items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor input`,children:[d(i,{onChange:E,onKeyDown:D,"aria-label":`Editable input value`,"aria-describedby":C||_?`content-editor-input-actions`:void 0,"aria-invalid":!O,variant:a.INVISIBLE,className:`size-full`,defaultValue:p,disabled:h,...v},x),(C||_)&&f(`div`,{id:`content-editor-input-actions`,className:`flex w-full items-center justify-end gap-2`,role:`group`,"aria-label":`Edit actions`,children:[C&&f(u,{children:[d(e,{Icon:c,label:`Save changes${O?``:` (invalid content)`}`,variant:r.HOVERABLE,color:t.TEXT,size:n.ICON_SM,className:`cursor-pointer hover:scale-110`,disabled:h||!O,onClick:T,"aria-describedby":O?void 0:`validation-error`}),d(e,{Icon:l,label:`Cancel changes`,variant:r.HOVERABLE,size:n.ICON_SM,color:t.TEXT,className:`cursor-pointer hover:scale-110`,onClick:w,disabled:h})]}),_]})]},String(p))};export{p as ContentEditorInput};
+'use client';
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Input, InputVariant } from "../Input/Input.mjs";
+import { useEffect, useState } from "react";
+import { Check, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditorInput.tsx
+/**
+* ContentEditorInput Component
+*
+* An inline editing component for single-line text input with validation,
+* cancel/save functionality, and support for additional action buttons.
+*
+* ## Features
+* - **Inline Input Editing**: Edit single-line content with immediate feedback
+* - **Validation Support**: Optional content validation with visual feedback
+* - **Action Buttons**: Built-in save/cancel with support for additional buttons
+* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
+* - **Accessibility**: Full ARIA support and keyboard navigation
+* - **State Management**: Handles editing states and validation
+*
+* ## Accessibility
+* - Proper ARIA labels and descriptions for all controls
+* - Keyboard navigation (Tab, Enter, Escape)
+* - Screen reader support for validation states
+* - Focus management and visual indicators
+*
+* @param children - Current input value
+* @param onContentChange - Callback when content is saved
+* @param disabled - Whether the editor is disabled
+* @param validate - Optional validation function
+* @param additionalButtons - Extra buttons to display
+* @param props - Additional Input component props
+*/
+const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons, ...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.currentTarget.value);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !disabled && isValid) {
+			e.preventDefault();
+			handleValid();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		}
+	};
+	useEffect(() => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	}, [children]);
+	const isValid = validate?.(newValue) ?? true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex size-full flex-col items-center justify-between gap-2",
+		role: "group",
+		"aria-label": "Content editor input",
+		children: [/* @__PURE__ */ jsx(Input, {
+			onChange: handleOnContentChange,
+			onKeyDown: handleKeyDown,
+			"aria-label": "Editable input value",
+			"aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
+			"aria-invalid": !isValid,
+			variant: InputVariant.INVISIBLE,
+			className: "size-full",
+			defaultValue: children,
+			disabled,
+			...props
+		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", {
+			id: "content-editor-input-actions",
+			className: "flex w-full items-center justify-end gap-2",
+			role: "group",
+			"aria-label": "Edit actions",
+			children: [isEdited && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				Icon: Check,
+				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+				variant: ButtonVariant.HOVERABLE,
+				color: ButtonColor.TEXT,
+				size: ButtonSize.ICON_SM,
+				className: "cursor-pointer hover:scale-110",
+				disabled: disabled || !isValid,
+				onClick: handleValid,
+				"aria-describedby": !isValid ? "validation-error" : void 0
+			}), /* @__PURE__ */ jsx(Button, {
+				Icon: X,
+				label: "Cancel changes",
+				variant: ButtonVariant.HOVERABLE,
+				size: ButtonSize.ICON_SM,
+				color: ButtonColor.TEXT,
+				className: "cursor-pointer hover:scale-110",
+				onClick: handleCancel,
+				disabled
+			})] }), additionalButtons]
+		})]
+	}, String(children));
+};
+
+//#endregion
+export { ContentEditorInput };
 //# sourceMappingURL=ContentEditorInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"wUAsDA,MAAa,GAAmD,CAC9D,WACA,kBACA,WACA,WACA,oBACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAU,GAAe,EAA8B,EAAS,CACjE,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAA+D,GAAM,CACzE,EAAY,EAAE,cAAc,MAAM,EAG9B,EAAiB,GAA6C,CAC9D,EAAE,MAAQ,SAAW,CAAC,GAAY,GACpC,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,MAAgB,CACd,EAAY,EAAS,CAErB,EAAqB,GAAS,EAAO,EAAE,EACtC,CAAC,EAAS,CAAC,CAEd,IAAM,EAAU,IAAW,EAAS,EAAI,GAExC,OACE,EAAC,MAAD,CACE,UAAU,6DAEV,KAAK,QACL,aAAW,gCAJb,CAME,EAAC,EAAD,CACE,SAAU,EACV,UAAW,EAEX,aAAW,uBACX,mBACE,GAAY,EACR,+BACA,IAAA,GAEN,eAAc,CAAC,EACf,QAAS,EAAa,UACtB,UAAU,YACV,aAAc,EACJ,WACV,GAAI,EACJ,CAbK,EAaL,EACA,GAAY,IACZ,EAAC,MAAD,CACE,GAAG,+BACH,UAAU,6CACV,KAAK,QACL,aAAW,wBAJb,CAMG,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,KAAM,EACN,MAAO,eAAgB,EAAiC,GAAvB,uBACjC,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,KAAM,EAAW,QACjB,UAAU,iCACV,SAAU,GAAY,CAAC,EACvB,QAAS,EACT,mBAAmB,EAA+B,IAAA,GAArB,mBAC7B,CAAA,CACF,EAAC,EAAD,CACE,KAAM,EACN,MAAM,iBACN,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,MAAO,EAAY,KACnB,UAAU,iCACV,QAAS,EACC,WACV,CAAA,CACD,CAAA,CAAA,CAEJ,EACG,GAEJ,EAxDC,OAAO,EAAS,CAwDjB"}
+{"version":3,"file":"ContentEditorInput.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,OAAD;GACE,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;GACJ,EAbK,iBAaL,GACA,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;IAClD,GACF,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;IACV,EACD,KAEJ,kBACG;KAEJ;IAxDC,OAAO,SAAS,CAwDjB"}

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,2 +1,114 @@
-"use client";import{useUser as e}from"../../hooks/useUser/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{AutoCompleteTextarea as a}from"../TextArea/AutocompleteTextArea.mjs";import{useEffect as o,useState as s}from"react";import{Check as c,X as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:p,onContentChange:m,disabled:h,validate:g,additionalButtons:_,...v})=>{let{isAuthenticated:y}=e(),[b,x]=s(p),[S,C]=s(0),w=b!==p,T=()=>{x(p),C(e=>e+1)},E=()=>{m(b)},D=e=>x(e.currentTarget.value??``),O=e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&!h&&k?(e.preventDefault(),E()):e.key===`Escape`&&(e.preventDefault(),T())};o(()=>{x(p),C(e=>e+1)},[p]);let k=g?.(b)??!0;return f(`div`,{className:`flex size-full flex-col items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor textarea`,children:[d(a,{onChange:D,onKeyDown:O,variant:`invisible`,className:`size-full`,value:p,isActive:y,disabled:h,"aria-label":`Editable textarea content`,"aria-describedby":w||_?`content-editor-textarea-actions`:void 0,"aria-invalid":!k,...v},S),(w||_)&&f(`div`,{id:`content-editor-textarea-actions`,className:`flex w-full items-center justify-end gap-2`,role:`group`,"aria-label":`Edit actions`,children:[w&&f(u,{children:[d(t,{Icon:c,label:`Save changes${k?``:` (invalid content)`}`,variant:i.HOVERABLE,color:n.TEXT,size:r.ICON_SM,className:`cursor-pointer hover:scale-110`,disabled:h||!k,onClick:E,"aria-describedby":k?void 0:`textarea-validation-error`}),d(t,{Icon:l,label:`Cancel changes`,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`cursor-pointer hover:scale-110`,onClick:T,disabled:h})]}),_]})]},p)};export{p as ContentEditorTextArea};
+'use client';
+
+import { useUser } from "../../hooks/useUser/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
+import { useEffect, useState } from "react";
+import { Check, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditorTextArea.tsx
+/**
+* ContentEditorTextArea Component
+*
+* An inline editing component for multi-line text with autocomplete functionality,
+* user authentication integration, and validation support. This component combines
+* the auto-sizing textarea with smart autocomplete features.
+*
+* ## Features
+* - **Auto-sizing Textarea**: Automatically adjusts height to content
+* - **Autocomplete Integration**: Smart text completion when user is authenticated
+* - **Validation Support**: Optional content validation with visual feedback
+* - **Action Buttons**: Built-in save/cancel with support for additional buttons
+* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
+* - **User Authentication**: Autocomplete features activate based on auth status
+* - **Accessibility**: Full ARIA support and keyboard navigation
+*
+* ## Accessibility
+* - Proper ARIA labels and descriptions for all controls
+* - Keyboard navigation (Tab, Enter, Escape)
+* - Screen reader support for validation states and user auth status
+* - Focus management and visual indicators
+*
+* @param children - Current textarea content
+* @param onContentChange - Callback when content is saved
+* @param disabled - Whether the editor is disabled
+* @param validate - Optional validation function
+* @param additionalButtons - Extra buttons to display
+* @param props - Additional AutoSizedTextArea component props
+*/
+const ContentEditorTextArea = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
+	const { isAuthenticated } = useUser();
+	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.currentTarget.value ?? "");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled && isValid) {
+			e.preventDefault();
+			handleValid();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		}
+	};
+	useEffect(() => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	}, [children]);
+	const isValid = validate?.(newValue) ?? true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex size-full flex-col items-center justify-between gap-2",
+		role: "group",
+		"aria-label": "Content editor textarea",
+		children: [/* @__PURE__ */ jsx(AutoCompleteTextarea, {
+			onChange: handleOnContentChange,
+			onKeyDown: handleKeyDown,
+			variant: "invisible",
+			className: "size-full",
+			value: children,
+			isActive: isAuthenticated,
+			disabled,
+			"aria-label": "Editable textarea content",
+			"aria-describedby": isEdited || additionalButtons ? "content-editor-textarea-actions" : void 0,
+			"aria-invalid": !isValid,
+			...props
+		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", {
+			id: "content-editor-textarea-actions",
+			className: "flex w-full items-center justify-end gap-2",
+			role: "group",
+			"aria-label": "Edit actions",
+			children: [isEdited && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				Icon: Check,
+				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+				variant: ButtonVariant.HOVERABLE,
+				color: ButtonColor.TEXT,
+				size: ButtonSize.ICON_SM,
+				className: "cursor-pointer hover:scale-110",
+				disabled: disabled || !isValid,
+				onClick: handleValid,
+				"aria-describedby": !isValid ? "textarea-validation-error" : void 0
+			}), /* @__PURE__ */ jsx(Button, {
+				Icon: X,
+				label: "Cancel changes",
+				variant: ButtonVariant.HOVERABLE,
+				size: ButtonSize.ICON_SM,
+				color: ButtonColor.TEXT,
+				className: "cursor-pointer hover:scale-110",
+				onClick: handleCancel,
+				disabled
+			})] }), additionalButtons]
+		})]
+	}, children);
+};
+
+//#endregion
+export { ContentEditorTextArea };
 //# sourceMappingURL=ContentEditorTextArea.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"+YAyDA,MAAa,GAAyD,CACpE,WACA,kBACA,WACA,WACA,oBACA,GAAG,KACC,CACJ,GAAM,CAAE,mBAAoB,GAAS,CAC/B,CAAC,EAAU,GAAe,EAAiB,EAAS,CACpD,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAAkE,GACtE,EAAY,EAAE,cAAc,OAAS,GAAG,CAEpC,EAAiB,GAAgD,CACjE,EAAE,MAAQ,UAAY,EAAE,SAAW,EAAE,UAAY,CAAC,GAAY,GAChE,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,MAAgB,CACd,EAAY,EAAS,CAErB,EAAqB,GAAS,EAAO,EAAE,EACtC,CAAC,EAAS,CAAC,CAEd,IAAM,EAAU,IAAW,EAAS,EAAI,GAExC,OACE,EAAC,MAAD,CACE,UAAU,6DAEV,KAAK,QACL,aAAW,mCAJb,CAME,EAAC,EAAD,CACE,SAAU,EACV,UAAW,EAEX,QAAQ,YACR,UAAU,YACV,MAAO,EACP,SAAU,EACA,WACV,aAAW,4BACX,mBACE,GAAY,EACR,kCACA,IAAA,GAEN,eAAc,CAAC,EACf,GAAI,EACJ,CAdK,EAcL,EACA,GAAY,IACZ,EAAC,MAAD,CACE,GAAG,kCACH,UAAU,6CACV,KAAK,QACL,aAAW,wBAJb,CAMG,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,KAAM,EACN,MAAO,eAAgB,EAAiC,GAAvB,uBACjC,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,KAAM,EAAW,QACjB,UAAU,iCACV,SAAU,GAAY,CAAC,EACvB,QAAS,EACT,mBACG,EAAwC,IAAA,GAA9B,4BAEb,CAAA,CACF,EAAC,EAAD,CACE,KAAM,EACN,MAAM,iBACN,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,MAAO,EAAY,KACnB,UAAU,iCACV,QAAS,EACC,WACV,CAAA,CACD,CAAA,CAAA,CAEJ,EACG,GAEJ,EA3DC,EA2DD"}
+{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,SAAS;CACrC,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,GAAG;CAE1C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,sBAAD;GACE,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;GACJ,EAdK,iBAcL,GACA,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;IAE3C,GACF,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;IACV,EACD,KAEJ,kBACG;KAEJ;IA3DC,SA2DD"}

package/dist/esm/components/ContentEditor/index.mjs

@@ -1 +1,5 @@
-import{ContentEditorInput as e}from"./ContentEditorInput.mjs";import{ContentEditorTextArea as t}from"./ContentEditorTextArea.mjs";import{ContentEditor as n}from"./ContentEditor.mjs";export{n as ContentEditor,e as ContentEditorInput,t as ContentEditorTextArea};
+import { ContentEditorInput } from "./ContentEditorInput.mjs";
+import { ContentEditorTextArea } from "./ContentEditorTextArea.mjs";
+import { ContentEditor } from "./ContentEditor.mjs";
+
+export { ContentEditor, ContentEditorInput, ContentEditorTextArea };

package/dist/esm/components/ContentSelector/ContentSelector.mjs

@@ -1,2 +1,82 @@
-"use client";import{PressableSpan as e}from"../PressableSpan/PressableSpan.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,onSelect:r,onUnselect:i,isSelecting:a,pressDuration:o,className:s,"aria-label":c,"aria-describedby":l})=>t(e,{onPress:r,onClickOutside:i,isSelecting:a,pressDuration:o,className:s,"aria-label":c,"aria-describedby":l,children:n});export{n as ContentSelector};
+'use client';
+
+import { PressableSpan } from "../PressableSpan/PressableSpan.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ContentSelector/ContentSelector.tsx
+/**
+* ContentSelector - A higher-level wrapper around PressableSpan for content selection
+*
+* This component provides a semantic interface for making any content selectable through
+* long press gestures. It's specifically designed for content management interfaces
+* where users need to select text, images, or other elements to perform actions like
+* editing, moving, or applying operations.
+*
+* ## Key Features
+* - **Content Selection**: Makes any React content selectable via long press
+* - **Visual Feedback**: Inherits outline-based selection indicators from PressableSpan
+* - **Accessibility**: Full keyboard navigation and screen reader support
+* - **Click Outside**: Automatic deselection when clicking elsewhere
+* - **External Control**: Can be controlled externally for complex selection states
+*
+* ## Use Cases
+* - Content management systems with inline editing
+* - Text and media selection interfaces
+* - Interactive documentation with selectable sections
+* - Dashboard widgets with configurable content
+* - Form builders with selectable form elements
+*
+* ## Accessibility
+* - Inherits all accessibility features from PressableSpan
+* - Keyboard navigation with Tab, Enter, Space, and Escape
+* - Screen reader announcements for selection states
+* - Focus management and proper ARIA attributes
+*
+* @example
+* Basic content selection:
+* ```tsx
+* <ContentSelector onSelect={() => setIsEditing(true)}>
+*   <p>This paragraph becomes selectable</p>
+* </ContentSelector>
+* ```
+*
+* @example
+* With deselection handling:
+* ```tsx
+* <ContentSelector
+*   onSelect={() => setSelectedContent(contentId)}
+*   onUnselect={() => setSelectedContent(null)}
+* >
+*   <div className="content-block">
+*     <h2>Selectable Content Block</h2>
+*     <p>Long press to select this entire block</p>
+*   </div>
+* </ContentSelector>
+* ```
+*
+* @example
+* Controlled selection state:
+* ```tsx
+* <ContentSelector
+*   isSelecting={selectedItems.includes(itemId)}
+*   onSelect={() => selectItem(itemId)}
+*   onUnselect={() => deselectItem(itemId)}
+* >
+*   <ContentCard data={cardData} />
+* </ContentSelector>
+* ```
+*/
+const ContentSelector = ({ children, onSelect, onUnselect, isSelecting, pressDuration, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }) => /* @__PURE__ */ jsx(PressableSpan, {
+	onPress: onSelect,
+	onClickOutside: onUnselect,
+	isSelecting,
+	pressDuration,
+	className,
+	"aria-label": ariaLabel,
+	"aria-describedby": ariaDescribedBy,
+	children
+});
+
+//#endregion
+export { ContentSelector };
 //# sourceMappingURL=ContentSelector.mjs.map