@cognitiv/components-web 1.0.5 → 1.1.0

package/dist/components/calendar-year-picker/styles.d.ts

@@ -0,0 +1,51 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const calendarYearPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            triggerIndicator?: import("tailwind-merge").ClassNameValue;
+            triggerHeading?: import("tailwind-merge").ClassNameValue;
+            yearCell?: import("tailwind-merge").ClassNameValue;
+            yearGrid?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            triggerIndicator?: import("tailwind-merge").ClassNameValue;
+            triggerHeading?: import("tailwind-merge").ClassNameValue;
+            yearCell?: import("tailwind-merge").ClassNameValue;
+            yearGrid?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            triggerIndicator?: import("tailwind-merge").ClassNameValue;
+            triggerHeading?: import("tailwind-merge").ClassNameValue;
+            yearCell?: import("tailwind-merge").ClassNameValue;
+            yearGrid?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>;

package/dist/components/calendar-year-picker/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const calendarYearPickerVariants = tv({
+  slots: {
+    trigger: "calendar-year-picker__trigger",
+    triggerHeading: "calendar-year-picker__trigger-heading",
+    triggerIndicator: "calendar-year-picker__trigger-indicator",
+    yearCell: "calendar-year-picker__year-cell",
+    yearGrid: "calendar-year-picker__year-grid"
+  }
+});
+
+export { calendarYearPickerVariants };

package/dist/components/calendar-year-picker/year-picker-context.d.ts

@@ -0,0 +1,28 @@
+import type { DateValue } from "react-aria-components";
+interface YearPickerContextValue {
+    isYearPickerOpen: boolean;
+    setIsYearPickerOpen: (open: boolean) => void;
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+    calendarGridSlot: "calendar-grid" | "range-calendar-grid";
+}
+interface YearPickerStateContextValue {
+    focusedDate: DateValue;
+    setFocusedDate: (value: DateValue) => void;
+    timeZone: string;
+    minValue?: DateValue | null;
+    maxValue?: DateValue | null;
+}
+declare const YearPickerContext: import("react").Context<YearPickerContextValue | null>;
+declare const YearPickerStateContext: import("react").Context<YearPickerStateContextValue | null>;
+/**
+ * Hook to consume YearPickerContext.
+ * Must be used inside Calendar or RangeCalendar.
+ */
+declare function useYearPicker(): YearPickerContextValue;
+/**
+ * Hook to consume normalized calendar state used by YearPicker.
+ * Must be provided by Calendar or RangeCalendar root via adapter bridge.
+ */
+declare function useYearPickerState(): YearPickerStateContextValue;
+export { YearPickerContext, YearPickerStateContext, useYearPicker, useYearPickerState };
+export type { YearPickerContextValue, YearPickerStateContextValue };

package/dist/components/calendar-year-picker/year-picker-context.js

@@ -0,0 +1,39 @@
+"use strict";
+import { createContext, useContext } from 'react';
+
+/* -------------------------------------------------------------------------------------------------
+ * YearPickerContext
+ *
+ * Context provided by Calendar (and RangeCalendar) to control year-picker visibility.
+ * Internal child components consume this to toggle the year-picker open/close state,
+ * keeping the public API clean and wrapper-free.
+ * -----------------------------------------------------------------------------------------------*/
+
+const YearPickerContext = /*#__PURE__*/createContext(null);
+const YearPickerStateContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Hook to consume YearPickerContext.
+ * Must be used inside Calendar or RangeCalendar.
+ */
+function useYearPicker() {
+  const context = useContext(YearPickerContext);
+  if (!context) {
+    throw new Error("useYearPicker must be used within a <Calendar> or <RangeCalendar> component.");
+  }
+  return context;
+}
+
+/**
+ * Hook to consume normalized calendar state used by YearPicker.
+ * Must be provided by Calendar or RangeCalendar root via adapter bridge.
+ */
+function useYearPickerState() {
+  const context = useContext(YearPickerStateContext);
+  if (!context) {
+    throw new Error("useYearPickerState must be used within a <Calendar> or <RangeCalendar> component.");
+  }
+  return context;
+}
+
+export { YearPickerContext, YearPickerStateContext, useYearPicker, useYearPickerState };

package/dist/components/card/card.d.ts

@@ -0,0 +1,22 @@
+import type { CardVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+interface CardRootProps extends ComponentPropsWithRef<"div">, CardVariants {
+}
+declare const CardRoot: ({ children, className, variant, ...props }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
+interface CardHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface CardTitleProps extends ComponentPropsWithRef<"h3"> {
+}
+declare const CardTitle: ({ children, className, ...props }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+interface CardDescriptionProps extends ComponentPropsWithRef<"p"> {
+}
+declare const CardDescription: ({ children, className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+interface CardContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardContent: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+interface CardFooterProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export type { CardRootProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, };

package/dist/components/card/card.js

@@ -0,0 +1,141 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { cardVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const CardContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardRoot = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => cardVariants({
+    variant
+  }), [variant]);
+  const content = /*#__PURE__*/jsx("div", {
+    className: slots.base({
+      className
+    }),
+    "data-slot": "card",
+    ...props,
+    children: children
+  });
+  return /*#__PURE__*/jsx(CardContext, {
+    value: {
+      slots
+    },
+    children: variant === "transparent" ? content :
+    /*#__PURE__*/
+    // Allows inner components to apply "on-surface" colors for proper contrast
+    jsx(SurfaceContext, {
+      value: {
+        variant: variant
+      },
+      children: content
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "card-header",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Title
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardTitle = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("h3", {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "card-title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Description
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("p", {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "card-description",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardContent = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "card-content",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardFooter = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "card-footer",
+    ...props
+  });
+};
+
+export { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card";
+export declare const Card: (({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ className, ...props }: import("./card").CardContentProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className, ...props }: import("./card").CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, ...props }: import("./card").CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, ...props }: import("./card").CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className, ...props }: import("./card").CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Card = {
+    Props: ComponentProps<typeof CardRoot>;
+    RootProps: ComponentProps<typeof CardRoot>;
+    HeaderProps: ComponentProps<typeof CardHeader>;
+    TitleProps: ComponentProps<typeof CardTitle>;
+    DescriptionProps: ComponentProps<typeof CardDescription>;
+    ContentProps: ComponentProps<typeof CardContent>;
+    FooterProps: ComponentProps<typeof CardFooter>;
+};
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export type { CardRootProps, CardRootProps as CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from "./card";
+export { cardVariants } from "./styles";
+export type { CardVariants } from "./styles";

package/dist/components/card/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { CardRoot, CardTitle, CardHeader, CardFooter, CardDescription, CardContent } from './card.js';
+export { cardVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Card = Object.assign(CardRoot, {
+  Content: CardContent,
+  Description: CardDescription,
+  Footer: CardFooter,
+  Header: CardHeader,
+  Root: CardRoot,
+  Title: CardTitle
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

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

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export { cardVariants };
+export type CardVariants = VariantProps<typeof cardVariants>;

package/dist/components/card/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const cardVariants = tv({
+  defaultVariants: {
+    variant: "default"
+  },
+  slots: {
+    base: "card",
+    content: "card__content",
+    description: "card__description",
+    footer: "card__footer",
+    header: "card__header",
+    title: "card__title"
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "card--default"
+      },
+      secondary: {
+        base: "card--secondary"
+      },
+      tertiary: {
+        base: "card--tertiary"
+      },
+      transparent: {
+        base: "card--transparent"
+      }
+    }
+  }
+});
+
+export { cardVariants };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,22 @@
+import type { CheckboxVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { CheckboxRenderProps } from "react-aria-components";
+import React from "react";
+import { Checkbox as CheckboxPrimitive } from "react-aria-components";
+interface CheckboxRootProps extends ComponentPropsWithRef<typeof CheckboxPrimitive>, CheckboxVariants {
+    /** The name of the checkbox, used when submitting an HTML form. */
+    name?: string;
+}
+declare const CheckboxRoot: ({ children, className, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxControlProps extends ComponentPropsWithRef<"span"> {
+}
+declare const CheckboxControl: ({ children, className, ...props }: CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: CheckboxRenderProps) => React.ReactNode);
+}
+declare const CheckboxIndicator: ({ children, className, ...props }: CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CheckboxContent: ({ children, className, ...props }: CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxContent };
+export type { CheckboxRootProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, };

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,124 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Checkbox } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CheckboxGroupContext } from '../checkbox-group/checkbox-group.js';
+import { checkboxVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxContext = /*#__PURE__*/createContext({});
+const CheckboxRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+  const effectiveVariant = variant ?? checkboxGroupContext.variant;
+  const slots = React__default.useMemo(() => checkboxVariants({
+    variant: effectiveVariant
+  }), [effectiveVariant]);
+  return /*#__PURE__*/jsx(Checkbox, {
+    "data-slot": "checkbox",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(CheckboxContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxControl = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CheckboxContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.control, className),
+    "data-slot": "checkbox-control",
+    ...props,
+    children: children
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(CheckboxContext);
+  const isSelected = state?.isSelected;
+  const isIndeterminate = state?.isIndeterminate;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : isIndeterminate ? /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "checkbox-default-indicator--indeterminate",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx("line", {
+      x1: "21",
+      x2: "3",
+      y1: "12",
+      y2: "12"
+    })
+  }) : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "checkbox-default-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "checkbox-indicator",
+    ...props,
+    children: content
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CheckboxContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "checkbox-content",
+    ...props,
+    children: children
+  });
+};
+
+export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot } from "./checkbox";
+export declare const Checkbox: (({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ children, className, ...props }: import("./checkbox").CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, className, ...props }: import("./checkbox").CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./checkbox").CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Checkbox = {
+    Props: ComponentProps<typeof CheckboxRoot>;
+    RootProps: ComponentProps<typeof CheckboxRoot>;
+    ControlProps: ComponentProps<typeof CheckboxControl>;
+    IndicatorProps: ComponentProps<typeof CheckboxIndicator>;
+    ContentProps: ComponentProps<typeof CheckboxContent>;
+};
+export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };
+export type { CheckboxRootProps, CheckboxRootProps as CheckboxProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, } from "./checkbox";
+export { checkboxVariants } from "./styles";
+export type { CheckboxVariants } from "./styles";

package/dist/components/checkbox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { CheckboxRoot, CheckboxIndicator, CheckboxControl, CheckboxContent } from './checkbox.js';
+export { checkboxVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Checkbox = Object.assign(CheckboxRoot, {
+  Content: CheckboxContent,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  Root: CheckboxRoot
+});
+
+export { Checkbox, CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>;