@cognitiv/components-web 1.0.4 → 1.1.0

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

@@ -0,0 +1,83 @@
+export * from "../../components/accordion/styles";
+export * from "../../components/alert/styles";
+export * from "../../components/alert-dialog/styles";
+export * from "../../components/autocomplete/styles";
+export * from "../../components/avatar/styles";
+export * from "../../components/badge/styles";
+export * from "../../components/breadcrumbs/styles";
+export * from "../../components/button/styles";
+export * from "../../components/button-group/styles";
+export * from "../../components/calendar/styles";
+export * from "../../components/calendar-year-picker/styles";
+export * from "../../components/range-calendar/styles";
+export * from "../../components/card/styles";
+export * from "../../components/checkbox/styles";
+export * from "../../components/checkbox-group/styles";
+export * from "../../components/chip/styles";
+export * from "../../components/color-area/styles";
+export * from "../../components/color-field/styles";
+export * from "../../components/color-input-group/styles";
+export * from "../../components/color-picker/styles";
+export * from "../../components/color-slider/styles";
+export * from "../../components/color-swatch/styles";
+export * from "../../components/close-button/styles";
+export * from "../../components/color-swatch-picker/styles";
+export * from "../../components/combo-box/styles";
+export * from "../../components/date-field/styles";
+export * from "../../components/date-picker/styles";
+export * from "../../components/date-range-picker/styles";
+export * from "../../components/date-input-group/styles";
+export * from "../../components/description/styles";
+export * from "../../components/drawer/styles";
+export * from "../../components/disclosure/styles";
+export * from "../../components/disclosure-group/styles";
+export * from "../../components/dropdown/styles";
+export * from "../../components/empty-state/styles";
+export * from "../../components/error-message/styles";
+export * from "../../components/field-error/styles";
+export * from "../../components/fieldset/styles";
+export * from "../../components/header/styles";
+export * from "../../components/input/styles";
+export * from "../../components/input-group/styles";
+export * from "../../components/input-otp/styles";
+export * from "../../components/kbd/styles";
+export * from "../../components/label/styles";
+export * from "../../components/link/styles";
+export * from "../../components/list-box/styles";
+export * from "../../components/list-box-item/styles";
+export * from "../../components/list-box-section/styles";
+export * from "../../components/menu/styles";
+export * from "../../components/meter/styles";
+export * from "../../components/progress-bar/styles";
+export * from "../../components/progress-circle/styles";
+export * from "../../components/menu-item/styles";
+export * from "../../components/menu-section/styles";
+export * from "../../components/modal/styles";
+export * from "../../components/number-field/styles";
+export * from "../../components/pagination/styles";
+export * from "../../components/popover/styles";
+export * from "../../components/radio/styles";
+export * from "../../components/radio-group/styles";
+export * from "../../components/scroll-shadow/styles";
+export * from "../../components/search-field/styles";
+export * from "../../components/select/styles";
+export * from "../../components/separator/styles";
+export * from "../../components/skeleton/styles";
+export * from "../../components/slider/styles";
+export * from "../../components/spinner/styles";
+export * from "../../components/surface/styles";
+export * from "../../components/switch/styles";
+export * from "../../components/switch-group/styles";
+export * from "../../components/table/styles";
+export * from "../../components/tabs/styles";
+export * from "../../components/tag/styles";
+export * from "../../components/tag-group/styles";
+export * from "../../components/text/styles";
+export * from "../../components/textfield/styles";
+export * from "../../components/textarea/styles";
+export * from "../../components/time-field/styles";
+export * from "../../components/toast/styles";
+export * from "../../components/toggle-button/styles";
+export * from "../../components/toggle-button-group/styles";
+export * from "../../components/toolbar/styles";
+export * from "../../components/tooltip/styles";

package/dist/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { tv, cn, type VariantProps } from "tailwind-variants";
+export * from "./utils";
+export * from "./components";

package/dist/styles/utils/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Utility CSS class strings for common component patterns
+ * These are framework-agnostic and can be used with any styling approach
+ */
+export declare const focusRingClasses = "focus-visible:ring-focus focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+export declare const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--disabled-opacity)]";
+export declare const ariaDisabledClasses = "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-[var(--disabled-opacity)]";

package/dist/styles.css

@@ -0,0 +1,2 @@
+/* Placeholder file for build process */
+@import "./css/index.css";

package/dist/utils/assertion.d.ts

@@ -0,0 +1,9 @@
+export type Dict<T = any> = Record<string, T>;
+export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isEmptyArray(value: any): boolean;
+export declare function isObject(value: any): value is Dict;
+export declare function isEmptyObject(value: any): boolean;
+export declare function isEmpty(value: any): boolean;
+export type Booleanish = boolean | "true" | "false";
+export declare const dataAttr: (condition: boolean | undefined) => Booleanish;
+export declare const isNumeric: (value?: string | number) => boolean;

package/dist/utils/assertion.js

@@ -0,0 +1,3 @@
+const dataAttr = condition => condition ? "true" : undefined;
+
+export { dataAttr };

package/dist/utils/calendar.d.ts

@@ -0,0 +1,5 @@
+import type { DateValue } from "@internationalized/date";
+/**
+ * Iterates from `start` to `end` producing one DateValue per year.
+ */
+export declare function getYearRange(start?: DateValue | null, end?: DateValue | null): DateValue[];

package/dist/utils/calendar.js

@@ -0,0 +1,19 @@
+import { startOfYear } from '@internationalized/date';
+
+/**
+ * Iterates from `start` to `end` producing one DateValue per year.
+ */
+function getYearRange(start, end) {
+  const years = [];
+  if (!start || !end) return years;
+  let current = startOfYear(start);
+  while (current.compare(end) <= 0) {
+    years.push(current);
+    current = startOfYear(current.add({
+      years: 1
+    }));
+  }
+  return years;
+}
+
+export { getYearRange };

package/dist/utils/children.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement[];
+export declare const pickChildren: <T = ReactNode>(children: T | undefined, targetChild: React.ElementType) => [T | undefined, T[] | undefined];

package/dist/utils/children.js

@@ -0,0 +1,17 @@
+import { Children, isValidElement } from 'react';
+
+const pickChildren = (children, targetChild) => {
+  const target = [];
+  const withoutTargetChildren = Children.map(children, item => {
+    if (! /*#__PURE__*/isValidElement(item)) return item;
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  })?.filter(Boolean);
+  const targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutTargetChildren, targetChildren];
+};
+
+export { pickChildren };

package/dist/utils/compose.d.ts

@@ -0,0 +1,7 @@
+export { disabledClasses, focusRingClasses, ariaDisabledClasses } from "../styles/utils";
+declare function composeTwRenderProps<T>(className: string | ((v: T) => string) | undefined, tailwind?: string | ((v: T) => string | undefined)): string | ((v: T) => string);
+export declare const composeSlotClassName: (slotFn: ((args?: {
+    className?: string;
+    [key: string]: any;
+}) => string) | undefined, className?: string, variants?: Record<string, any>) => string | undefined;
+export { composeTwRenderProps };

package/dist/utils/compose.js

@@ -0,0 +1,18 @@
+import { composeRenderProps } from 'react-aria-components';
+import { cx } from 'tailwind-variants';
+
+function composeTwRenderProps(className, tailwind) {
+  return composeRenderProps(className, (className, renderProps) => {
+    const tw = typeof tailwind === "function" ? tailwind(renderProps) ?? "" : tailwind ?? "";
+    const cls = className ?? "";
+    return cx(tw, cls) ?? "";
+  });
+}
+const composeSlotClassName = (slotFn, className, variants) => {
+  return typeof slotFn === "function" ? slotFn({
+    ...(variants ?? {}),
+    className
+  }) : className;
+};
+
+export { composeSlotClassName, composeTwRenderProps };

package/dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./calendar";
+export * from "./compose";
+export * from "./logger";
+export * from "./variants";
+export { tv } from "./tv";
+export type { VariantProps } from "./tv";

package/dist/utils/logger.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Logger utility for Cognitiv Core
+ * Provides formatted console output with levels and prefixes
+ */
+interface LoggerOptions {
+    enabled?: boolean;
+    prefix?: string;
+}
+export declare class Logger {
+    private enabled;
+    private prefix;
+    constructor(options?: LoggerOptions);
+    private formatMessage;
+    private log;
+    info(message: string, ...args: any[]): void;
+    success(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+    debug(message: string, ...args: any[]): void;
+    divider(char?: string, length?: number): void;
+    newline(): void;
+}
+export {};

package/dist/utils/tv.d.ts

@@ -0,0 +1,3 @@
+import type { TV } from "tailwind-variants";
+export type { VariantProps } from "tailwind-variants";
+export declare const tv: TV;

package/dist/utils/variants.d.ts

@@ -0,0 +1,73 @@
+export declare const mapPropsVariants: <T extends Record<string, any>, K extends keyof T>(props: T, variantKeys?: K[], removeVariantProps?: boolean) => readonly [Omit<T, K> | T, Pick<T, K> | {}];
+/**
+ * Utility for creating BEM-style class names with variants
+ */
+export type VariantConfig<T extends Record<string, any>> = {
+    base: string;
+    variants?: T;
+    modifiers?: Record<string, boolean | undefined>;
+};
+/**
+ * Creates a class name builder for components with variants
+ * @param config - The variant configuration
+ * @returns A function that builds the class name string
+ *
+ * @example
+ * const getButtonClasses = createVariantBuilder({
+ *   base: 'button',
+ *   variants: {
+ *     size: 'md',
+ *     variant: 'primary'
+ *   },
+ *   modifiers: {
+ *     'icon-only': isIconOnly
+ *   }
+ * });
+ * // Returns: "button button--md button--primary button--icon-only"
+ */
+export declare function createVariantBuilder<T extends Record<string, string>>(baseClass: string): (config?: {
+    variants?: Partial<T>;
+    modifiers?: Record<string, boolean | undefined>;
+}) => string;
+/**
+ * Alternative API using a more declarative approach
+ */
+export interface VariantDefinition<V extends Record<string, readonly string[]>> {
+    base: string;
+    variants: V;
+    defaults?: Partial<{
+        [K in keyof V]: V[K][number];
+    }>;
+}
+/**
+ * Creates a typed variant class builder
+ * @param definition - The variant definition
+ * @returns A function that builds class names based on variant props
+ *
+ * @example
+ * const buttonVariants = createVariants({
+ *   base: 'button',
+ *   variants: {
+ *     size: ['sm', 'md', 'lg'] as const,
+ *     variant: ['primary', 'secondary', 'tertiary', 'ghost', 'danger'] as const,
+ *   },
+ *   defaults: {
+ *     size: 'md',
+ *     variant: 'primary'
+ *   }
+ * });
+ *
+ * const className = buttonVariants({
+ *   size: 'lg',
+ *   variant: 'danger',
+ *   modifiers: { 'icon-only': true }
+ * });
+ * // Returns: "button button--lg button--danger button--icon-only"
+ */
+export declare function createVariants<V extends Record<string, readonly string[]>>(definition: VariantDefinition<V>): (props?: { [K in keyof V]?: V[K][number] | undefined; } & {
+    modifiers?: Record<string, boolean | undefined>;
+}) => string;
+/**
+ * Type helpers for extracting variant props from a variant definition
+ */
+export type VariantPropsOf<T extends ReturnType<typeof createVariants>> = T extends (props: infer P) => string ? P : never;

package/package.json

@@ -1,94 +1,143 @@
 {
   "name": "@cognitiv/components-web",
-  "version": "1.0.4",
-  "description": "Cognitiv new UI Components library",
-  "author": "Cognitiv",
+  "version": "1.1.0",
+  "private": false,
+  "type": "module",
   "license": "MIT",
-  "repository": "https://github.com/cognitiv/components-web.git",
+  "description": "Cognitiv React UI component library built with Tailwind CSS v4",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
     },
-    "./manifest": {
-      "default": "./dist/component-manifest.json"
+    "./css": {
+      "style": "./dist/css/index.css",
+      "default": "./dist/css/index.css"
     }
   },
   "files": [
     "dist"
   ],
-  "type": "module",
   "scripts": {
-    "build": "tsup",
-    "build-storybook": "storybook build",
-    "deploy": "export AWS_PROFILE=cognitiv && sh ./scripts/deploy.sh",
+    "dev": "storybook dev --host 127.0.0.1 --port 6006 --no-open --config-dir storybook/.storybook",
+    "build": "node scripts/build.mjs --tsc",
+    "build:fast": "node scripts/build.mjs",
+    "build:storybook": "storybook build --config-dir storybook/.storybook",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 4060",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --ignore-path .prettierignore --check .",
+    "format:fix": "prettier --ignore-path .prettierignore --write .",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules",
+    "prepare": "husky"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-pro": "^7.1.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/pro-duotone-svg-icons": "^7.1.0",
-    "@fortawesome/pro-regular-svg-icons": "^7.1.0",
-    "@fortawesome/pro-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.1",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "dayjs": "^1.11.9",
-    "react-currency-input-field": "^4.0.3",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "styled-components": "^6.3.8"
+    "@radix-ui/react-avatar": "1.1.11",
+    "@react-aria/ssr": "3.9.10",
+    "@react-aria/utils": "3.33.1",
+    "@react-stately/utils": "3.11.0",
+    "@react-types/color": "3.1.4",
+    "@react-types/shared": "3.33.1",
+    "input-otp": "1.4.2",
+    "react-aria-components": "1.16.0",
+    "tailwind-merge": "3.5.0",
+    "tailwind-variants": "3.2.2",
+    "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.6",
-    "@eslint/js": "^9.39.2",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/react-webpack5": "^10.1.11",
-    "@tsconfig/create-react-app": "^2.0.10",
-    "@types/react": "^19.2.8",
-    "@types/react-dom": "^19.2.3",
-    "babel-loader": "^10.0.0",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "10.1.11",
-    "prettier": "^3.8.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "storybook": "^10.1.11",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.5.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/ui": "^2.1.8",
-    "@vitest/coverage-v8": "^2.1.8",
-    "jsdom": "^25.0.1",
-    "tslib": "^2.8.1",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
-    "vitest": "^2.1.8"
-  },
-  "engines": {
-    "node": ">=22.12.0"
+    "@babel/core": "7.29.0",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@commitlint/cli": "20.5.0",
+    "@commitlint/config-conventional": "20.5.0",
+    "@eslint/eslintrc": "3.3.5",
+    "@eslint/js": "9.39.2",
+    "@gravity-ui/icons": "2.18.0",
+    "@iconify/react": "6.0.2",
+    "@internationalized/date": "3.12.0",
+    "@next/eslint-plugin-next": "16.2.1",
+    "@react-stately/data": "3.15.2",
+    "@rollup/plugin-alias": "6.0.0",
+    "@rollup/plugin-babel": "7.0.0",
+    "@rollup/plugin-commonjs": "29.0.2",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@storybook/addon-a11y": "10.3.3",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/addon-mcp": "0.4.2",
+    "@storybook/icons": "2.0.1",
+    "@storybook/react": "10.3.3",
+    "@storybook/react-vite": "10.3.3",
+    "@tailwindcss/cli": "4.2.2",
+    "@tailwindcss/postcss": "4.2.2",
+    "@tailwindcss/vite": "4.2.2",
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
+    "@typescript-eslint/parser": "8.57.2",
+    "@vitejs/plugin-react": "6.0.1",
+    "apcach": "0.6.4",
+    "babel-plugin-react-compiler": "1.0.0",
+    "culori": "4.0.2",
+    "eslint": "9.39.2",
+    "eslint-config-next": "16.2.1",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-only-warn": "1.2.1",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.2",
+    "eslint-plugin-sort-destructure-keys": "3.0.0",
+    "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-storybook": "10.3.3",
+    "eslint-plugin-unused-imports": "4.4.1",
+    "fs-extra": "11.3.4",
+    "glob": "13.0.6",
+    "globals": "17.4.0",
+    "husky": "9.1.7",
+    "jiti": "2.6.1",
+    "lint-staged": "16.4.0",
+    "postcss": "8.5.8",
+    "prettier": "3.8.1",
+    "prettier-plugin-css-order": "2.2.0",
+    "prettier-plugin-tailwindcss": "0.7.2",
+    "react": "19.2.4",
+    "react-aria-components": "1.16.0",
+    "react-dom": "19.2.4",
+    "react-scan": "0.5.3",
+    "rimraf": "6.1.3",
+    "rollup": "4.60.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "storybook": "10.3.3",
+    "tailwindcss": "4.2.2",
+    "tsx": "4.21.0",
+    "typescript": "6.0.2",
+    "typescript-eslint": "8.57.2",
+    "vite": "8.0.2"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "styled-components": "^6.3.8"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "overrides": {
+    "shiki": "3.20.0",
+    "ts-morph": "27.0.2"
+  },
+  "engines": {
+    "node": ">=20.x"
   }
 }