@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/input-group/styles.d.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const inputGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    prefix: string;
+    suffix: string;
+}, undefined, unknown, unknown, undefined>>;
+export type InputGroupVariants = VariantProps<typeof inputGroupVariants>;

package/dist/components/input-group/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const inputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary"
+  },
+  slots: {
+    base: "input-group",
+    input: "input-group__input",
+    prefix: "input-group__prefix",
+    suffix: "input-group__suffix"
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "input-group--full-width"
+      }
+    },
+    variant: {
+      primary: {
+        base: "input-group--primary"
+      },
+      secondary: {
+        base: "input-group--secondary"
+      }
+    }
+  }
+});
+
+export { inputGroupVariants };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot } from "./input-otp";
+export declare const InputOTP: (({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: import("./input-otp").InputOTPRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ className, ...props }: import("./input-otp").InputOTPGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: import("./input-otp").InputOTPRootProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: import("./input-otp").InputOTPSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Slot: ({ className, index, ...props }: import("./input-otp").InputOTPSlotProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type InputOTP = {
+    Props: ComponentProps<typeof InputOTPRoot>;
+    RootProps: ComponentProps<typeof InputOTPRoot>;
+    GroupProps: ComponentProps<typeof InputOTPGroup>;
+    SlotProps: ComponentProps<typeof InputOTPSlot>;
+    SeparatorProps: ComponentProps<typeof InputOTPSeparator>;
+};
+export { InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export type { InputOTPRootProps, InputOTPRootProps as InputOTPProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps, } from "./input-otp";
+export { inputOTPVariants } from "./styles";
+export type { InputOTPVariants } from "./styles";
+export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";

package/dist/components/input-otp/index.js

@@ -0,0 +1,21 @@
+"use strict";
+import { InputOTPRoot, InputOTPSlot, InputOTPSeparator, InputOTPGroup } from './input-otp.js';
+export { inputOTPVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTP = Object.assign(InputOTPRoot, {
+  Group: InputOTPGroup,
+  Root: InputOTPRoot,
+  Separator: InputOTPSeparator,
+  Slot: InputOTPSlot
+});
+//  ===================================
+// Regular Expressions
+//  ===================================
+const REGEXP_ONLY_DIGITS = "^\\d+$";
+const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+
+export { InputOTP, InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/components/input-otp/input-otp.d.ts

@@ -0,0 +1,26 @@
+import type { InputOTPVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { OTPInput } from "input-otp";
+import React from "react";
+interface InputOTPRootProps extends Omit<ComponentPropsWithRef<typeof OTPInput>, "disabled" | "containerClassName" | "render">, InputOTPVariants {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    validationErrors?: string[];
+    validationDetails?: ValidityState;
+    inputClassName?: string;
+    children: React.ReactNode;
+}
+declare const InputOTPRoot: ({ className, inputClassName, isDisabled, isInvalid, validationDetails, validationErrors, variant, ...props }: InputOTPRootProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPGroupProps extends ComponentPropsWithRef<"div"> {
+}
+declare const InputOTPGroup: ({ className, ...props }: InputOTPGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPSlotProps extends ComponentPropsWithRef<"div"> {
+    index: number;
+}
+declare const InputOTPSlot: ({ className, index, ...props }: InputOTPSlotProps) => import("react/jsx-runtime").JSX.Element;
+interface InputOTPSeparatorProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const InputOTPSeparator: ({ className, ...props }: InputOTPSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export type { InputOTPRootProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps };

package/dist/components/input-otp/input-otp.js

@@ -0,0 +1,139 @@
+"use client";
+import { OTPInput, OTPInputContext } from 'input-otp';
+import React__default, { useContext, createContext } from 'react';
+import { FieldErrorContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { inputOTPVariants } from './styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const InputOTPContext = /*#__PURE__*/createContext({
+  isDisabled: false,
+  isInvalid: false
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPRoot = ({
+  className,
+  inputClassName,
+  isDisabled = false,
+  isInvalid = false,
+  validationDetails,
+  validationErrors = [],
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => inputOTPVariants({
+    variant
+  }), [variant]);
+  const validation = React__default.useMemo(() => ({
+    isInvalid,
+    validationDetails,
+    validationErrors
+  }), [isInvalid, validationErrors, validationDetails]);
+  return /*#__PURE__*/jsx(InputOTPContext, {
+    value: {
+      isDisabled,
+      isInvalid,
+      slots
+    },
+    children: /*#__PURE__*/jsx(FieldErrorContext, {
+      value: validation,
+      children: /*#__PURE__*/jsx(OTPInput
+      // OTP Input package uses the `className` prop for the actual `input` element which is not visible to the user so no need to pass it to the base container
+      , {
+        className: slots.input({
+          className: inputClassName
+        }),
+        containerClassName: slots.base({
+          className
+        }),
+        "data-disabled": dataAttr(isDisabled),
+        "data-invalid": dataAttr(isInvalid),
+        "data-slot": "input-otp",
+        disabled: isDisabled,
+        ...props
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPGroup = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.group, className),
+    "data-slot": "input-otp-group",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSlot = ({
+  className,
+  index,
+  ...props
+}) => {
+  const {
+    isDisabled,
+    isInvalid,
+    slots
+  } = useContext(InputOTPContext);
+  const inputOTPContext = useContext(OTPInputContext);
+  const {
+    char,
+    hasFakeCaret,
+    isActive
+  } = inputOTPContext?.slots[index] ?? {};
+  return /*#__PURE__*/jsxs("div", {
+    ...props,
+    className: composeSlotClassName(slots?.slot, className),
+    "data-active": dataAttr(isActive),
+    "data-disabled": dataAttr(isDisabled),
+    "data-filled": dataAttr(!!char),
+    "data-invalid": dataAttr(isInvalid),
+    "data-slot": "input-otp-slot",
+    children: [char ? /*#__PURE__*/jsx("div", {
+      className: slots?.slotValue(),
+      "data-slot": "input-otp-slot-value",
+      children: char
+    }) : null, hasFakeCaret && isActive ? /*#__PURE__*/jsx("div", {
+      className: slots?.caret(),
+      "data-slot": "input-otp-caret"
+    }) : null]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "input-otp-separator",
+    ...props
+  });
+};
+
+export { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp/styles.d.ts

@@ -0,0 +1,54 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const inputOTPVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    caret: string;
+    group: string;
+    input: string;
+    separator: string;
+    slot: string;
+    slotValue: string;
+}, undefined, unknown, unknown, undefined>>;
+export type InputOTPVariants = VariantProps<typeof inputOTPVariants>;

package/dist/components/input-otp/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const inputOTPVariants = tv({
+  defaultVariants: {
+    variant: "primary"
+  },
+  slots: {
+    base: "input-otp",
+    caret: "input-otp__caret",
+    group: "input-otp__group",
+    input: "input-otp__input",
+    separator: "input-otp__separator",
+    slot: "input-otp__slot",
+    slotValue: "input-otp__slot-value"
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "input-otp--primary"
+      },
+      secondary: {
+        base: "input-otp--secondary"
+      }
+    }
+  }
+});
+
+export { inputOTPVariants };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { KbdAbbr, KbdContent, KbdRoot } from "./kbd";
+export declare const Kbd: (({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Abbr: ({ className, keyValue, ...props }: import("./kbd").KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./kbd").KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Kbd = {
+    Props: ComponentProps<typeof KbdRoot>;
+    RootProps: ComponentProps<typeof KbdRoot>;
+    AbbrProps: ComponentProps<typeof KbdAbbr>;
+    ContentProps: ComponentProps<typeof KbdContent>;
+};
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps, KbdRootProps as KbdProps } from "./kbd";
+export { kbdVariants } from "./styles";
+export type { KbdVariants } from "./styles";
+export { kbdKeysMap, kbdKeysLabelMap } from "./kbd.constants";
+export type { KbdKey } from "./kbd.constants";

package/dist/components/kbd/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { KbdRoot, KbdContent, KbdAbbr } from './kbd.js';
+export { kbdVariants } from './styles.js';
+export { kbdKeysLabelMap, kbdKeysMap } from './kbd.constants.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Kbd = Object.assign(KbdRoot, {
+  Abbr: KbdAbbr,
+  Content: KbdContent,
+  Root: KbdRoot
+});
+
+export { Kbd, KbdAbbr, KbdContent, KbdRoot };

package/dist/components/kbd/kbd.constants.d.ts

@@ -0,0 +1,3 @@
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export declare const kbdKeysMap: Record<KbdKey, string>;
+export declare const kbdKeysLabelMap: Record<KbdKey, string>;

package/dist/components/kbd/kbd.constants.js

@@ -0,0 +1,51 @@
+"use strict";
+const kbdKeysMap = {
+  alt: "⌥",
+  capslock: "⇪",
+  command: "⌘",
+  ctrl: "⌃",
+  delete: "⌫",
+  down: "↓",
+  end: "↘",
+  enter: "↵",
+  escape: "⎋",
+  fn: "Fn",
+  help: "?",
+  home: "↖",
+  left: "←",
+  option: "⌥",
+  pagedown: "⇟",
+  pageup: "⇞",
+  right: "→",
+  shift: "⇧",
+  space: "␣",
+  tab: "⇥",
+  up: "↑",
+  win: "⌘"
+};
+const kbdKeysLabelMap = {
+  alt: "Alt",
+  capslock: "Caps Lock",
+  command: "Command",
+  ctrl: "Control",
+  delete: "Delete",
+  down: "Down",
+  end: "End",
+  enter: "Enter",
+  escape: "Escape",
+  fn: "Fn",
+  help: "Help",
+  home: "Home",
+  left: "Left",
+  option: "Option",
+  pagedown: "Page Down",
+  pageup: "Page Up",
+  right: "Right",
+  shift: "Shift",
+  space: "Space",
+  tab: "Tab",
+  up: "Up",
+  win: "Win"
+};
+
+export { kbdKeysLabelMap, kbdKeysMap };

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,24 @@
+import type { KbdKey } from "./kbd.constants";
+import type { KbdVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+interface KbdRootProps extends ComponentPropsWithRef<"kbd">, KbdVariants {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdRoot: ({ children, className, variant, ...props }: KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdAbbrProps extends ComponentPropsWithRef<"abbr"> {
+    className?: string;
+    /**
+     * The keyboard key to display
+     */
+    keyValue: KbdKey;
+}
+declare const KbdAbbr: ({ className, keyValue, ...props }: KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdContentProps extends ComponentPropsWithRef<"span"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdContent: ({ children, className, ...props }: KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps };

package/dist/components/kbd/kbd.js

@@ -0,0 +1,76 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { kbdKeysMap, kbdKeysLabelMap } from './kbd.constants.js';
+import { kbdVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const KbdContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => kbdVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(KbdContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("kbd", {
+      ...props,
+      className: slots.base({
+        className
+      }),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Abbr
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdAbbr = ({
+  className,
+  keyValue,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("abbr", {
+    className: composeSlotClassName(slots?.abbr, className),
+    title: kbdKeysLabelMap[keyValue],
+    ...props,
+    children: kbdKeysMap[keyValue]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.content, className),
+    ...props,
+    children: children
+  });
+};
+
+export { KbdAbbr, KbdContent, KbdRoot };

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

@@ -0,0 +1,30 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, undefined, {
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        light: string;
+    };
+}, {
+    abbr: string;
+    base: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type KbdVariants = VariantProps<typeof kbdVariants>;

package/dist/components/kbd/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const kbdVariants = tv({
+  defaultVariants: {},
+  slots: {
+    abbr: "kbd__abbr",
+    base: "kbd",
+    content: "kbd__content"
+  },
+  variants: {
+    variant: {
+      default: "kbd--default",
+      light: "kbd--light"
+    }
+  }
+});
+
+export { kbdVariants };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { LabelRoot } from "./label";
+export declare const Label: (({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Label = {
+    Props: ComponentProps<typeof LabelRoot>;
+    RootProps: ComponentProps<typeof LabelRoot>;
+};
+export { LabelRoot };
+export type { LabelRootProps, LabelRootProps as LabelProps } from "./label";
+export { labelVariants } from "./styles";
+export type { LabelVariants } from "./styles";

package/dist/components/label/index.js

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

package/dist/components/label/label.d.ts

@@ -0,0 +1,8 @@
+import type { LabelVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { Label as LabelPrimitive } from "react-aria-components";
+interface LabelRootProps extends ComponentPropsWithRef<typeof LabelPrimitive>, LabelVariants {
+}
+declare const LabelRoot: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+export { LabelRoot };
+export type { LabelRootProps };