@intlayer/design-system 6.1.5 → 6.1.6-canary.0

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

@@ -1,5 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from 'react';
+/**
+ * Container component variants using class-variance-authority
+ * Provides flexible styling options for background, padding, borders, and layout
+ */
 export declare const containerVariants: (props?: ({
     roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
@@ -10,6 +14,7 @@ export declare const containerVariants: (props?: ({
     background?: "none" | "hoverable" | "with" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Available rounded corner sizes for the container */
 export declare enum ContainerRoundedSize {
     NONE = "none",
     SM = "sm",
@@ -20,6 +25,7 @@ export declare enum ContainerRoundedSize {
     THREE_XL = "3xl",
     FULL = "full"
 }
+/** Background transparency levels for the container */
 export declare enum ContainerTransparency {
     NONE = "none",
     SM = "sm",
@@ -28,6 +34,7 @@ export declare enum ContainerTransparency {
     XL = "xl",
     FULL = "full"
 }
+/** Padding sizes for container content */
 export declare enum ContainerPadding {
     NONE = "none",
     SM = "sm",
@@ -35,12 +42,14 @@ export declare enum ContainerPadding {
     LG = "lg",
     XL = "xl"
 }
+/** Separator options for dividing container children */
 export declare enum ContainerSeparator {
     WITHOUT = "without",
     X = "x",
     Y = "y",
     BOTH = "both"
 }
+/** Border color options for the container */
 export declare enum ContainerBorderColor {
     PRIMARY = "primary",
     SECONDARY = "secondary",
@@ -50,11 +59,13 @@ export declare enum ContainerBorderColor {
     WARNING = "warning",
     SUCCESS = "success"
 }
+/** Background interaction states for the container */
 export declare enum ContainerBackground {
     NONE = "none",
     HOVERABLE = "hoverable",
     WITH = "with"
 }
+/** Gap sizes between container children */
 export declare enum ContainerGap {
     NONE = "none",
     SM = "sm",
@@ -63,8 +74,39 @@ export declare enum ContainerGap {
     XL = "xl",
     TWO_XL = "2xl"
 }
+/** Container component props extending HTML div attributes */
 export type ContainerProps = PropsWithChildren<Omit<VariantProps<typeof containerVariants>, 'border'>> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    /** Whether to show a border around the container */
     border?: boolean;
 };
+/**
+ * Container Component
+ *
+ * A flexible container component for organizing content with customizable styling options.
+ * Supports various visual states, layouts, and accessibility features.
+ *
+ * ## Features
+ * - **Flexible Layout**: Supports different padding, gap, and separator options
+ * - **Visual Variants**: Multiple background transparency levels and border styles
+ * - **Responsive Design**: Configurable rounded corners and spacing
+ * - **Semantic HTML**: Proper div element with extensible attributes
+ *
+ * ## Accessibility
+ * - Inherits all standard div accessibility features
+ * - Supports ARIA attributes through spread props
+ * - Maintains proper semantic structure for screen readers
+ *
+ * @param children - The content to display inside the container
+ * @param roundedSize - Border radius size (default: 'md')
+ * @param transparency - Background transparency level (default: 'md')
+ * @param padding - Internal padding size (default: 'none')
+ * @param separator - Divider lines between children (default: 'without')
+ * @param border - Whether to show border (default: false)
+ * @param borderColor - Color of the border (default: 'text')
+ * @param background - Background interaction behavior (default: 'none')
+ * @param gap - Space between child elements (default: 'none')
+ * @param className - Additional CSS classes
+ * @param props - Additional HTML div attributes including ARIA attributes
+ */
 export declare const Container: FC<ContainerProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,iBAAiB;;;;;;;;;8EAsE5B,CAAC;AAEH,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,IAAI,SAAS;CACd;AAED,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,IAAI,SAAS;CACd;AAED,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,CAAC,MAAM;IACP,CAAC,MAAM;IACP,IAAI,SAAS;CACd;AAED,oBAAY,oBAAoB;IAC9B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;CACf;AAED,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8BxC,CAAC"}
+{"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,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;8EAsE5B,CAAC;AAEH,uDAAuD;AACvD,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;IACd,QAAQ,QAAQ;IAChB,IAAI,SAAS;CACd;AAED,uDAAuD;AACvD,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,IAAI,SAAS;CACd;AAED,0CAA0C;AAC1C,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,wDAAwD;AACxD,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,CAAC,MAAM;IACP,CAAC,MAAM;IACP,IAAI,SAAS;CACd;AAED,6CAA6C;AAC7C,oBAAY,oBAAoB;IAC9B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,sDAAsD;AACtD,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,2CAA2C;AAC3C,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,QAAQ;CACf;AAED,8DAA8D;AAC9D,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgCxC,CAAC"}

package/dist/components/Container/index.mjs

@@ -141,6 +141,7 @@ const Container = ({
   border,
   borderColor,
   background,
+  gap,
   ...props
 }) => /* @__PURE__ */ jsx(
   "div",
@@ -154,6 +155,7 @@ const Container = ({
         border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
         background,
         borderColor,
+        gap,
         className
       })
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const containerVariants = cva('flex text-text flex-col backdrop-blur', {\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',\n      sm: 'bg-card/95',\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: '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',\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.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\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: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n}\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\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  ...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        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\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 text-text flex-col backdrop-blur', {\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',\n      sm: 'bg-card/95',\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: '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',\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.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\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: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\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  TWO_XL = '2xl',\n  THREE_XL = '3xl',\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  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  TWO_XL = '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        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap"],"mappings":";;;AAaO,MAAM,oBAAoB,IAAI,yCAAyC;AAAA,EAC5E,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAER,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IAAA;AAAA,IAER,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,IAER,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IAAA;AAAA,IAER,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,EAAA;AAET,CAAC;AAGM,IAAK,yCAAAA,0BAAL;AACLA,wBAAA,MAAA,IAAO;AACPA,wBAAA,IAAA,IAAK;AACLA,wBAAA,IAAA,IAAK;AACLA,wBAAA,IAAA,IAAK;AACLA,wBAAA,IAAA,IAAK;AACLA,wBAAA,QAAA,IAAS;AACTA,wBAAA,UAAA,IAAW;AACXA,wBAAA,MAAA,IAAO;AARG,SAAAA;AAAA,GAAA,wBAAA,CAAA,CAAA;AAYL,IAAK,0CAAAC,2BAAL;AACLA,yBAAA,MAAA,IAAO;AACPA,yBAAA,IAAA,IAAK;AACLA,yBAAA,IAAA,IAAK;AACLA,yBAAA,IAAA,IAAK;AACLA,yBAAA,IAAA,IAAK;AACLA,yBAAA,MAAA,IAAO;AANG,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAUL,IAAK,qCAAAC,sBAAL;AACLA,oBAAA,MAAA,IAAO;AACPA,oBAAA,IAAA,IAAK;AACLA,oBAAA,IAAA,IAAK;AACLA,oBAAA,IAAA,IAAK;AACLA,oBAAA,IAAA,IAAK;AALK,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AASL,IAAK,uCAAAC,wBAAL;AACLA,sBAAA,SAAA,IAAU;AACVA,sBAAA,GAAA,IAAI;AACJA,sBAAA,GAAA,IAAI;AACJA,sBAAA,MAAA,IAAO;AAJG,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAQL,IAAK,yCAAAC,0BAAL;AACLA,wBAAA,SAAA,IAAU;AACVA,wBAAA,WAAA,IAAY;AACZA,wBAAA,SAAA,IAAU;AACVA,wBAAA,MAAA,IAAO;AACPA,wBAAA,OAAA,IAAQ;AACRA,wBAAA,SAAA,IAAU;AACVA,wBAAA,SAAA,IAAU;AAPA,SAAAA;AAAA,GAAA,wBAAA,CAAA,CAAA;AAWL,IAAK,wCAAAC,yBAAL;AACLA,uBAAA,MAAA,IAAO;AACPA,uBAAA,WAAA,IAAY;AACZA,uBAAA,MAAA,IAAO;AAHG,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAOL,IAAK,iCAAAC,kBAAL;AACLA,gBAAA,MAAA,IAAO;AACPA,gBAAA,IAAA,IAAK;AACLA,gBAAA,IAAA,IAAK;AACLA,gBAAA,IAAA,IAAK;AACLA,gBAAA,IAAA,IAAK;AACLA,gBAAA,QAAA,IAAS;AANC,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AA+CL,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;"}

package/dist/components/ContentEditor/ContentEditor.cjs

@@ -25,40 +25,87 @@ const ContentEditor = ({
     onContentChange(newValue);
   };
   const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
-      {
-        className: utils_cn.cn(
-          "break-word outline-hidden m-3 inline w-full bg-transparent",
-          isEditing ? "cursor-text" : "cursor-pointer"
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleValid();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-row items-center justify-between gap-2",
+      role: "group",
+      "aria-label": "Content editor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
+          {
+            className: utils_cn.cn(
+              "break-word outline-hidden m-3 inline w-full bg-transparent",
+              isEditing ? "cursor-text" : "cursor-pointer"
+            ),
+            onChange: handleOnContentChange,
+            onKeyDown: handleKeyDown,
+            variant: components_Input_Input.InputVariant.INVISIBLE,
+            defaultValue: children,
+            "aria-label": "Editable content",
+            "aria-describedby": isEdited ? "content-editor-actions" : void 0,
+            ...props
+          },
+          resetIncrementor
         ),
-        onChange: handleOnContentChange,
-        variant: components_Input_Input.InputVariant.INVISIBLE,
-        defaultValue: children,
-        ...props
-      },
-      resetIncrementor
-    ),
-    isEdited && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lucideReact.Check,
-        {
-          className: "cursor-pointer hover:scale-110",
-          size: 16,
-          onClick: handleValid
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lucideReact.X,
-        {
-          className: "cursor-pointer hover:scale-110",
-          size: 16,
-          onClick: handleCancel
-        }
-      )
-    ] })
-  ] });
+        isEdited && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: "content-editor-actions",
+            className: "flex flex-row items-center justify-between gap-2",
+            role: "group",
+            "aria-label": "Edit actions",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Check,
+                {
+                  className: "cursor-pointer hover:scale-110 text-green-600",
+                  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__ */ jsxRuntime.jsx(
+                lucideReact.X,
+                {
+                  className: "cursor-pointer hover:scale-110 text-red-600",
+                  size: 16,
+                  onClick: handleCancel,
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Cancel changes (Escape)",
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleCancel();
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 exports.ContentEditor = ContentEditor;
 //# sourceMappingURL=ContentEditor.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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 outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant={InputVariant.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","InputVariant","Check","X"],"mappings":";;;;;;;;;;AAiBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,qCAAAA;AAAAA,MAAA;AAAA,QACC,WAAWC,SAAAA;AAAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAASC,uBAAAA,aAAa;AAAA,QACtB,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAACI,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEXJ,2BAAAA;AAAAA,QAACK,YAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  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 outline-hidden m-3 inline w-full bg-transparent',\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 hover:scale-110 text-green-600\"\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 hover:scale-110 text-red-600\"\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"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","InputVariant","Check","X"],"mappings":";;;;;;;;;;AA8CO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,qCAAAA;AAAAA,UAAA;AAAA,YACC,WAAWC,SAAAA;AAAAA,cACT;AAAA,cACA,YAAY,gBAAgB;AAAA,YAAA;AAAA,YAE9B,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAASC,uBAAAA,aAAa;AAAA,YACtB,cAAc;AAAA,YACd,cAAW;AAAA,YACX,oBAAkB,WAAW,2BAA2B;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,QAON,YACCJ,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,UAAA;AAAA,cAAAC,2BAAAA;AAAAA,gBAACI,YAAAA;AAAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,kCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFJ,2BAAAA;AAAAA,gBAACK,YAAAA;AAAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,mCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -1,9 +1,38 @@
 import { FC } from 'react';
 import { AutoSizedTextAreaProps } from '../TextArea/AutoSizeTextArea';
+/** Props for the ContentEditor component */
 export type ContentEditorProps = {
+    /** The current content to display and edit */
     children: string;
+    /** Callback function called when content is saved/validated */
     onContentChange: (content: string) => void;
+    /** Whether the editor is currently in editing mode */
     isEditing?: boolean;
 } & AutoSizedTextAreaProps;
+/**
+ * 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
+ */
 export declare const ContentEditor: FC<ContentEditorProps>;
 //# sourceMappingURL=ContentEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAEL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,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,sBAAsB,CAAC;AAE3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkDhD,CAAC"}
+{"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAEL,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2FhD,CAAC"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -23,40 +23,87 @@ const ContentEditor = ({
     onContentChange(newValue);
   };
   const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsx(
-      AutoSizedTextArea,
-      {
-        className: cn(
-          "break-word outline-hidden m-3 inline w-full bg-transparent",
-          isEditing ? "cursor-text" : "cursor-pointer"
+  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 outline-hidden m-3 inline w-full bg-transparent",
+              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
         ),
-        onChange: handleOnContentChange,
-        variant: InputVariant.INVISIBLE,
-        defaultValue: children,
-        ...props
-      },
-      resetIncrementor
-    ),
-    isEdited && /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Check,
-        {
-          className: "cursor-pointer hover:scale-110",
-          size: 16,
-          onClick: handleValid
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        X,
-        {
-          className: "cursor-pointer hover:scale-110",
-          size: 16,
-          onClick: handleCancel
-        }
-      )
-    ] })
-  ] });
+        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 hover:scale-110 text-green-600",
+                  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 hover:scale-110 text-red-600",
+                  size: 16,
+                  onClick: handleCancel,
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Cancel changes (Escape)",
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleCancel();
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   ContentEditor

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\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 outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant={InputVariant.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":[],"mappings":";;;;;;;;AAiBO,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;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,SACE,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAAA;AAAA,QAE9B,UAAU;AAAA,QAEV,SAAS,aAAa;AAAA,QACtB,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAAA;AAAA,IAKN,YACC,qBAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { useState, type ChangeEventHandler, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  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 outline-hidden m-3 inline w-full bg-transparent',\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 hover:scale-110 text-green-600\"\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 hover:scale-110 text-red-600\"\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"],"names":[],"mappings":";;;;;;;;AA8CO,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;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAElC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBAAgB;AAAA,YAAA;AAAA,YAE9B,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAAS,aAAa;AAAA,YACtB,cAAc;AAAA,YACd,cAAW;AAAA,YACX,oBAAkB,WAAW,2BAA2B;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,QAON,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,kCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,cAAW;AAAA,kBACX,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAA;AACF,mCAAA;AAAA,oBACF;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/ContentEditor/ContentEditorInput.cjs

@@ -28,57 +28,84 @@ const ContentEditorInput = ({
   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();
+    }
+  };
   ReactExports.useEffect(() => {
     setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
   }, [children]);
   const isValid = validate?.(newValue) ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "flex size-full flex-col items-center justify-between gap-2",
+      role: "group",
+      "aria-label": "Content editor input",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           components_Input_Input.Input,
           {
             onChange: handleOnContentChange,
-            "aria-label": "value",
+            onKeyDown: handleKeyDown,
+            "aria-label": "Editable input value",
+            "aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
+            "aria-invalid": !isValid,
             variant: components_Input_Input.InputVariant.INVISIBLE,
             className: "size-full",
             defaultValue: children,
+            disabled,
             ...props
           },
           resetIncrementor
         ),
-        (isEdited || additionalButtons) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [
-          isEdited && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              components_Button_Button.Button,
-              {
-                Icon: lucideReact.Check,
-                label: "Validate",
-                variant: components_Button_Button.ButtonVariant.HOVERABLE,
-                color: components_Button_Button.ButtonColor.TEXT,
-                size: components_Button_Button.ButtonSize.ICON_SM,
-                className: "cursor-pointer hover:scale-110",
-                disabled: disabled || !isValid,
-                onClick: handleValid
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              components_Button_Button.Button,
-              {
-                Icon: lucideReact.X,
-                label: "Cancel",
-                variant: components_Button_Button.ButtonVariant.HOVERABLE,
-                size: components_Button_Button.ButtonSize.ICON_SM,
-                color: components_Button_Button.ButtonColor.TEXT,
-                className: "cursor-pointer hover:scale-110",
-                onClick: handleCancel
-              }
-            )
-          ] }),
-          additionalButtons
-        ] })
+        (isEdited || additionalButtons) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  components_Button_Button.Button,
+                  {
+                    Icon: lucideReact.Check,
+                    label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+                    variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                    color: components_Button_Button.ButtonColor.TEXT,
+                    size: components_Button_Button.ButtonSize.ICON_SM,
+                    className: "cursor-pointer hover:scale-110",
+                    disabled: disabled || !isValid,
+                    onClick: handleValid,
+                    "aria-describedby": !isValid ? "validation-error" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  components_Button_Button.Button,
+                  {
+                    Icon: lucideReact.X,
+                    label: "Cancel changes",
+                    variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                    size: components_Button_Button.ButtonSize.ICON_SM,
+                    color: components_Button_Button.ButtonColor.TEXT,
+                    className: "cursor-pointer hover:scale-110",
+                    onClick: handleCancel,
+                    disabled
+                  }
+                )
+              ] }),
+              additionalButtons
+            ]
+          }
+        )
       ]
     },
     String(children)