@uniformdev/csk-components 6.0.113-alpha.1 → 6.0.117-alpha.1

package/dist/content/components/canvas/Testimonial/with-large-avatar-variant.tsx

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -21,11 +21,9 @@ export const WithLargeAvatarVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <div className="mx-auto flex items-center gap-x-10 md:max-w-[80%]">
       <div className="hidden aspect-square w-full max-w-xs shrink-0 overflow-hidden rounded-xl lg:block">
         {testimonialPrimaryImage}

package/dist/content/components/canvas/Testimonial/with-overlapping-image-variant.tsx

@@ -4,7 +4,7 @@ import { TestimonialProps } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
   TestimonialProps,
-  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight' | 'fitHeight' | 'height'
+  'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
   testimonialPrimaryImage: React.ReactNode;
   testimonialContent: React.ReactNode;
@@ -21,11 +21,9 @@ export const WithOverlappingImageVariant: FC<WithLargeAvatarVariantProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
 }) => (
-  <Container {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
+  <Container {...{ backgroundColor, spacing, border, fluidContent, height }}>
     <Container className="pb-10 lg:pb-0">
       <div className="mx-auto flex max-w-2xl flex-col items-center gap-10 lg:max-w-none lg:flex-row">
         <div className="-mt-7 aspect-[2/1] w-full shrink-0 overflow-hidden rounded-xl lg:-my-7 lg:aspect-[1/1.4] lg:max-w-xs">

package/dist/content/components/canvas/Video/index.tsx

@@ -1,11 +1,9 @@
 import { AssetParamValue } from '@uniformdev/assets';
-import { LinkParamValue } from '@uniformdev/canvas';
 import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ViewPort } from '@/types/cskTypes';
 
 export type VideoParameters = {
   video?: AssetParamValue;
-  url?: LinkParamValue; // Deprecated. Please use video parameter instead of url
   placeholderImage?: AssetParamValue;
   autoPlay?: boolean;
   lazyLoad?: boolean;

package/dist/content/components/canvas/Video/video.tsx

@@ -8,7 +8,6 @@ import { VideoPlaceholder } from './placeholder';
 
 export const Video: FC<VideoProps> = ({
   video,
-  url, // Deprecated. Please use video parameter instead of url
   placeholderImage,
   autoPlay,
   lazyLoad,
@@ -24,7 +23,7 @@ export const Video: FC<VideoProps> = ({
   const [resolvedVideo] = resolveAsset(video);
   const [resolvedImage] = resolveAsset(placeholderImage);
 
-  const resolvedVideoUrl = resolvedVideo?.url || (url?.type === 'url' ? url.path : undefined);
+  const resolvedVideoUrl = resolvedVideo?.url;
 
   if (!resolvedVideoUrl) {
     return <VideoPlaceholder component={component} context={context} />;

package/dist/content/components/ui/Accordion/accordion.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import Container from '@/components/ui/Container';
+import { cn } from '@/utils/styling';
+import { AccordionProps } from '.';
+
+export const Accordion: FC<AccordionProps> = ({
+  accordionContent,
+  accordionItems,
+  backgroundColor,
+  spacing,
+  border,
+  fluidContent,
+  height,
+  className,
+}) => (
+  <Container
+    className={cn('flex flex-col gap-8', className)}
+    {...{ backgroundColor, spacing, border, fluidContent, height }}
+  >
+    {accordionContent && <div className="flex flex-col gap-4 text-start">{accordionContent}</div>}
+    {accordionItems}
+  </Container>
+);

package/dist/content/components/ui/Accordion/index.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ContainerProps } from '@/components/ui/Container';
+
+export type AccordionProps = ContainerProps & {
+  accordionContent?: ReactNode;
+  accordionItems: ReactNode;
+};
+
+export { Accordion as default } from './accordion';

package/dist/content/components/ui/AccordionItem/accordion-item.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { FC, useCallback, useState } from 'react';
+import Container from '@/components/ui/Container';
+import { cn } from '@/utils/styling';
+import { AccordionItemProps } from '.';
+import { IconArrowDown } from './icon-arrow-down';
+import { IconArrowUp } from './icon-arrow-up';
+
+export const AccordionItem: FC<AccordionItemProps> = ({
+  text,
+  backgroundColor,
+  spacing,
+  className,
+  accordionItemContent,
+}) => {
+  const [isOpened, setOpened] = useState(false);
+  const toggleOpenAccordion = useCallback(() => setOpened(isOpened => !isOpened), []);
+
+  return (
+    <Container {...{ fluidContent: true }}>
+      <Container {...{ backgroundColor, spacing, fluidContent: true, className }}>
+        <button
+          onClick={toggleOpenAccordion}
+          className="flex w-full cursor-pointer flex-row items-center justify-between text-start"
+        >
+          {text}
+          <div
+            className={cn({
+              [`text-${backgroundColor} invert`]: !!backgroundColor,
+              'text-black dark:text-white': !backgroundColor,
+            })}
+          >
+            {isOpened ? <IconArrowDown /> : <IconArrowUp />}
+          </div>
+        </button>
+      </Container>
+      {isOpened && accordionItemContent}
+    </Container>
+  );
+};

package/dist/content/components/ui/AccordionItem/icon-arrow-down.tsx

@@ -0,0 +1,20 @@
+import { FC, SVGProps } from 'react';
+
+export const IconArrowDown: FC<SVGProps<SVGSVGElement>> = ({ className, ...restProps }) => (
+  <svg
+    className={className}
+    width="15"
+    height="9"
+    viewBox="0 0 15 9"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.50013 0L0 7.13651L1.95843 9L7.5 3.7271L13.0416 9L15 7.13651L7.50013 0Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/dist/content/components/ui/AccordionItem/icon-arrow-up.tsx

@@ -0,0 +1,20 @@
+import { FC, SVGProps } from 'react';
+
+export const IconArrowUp: FC<SVGProps<SVGSVGElement>> = ({ className, ...restProps }) => (
+  <svg
+    className={className}
+    width="15"
+    height="9"
+    viewBox="0 0 15 9"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.49987 9L15 1.86349L13.0416 0L7.5 5.2729L1.95843 0L0 1.86349L7.49987 9Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/dist/content/components/ui/AccordionItem/index.tsx

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { ContainerProps } from '@/components/ui/Container';
+
+export type AccordionItemParameters = Pick<ContainerProps, 'backgroundColor' | 'spacing' | 'border'> & {
+  text: ReactElement;
+  accordionItemContent: ReactNode;
+};
+
+export type AccordionItemAdditionalProps = {
+  className?: string;
+};
+
+export type AccordionItemProps = AccordionItemParameters & AccordionItemAdditionalProps;
+
+export default dynamic(() => import('./accordion-item').then(mod => mod.AccordionItem));

package/dist/content/components/ui/Carousel/carousel.tsx

@@ -11,7 +11,7 @@ export const Carousel: FC<CarouselProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
+  height,
   itemsPerPage = '1',
   children,
   gapX,
@@ -116,7 +116,7 @@ export const Carousel: FC<CarouselProps> = ({
     });
 
   return (
-    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, fullHeight }}>
+    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
       <div
         className={cn('relative', {
           [resolveViewPort(gapX, '-mx-{value}')]: gapX,

package/dist/content/components/ui/Carousel/index.ts

@@ -4,7 +4,7 @@ import { ContainerProps as BaseContainerProps } from '@/components/ui/Container'
 
 export type CarouselProps = Pick<
   BaseContainerProps,
-  'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'fullHeight'
+  'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
   countOfItems?: number;
   children: (options: { className?: string; style?: React.CSSProperties }) => ReactElement;

package/dist/content/components/ui/Container/container.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { cn, formatSpaceParameterValue, resolveViewPort } from '@/utils/styling';
 import { ContainerProps } from '.';
-import { getHeightValue } from './utils';
 
 export const Container: FC<ContainerProps> = ({
   className,
@@ -12,8 +11,6 @@ export const Container: FC<ContainerProps> = ({
   spacing,
   border = '',
   fluidContent = false,
-  fullHeight = false,
-  fitHeight = false,
   height,
   maxWidth,
   ...rest
@@ -23,8 +20,6 @@ export const Container: FC<ContainerProps> = ({
     { marginTop, marginBottom, marginRight, marginLeft, paddingTop, paddingBottom, paddingRight, paddingLeft },
   ] = formatSpaceParameterValue(spacing);
 
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
   return (
     <div
       className={cn(
@@ -34,7 +29,7 @@ export const Container: FC<ContainerProps> = ({
           'mx-auto w-full': !fluidContent,
           'max-w-7xl max-w-container-width': !maxWidth && !fluidContent,
           [`max-w-${maxWidth}`]: !!maxWidth && !fluidContent,
-          [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
+          [resolveViewPort(height, 'h-{value}')]: height,
         },
         wrapperClassName
       )}
@@ -52,7 +47,7 @@ export const Container: FC<ContainerProps> = ({
             [resolveViewPort(paddingRight, 'pr-{value}')]: paddingRight,
             [resolveViewPort(paddingLeft, 'pl-{value}')]: paddingLeft,
             [resolveViewPort(border, '{value}')]: border,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
+            [resolveViewPort(height, 'h-{value}')]: height,
           },
           className
         )}

package/dist/content/components/ui/Container/index.ts

@@ -6,15 +6,9 @@ export type ContainerProps = HTMLAttributes<HTMLDivElement> & {
   spacing?: SpaceType | ViewPort<SpaceType>;
   border?: string | ViewPort<string>;
   fluidContent?: boolean;
-  /** @deprecated Use height prop instead */
-  fullHeight?: boolean;
-  /** @deprecated Use height prop instead */
-  fitHeight?: boolean;
   height?: string | ViewPort<string>;
   wrapperClassName?: string;
   maxWidth?: string;
 };
 
-export { getHeightValue } from './utils';
-
 export { Container as default } from './container';

package/dist/content/components/ui/Flex/flex.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import BaseContainer, { getHeightValue } from '@/components/ui/Container';
+import BaseContainer from '@/components/ui/Container';
 import { cn, resolveViewPort } from '@/utils/styling';
 import { FlexProps } from '.';
 
@@ -14,32 +14,24 @@ export const Flex: FC<FlexProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   children,
-}) => {
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
-  return (
-    <BaseContainer
-      {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height, wrapperClassName }}
+}) => (
+  <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height, wrapperClassName }}>
+    <div
+      className={cn(
+        'flex',
+        {
+          [resolveViewPort(direction, 'flex-{value}')]: direction,
+          [resolveViewPort(justifyContent, 'justify-{value}')]: justifyContent,
+          [resolveViewPort(gap, 'gap-{value}')]: gap,
+          [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
+          [resolveViewPort(height, 'h-{value}')]: height,
+        },
+        className
+      )}
     >
-      <div
-        className={cn(
-          'flex',
-          {
-            [resolveViewPort(direction, 'flex-{value}')]: direction,
-            [resolveViewPort(justifyContent, 'justify-{value}')]: justifyContent,
-            [resolveViewPort(gap, 'gap-{value}')]: gap,
-            [resolveViewPort(alignItems, 'items-{value}')]: alignItems,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </BaseContainer>
-  );
-};
+      {children}
+    </div>
+  </BaseContainer>
+);

package/dist/content/components/ui/Flex/index.ts

@@ -14,8 +14,6 @@ export type FlexProps = Pick<
   | 'spacing'
   | 'border'
   | 'fluidContent'
-  | 'fullHeight'
-  | 'fitHeight'
   | 'height'
   | 'children'
 > & {

package/dist/content/components/ui/Footer/index.ts

@@ -1,6 +1,6 @@
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
-export type FooterProps = Omit<BaseContainerProps, 'fullHeight' | 'content'> & {
+export type FooterProps = Omit<BaseContainerProps, 'height' | 'content'> & {
   logo?: React.ReactNode;
   copyright?: React.ReactNode;
   content?: React.ReactNode;

package/dist/content/components/ui/Grid/grid.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import BaseContainer, { getHeightValue } from '@/components/ui/Container';
+import BaseContainer from '@/components/ui/Container';
 import { cn, resolveViewPort } from '@/utils/styling';
 import { GridProps } from '.';
 
@@ -12,29 +12,23 @@ export const Grid: FC<GridProps> = ({
   spacing,
   border,
   fluidContent,
-  fullHeight,
-  fitHeight,
   height,
   children,
-}) => {
-  const heightValue = getHeightValue({ height, fullHeight, fitHeight });
-
-  return (
-    <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, fullHeight, fitHeight, height }}>
-      <div
-        className={cn(
-          'grid',
-          {
-            [resolveViewPort(columnsCount, 'grid-cols-{value}')]: columnsCount,
-            [resolveViewPort(gapX, 'gap-x-{value}')]: gapX,
-            [resolveViewPort(gapY, 'gap-y-{value}')]: gapY,
-            [resolveViewPort(heightValue, 'h-{value}')]: heightValue,
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </BaseContainer>
-  );
-};
+}) => (
+  <BaseContainer {...{ backgroundColor, spacing, border, fluidContent, height }}>
+    <div
+      className={cn(
+        'grid',
+        {
+          [resolveViewPort(columnsCount, 'grid-cols-{value}')]: columnsCount,
+          [resolveViewPort(gapX, 'gap-x-{value}')]: gapX,
+          [resolveViewPort(gapY, 'gap-y-{value}')]: gapY,
+          [resolveViewPort(height, 'h-{value}')]: height,
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  </BaseContainer>
+);

package/dist/content/components/ui/Grid/index.ts

@@ -3,15 +3,7 @@ import { ViewPort } from '@/types/cskTypes';
 
 export type GridProps = Pick<
   BaseContainerProps,
-  | 'title'
-  | 'backgroundColor'
-  | 'spacing'
-  | 'border'
-  | 'fluidContent'
-  | 'fullHeight'
-  | 'fitHeight'
-  | 'children'
-  | 'height'
+  'title' | 'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'children' | 'height'
 > & {
   columnsCount?: string | ViewPort<string>;
   gapY?: string | ViewPort<string>;

package/dist/content/components/ui/Header/index.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { ContainerProps as BaseContainerProps } from '@/components/ui/Container';
 
 export type HeaderProps = PropsWithChildren &
-  Omit<BaseContainerProps, 'fluidContent' | 'fullHeight'> & {
+  Omit<BaseContainerProps, 'fluidContent' | 'height'> & {
     leftSection?: ReactNode;
     rightSection?: ReactNode;
     color?: string;

package/dist/content/components/ui/InlineSVG/index.ts

@@ -0,0 +1,13 @@
+export type InlineSVGProps = {
+  src: string;
+  className?: string;
+  fill?: boolean;
+  width?: number;
+  height?: number;
+  sanitize?: boolean;
+  fallback?: React.ReactNode;
+  useCurrentColor?: boolean;
+  alt?: string;
+};
+
+export { InlineSVG as default } from './inline-svg';

package/dist/content/components/ui/InlineSVG/inline-svg.tsx

@@ -0,0 +1,59 @@
+import { FC, SVGProps } from 'react';
+import { cn } from '@/utils/styling';
+import { InlineSVGProps } from '.';
+import { fetchSvg, sanitizeSvg, applyCurrentColor, getSvgAttributes, getSvgInnerContent } from './utils';
+
+export const InlineSVG: FC<InlineSVGProps> = async ({
+  src,
+  className = '',
+  width,
+  height,
+  fill,
+  sanitize = true,
+  useCurrentColor = true,
+  fallback,
+  alt,
+}) => {
+  if (!src) return fallback ?? null;
+
+  const transformSvg = (svg: string): string => {
+    const transformers: Array<(input: string) => string> = [];
+
+    if (sanitize) transformers.push(sanitizeSvg);
+    if (useCurrentColor) transformers.push(applyCurrentColor);
+
+    return transformers.reduce((result, fn) => fn(result), svg);
+  };
+
+  try {
+    const raw = await fetchSvg(src);
+    const cleaned = transformSvg(raw);
+    const attrs = getSvgAttributes(cleaned);
+    const content = getSvgInnerContent(cleaned);
+
+    const svgProps: SVGProps<SVGSVGElement> = {
+      ...attrs,
+      role: 'img',
+      'aria-label': alt,
+      width: fill ? '100%' : width,
+      height: fill ? '100%' : height,
+      className: cn(attrs.className, className, {
+        'absolute inset-0': fill,
+      }),
+    };
+
+    return (
+      <div className="relative size-full">
+        <svg {...svgProps} dangerouslySetInnerHTML={{ __html: content }} />
+      </div>
+    );
+  } catch {
+    return (
+      fallback ?? (
+        <div className={cn(className)} style={{ width, height }}>
+          <div className="rounded border border-red-200 bg-red-50 p-2 text-sm text-red-500">Failed to load SVG</div>
+        </div>
+      )
+    );
+  }
+};

package/dist/content/components/ui/InlineSVG/utils.ts

@@ -0,0 +1,77 @@
+/**
+ * Sanitizes SVG by removing potentially dangerous or unwanted content.
+ */
+export const sanitizeSvg = (svg: string): string =>
+  svg
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/\son\w+="[^"]*"/gi, '')
+    .replace(/\son\w+='[^']*'/gi, '')
+    .replace(/javascript:/gi, '');
+
+/**
+ * Replaces color attributes (fill, stroke, color) with `currentColor`
+ * except for 'none' and 'transparent'.
+ */
+export const applyCurrentColor = (svg: string): string =>
+  svg
+    .replace(/fill=(['"])(?!none|transparent)[^'"]*\1/gi, 'fill="currentColor"')
+    .replace(/stroke=(['"])(?!none|transparent)[^'"]*\1/gi, 'stroke="currentColor"')
+    .replace(/color=(['"])[^'"]*\1/gi, 'color="currentColor"');
+
+/**
+ * Extracts attributes from the <svg> tag as key-value pairs.
+ */
+export const getSvgAttributes = (svg: string): Record<string, string> => {
+  const match = svg.match(/<svg\s+([^>]*)>/i);
+  if (!match || !match[1]) return {};
+
+  const attrString = match[1];
+  const attributes: Record<string, string> = {};
+
+  const attrRegex = /(\w[\w-]*)=["']([^"']*)["']/g;
+  let result: RegExpExecArray | null;
+
+  while ((result = attrRegex.exec(attrString))) {
+    const [, key, value] = result;
+    if (key && value) {
+      attributes[key] = value;
+    }
+  }
+
+  return attributes;
+};
+
+/**
+ * Extracts inner content from an SVG string (everything inside <svg>...</svg>).
+ */
+export const getSvgInnerContent = (svg: string): string => {
+  const match = svg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+  return match?.[1] ?? '';
+};
+
+/**
+ * Fetches raw SVG content from a remote URL.
+ */
+export const fetchSvg = async (url: string): Promise<string> => {
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'image/svg+xml, text/plain, */*',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch SVG: ${response.status} ${response.statusText}`);
+    }
+
+    const content = await response.text();
+    if (!content.trim().includes('<svg')) {
+      throw new Error('Response is not valid SVG');
+    }
+
+    return content;
+  } catch (err) {
+    console.error('Error fetching SVG:', err);
+    throw err;
+  }
+};

package/dist/content/components/ui/Modal/index.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+
+export const MaxWidthMap = {
+  small: 'max-w-xl',
+  medium: 'max-w-2xl',
+  large: 'max-w-4xl',
+};
+
+export type ModalProps = {
+  maxWidth?: 'small' | 'medium' | 'large';
+  className?: string;
+  backgroundColor?: string;
+  closeIconColor?: string;
+  disableCloseModalOnClickOutside?: boolean;
+  trigger: ReactNode;
+  content: ReactNode;
+  actions?: ReactNode;
+  onChangeModalState?: (state: boolean) => void;
+};
+
+export default dynamic(() => import('./modal').then(mod => mod.Modal));