npm - @fanvue/ui - Versions diffs - 1.2.0 → 1.3.0 - Mend

@fanvue/ui 1.2.0 → 1.3.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.

Files changed (147) hide show

package/dist/components/Tabs/TabsList.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\nexport const TabsList = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n className,\n )}\n {...props}\n />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":";;;;;~~AAMO~~,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;"}
1	+ {"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. /\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/* Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */\nexport const TabsList = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n className,\n )}\n {...props}\n />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs CHANGED Viewed

@@ -17,6 +17,8 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
       "data-[state=active]:border-brand-green-500",
       "data-[state=active]:hover:text-hover-100",
       "data-[state=inactive]:hover:text-hover-200",
+      "data-[state=active]:active:text-hover-100",
+      "data-[state=inactive]:active:text-hover-200",
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-disabled-100",
       "data-disabled:data-[state=inactive]:text-disabled-400",

package/dist/components/Tabs/TabsTrigger.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex items-center justify-center\",\n \"rounded-xs border-transparent\",\n \"typography-body-1-semibold cursor-pointer text-body-100\",\n \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n \"data-[state=active]:border-brand-green-500\",\n \"data-[state=active]:hover:text-hover-100\",\n \"data-[state=inactive]:hover:text-hover-200\",\n \"data-disabled:pointer-events-none\",\n \"data-disabled:data-[state=active]:text-disabled-100\",\n \"data-disabled:data-[state=inactive]:text-disabled-400\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n className,\n )}\n {...props}\n />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;~~AAMO~~,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}
1	+ {"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. /\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/* An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n \"inline-flex items-center justify-center\",\n \"rounded-xs border-transparent\",\n \"typography-body-1-semibold cursor-pointer text-body-100\",\n \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n \"data-[state=active]:border-brand-green-500\",\n \"data-[state=active]:hover:text-hover-100\",\n \"data-[state=inactive]:hover:text-hover-200\",\n \"data-[state=active]:active:text-hover-100\",\n \"data-[state=inactive]:active:text-hover-200\",\n \"data-disabled:pointer-events-none\",\n \"data-disabled:data-[state=active]:text-disabled-100\",\n \"data-disabled:data-[state=inactive]:text-disabled-400\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n className,\n )}\n {...props}\n />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}

package/dist/components/TextField/TextField.mjs CHANGED Viewed

@@ -43,7 +43,7 @@ function getContainerClassName(size, error, disabled) {
 }
 function getInputClassName(size, hasLeftIcon, hasRightIcon) {
   return cn(
-    "h-full w-full rounded-xl bg-transparent text-body-100 placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    "h-full w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
     INPUT_SIZE_CLASSES[size],
     PADDING_LEFT[size][hasLeftIcon ? 1 : 0],
     PADDING_RIGHT[size][hasRightIcon ? 1 : 0]

package/dist/components/TextField/TextField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TextFieldSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextFieldProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" \| \"prefix\"> {\n /** Label text displayed above the input /\n label?: string;\n /* Helper text displayed below the input /\n helperText?: string;\n /* ~~Size~~ ~~variant~~ of the text field /\n size?: TextFieldSize;\n /* ~~Error~~ ~~state of~~ the text field /\n error?: boolean;\n /* Error message displayed below the input. ~~Overrides~~ ~~helper~~ ~~text~~ when error is true. /\n errorMessage?: string;\n /* Icon displayed on the left side of the input /\n leftIcon?: React.ReactNode;\n /* Icon displayed on the right side of the input /\n rightIcon?: React.ReactNode;\n /* Whether the text field ~~should~~ ~~take~~ ~~the~~ ~~full~~ width of ~~its~~ ~~container~~ */\n fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n \"48\": \"py-3 typography-body-1-regular\",\n \"40\": \"py-2 typography-body-1-regular\",\n \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_LEFT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n \"48\": [\"pl-4\", \"pl-11\"],\n \"40\": [\"pl-4\", \"pl-11\"],\n \"32\": [\"pl-3\", \"pl-10\"],\n};\n\nconst PADDING_RIGHT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n \"48\": [\"pr-4\", \"pr-11\"],\n \"40\": [\"pr-4\", \"pr-11\"],\n \"32\": [\"pr-3\", \"pr-10\"],\n};\n\nconst ICON_LEFT: Record<TextFieldSize, string> = {\n \"48\": \"left-4\",\n \"40\": \"left-4\",\n \"32\": \"left-3\",\n};\n\nconst ICON_RIGHT: Record<TextFieldSize, string> = {\n \"48\": \"right-4\",\n \"40\": \"right-4\",\n \"32\": \"right-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-xl border bg-neutral-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-500\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-400\",\n CONTAINER_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n return cn(\n \"h-full w-full rounded-xl bg-transparent text-body-100 placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n INPUT_SIZE_CLASSES[size],\n PADDING_LEFT[size][hasLeftIcon ? 1 : 0],\n PADDING_RIGHT[size][hasRightIcon ? 1 : 0],\n );\n}\n\nconst ICON_BASE =\n \"pointer-events-none absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-body-200\";\n\nfunction TextFieldIcon({\n children,\n size,\n side,\n}: {\n children: React.ReactNode;\n size: TextFieldSize;\n side: \"left\" \| \"right\";\n}) {\n return (\n <div className={cn(ICON_BASE, side === \"left\" ? ICON_LEFT[size] : ICON_RIGHT[size])}>\n {children}\n </div>\n );\n}\n\nfunction TextFieldHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-caption-regular px-2 pt-1 pb-0.5\",\n error ? \"text-error-500\" : \"text-body-200\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n leftIcon,\n rightIcon,\n className,\n id,\n disabled,\n fullWidth = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n {leftIcon && (\n <TextFieldIcon size={size} side=\"left\">\n {leftIcon}\n </TextFieldIcon>\n )}\n\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={getInputClassName(size, !!leftIcon, !!rightIcon)}\n {...props}\n />\n\n {rightIcon && (\n <TextFieldIcon size={size} side=\"right\">\n {rightIcon}\n </TextFieldIcon>\n )}\n </div>\n\n {bottomText && (\n <TextFieldHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextFieldHelperText>\n )}\n </div>\n );\n },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":";;;;~~AAyBA~~,MAAM,mBAAkD;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,eAAwE;AAAA,EAC5E,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AACxB;AAEA,MAAM,gBAAyE;AAAA,EAC7E,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AACxB;AAEA,MAAM,YAA2C;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,aAA4C;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,sBAAsB,MAAqB,OAAgB,UAAoB;AACtF,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,qBAAqB;AAAA,IAC7B,CAAC,YAAY,CAAC,SAAS;AAAA,IACvB,iBAAiB,IAAI;AAAA,IACrB,YAAY;AAAA,EAAA;AAEhB;AAEA,SAAS,kBAAkB,MAAqB,aAAsB,cAAuB;AAC3F,SAAO;AAAA,IACL;AAAA,IACA,mBAAmB,IAAI;AAAA,IACvB,aAAa,IAAI,EAAE,cAAc,IAAI,CAAC;AAAA,IACtC,cAAc,IAAI,EAAE,eAAe,IAAI,CAAC;AAAA,EAAA;AAE5C;AAEA,MAAM,YACJ;AAEF,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,SAAS,SAAS,UAAU,IAAI,IAAI,WAAW,IAAI,CAAC,GAC/E,UACH;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,mBAAmB;AAAA,MAAA;AAAA,MAG5B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,0BAA0B,OAAgB,WAAoB,gBAAyB;AAC9F,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,SAAS,CAAC,aAAa,CAAC,gBAAgB;AAC3C,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;~~AAEO~~,MAAM,YAAY,MAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,eAAe,GAAG,OAAO;AAC/B,UAAM,aAAa,SAAS,eAAe,eAAe;AAE1D,8BAA0B,OAAO,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAE9E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,iBAAiB,aAAa,UAAU,SAAS;AAAA,QAC/D,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,QAAQ,KAAK;AAAA,QAExB,UAAA;AAAA,UAAA,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,+BAIJ,OAAA,EAAI,WAAW,sBAAsB,MAAM,OAAO,QAAQ,GACxD,UAAA;AAAA,YAAA,YACC,oBAAC,eAAA,EAAc,MAAY,MAAK,QAC7B,UAAA,UACH;AAAA,YAGF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,IAAI;AAAA,gBACJ;AAAA,gBACA,oBAAkB,aAAa,eAAe;AAAA,gBAC9C,gBAAc,SAAS;AAAA,gBACvB,WAAW,kBAAkB,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS;AAAA,gBACzD,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,YAGL,aACC,oBAAC,eAAA,EAAc,MAAY,MAAK,SAC7B,UAAA,UAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UAEC,cACC,oBAAC,qBAAA,EAAoB,IAAI,cAAc,OACpC,UAAA,WAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;"}
1	+ {"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. /\nexport type TextFieldSize = \"48\" \| \"40\" \| \"32\";\n\nexport interface TextFieldProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" \| \"prefix\"> {\n /* Label text displayed above the input. Also used as the accessible name. /\n label?: string;\n /* Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. /\n helperText?: string;\n /* Height of the text field in pixels. @default \"48\" /\n size?: TextFieldSize;\n /* Whether the text field is in an error state. @default false /\n error?: boolean;\n /* Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. /\n errorMessage?: string;\n /* Icon element displayed at the left side of the input. /\n leftIcon?: React.ReactNode;\n /* Icon element displayed at the right side of the input. /\n rightIcon?: React.ReactNode;\n /* Whether the text field stretches to fill its container width. @default false /\n fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n \"48\": \"h-12\",\n \"40\": \"h-10\",\n \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n \"48\": \"py-3 typography-body-1-regular\",\n \"40\": \"py-2 typography-body-1-regular\",\n \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_LEFT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n \"48\": [\"pl-4\", \"pl-11\"],\n \"40\": [\"pl-4\", \"pl-11\"],\n \"32\": [\"pl-3\", \"pl-10\"],\n};\n\nconst PADDING_RIGHT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n \"48\": [\"pr-4\", \"pr-11\"],\n \"40\": [\"pr-4\", \"pr-11\"],\n \"32\": [\"pr-3\", \"pr-10\"],\n};\n\nconst ICON_LEFT: Record<TextFieldSize, string> = {\n \"48\": \"left-4\",\n \"40\": \"left-4\",\n \"32\": \"left-3\",\n};\n\nconst ICON_RIGHT: Record<TextFieldSize, string> = {\n \"48\": \"right-4\",\n \"40\": \"right-4\",\n \"32\": \"right-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-xl border bg-neutral-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-500\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-400\",\n CONTAINER_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n return cn(\n \"h-full w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n INPUT_SIZE_CLASSES[size],\n PADDING_LEFT[size][hasLeftIcon ? 1 : 0],\n PADDING_RIGHT[size][hasRightIcon ? 1 : 0],\n );\n}\n\nconst ICON_BASE =\n \"pointer-events-none absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-body-200\";\n\nfunction TextFieldIcon({\n children,\n size,\n side,\n}: {\n children: React.ReactNode;\n size: TextFieldSize;\n side: \"left\" \| \"right\";\n}) {\n return (\n <div className={cn(ICON_BASE, side === \"left\" ? ICON_LEFT[size] : ICON_RIGHT[size])}>\n {children}\n </div>\n );\n}\n\nfunction TextFieldHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-caption-regular px-2 pt-1 pb-0.5\",\n error ? \"text-error-500\" : \"text-body-200\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\n/\n A text input field with optional label, helper/error text, and icon slots.\n \n Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n \n @example\n * ```tsx\n * <TextField\n * label=\"Email\"\n * placeholder=\"you@example.com\"\n * error={!!emailError}\n * errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n leftIcon,\n rightIcon,\n className,\n id,\n disabled,\n fullWidth = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id \|\| generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n {leftIcon && (\n <TextFieldIcon size={size} side=\"left\">\n {leftIcon}\n </TextFieldIcon>\n )}\n\n <input\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-describedby={bottomText ? helperTextId : undefined}\n aria-invalid={error \|\| undefined}\n className={getInputClassName(size, !!leftIcon, !!rightIcon)}\n {...props}\n />\n\n {rightIcon && (\n <TextFieldIcon size={size} side=\"right\">\n {rightIcon}\n </TextFieldIcon>\n )}\n </div>\n\n {bottomText && (\n <TextFieldHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextFieldHelperText>\n )}\n </div>\n );\n },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}

package/dist/components/Toast/Toast.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]",
+      "pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]",
       className
     ),
     ...props

package/dist/components/Toast/Toast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\nexport type ToastVariant = \"info\" \| \"warning\" \| \"success\" \| \"error\" \| \"messageToast\";\n\~~n// Override \"title\" prop to allow React.ReactNode instead of string \| undefined\~~nexport interface ToastProps\n extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n /** ~~Variant~~ of the toast /\n variant?: ToastVariant;\n /* ~~Toast~~ ~~title~~ /\n title?: string;\n /* ~~Toast~~ ~~description/message~~ /\n description?: React.ReactNode;\n /* ~~Action~~ button ~~label~~ /\n actionLabel?: string;\n /* ~~Action~~ button ~~click~~ ~~handler~~ /\n onActionClick?: () => void;\n /* ~~Show~~ close button /\n showClose?: boolean;\n /* Accessible label for the close button. @default \"Close notification\" /\n closeLabel?: string;\n /* Avatar image ~~source~~ /\n avatarSrc?: string;\n /* ~~Avatar~~ ~~alt~~ text /\n avatarAlt?: string;\n /* ~~Avatar~~ ~~fallback~~ ~~text~~ */\n avatarFallback?: string;\n}\n\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\nexport interface ToastViewportProps\n extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\nexport const ToastViewport = React.forwardRef<\n React.ElementRef<typeof ToastPrimitive.Viewport>,\n ToastViewportProps\n>(({ className, ...props }, ref) => (\n <ToastPrimitive.Viewport\n ref={ref}\n className={cn(\n \"fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n className,\n )}\n {...props}\n />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n switch (variant) {\n case \"info\":\n return <InfoIcon className=\"size-5 text-info-500\" />;\n case \"warning\":\n return <WarningIcon className=\"size-5 text-warning-500\" />;\n case \"success\":\n return <SuccessIcon className=\"size-5 text-success-500\" />;\n case \"error\":\n return <ErrorIcon className=\"size-5 text-error-500\" />;\n }\n};\n\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n (\n {\n className,\n variant = \"info\",\n title,\n description,\n actionLabel,\n onActionClick,\n showClose = true,\n closeLabel = \"Close notification\",\n avatarSrc,\n avatarAlt,\n avatarFallback,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <ToastPrimitive.Root\n ref={ref}\n data-testid=\"toast\"\n className={cn(\n // Base styles\n \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n // Dark mode\n \"dark:border-opacity-100\",\n // Animation\n \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n // Manual CSS overrides\n className,\n )}\n {...props}\n >\n <div className=\"flex w-full items-center gap-3\">\n <div className=\"self-start\">\n {variant === \"messageToast\" ? (\n avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n ) : (\n <VariantIcon variant={variant} />\n )}\n </div>\n <div className=\"flex flex-1 flex-col items-start\">\n {title && (\n <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n {title}\n </ToastPrimitive.Title>\n )}\n {description && (\n <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n {description}\n </ToastPrimitive.Description>\n )}\n {children}\n {onActionClick && (\n <Button\n variant=\"secondary\"\n // These styles are basically inverted from the selected theme\n className=\"mt-4 border-body-400 text-body-400\"\n size=\"32\"\n onClick={onActionClick}\n >\n {actionLabel ?? \"Action\"}\n </Button>\n )}\n </div>\n </div>\n {showClose && (\n <ToastPrimitive.Close asChild>\n <IconButton\n icon={<CloseIcon />}\n aria-label={closeLabel}\n // same as the button above\n className=\"absolute top-2 right-2 text-body-300\"\n variant=\"tertiary\"\n size=\"24\"\n />\n </ToastPrimitive.Close>\n )}\n </ToastPrimitive.Root>\n );\n },\n);\n\nToast.displayName = \"Toast\";\n"],"names":[],"mappings":";;;;;;;;;;;;;~~AA2CO~~,MAAM,gBAA8C,eAAe;~~AAEnE~~,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;~~AAEO~~,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAA,oBAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,iCAAc,QAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/E,oBAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,6BACE,eAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACC,oBAAC,eAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACC,oBAAC,eAAe,OAAf,EAAqB,SAAO,MAC3B,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,0BAAO,WAAA,EAAU;AAAA,cACjB,cAAY;AAAA,cAEZ,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}
1	+ {"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/** Visual/semantic variant of the toast notification. /\nexport type ToastVariant = \"info\" \| \"warning\" \| \"success\" \| \"error\" \| \"messageToast\";\n\nexport interface ToastProps\n extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n /* Visual/semantic variant of the toast. @default \"info\" /\n variant?: ToastVariant;\n /* Title text displayed in bold at the top of the toast. /\n title?: string;\n /* Description or body content displayed below the title. /\n description?: React.ReactNode;\n /* Label for the optional action button. @default \"Action\" /\n actionLabel?: string;\n /* Click handler for the action button. When provided, the action button is rendered. /\n onActionClick?: () => void;\n /* Whether to show the close button. @default true /\n showClose?: boolean;\n /* Accessible label for the close button. @default \"Close notification\" /\n closeLabel?: string;\n /* Avatar image URL (used by the `messageToast` variant). /\n avatarSrc?: string;\n /* Alt text for the avatar image. /\n avatarAlt?: string;\n /* Fallback content for the avatar (e.g. initials). /\n avatarFallback?: string;\n}\n\n/* Props for the {@link ToastProvider}. Wraps Radix `Toast.Provider`. /\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\n/* Props for the {@link ToastViewport}. Controls where toasts are rendered on screen. /\nexport interface ToastViewportProps\n extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\n/* Provides toast context. Wrap your application (or a subtree) with this provider. /\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\n/* Fixed-position container that renders active toasts. Place once at the root of your app. /\nexport const ToastViewport = React.forwardRef<\n React.ElementRef<typeof ToastPrimitive.Viewport>,\n ToastViewportProps\n>(({ className, ...props }, ref) => (\n <ToastPrimitive.Viewport\n ref={ref}\n className={cn(\n \"pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n className,\n )}\n {...props}\n />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n switch (variant) {\n case \"info\":\n return <InfoIcon className=\"size-5 text-info-500\" />;\n case \"warning\":\n return <WarningIcon className=\"size-5 text-warning-500\" />;\n case \"success\":\n return <SuccessIcon className=\"size-5 text-success-500\" />;\n case \"error\":\n return <ErrorIcon className=\"size-5 text-error-500\" />;\n }\n};\n\n/\n A dismissible notification that appears temporarily. Supports `info`,\n * `warning`, `success`, `error`, and `messageToast` variants with optional\n * action button, close control, and avatar.\n \n Use inside a {@link ToastProvider} with a {@link ToastViewport}.\n \n @example\n * ```tsx\n * <Toast variant=\"success\" title=\"Saved\" description=\"Your changes are live.\" />\n * ```\n */\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n (\n {\n className,\n variant = \"info\",\n title,\n description,\n actionLabel,\n onActionClick,\n showClose = true,\n closeLabel = \"Close notification\",\n avatarSrc,\n avatarAlt,\n avatarFallback,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <ToastPrimitive.Root\n ref={ref}\n data-testid=\"toast\"\n className={cn(\n // Base styles\n \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n // Dark mode\n \"dark:border-opacity-100\",\n // Animation\n \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n // Manual CSS overrides\n className,\n )}\n {...props}\n >\n <div className=\"flex w-full items-center gap-3\">\n <div className=\"self-start\">\n {variant === \"messageToast\" ? (\n avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n ) : (\n <VariantIcon variant={variant} />\n )}\n </div>\n <div className=\"flex flex-1 flex-col items-start\">\n {title && (\n <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n {title}\n </ToastPrimitive.Title>\n )}\n {description && (\n <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n {description}\n </ToastPrimitive.Description>\n )}\n {children}\n {onActionClick && (\n <Button\n variant=\"secondary\"\n // These styles are basically inverted from the selected theme\n className=\"mt-4 border-body-400 text-body-400\"\n size=\"32\"\n onClick={onActionClick}\n >\n {actionLabel ?? \"Action\"}\n </Button>\n )}\n </div>\n </div>\n {showClose && (\n <ToastPrimitive.Close asChild>\n <IconButton\n icon={<CloseIcon />}\n aria-label={closeLabel}\n // same as the button above\n className=\"absolute top-2 right-2 text-body-300\"\n variant=\"tertiary\"\n size=\"24\"\n />\n </ToastPrimitive.Close>\n )}\n </ToastPrimitive.Root>\n );\n },\n);\n\nToast.displayName = \"Toast\";\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8CO,MAAM,gBAA8C,eAAe;AAGnE,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAcO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAA,oBAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,iCAAc,QAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/E,oBAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,6BACE,eAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACC,oBAAC,eAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACC,oBAAC,eAAe,OAAf,EAAqB,SAAO,MAC3B,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,0BAAO,WAAA,EAAU;AAAA,cACjB,cAAY;AAAA,cAEZ,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Tooltip/Tooltip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n ~~!TODO:~~ ~~This~~ is a ~~temporary~~ ~~component~~ to ~~fix~~ ~~a bug in the <Switch />, this needs rebuilding~~ once design is ~~ready~~ https://linear.app/fanvue/issue/ENG-7226~~/component-library-tooltip-component~~\n /\nimport as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n /** Whether to show the arrow pointer */\n showArrow?: boolean;\n}\n\nexport const TooltipContent = React.forwardRef<\n React.ComponentRef<typeof TooltipPrimitive.Content>,\n TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n className,\n )}\n {...props}\n >\n {children}\n {showArrow && (\n <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n )}\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;~~AASO~~,MAAM,kBAAkB,iBAAiB;~~AAIzC~~,MAAM,UAAU,iBAAiB;~~AAIjC~~,MAAM,iBAAiB,iBAAiB;~~AAQxC~~,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACC,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;"}
1	+ {"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n @internal Temporary tooltip implementation — will be rebuilt once design is\n * finalised. See https://linear.app/fanvue/issue/ENG-7226\n /\nimport as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. /\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/* Provides tooltip delay and skip-delay context. Wrap your app or a subtree. /\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/* Props for the {@link Tooltip} root component. /\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\n/* Root component that manages open/close state for a single tooltip. /\nexport const Tooltip = TooltipPrimitive.Root;\n\n/* Props for the {@link TooltipTrigger} component. /\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/* The element that triggers the tooltip on hover/focus. /\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n /* Whether to show the arrow pointer. @default true /\n showArrow?: boolean;\n}\n\n/* The popup content of the tooltip. Renders inside a portal. */\nexport const TooltipContent = React.forwardRef<\n React.ComponentRef<typeof TooltipPrimitive.Content>,\n TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n className,\n )}\n {...props}\n >\n {children}\n {showArrow && (\n <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n )}\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;AAYO,MAAM,kBAAkB,iBAAiB;AAMzC,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AASxC,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACC,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;"}