@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/select/styles.d.ts

@@ -0,0 +1,69 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const selectVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SelectVariants = VariantProps<typeof selectVariants>;

package/dist/components/select/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const selectVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  slots: {
+    base: "select",
+    indicator: "select__indicator",
+    popover: "select__popover",
+    trigger: "select__trigger",
+    value: "select__value"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "select--full-width",
+        trigger: "select__trigger--full-width"
+      }
+    },
+    variant: {
+      primary: {
+        base: "select--primary"
+      },
+      secondary: {
+        base: "select--secondary"
+      }
+    }
+  }
+});
+
+export { selectVariants };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { SeparatorRoot } from "./separator";
+export declare const Separator: (({ className, orientation, variant, ...props }: import("./separator").SeparatorRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, orientation, variant, ...props }: import("./separator").SeparatorRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Separator = {
+    Props: ComponentProps<typeof SeparatorRoot>;
+    RootProps: ComponentProps<typeof SeparatorRoot>;
+};
+export { SeparatorRoot };
+export type { SeparatorRootProps, SeparatorRootProps as SeparatorProps } from "./separator";
+export { separatorVariants } from "./styles";
+export type { SeparatorVariants } from "./styles";

package/dist/components/separator/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { SeparatorRoot } from './separator.js';
+export { separatorVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Separator = Object.assign(SeparatorRoot, {
+  Root: SeparatorRoot
+});
+
+export { Separator, SeparatorRoot };

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,8 @@
+import type { SeparatorVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Separator as SeparatorPrimitive } from "react-aria-components";
+interface SeparatorRootProps extends ComponentPropsWithRef<typeof SeparatorPrimitive>, SeparatorVariants {
+}
+declare const SeparatorRoot: ({ className, orientation, variant, ...props }: SeparatorRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SeparatorRoot };
+export type { SeparatorRootProps };

package/dist/components/separator/separator.js

@@ -0,0 +1,27 @@
+"use client";
+import { useSlottedContext, SeparatorContext, Separator } from 'react-aria-components';
+import { separatorVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SeparatorRoot = ({
+  className,
+  orientation,
+  variant,
+  ...props
+}) => {
+  const context = useSlottedContext(SeparatorContext);
+  const resolvedOrientation = orientation ?? context?.orientation ?? "horizontal";
+  return /*#__PURE__*/jsx(Separator, {
+    "data-orientation": resolvedOrientation,
+    "data-slot": "separator",
+    orientation: resolvedOrientation,
+    className: separatorVariants({
+      className,
+      orientation: resolvedOrientation,
+      variant
+    }),
+    ...props
+  });
+};
+
+export { SeparatorRoot };

package/dist/components/separator/styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+declare const separatorVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "separator", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "separator", unknown, unknown, undefined>>;
+export { separatorVariants };
+export type SeparatorVariants = VariantProps<typeof separatorVariants>;

package/dist/components/separator/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const separatorVariants = tv({
+  base: "separator",
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default"
+  },
+  variants: {
+    orientation: {
+      horizontal: "separator--horizontal",
+      vertical: "separator--vertical"
+    },
+    variant: {
+      default: "separator--default",
+      secondary: "separator--secondary",
+      tertiary: "separator--tertiary"
+    }
+  }
+});
+
+export { separatorVariants };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { SkeletonRoot } from "./skeleton";
+export declare const Skeleton: (({ animationType, className, ...props }: import("./skeleton").SkeletonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ animationType, className, ...props }: import("./skeleton").SkeletonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Skeleton = {
+    Props: ComponentProps<typeof SkeletonRoot>;
+    RootProps: ComponentProps<typeof SkeletonRoot>;
+};
+export { SkeletonRoot };
+export type { SkeletonRootProps, SkeletonRootProps as SkeletonProps } from "./skeleton";
+export { skeletonVariants } from "./styles";
+export type { SkeletonVariants } from "./styles";

package/dist/components/skeleton/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { SkeletonRoot } from './skeleton.js';
+export { skeletonVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Skeleton = Object.assign(SkeletonRoot, {
+  Root: SkeletonRoot
+});
+
+export { Skeleton, SkeletonRoot };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+interface SkeletonRootProps extends Omit<ComponentPropsWithRef<"div">, "children">, SkeletonVariants {
+}
+declare const SkeletonRoot: ({ animationType, className, ...props }: SkeletonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SkeletonRoot };
+export type { SkeletonRootProps };

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,25 @@
+"use client";
+import React__default from 'react';
+import { useCSSVariable } from '../../hooks/use-css-variable.js';
+import { skeletonVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SkeletonRoot = ({
+  animationType,
+  className,
+  ...props
+}) => {
+  // Use the new hook to get CSS variable value with SSR support
+  const resolvedAnimationType = useCSSVariable("--skeleton-animation", animationType);
+  const slots = React__default.useMemo(() => skeletonVariants({
+    animationType: resolvedAnimationType
+  }), [resolvedAnimationType]);
+  return /*#__PURE__*/jsx("div", {
+    className: slots.base({
+      className
+    }),
+    ...props
+  });
+};
+
+export { SkeletonRoot };

package/dist/components/skeleton/styles.d.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
+    animationType: {
+        none: string;
+        pulse: string;
+        shimmer: string;
+    };
+}, {
+    base: string;
+}, undefined, {
+    animationType: {
+        none: string;
+        pulse: string;
+        shimmer: string;
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    animationType: {
+        none: string;
+        pulse: string;
+        shimmer: string;
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

package/dist/components/skeleton/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const skeletonVariants = tv({
+  defaultVariants: {
+    animationType: "shimmer"
+  },
+  slots: {
+    base: "skeleton"
+  },
+  variants: {
+    animationType: {
+      none: "skeleton--none",
+      pulse: "skeleton--pulse",
+      shimmer: "skeleton--shimmer"
+    }
+  }
+});
+
+export { skeletonVariants };

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack } from "./slider";
+export declare const Slider: (({ children, className, orientation, ...props }: import("./slider").SliderRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Fill: ({ className, style, ...props }: import("./slider").SliderFillProps) => import("react/jsx-runtime").JSX.Element;
+    Marks: ({ className, ...props }: import("./slider").SliderMarksProps) => import("react/jsx-runtime").JSX.Element;
+    Output: ({ children, className, ...props }: import("./slider").SliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, orientation, ...props }: import("./slider").SliderRootProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ children, className, ...props }: import("./slider").SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ children, className, ...props }: import("./slider").SliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Slider = {
+    Props: ComponentProps<typeof SliderRoot>;
+    RootProps: ComponentProps<typeof SliderRoot>;
+    OutputProps: ComponentProps<typeof SliderOutput>;
+    TrackProps: ComponentProps<typeof SliderTrack>;
+    FillProps: ComponentProps<typeof SliderFill>;
+    ThumbProps: ComponentProps<typeof SliderThumb>;
+    MarksProps: ComponentProps<typeof SliderMarks>;
+};
+export { SliderRoot, SliderOutput, SliderTrack, SliderFill, SliderThumb, SliderMarks };
+export type { SliderRootProps, SliderRootProps as SliderProps, SliderOutputProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderMarksProps, } from "./slider";
+export { sliderVariants } from "./styles";
+export type { SliderVariants } from "./styles";

package/dist/components/slider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { SliderRoot, SliderTrack, SliderThumb, SliderOutput, SliderMarks, SliderFill } from './slider.js';
+export { sliderVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Slider = Object.assign(SliderRoot, {
+  Fill: SliderFill,
+  Marks: SliderMarks,
+  Output: SliderOutput,
+  Root: SliderRoot,
+  Thumb: SliderThumb,
+  Track: SliderTrack
+});
+
+export { Slider, SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack };

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,23 @@
+import type { SliderVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { SliderOutput as SliderOutputPrimitive, Slider as SliderPrimitive, SliderThumb as SliderThumbPrimitive, SliderTrack as SliderTrackPrimitive } from "react-aria-components";
+interface SliderRootProps extends ComponentPropsWithRef<typeof SliderPrimitive>, SliderVariants {
+}
+declare const SliderRoot: ({ children, className, orientation, ...props }: SliderRootProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderOutputProps extends ComponentPropsWithRef<typeof SliderOutputPrimitive> {
+}
+declare const SliderOutput: ({ children, className, ...props }: SliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderTrackProps extends ComponentPropsWithRef<typeof SliderTrackPrimitive> {
+}
+declare const SliderTrack: ({ children, className, ...props }: SliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderFillProps extends ComponentPropsWithRef<"div"> {
+}
+declare const SliderFill: ({ className, style, ...props }: SliderFillProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderThumbProps extends ComponentPropsWithRef<typeof SliderThumbPrimitive> {
+}
+declare const SliderThumb: ({ children, className, ...props }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderMarksProps extends ComponentPropsWithRef<"div"> {
+}
+declare const SliderMarks: ({ className, ...props }: SliderMarksProps) => import("react/jsx-runtime").JSX.Element;
+export { SliderRoot, SliderOutput, SliderTrack, SliderFill, SliderThumb, SliderMarks };
+export type { SliderRootProps, SliderOutputProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderMarksProps, };

package/dist/components/slider/slider.js

@@ -0,0 +1,177 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Slider, SliderTrack as SliderTrack$1, SliderThumb as SliderThumb$1, SliderOutput as SliderOutput$1 } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { sliderVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const SliderContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderRoot = ({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => sliderVariants({}), []);
+  return /*#__PURE__*/jsx(Slider, {
+    "data-slot": "slider",
+    orientation: orientation,
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(SliderContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx(SliderOutput$1, {
+    className: composeTwRenderProps(className, slots?.output()),
+    "data-slot": "slider-output",
+    ...props,
+    children: children ? values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    }) : ({
+      state
+    }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(SliderContext);
+  const {
+    getThumbPercent,
+    values
+  } = state?.state || {};
+  const singleThumb = values?.length && values.length === 1;
+  const [startOffset, endOffset] = [values?.length && values.length > 1 ? getThumbPercent?.(0) : 0, getThumbPercent?.(values?.length ? values.length - 1 : 0)].sort();
+  const fillWidth = (endOffset - startOffset) * 100;
+  return /*#__PURE__*/jsx(SliderTrack$1, {
+    className: composeTwRenderProps(className, slots?.track()),
+    "data-disabled": dataAttr(state?.isDisabled),
+    "data-slot": "slider-track",
+    ...(singleThumb ? {
+      "data-fill-end": dataAttr(fillWidth == 100),
+      "data-fill-start": dataAttr(fillWidth > 0)
+    } : {
+      "data-fill-end": dataAttr(startOffset * 100 + fillWidth == 100),
+      "data-fill-start": dataAttr(startOffset == 0)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Fill
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderFill = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(SliderContext);
+  const {
+    getThumbPercent,
+    orientation,
+    values
+  } = state?.state || {};
+  const [startOffset, endOffset] = [values?.length && values.length > 1 ? getThumbPercent?.(0) : 0, getThumbPercent?.(values?.length ? values.length - 1 : 0)].sort();
+  const isVertical = orientation === "vertical";
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fill, className),
+    "data-disabled": dataAttr(state?.isDisabled),
+    "data-slot": "slider-fill",
+    style: {
+      ...style,
+      // TODO: rtl support
+      [isVertical ? "bottom" : "left"]: `${startOffset * 100}%`,
+      ...(isVertical ? {
+        height: `${(endOffset - startOffset) * 100}%`
+      } : {
+        width: `${(endOffset - startOffset) * 100}%`
+      })
+    },
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderThumb = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx(SliderThumb$1, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "slider-thumb",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * TODO: Slider Marks
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderMarks = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.marks, className),
+    "data-slot": "slider-marks",
+    ...props
+  });
+};
+
+export { SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack };

package/dist/components/slider/styles.d.ts

@@ -0,0 +1,57 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const sliderVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fill?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            marks?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fill?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            marks?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fill?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            marks?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SliderVariants = VariantProps<typeof sliderVariants>;

package/dist/components/slider/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const sliderVariants = tv({
+  slots: {
+    base: "slider",
+    fill: "slider__fill",
+    marks: "slider__marks",
+    output: "slider__output",
+    thumb: "slider__thumb",
+    track: "slider__track"
+  }
+});
+
+export { sliderVariants };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { SpinnerRoot } from "./spinner";
+export declare const Spinner: (({ className, color, size, ...props }: import("./spinner").SpinnerRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, color, size, ...props }: import("./spinner").SpinnerRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Spinner = {
+    Props: ComponentProps<typeof SpinnerRoot>;
+    RootProps: ComponentProps<typeof SpinnerRoot>;
+};
+export { SpinnerRoot };
+export type { SpinnerRootProps, SpinnerRootProps as SpinnerProps } from "./spinner";
+export { spinnerVariants } from "./styles";
+export type { SpinnerVariants } from "./styles";