@intlayer/design-system 8.10.1 → 8.11.0-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Button/Button.mjs +1 -1
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/Carousel/index.mjs +3 -3
- package/dist/esm/components/Carousel/index.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs.map +1 -1
- package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs +2 -2
- package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs.map +1 -1
- package/dist/esm/components/IDE/FileList.mjs +1 -1
- package/dist/esm/components/IDE/FileList.mjs.map +1 -1
- package/dist/esm/components/IDE/IDE.mjs +1 -1
- package/dist/esm/components/IDE/IDE.mjs.map +1 -1
- package/dist/esm/components/Input/Checkbox.mjs +1 -1
- package/dist/esm/components/Input/Checkbox.mjs.map +1 -1
- package/dist/esm/components/LanguageBackground/index.mjs +11 -5
- package/dist/esm/components/LanguageBackground/index.mjs.map +1 -1
- package/dist/esm/components/Loader/spinner.mjs +1 -1
- package/dist/esm/components/Loader/spinner.mjs.map +1 -1
- package/dist/esm/components/Popover/dynamic.mjs +2 -2
- package/dist/esm/components/Popover/dynamic.mjs.map +1 -1
- package/dist/esm/components/Tag/index.mjs +1 -1
- package/dist/esm/components/Tag/index.mjs.map +1 -1
- package/dist/esm/components/Terminal/Terminal.mjs +1 -1
- package/dist/esm/components/Terminal/Terminal.mjs.map +1 -1
- package/dist/esm/components/TextArea/AutoSizeTextArea.mjs +2 -2
- package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map +1 -1
- package/dist/esm/components/TextArea/ContentEditableTextArea.mjs +3 -3
- package/dist/esm/components/TextArea/ContentEditableTextArea.mjs.map +1 -1
- package/dist/esm/components/WithResizer/index.mjs +7 -2
- package/dist/esm/components/WithResizer/index.mjs.map +1 -1
- package/dist/esm/hooks/index.mjs +2 -2
- package/dist/esm/hooks/reactQuery.mjs +400 -1
- package/dist/esm/hooks/reactQuery.mjs.map +1 -1
- package/dist/esm/hooks/useAuth/useOAuth2.mjs +1 -1
- package/dist/esm/hooks/useAuth/useSession.mjs +1 -1
- package/dist/esm/libs/auth.mjs +1 -1
- package/dist/esm/routes.mjs +20 -1
- package/dist/esm/routes.mjs.map +1 -1
- package/dist/types/components/Badge/index.d.ts +1 -1
- package/dist/types/components/Button/Button.d.ts +2 -2
- package/dist/types/components/Carousel/index.d.ts.map +1 -1
- package/dist/types/components/Command/index.d.ts +1 -1
- package/dist/types/components/DictionaryFieldEditor/ContentEditorView/TextEditor.d.ts.map +1 -1
- package/dist/types/components/ExpandCollapse/ExpandCollapse.d.ts.map +1 -1
- package/dist/types/components/Input/Checkbox.d.ts +1 -1
- package/dist/types/components/LanguageBackground/index.d.ts.map +1 -1
- package/dist/types/components/Link/Link.d.ts +2 -2
- package/dist/types/components/Loader/spinner.d.ts +1 -1
- package/dist/types/components/Tag/index.d.ts +1 -1
- package/dist/types/components/TextArea/ContentEditableTextArea.d.ts.map +1 -1
- package/dist/types/hooks/index.d.ts +2 -2
- package/dist/types/hooks/reactQuery.d.ts +50 -2
- package/dist/types/hooks/reactQuery.d.ts.map +1 -1
- package/dist/types/routes.d.ts +20 -1
- package/dist/types/routes.d.ts.map +1 -1
- package/package.json +23 -23
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n [\n 'appearance-none',\n 'relative cursor-pointer border-2',\n 'focus:outline-0',\n 'checked:hover:opacity-80',\n 'ring-offset-background',\n 'hover:bg-neutral-500/10',\n 'disabled:opacity-50',\n\n // Ring + animation\n 'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n // centered custom checkmark with text-opposite color\n \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n 'checked:before:flex checked:before:items-center checked:before:justify-center',\n 'checked:before:text-text-opposite/80',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n \"after:absolute after:-inset-2 after:content-['']\",\n ].join(' '),\n {\n variants: {\n variant: {\n default: '',\n },\n size: {\n xs: 'size-3 rounded-sm',\n sm: 'size-4 rounded-md',\n md: 'size-5 rounded-lg',\n lg: 'size-6 rounded-xl',\n },\n color: {\n primary:\n 'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n secondary:\n 'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n destructive:\n 'border-destructive/30 text-destructive ring-destructive/20 checked:border-destructive checked:bg-destructive',\n neutral:\n 'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n light:\n 'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n ['text-inverse']:\n 'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n error:\n 'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n success:\n 'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n custom:\n 'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: '
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n [\n 'appearance-none',\n 'relative cursor-pointer border-2',\n 'focus:outline-0',\n 'checked:hover:opacity-80',\n 'ring-offset-background',\n 'hover:bg-neutral-500/10',\n 'disabled:opacity-50',\n\n // Ring + animation\n 'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n // centered custom checkmark with text-opposite color\n \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n 'checked:before:flex checked:before:items-center checked:before:justify-center',\n 'checked:before:text-text-opposite/80',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n \"after:absolute after:-inset-2 after:content-['']\",\n ].join(' '),\n {\n variants: {\n variant: {\n default: '',\n },\n size: {\n xs: 'size-3 rounded-sm',\n sm: 'size-4 rounded-md',\n md: 'size-5 rounded-lg',\n lg: 'size-6 rounded-xl',\n },\n color: {\n primary:\n 'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n secondary:\n 'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n destructive:\n 'border-destructive/30 text-destructive ring-destructive/20 checked:border-destructive checked:bg-destructive',\n neutral:\n 'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n light:\n 'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n ['text-inverse']:\n 'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n error:\n 'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n success:\n 'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n custom:\n 'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'text',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n }\n);\n\nexport enum CheckboxSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum CheckboxColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n TEXT = 'text',\n TEXT_INVERSE = 'text-inverse',\n DARK = 'dark',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof checkboxVariants>,\n 'validationStyleEnabled' | 'size' | 'color'\n > & {\n size?: CheckboxSize | `${CheckboxSize}`;\n color?: CheckboxColor | `${CheckboxColor}`;\n labelClassName?: string;\n };\n\nconst Input: FC<CheckboxProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n labelClassName,\n ...props\n}) => (\n <input\n type=\"checkbox\"\n className={cn(\n checkboxVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n }),\n className\n )}\n {...props}\n />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className={cn(\n 'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n props.size === 'xs' && 'text-xs',\n props.labelClassName\n )}\n >\n <Input id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <Input id={id ?? name} {...props} />\n );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,aACE;GACF,SACE;GACF,OACE;GACF,MAAM;IACL,iBACC;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAEA,IAAY,eAAL;CACL;CACA;CACA;CACA;;AACF;AAEA,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAkBA,MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;EAAQ,IAClC,KACI;MAEP,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;CAAQ;AAEvC"}
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { LanguageSection } from "./LanguageSection.mjs";
|
|
4
|
-
import { Suspense, lazy } from "react";
|
|
4
|
+
import { Suspense, lazy, useEffect, useState } from "react";
|
|
5
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/components/LanguageBackground/index.tsx
|
|
8
8
|
const LazyLanguageSection = lazy(() => import("./LanguageSection.mjs").then((m) => ({ default: m.LanguageSection })));
|
|
9
|
-
const LanguageBackground = ({ children }) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const LanguageBackground = ({ children }) => {
|
|
10
|
+
const [mounted, setMounted] = useState(false);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
setMounted(true);
|
|
13
|
+
}, []);
|
|
14
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
|
|
15
|
+
className: "absolute top-0 left-0 z-0 flex size-full items-center justify-center",
|
|
16
|
+
children: mounted && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
|
|
17
|
+
}), children] });
|
|
18
|
+
};
|
|
13
19
|
|
|
14
20
|
//#endregion
|
|
15
21
|
export { LanguageBackground, LanguageSection };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n lazy,\n type PropsWithChildren,\n Suspense,\n useEffect,\n useState,\n} from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport { LanguageSection } from './LanguageSection';\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n return (\n <>\n <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n {mounted && (\n <Suspense>\n <LazyLanguageSection className=\"mt-[30%]\" />\n </Suspense>\n )}\n </div>\n {children}\n </>\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAC1E;AAIA,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,WAAW,IAAI;CACjB,GAAG,CAAC,CAAC;CAEL,OACE,8CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,WACC,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,WAAY,GACnC;CAET,IACJ,QACD;AAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.mjs","names":[],"sources":["../../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { SVGProps } from 'react';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n /** Stroke width for the spinner animation circles. Defaults to 4 */\n strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-
|
|
1
|
+
{"version":3,"file":"spinner.mjs","names":[],"sources":["../../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { SVGProps } from 'react';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n /** Stroke width for the spinner animation circles. Defaults to 4 */\n strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-error\" strokeWidth={2} />\n * ```\n *\n * Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n *\n * Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n *\n * @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n *\n * @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"44\"\n height=\"44\"\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\n role=\"img\"\n aria-label=\"Spinner\"\n className={cn('size-full', className)}\n >\n <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAa,WAAW,EAAE,WAAW,cAAc,QACjD,oBAAC,OAAD;CACE,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,QAAO;CACP,MAAK;CACL,cAAW;CACX,WAAW,GAAG,aAAa,SAAS;WAEpC,qBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAuB;YAA/C,CACE,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;MACR,qBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;aAA1B,CACE,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,IACD,oBAAC,WAAD;IACE,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;GACb,EACK;IACP;;AACA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { Detail as Detail$1, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
|
|
4
|
-
import {
|
|
4
|
+
import { useLayoutEffect, useRef, useState } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/components/Popover/dynamic.tsx
|
|
@@ -38,7 +38,7 @@ const Detail = ({ xAlign = "start", yAlign = "bellow", ...props }) => {
|
|
|
38
38
|
const [computedXAlign, setComputedXAlign] = useState(xAlign);
|
|
39
39
|
const [computedYAlign, setComputedYAlign] = useState(yAlign);
|
|
40
40
|
const [maxWidth, setMaxWidth] = useState(void 0);
|
|
41
|
-
|
|
41
|
+
useLayoutEffect(() => {
|
|
42
42
|
const adjustPosition = () => {
|
|
43
43
|
if (!popoverRef.current) return;
|
|
44
44
|
const popoverElement = popoverRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n PopoverXAlign,\n PopoverYAlign,\n Detail as StaticDetail,\n} from './static';\n\n/**\n * Popover Component (Client-side)\n *\n * Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/**\n * Popover Detail Component (Client-side)\n *\n * Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n *\n * Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n useLayoutEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = PopoverYAlign.ABOVE;\n }\n } else if (\n yAlign === PopoverYAlign.ABOVE &&\n spaceAbove < popoverRect.height\n ) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = PopoverYAlign.BELOW;\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = PopoverXAlign.END;\n }\n } else if (\n xAlign === PopoverXAlign.END &&\n spaceLeft < popoverRect.width\n ) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = PopoverXAlign.START;\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [props.identifier, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":"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"}
|
|
@@ -178,7 +178,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
|
|
|
178
178
|
[`blue`]: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
|
|
179
179
|
[`yellow`]: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
|
|
180
180
|
[`green`]: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
|
|
181
|
-
[`red`]: "border-
|
|
181
|
+
[`red`]: "border-error bg-error/10 text-error dark:text-red-300",
|
|
182
182
|
[`orange`]: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
|
|
183
183
|
[`purple`]: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
|
|
184
184
|
[`pink`]: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-red-500 bg-red-500/10 text-red-500 dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,iBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAY,UAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,YAAL;CACL;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,gBAAL;CACL;CACA;;AACF;AAEA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,SAA2B;IAC3B,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,QAA0B;IAC1B,QAA2B;IAC3B,SAA2B;EAC9B;EACA,OAAO;IACJ,YAAwB;IACxB,YAAwB;IACxB,UAAsB;IACtB,YAAwB;IACxB,YAAwB;IACxB,SAAqB;IACrB,SACC;IACD,WACC;IACD,UACC;IACD,QACC;IACD,WACC;IACD,WACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,UAAsB;IACtB,UAAsB;EACzB;EACA,MAAM;IACH,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;EACrB;EACA,QAAQ;IACL,SAAsB;IACtB,SAAsB;EACzB;EACA,YAAY;IACT,SAA0B;IAC1B,SAA0B;EAC7B;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-error bg-error/10 text-error dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,iBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAY,UAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,YAAL;CACL;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,gBAAL;CACL;CACA;;AACF;AAEA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,SAA2B;IAC3B,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,QAA0B;IAC1B,QAA2B;IAC3B,SAA2B;EAC9B;EACA,OAAO;IACJ,YAAwB;IACxB,YAAwB;IACxB,UAAsB;IACtB,YAAwB;IACxB,YAAwB;IACxB,SAAqB;IACrB,SACC;IACD,WACC;IACD,UACC;IACD,QACC;IACD,WACC;IACD,WACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,UAAsB;IACtB,UAAsB;EACzB;EACA,MAAM;IACH,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;EACrB;EACA,QAAQ;IACL,SAAsB;IACtB,SAAsB;EACzB;EACA,YAAY;IACT,SAA0B;IAC1B,SAA0B;EAC7B;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}
|
|
@@ -107,7 +107,7 @@ const Terminal = ({ className, children, isDarkMode = false, title = "bash", onC
|
|
|
107
107
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
108
108
|
className: "mx-2 flex items-center justify-start gap-2 p-1",
|
|
109
109
|
children: [
|
|
110
|
-
/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-
|
|
110
|
+
/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-error" }),
|
|
111
111
|
/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
|
|
112
112
|
/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
|
|
113
113
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]*m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string | undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = typeof children === 'string' ? children.split('\\n') : [];\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' | 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"2xl\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n className\n )}\n {...containerProps}\n >\n {/* Tab bar */}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-
|
|
1
|
+
{"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]*m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string | undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = typeof children === 'string' ? children.split('\\n') : [];\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' | 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"2xl\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n className\n )}\n {...containerProps}\n >\n {/* Tab bar */}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-error\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n <span>{title}</span>\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-neutral transition-colors hover:text-text\"\n aria-label={content.closeTab.value}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/* Terminal content - hide scrollbar */}\n <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {lines.map((line, lineIndex) => {\n const segments = parseAnsiCodes(line, isDarkMode);\n\n return (\n <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n {segments.length === 0\n ? '\\n'\n : segments.map((segment, segIndex) => (\n <span\n key={`seg-${lineIndex}-${segIndex}`}\n className={cn(segment.color, {\n 'font-bold': segment.isBold,\n })}\n >\n {segment.text}\n </span>\n ))}\n </span>\n );\n })}\n </code>\n </pre>\n\n {/* Input area */}\n <Container className=\"p-2\">\n <span className=\"text-neutral\">~/Desktop/MyApp</span>\n <Input\n className=\"m-0.5 w-full\"\n variant=\"invisible\"\n value={inputValue}\n aria-label={content.terminalInput.value}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n </Container>\n </Container>\n );\n};\n"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "../../utils/cn.mjs";
|
|
4
4
|
import { TextArea } from "./TextArea.mjs";
|
|
5
|
-
import {
|
|
5
|
+
import { useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
|
|
8
8
|
//#region src/components/TextArea/AutoSizeTextArea.tsx
|
|
@@ -79,7 +79,7 @@ const AutoSizedTextArea = ({ className, autoSize = true, onChange, maxRows = 999
|
|
|
79
79
|
const minHeight = LINE_HEIGHT + LINE_PADDING;
|
|
80
80
|
textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;
|
|
81
81
|
};
|
|
82
|
-
|
|
82
|
+
useLayoutEffect(() => {
|
|
83
83
|
adjustHeight();
|
|
84
84
|
}, [
|
|
85
85
|
props.value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type ChangeEventHandler,\n type FC,\n
|
|
1
|
+
{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type ChangeEventHandler,\n type FC,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n * placeholder=\"Start typing and watch it grow...\"\n * autoSize={true}\n * maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n * value={longText}\n * onChange={handleChange}\n * autoSize={true}\n * maxRows={5}\n * className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n * autoSize={false}\n * rows={3}\n * placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n /** Whether to automatically adjust height based on content */\n autoSize?: boolean;\n /** Maximum number of rows before scrolling is enabled */\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n * value={message}\n * onChange={(e) => setMessage(e.target.value)}\n * placeholder=\"Type your message...\"\n * autoSize={true}\n * maxRows={8}\n * className=\"min-h-[40px]\"\n * onKeyDown={(e) => {\n * if (e.key === 'Enter' && !e.shiftKey) {\n * e.preventDefault();\n * sendMessage(message);\n * setMessage('');\n * }\n * }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n * defaultValue={note.content}\n * onChange={handleNoteChange}\n * placeholder=\"Write your notes here...\"\n * autoSize={true}\n * maxRows={20}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n className,\n autoSize = true,\n onChange,\n maxRows = 999,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = () => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl || !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n };\n\n useLayoutEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = (el: HTMLTextAreaElement | null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n };\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,IAAI;CAE3D,oBAAoB,WAAW,YAAY,OAAQ;CAEnD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;EAE/B,IAAI,CAAC,cAAc,CAAC,UAAU;EAE9B,MAAM,gBAAgB,WAAW;EAGjC,cAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;EAGhC,cAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,EAAE;CACnF;CAEA,sBAAsB;EACpB,aAAa;CACf,GAAG;EAAC,MAAM;EAAO,MAAM;EAAc;CAAY,CAAC;CAElD,MAAM,gBAAyD,MAAM;EACnE,WAAW,CAAC;EACZ,aAAa;CACf;CAEA,MAAM,UAAU,OAAmC;EACjD,YAAY,UAAU;EACtB,IAAI,IACF,aAAa;CAEjB;CAEA,OACE,oBAAC,UAAD;EACE,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,SAAS;EACrE,GAAI;CACL;AAEL"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "../../utils/cn.mjs";
|
|
4
4
|
import { inputVariants } from "../Input/Input.mjs";
|
|
5
|
-
import { useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
5
|
+
import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
|
|
8
8
|
//#region src/components/TextArea/ContentEditableTextArea.tsx
|
|
@@ -157,7 +157,7 @@ const useContentEditable = ({ value, defaultValue, onChange, disabled = false })
|
|
|
157
157
|
sel.addRange(range);
|
|
158
158
|
}
|
|
159
159
|
};
|
|
160
|
-
|
|
160
|
+
useLayoutEffect(() => {
|
|
161
161
|
if (pendingCaretRef.current && containerRef.current) {
|
|
162
162
|
setCaretPosition(pendingCaretRef.current);
|
|
163
163
|
pendingCaretRef.current = null;
|
|
@@ -382,7 +382,7 @@ const ContentEditableTextArea = ({ value, defaultValue, onChange, placeholder, d
|
|
|
382
382
|
setCaretPosition(caretFromFlatOffset(offset, lines));
|
|
383
383
|
}
|
|
384
384
|
}));
|
|
385
|
-
|
|
385
|
+
useLayoutEffect(() => {
|
|
386
386
|
if (!autoSize || !elRef.current) return;
|
|
387
387
|
const el = elRef.current;
|
|
388
388
|
const max = LINE_HEIGHT * maxRows + LINE_PADDING;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n type ClipboardEvent,\n type DragEvent,\n type FC,\n type HTMLAttributes,\n type InputEvent,\n type KeyboardEvent,\n type MutableRefObject,\n type Ref,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\ntype CaretPosition = {\n line: number;\n offset: number;\n};\n\ntype UseContentEditableOptions = {\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n const lineEls = container.querySelectorAll('[data-line]');\n if (lineEls.length === 0) {\n return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n }\n\n return Array.from(lineEls)\n .map((el) => {\n const editable = el.querySelector('[data-editable]');\n const raw = editable?.textContent ?? el.textContent ?? '';\n return raw === ZERO_WIDTH_SPACE\n ? ''\n : raw.split(ZERO_WIDTH_SPACE).join('');\n })\n .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n const lines = text.split('\\n');\n return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n const SegmenterCtor = (\n Intl as unknown as Record<\n string,\n new (\n ...args: unknown[]\n ) => GraphemeSegmenter\n >\n ).Segmenter;\n return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n if (offset <= 0) return 0;\n\n if (graphemeSegmenter) {\n const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n const last = segments[segments.length - 1];\n return last ? offset - last.segment.length : offset - 1;\n }\n\n // Fallback: handle surrogate pairs\n const code = text.charCodeAt(offset - 1);\n if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n return offset - 2;\n }\n return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n if (offset >= text.length) return text.length;\n\n if (graphemeSegmenter) {\n const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n const first = segments[0];\n return first ? offset + first.segment.length : offset + 1;\n }\n\n // Fallback: handle surrogate pairs\n const code = text.charCodeAt(offset);\n if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n return offset + 2;\n }\n return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n if (offset <= 0) return 0;\n let i = offset - 1;\n // Skip whitespace\n while (i > 0 && /\\s/.test(text[i - 1])) i--;\n // Skip word characters\n while (i > 0 && /\\S/.test(text[i - 1])) i--;\n return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n if (offset >= text.length) return text.length;\n let i = offset;\n // Skip word characters\n while (i < text.length && /\\S/.test(text[i])) i++;\n // Skip whitespace\n while (i < text.length && /\\s/.test(text[i])) i++;\n return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n const before = text.slice(0, offset);\n const lastNewline = before.lastIndexOf('\\n');\n return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n const nextNewline = text.indexOf('\\n', offset);\n return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n value,\n defaultValue,\n onChange,\n disabled = false,\n}: UseContentEditableOptions) => {\n const initialValue = value ?? defaultValue ?? '';\n const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n const containerRef = useRef<HTMLDivElement | null>(null);\n const pendingCaretRef = useRef<CaretPosition | null>(null);\n const isControlled = value !== undefined;\n\n // Keep a ref to the latest lines to avoid stale closures in rapid typing\n const linesRef = useRef(lines);\n linesRef.current = lines;\n\n useEffect(() => {\n if (isControlled && value !== undefined) {\n setLines(splitLines(value));\n }\n }, [value, isControlled]);\n\n const getText = () => linesRef.current.join('\\n');\n\n const getCaretPosition = (): CaretPosition | null => {\n const sel = window.getSelection();\n if (!sel?.rangeCount || !containerRef.current) return null;\n\n const range = sel.getRangeAt(0);\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n for (let i = 0; i < lineEls.length; i++) {\n if (lineEls[i].contains(range.startContainer)) {\n return { line: i, offset: range.startOffset };\n }\n }\n return null;\n };\n\n const getSelectionOffsets = (): {\n start: number;\n end: number;\n hasSelection: boolean;\n } | null => {\n const sel = window.getSelection();\n if (!sel?.rangeCount || !containerRef.current) return null;\n\n const range = sel.getRangeAt(0);\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n const currentLines = linesRef.current;\n\n const findOffset = (node: Node, nodeOffset: number): number => {\n for (let i = 0; i < lineEls.length; i++) {\n if (lineEls[i].contains(node)) {\n let flat = 0;\n for (let j = 0; j < i; j++) {\n flat += currentLines[j].length + 1;\n }\n return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n }\n }\n // Selection is on the root container (e.g. select-all)\n if (node === containerRef.current) {\n if (nodeOffset === 0) return 0;\n return currentLines.join('\\n').length;\n }\n return 0;\n };\n\n const start = findOffset(range.startContainer, range.startOffset);\n const end = findOffset(range.endContainer, range.endOffset);\n\n return {\n start: Math.min(start, end),\n end: Math.max(start, end),\n hasSelection: !range.collapsed,\n };\n };\n\n const setCaretPosition = (pos: CaretPosition) => {\n if (!containerRef.current) return;\n\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n const lineEl = lineEls[pos.line];\n if (!lineEl) return;\n\n const editable = lineEl.querySelector('[data-editable]');\n const node =\n editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n const sel = window.getSelection();\n if (!sel) return;\n\n const range = document.createRange();\n const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n try {\n range.setStart(node, maxOff);\n range.collapse(true);\n sel.removeAllRanges();\n sel.addRange(range);\n } catch {\n range.selectNodeContents(node);\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n }\n };\n\n useEffect(() => {\n if (pendingCaretRef.current && containerRef.current) {\n setCaretPosition(pendingCaretRef.current);\n pendingCaretRef.current = null;\n }\n });\n\n const flatOffsetFromCaret = (pos: CaretPosition): number => {\n const currentLines = linesRef.current;\n let offset = 0;\n for (let i = 0; i < pos.line; i++) {\n offset += currentLines[i].length + 1;\n }\n return offset + pos.offset;\n };\n\n const caretFromFlatOffset = (\n flat: number,\n targetLines: string[]\n ): CaretPosition => {\n let rem = flat;\n for (let i = 0; i < targetLines.length; i++) {\n if (rem <= targetLines[i].length) {\n return { line: i, offset: rem };\n }\n rem -= targetLines[i].length + 1;\n }\n return {\n line: targetLines.length - 1,\n offset: targetLines[targetLines.length - 1]?.length ?? 0,\n };\n };\n\n const getCursorOffset = (): number => {\n const pos = getCaretPosition();\n if (!pos) return 0;\n return flatOffsetFromCaret(pos);\n };\n\n /**\n * Applies a text mutation: computes new lines, sets pending caret, updates state.\n */\n const applyTextChange = (newText: string, caretOffset: number) => {\n const newLines = splitLines(newText);\n pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n setLines(newLines);\n onChange?.(newText);\n };\n\n const handleInput = () => {\n if (pendingCaretRef.current !== null) return;\n if (disabled || !containerRef.current) return;\n\n const caretPos = getCaretPosition();\n const newText = getTextFromContainer(containerRef.current);\n const newLines = splitLines(newText);\n\n pendingCaretRef.current = caretPos;\n setLines(newLines);\n onChange?.(newText);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n // Don't intercept during IME composition (CJK input)\n if (e.nativeEvent.isComposing) return;\n\n // Block undo/redo - browser would mutate DOM out of sync with React\n if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n e.preventDefault();\n return;\n }\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n\n if (e.key === 'Enter') {\n e.preventDefault();\n const newText =\n currentText.slice(0, selInfo.start) +\n '\\n' +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + 1);\n return;\n }\n\n if (e.key === 'Backspace') {\n e.preventDefault();\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else {\n if (selInfo.start === 0) return;\n\n let deleteFrom: number;\n if (e.metaKey) {\n // Cmd+Backspace: delete to start of line\n deleteFrom = lineStart(currentText, selInfo.start);\n } else if (e.altKey) {\n // Option+Backspace: delete previous word\n deleteFrom = prevWordBoundary(currentText, selInfo.start);\n } else {\n // Regular backspace: delete one grapheme\n deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n }\n\n const newText =\n currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n applyTextChange(newText, deleteFrom);\n }\n return;\n }\n\n if (e.key === 'Delete') {\n e.preventDefault();\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else {\n if (selInfo.start >= currentText.length) return;\n\n let deleteTo: number;\n if (e.metaKey) {\n // Cmd+Delete: delete to end of line\n deleteTo = lineEnd(currentText, selInfo.start);\n } else if (e.altKey) {\n // Option+Delete: delete next word\n deleteTo = nextWordBoundary(currentText, selInfo.start);\n } else {\n // Regular delete: delete one grapheme\n deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n }\n\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n applyTextChange(newText, selInfo.start);\n }\n return;\n }\n };\n\n const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo?.hasSelection) return;\n\n const currentText = linesRef.current.join('\\n');\n const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n // Write selected text to clipboard\n e.clipboardData.setData('text/plain', selectedText);\n\n // Delete the selected text\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n e.preventDefault();\n const pastedText = e.clipboardData.getData('text/plain');\n if (!pastedText) return;\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const newText =\n currentText.slice(0, selInfo.start) +\n pastedText +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + pastedText.length);\n };\n\n const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n if (disabled) return;\n\n const inputEvent = e.nativeEvent as InputEvent;\n\n // Don't intercept during IME composition (CJK input)\n if (inputEvent.isComposing) return;\n\n const inputType = inputEvent.inputType;\n\n // Skip types handled by handleKeyDown (when keydown fires)\n if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n return;\n }\n\n // Handle deletions as fallback for mobile keyboards that don't fire keydown\n if (\n inputType === 'deleteContentBackward' ||\n inputType === 'deleteContentForward'\n ) {\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else if (inputType === 'deleteContentBackward') {\n if (selInfo.start === 0) return;\n const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n const newText =\n currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n applyTextChange(newText, deleteFrom);\n } else {\n if (selInfo.start >= currentText.length) return;\n const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n applyTextChange(newText, selInfo.start);\n }\n return;\n }\n\n // Handle spell-check replacements\n if (inputType === 'insertReplacementText') {\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const replacement =\n inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n const newText =\n currentText.slice(0, selInfo.start) +\n replacement +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + replacement.length);\n return;\n }\n\n if (inputType === 'insertText' && inputEvent.data) {\n e.preventDefault();\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const inserted = inputEvent.data;\n const newText =\n currentText.slice(0, selInfo.start) +\n inserted +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + inserted.length);\n }\n };\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n // Block drag-and-drop to prevent uncontrolled DOM mutations\n e.preventDefault();\n };\n\n const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n };\n\n return {\n lines,\n containerRef,\n getText,\n handleInput,\n handleBeforeInput,\n handleKeyDown,\n handleCut,\n handlePaste,\n handleDrop,\n handleDragOver,\n getCaretPosition,\n setCaretPosition,\n getCursorOffset,\n caretFromFlatOffset,\n };\n};\n\ntype LineProps = {\n index: number;\n text: string;\n isLast: boolean;\n ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n <span data-line={index} className=\"block min-h-[1.5rem]\">\n <span data-editable>{text || '\\u200B'}</span>\n {ghostText && (\n <span\n data-ghost\n className=\"pointer-events-none select-none text-neutral\"\n aria-hidden=\"true\"\n >\n {ghostText}\n </span>\n )}\n {!isLast && <br />}\n </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n getContainer: () => HTMLDivElement | null;\n getText: () => string;\n focus: () => void;\n getCursorOffset: () => number;\n setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue'\n> & {\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n placeholder?: string;\n disabled?: boolean;\n minRows?: number;\n maxRows?: number;\n autoSize?: boolean;\n validationStyleEnabled?: boolean;\n variant?: InputVariant | `${InputVariant}`;\n ghostText?: string;\n ghostLine?: number;\n ghostOffset?: number;\n ref?: Ref<ContentEditableTextAreaHandle>;\n dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n VariantProps<typeof inputVariants>,\n 'validationStyleEnabled' | 'variant'\n >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n value,\n defaultValue,\n onChange,\n placeholder,\n disabled = false,\n minRows = 1,\n maxRows = 999,\n autoSize = true,\n validationStyleEnabled = false,\n variant,\n ghostText,\n ghostLine,\n ghostOffset,\n onClick,\n className,\n dir = 'auto',\n ref,\n ...rest\n}) => {\n const {\n lines,\n containerRef,\n getText,\n handleInput,\n handleBeforeInput,\n handleKeyDown,\n handleCut,\n handlePaste,\n handleDrop,\n handleDragOver,\n getCursorOffset,\n setCaretPosition,\n caretFromFlatOffset,\n } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n const elRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = (el: HTMLDivElement | null) => {\n elRef.current = el;\n (containerRef as MutableRefObject<HTMLDivElement | null>).current = el;\n };\n\n useImperativeHandle(ref, () => ({\n getContainer: () => elRef.current,\n getText,\n focus: () => elRef.current?.focus(),\n getCursorOffset,\n setCursorAtOffset: (offset: number) => {\n setCaretPosition(caretFromFlatOffset(offset, lines));\n },\n }));\n\n useEffect(() => {\n if (!autoSize || !elRef.current) return;\n\n const el = elRef.current;\n const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n el.style.height = 'auto';\n const sh = el.scrollHeight;\n el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n el.style.overflowY = sh > max ? 'auto' : 'hidden';\n }, [lines, autoSize, maxRows, minRows]);\n\n const isEmpty = lines.length === 1 && lines[0] === '';\n const hasGhost =\n ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n return (\n <div className=\"relative w-full\">\n {isEmpty && placeholder && (\n <div\n className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n aria-hidden=\"true\"\n >\n {placeholder}\n </div>\n )}\n\n <div\n {...rest}\n ref={setRef}\n role=\"textbox\"\n aria-multiline=\"true\"\n aria-placeholder={placeholder}\n aria-disabled={disabled}\n aria-autocomplete={hasGhost ? 'inline' : undefined}\n tabIndex={disabled ? -1 : 0}\n contentEditable={!disabled}\n suppressContentEditableWarning\n dir={dir}\n onInput={handleInput}\n onBeforeInput={handleBeforeInput}\n onKeyDown={handleKeyDown}\n onCut={handleCut}\n onPaste={handlePaste}\n onDrop={handleDrop}\n onDragOver={handleDragOver}\n onClick={onClick}\n className={cn(\n 'resize-none whitespace-pre-wrap break-words outline-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n }),\n autoSize && 'overflow-y-auto',\n className\n )}\n >\n {lines.map((text, i) => (\n <Line\n key={i}\n index={i}\n text={text}\n isLast={i === lines.length - 1}\n ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n />\n ))}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n type ClipboardEvent,\n type DragEvent,\n type FC,\n type HTMLAttributes,\n type InputEvent,\n type KeyboardEvent,\n type MutableRefObject,\n type Ref,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\ntype CaretPosition = {\n line: number;\n offset: number;\n};\n\ntype UseContentEditableOptions = {\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n const lineEls = container.querySelectorAll('[data-line]');\n if (lineEls.length === 0) {\n return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n }\n\n return Array.from(lineEls)\n .map((el) => {\n const editable = el.querySelector('[data-editable]');\n const raw = editable?.textContent ?? el.textContent ?? '';\n return raw === ZERO_WIDTH_SPACE\n ? ''\n : raw.split(ZERO_WIDTH_SPACE).join('');\n })\n .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n const lines = text.split('\\n');\n return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n const SegmenterCtor = (\n Intl as unknown as Record<\n string,\n new (\n ...args: unknown[]\n ) => GraphemeSegmenter\n >\n ).Segmenter;\n return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n if (offset <= 0) return 0;\n\n if (graphemeSegmenter) {\n const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n const last = segments[segments.length - 1];\n return last ? offset - last.segment.length : offset - 1;\n }\n\n // Fallback: handle surrogate pairs\n const code = text.charCodeAt(offset - 1);\n if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n return offset - 2;\n }\n return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n if (offset >= text.length) return text.length;\n\n if (graphemeSegmenter) {\n const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n const first = segments[0];\n return first ? offset + first.segment.length : offset + 1;\n }\n\n // Fallback: handle surrogate pairs\n const code = text.charCodeAt(offset);\n if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n return offset + 2;\n }\n return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n if (offset <= 0) return 0;\n let i = offset - 1;\n // Skip whitespace\n while (i > 0 && /\\s/.test(text[i - 1])) i--;\n // Skip word characters\n while (i > 0 && /\\S/.test(text[i - 1])) i--;\n return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n if (offset >= text.length) return text.length;\n let i = offset;\n // Skip word characters\n while (i < text.length && /\\S/.test(text[i])) i++;\n // Skip whitespace\n while (i < text.length && /\\s/.test(text[i])) i++;\n return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n const before = text.slice(0, offset);\n const lastNewline = before.lastIndexOf('\\n');\n return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n const nextNewline = text.indexOf('\\n', offset);\n return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n value,\n defaultValue,\n onChange,\n disabled = false,\n}: UseContentEditableOptions) => {\n const initialValue = value ?? defaultValue ?? '';\n const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n const containerRef = useRef<HTMLDivElement | null>(null);\n const pendingCaretRef = useRef<CaretPosition | null>(null);\n const isControlled = value !== undefined;\n\n // Keep a ref to the latest lines to avoid stale closures in rapid typing\n const linesRef = useRef(lines);\n linesRef.current = lines;\n\n useEffect(() => {\n if (isControlled && value !== undefined) {\n setLines(splitLines(value));\n }\n }, [value, isControlled]);\n\n const getText = () => linesRef.current.join('\\n');\n\n const getCaretPosition = (): CaretPosition | null => {\n const sel = window.getSelection();\n if (!sel?.rangeCount || !containerRef.current) return null;\n\n const range = sel.getRangeAt(0);\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n for (let i = 0; i < lineEls.length; i++) {\n if (lineEls[i].contains(range.startContainer)) {\n return { line: i, offset: range.startOffset };\n }\n }\n return null;\n };\n\n const getSelectionOffsets = (): {\n start: number;\n end: number;\n hasSelection: boolean;\n } | null => {\n const sel = window.getSelection();\n if (!sel?.rangeCount || !containerRef.current) return null;\n\n const range = sel.getRangeAt(0);\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n const currentLines = linesRef.current;\n\n const findOffset = (node: Node, nodeOffset: number): number => {\n for (let i = 0; i < lineEls.length; i++) {\n if (lineEls[i].contains(node)) {\n let flat = 0;\n for (let j = 0; j < i; j++) {\n flat += currentLines[j].length + 1;\n }\n return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n }\n }\n // Selection is on the root container (e.g. select-all)\n if (node === containerRef.current) {\n if (nodeOffset === 0) return 0;\n return currentLines.join('\\n').length;\n }\n return 0;\n };\n\n const start = findOffset(range.startContainer, range.startOffset);\n const end = findOffset(range.endContainer, range.endOffset);\n\n return {\n start: Math.min(start, end),\n end: Math.max(start, end),\n hasSelection: !range.collapsed,\n };\n };\n\n const setCaretPosition = (pos: CaretPosition) => {\n if (!containerRef.current) return;\n\n const lineEls = containerRef.current.querySelectorAll('[data-line]');\n const lineEl = lineEls[pos.line];\n if (!lineEl) return;\n\n const editable = lineEl.querySelector('[data-editable]');\n const node =\n editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n const sel = window.getSelection();\n if (!sel) return;\n\n const range = document.createRange();\n const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n try {\n range.setStart(node, maxOff);\n range.collapse(true);\n sel.removeAllRanges();\n sel.addRange(range);\n } catch {\n range.selectNodeContents(node);\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n }\n };\n\n useLayoutEffect(() => {\n if (pendingCaretRef.current && containerRef.current) {\n setCaretPosition(pendingCaretRef.current);\n pendingCaretRef.current = null;\n }\n });\n\n const flatOffsetFromCaret = (pos: CaretPosition): number => {\n const currentLines = linesRef.current;\n let offset = 0;\n for (let i = 0; i < pos.line; i++) {\n offset += currentLines[i].length + 1;\n }\n return offset + pos.offset;\n };\n\n const caretFromFlatOffset = (\n flat: number,\n targetLines: string[]\n ): CaretPosition => {\n let rem = flat;\n for (let i = 0; i < targetLines.length; i++) {\n if (rem <= targetLines[i].length) {\n return { line: i, offset: rem };\n }\n rem -= targetLines[i].length + 1;\n }\n return {\n line: targetLines.length - 1,\n offset: targetLines[targetLines.length - 1]?.length ?? 0,\n };\n };\n\n const getCursorOffset = (): number => {\n const pos = getCaretPosition();\n if (!pos) return 0;\n return flatOffsetFromCaret(pos);\n };\n\n /**\n * Applies a text mutation: computes new lines, sets pending caret, updates state.\n */\n const applyTextChange = (newText: string, caretOffset: number) => {\n const newLines = splitLines(newText);\n pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n setLines(newLines);\n onChange?.(newText);\n };\n\n const handleInput = () => {\n if (pendingCaretRef.current !== null) return;\n if (disabled || !containerRef.current) return;\n\n const caretPos = getCaretPosition();\n const newText = getTextFromContainer(containerRef.current);\n const newLines = splitLines(newText);\n\n pendingCaretRef.current = caretPos;\n setLines(newLines);\n onChange?.(newText);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n // Don't intercept during IME composition (CJK input)\n if (e.nativeEvent.isComposing) return;\n\n // Block undo/redo - browser would mutate DOM out of sync with React\n if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n e.preventDefault();\n return;\n }\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n\n if (e.key === 'Enter') {\n e.preventDefault();\n const newText =\n currentText.slice(0, selInfo.start) +\n '\\n' +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + 1);\n return;\n }\n\n if (e.key === 'Backspace') {\n e.preventDefault();\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else {\n if (selInfo.start === 0) return;\n\n let deleteFrom: number;\n if (e.metaKey) {\n // Cmd+Backspace: delete to start of line\n deleteFrom = lineStart(currentText, selInfo.start);\n } else if (e.altKey) {\n // Option+Backspace: delete previous word\n deleteFrom = prevWordBoundary(currentText, selInfo.start);\n } else {\n // Regular backspace: delete one grapheme\n deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n }\n\n const newText =\n currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n applyTextChange(newText, deleteFrom);\n }\n return;\n }\n\n if (e.key === 'Delete') {\n e.preventDefault();\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else {\n if (selInfo.start >= currentText.length) return;\n\n let deleteTo: number;\n if (e.metaKey) {\n // Cmd+Delete: delete to end of line\n deleteTo = lineEnd(currentText, selInfo.start);\n } else if (e.altKey) {\n // Option+Delete: delete next word\n deleteTo = nextWordBoundary(currentText, selInfo.start);\n } else {\n // Regular delete: delete one grapheme\n deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n }\n\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n applyTextChange(newText, selInfo.start);\n }\n return;\n }\n };\n\n const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo?.hasSelection) return;\n\n const currentText = linesRef.current.join('\\n');\n const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n // Write selected text to clipboard\n e.clipboardData.setData('text/plain', selectedText);\n\n // Delete the selected text\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n\n e.preventDefault();\n const pastedText = e.clipboardData.getData('text/plain');\n if (!pastedText) return;\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const newText =\n currentText.slice(0, selInfo.start) +\n pastedText +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + pastedText.length);\n };\n\n const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n if (disabled) return;\n\n const inputEvent = e.nativeEvent as InputEvent;\n\n // Don't intercept during IME composition (CJK input)\n if (inputEvent.isComposing) return;\n\n const inputType = inputEvent.inputType;\n\n // Skip types handled by handleKeyDown (when keydown fires)\n if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n return;\n }\n\n // Handle deletions as fallback for mobile keyboards that don't fire keydown\n if (\n inputType === 'deleteContentBackward' ||\n inputType === 'deleteContentForward'\n ) {\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n\n if (selInfo.hasSelection) {\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start);\n } else if (inputType === 'deleteContentBackward') {\n if (selInfo.start === 0) return;\n const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n const newText =\n currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n applyTextChange(newText, deleteFrom);\n } else {\n if (selInfo.start >= currentText.length) return;\n const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n const newText =\n currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n applyTextChange(newText, selInfo.start);\n }\n return;\n }\n\n // Handle spell-check replacements\n if (inputType === 'insertReplacementText') {\n e.preventDefault();\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const replacement =\n inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n const newText =\n currentText.slice(0, selInfo.start) +\n replacement +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + replacement.length);\n return;\n }\n\n if (inputType === 'insertText' && inputEvent.data) {\n e.preventDefault();\n\n const selInfo = getSelectionOffsets();\n if (!selInfo) return;\n\n const currentText = linesRef.current.join('\\n');\n const inserted = inputEvent.data;\n const newText =\n currentText.slice(0, selInfo.start) +\n inserted +\n currentText.slice(selInfo.end);\n applyTextChange(newText, selInfo.start + inserted.length);\n }\n };\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n // Block drag-and-drop to prevent uncontrolled DOM mutations\n e.preventDefault();\n };\n\n const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n };\n\n return {\n lines,\n containerRef,\n getText,\n handleInput,\n handleBeforeInput,\n handleKeyDown,\n handleCut,\n handlePaste,\n handleDrop,\n handleDragOver,\n getCaretPosition,\n setCaretPosition,\n getCursorOffset,\n caretFromFlatOffset,\n };\n};\n\ntype LineProps = {\n index: number;\n text: string;\n isLast: boolean;\n ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n <span data-line={index} className=\"block min-h-[1.5rem]\">\n <span data-editable>{text || '\\u200B'}</span>\n {ghostText && (\n <span\n data-ghost\n className=\"pointer-events-none select-none text-neutral\"\n aria-hidden=\"true\"\n >\n {ghostText}\n </span>\n )}\n {!isLast && <br />}\n </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n getContainer: () => HTMLDivElement | null;\n getText: () => string;\n focus: () => void;\n getCursorOffset: () => number;\n setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue'\n> & {\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n placeholder?: string;\n disabled?: boolean;\n minRows?: number;\n maxRows?: number;\n autoSize?: boolean;\n validationStyleEnabled?: boolean;\n variant?: InputVariant | `${InputVariant}`;\n ghostText?: string;\n ghostLine?: number;\n ghostOffset?: number;\n ref?: Ref<ContentEditableTextAreaHandle>;\n dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n VariantProps<typeof inputVariants>,\n 'validationStyleEnabled' | 'variant'\n >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n value,\n defaultValue,\n onChange,\n placeholder,\n disabled = false,\n minRows = 1,\n maxRows = 999,\n autoSize = true,\n validationStyleEnabled = false,\n variant,\n ghostText,\n ghostLine,\n ghostOffset,\n onClick,\n className,\n dir = 'auto',\n ref,\n ...rest\n}) => {\n const {\n lines,\n containerRef,\n getText,\n handleInput,\n handleBeforeInput,\n handleKeyDown,\n handleCut,\n handlePaste,\n handleDrop,\n handleDragOver,\n getCursorOffset,\n setCaretPosition,\n caretFromFlatOffset,\n } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n const elRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = (el: HTMLDivElement | null) => {\n elRef.current = el;\n (containerRef as MutableRefObject<HTMLDivElement | null>).current = el;\n };\n\n useImperativeHandle(ref, () => ({\n getContainer: () => elRef.current,\n getText,\n focus: () => elRef.current?.focus(),\n getCursorOffset,\n setCursorAtOffset: (offset: number) => {\n setCaretPosition(caretFromFlatOffset(offset, lines));\n },\n }));\n\n useLayoutEffect(() => {\n if (!autoSize || !elRef.current) return;\n\n const el = elRef.current;\n const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n el.style.height = 'auto';\n const sh = el.scrollHeight;\n el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n el.style.overflowY = sh > max ? 'auto' : 'hidden';\n }, [lines, autoSize, maxRows, minRows]);\n\n const isEmpty = lines.length === 1 && lines[0] === '';\n const hasGhost =\n ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n return (\n <div className=\"relative w-full\">\n {isEmpty && placeholder && (\n <div\n className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n aria-hidden=\"true\"\n >\n {placeholder}\n </div>\n )}\n\n <div\n {...rest}\n ref={setRef}\n role=\"textbox\"\n aria-multiline=\"true\"\n aria-placeholder={placeholder}\n aria-disabled={disabled}\n aria-autocomplete={hasGhost ? 'inline' : undefined}\n tabIndex={disabled ? -1 : 0}\n contentEditable={!disabled}\n suppressContentEditableWarning\n dir={dir}\n onInput={handleInput}\n onBeforeInput={handleBeforeInput}\n onKeyDown={handleKeyDown}\n onCut={handleCut}\n onPaste={handlePaste}\n onDrop={handleDrop}\n onDragOver={handleDragOver}\n onClick={onClick}\n className={cn(\n 'resize-none whitespace-pre-wrap break-words outline-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n }),\n autoSize && 'overflow-y-auto',\n className\n )}\n >\n {lines.map((text, i) => (\n <Line\n key={i}\n index={i}\n text={text}\n isLast={i === lines.length - 1}\n ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n />\n ))}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -149,6 +149,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
|
|
|
149
149
|
window.removeEventListener("touchend", stopResizing);
|
|
150
150
|
}, [resize]);
|
|
151
151
|
const startResizing = useCallback((mouseDownEvent) => {
|
|
152
|
+
if (isOpen === false) return;
|
|
152
153
|
mouseDownEvent.preventDefault();
|
|
153
154
|
const container = containerRef.current;
|
|
154
155
|
if (!container) return;
|
|
@@ -170,7 +171,11 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
|
|
|
170
171
|
window.addEventListener("mouseup", stopResizing);
|
|
171
172
|
window.addEventListener("touchmove", resize, { passive: true });
|
|
172
173
|
window.addEventListener("touchend", stopResizing);
|
|
173
|
-
}, [
|
|
174
|
+
}, [
|
|
175
|
+
isOpen,
|
|
176
|
+
resize,
|
|
177
|
+
stopResizing
|
|
178
|
+
]);
|
|
174
179
|
useEffect(() => {
|
|
175
180
|
return () => {
|
|
176
181
|
window.removeEventListener("mousemove", resize);
|
|
@@ -229,7 +234,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
|
|
|
229
234
|
children
|
|
230
235
|
}), /* @__PURE__ */ jsx("div", {
|
|
231
236
|
role: "presentation",
|
|
232
|
-
className: cn("absolute top-0 z-10 h-full w-3 cursor-ew-resize", handlePosition === "right" ? "right-0" : "left-0"),
|
|
237
|
+
className: cn("absolute top-0 z-10 h-full w-3", isOpen !== false ? "cursor-ew-resize" : "cursor-default", handlePosition === "right" ? "right-0" : "left-0"),
|
|
233
238
|
onMouseDown: startResizing,
|
|
234
239
|
onTouchStart: startResizing,
|
|
235
240
|
onDoubleClick: handleDoubleClick
|