@knkcs/anker 0.0.1

package/dist/theme/index.d.ts

@@ -0,0 +1,496 @@
+import * as _chakra_ui_react from '@chakra-ui/react';
+
+/**
+ * Motion tokens for consistent animation timing across components.
+ */
+declare const durations: {
+    fast: {
+        value: string;
+    };
+    normal: {
+        value: string;
+    };
+    slow: {
+        value: string;
+    };
+};
+declare const easings: {
+    "ease-in": {
+        value: string;
+    };
+    "ease-out": {
+        value: string;
+    };
+    "ease-in-out": {
+        value: string;
+    };
+};
+
+/**
+ * Raw color scales for the design system.
+ *
+ * `primary` is the UI blue (optimized for web contrast/readability),
+ * `secondary` is the brand orange (anchored to brand guideline #e9580c),
+ * `gray` is a blue-tinted gray scale, and `brand` contains the exact
+ * hex values from the knk Brand Guidelines (October 2021) for use in
+ * branding elements like headers, logos, and about pages.
+ *
+ * NOTE: The primary UI blue (#2087d7) intentionally differs from the brand
+ * guideline blue (#004576). The brand blue is a deep navy designed for print;
+ * the UI blue is brighter for web accessibility and matches the existing Core app.
+ */
+declare const colors: {
+    primary: {
+        "50": {
+            value: string;
+        };
+        "100": {
+            value: string;
+        };
+        "200": {
+            value: string;
+        };
+        "300": {
+            value: string;
+        };
+        "400": {
+            value: string;
+        };
+        "500": {
+            value: string;
+        };
+        "600": {
+            value: string;
+        };
+        "700": {
+            value: string;
+        };
+        "800": {
+            value: string;
+        };
+        "900": {
+            value: string;
+        };
+        "950": {
+            value: string;
+        };
+    };
+    secondary: {
+        "50": {
+            value: string;
+        };
+        "100": {
+            value: string;
+        };
+        "200": {
+            value: string;
+        };
+        "300": {
+            value: string;
+        };
+        "400": {
+            value: string;
+        };
+        "500": {
+            value: string;
+        };
+        "600": {
+            value: string;
+        };
+        "700": {
+            value: string;
+        };
+        "800": {
+            value: string;
+        };
+        "900": {
+            value: string;
+        };
+    };
+    brand: {
+        blue: {
+            value: string;
+        };
+        navy: {
+            value: string;
+        };
+        "light-blue": {
+            value: string;
+        };
+        orange: {
+            value: string;
+        };
+        gold: {
+            value: string;
+        };
+        "light-gray": {
+            value: string;
+        };
+    };
+    gray: {
+        "50": {
+            value: string;
+        };
+        "100": {
+            value: string;
+        };
+        "200": {
+            value: string;
+        };
+        "300": {
+            value: string;
+        };
+        "400": {
+            value: string;
+        };
+        "500": {
+            value: string;
+        };
+        "600": {
+            value: string;
+        };
+        "700": {
+            value: string;
+        };
+        "800": {
+            value: string;
+        };
+        "900": {
+            value: string;
+        };
+    };
+};
+
+/**
+ * Border-radius tokens.
+ *
+ * Bumped for a more modern, rounded feel.
+ * Previous: sm=0.25, md=0.375, lg=0.5, xl=0.75, 2xl=1
+ */
+declare const radii: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};
+
+/**
+ * Semantic tokens for colors and shadows.
+ *
+ * These map abstract names (bg-canvas, accent, border, etc.) to raw color
+ * scale values, with automatic light/dark mode variants.
+ *
+ * Shadows are consolidated here from the legacy `foundations/shadows.ts`
+ * (static strings) and `foundations/tokens.ts` (responsive token objects).
+ * Only the token-based system is kept.
+ */
+declare const semanticTokens: {
+    colors: {
+        "bg-canvas": {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        "bg-surface": {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        "bg-subtle": {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        "bg-muted": {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        default: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        inverted: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        emphasized: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        muted: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        subtle: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        border: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        accent: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        success: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        error: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        primary: {
+            contrast: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            fg: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            subtle: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            muted: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            emphasized: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            solid: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            focusRing: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            border: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+        };
+        "bg-accent": {
+            value: string;
+        };
+        "bg-accent-subtle": {
+            value: string;
+        };
+        "bg-accent-muted": {
+            value: string;
+        };
+        "on-accent": {
+            value: string;
+        };
+        "on-accent-muted": {
+            value: string;
+        };
+        "on-accent-subtle": {
+            value: string;
+        };
+    };
+    shadows: {
+        xs: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        sm: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        md: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        lg: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        xl: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    opacity: {
+        disabled: {
+            value: number;
+        };
+        readOnly: {
+            value: number;
+        };
+    };
+};
+
+/**
+ * Custom spacing additions that extend the Chakra default scale.
+ */
+declare const space: {
+    "1.5": string;
+    "2.5": string;
+    "3.5": string;
+    "4.5": string;
+};
+
+/**
+ * Font families and text style presets.
+ *
+ * Merged from the Core monolith's `foundations/fonts.ts` and
+ * `foundations/text-styles.ts` into a single module.
+ */
+declare const fonts: {
+    heading: string;
+    body: string;
+};
+declare const textStyles: {
+    "7xl": {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    "6xl": {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    "5xl": {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    "4xl": {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    "3xl": {
+        fontSize: string;
+        lineHeight: string;
+    };
+    "2xl": {
+        fontSize: string;
+        lineHeight: string;
+    };
+    xl: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    lg: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    md: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    sm: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    xs: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+
+/**
+ * Z-index scale for consistent stacking order.
+ *
+ * dropdown < sticky < overlay < modal < popover < toast
+ */
+declare const zIndex: {
+    dropdown: {
+        value: number;
+    };
+    sticky: {
+        value: number;
+    };
+    overlay: {
+        value: number;
+    };
+    modal: {
+        value: number;
+    };
+    popover: {
+        value: number;
+    };
+    toast: {
+        value: number;
+    };
+};
+
+type Dict = {
+    [key: string]: unknown;
+};
+/**
+ * Get the color raw value from theme
+ * @param theme - the theme object
+ * @param color - the color path ("green.200")
+ * @param fallback - the fallback color
+ */
+declare const getColor: (theme: Dict, color: string, fallback?: string) => string;
+/**
+ * Make a color transparent
+ * @param color - the color in hex, rgb, or hsl
+ * @param opacity - the amount of opacity the color should have (0-1)
+ */
+declare const transparentize: (color: string, opacity: number) => (theme: Dict) => string;
+
+declare const system: _chakra_ui_react.SystemContext;
+type CustomTheme = typeof system;
+
+export { type CustomTheme, colors, system as default, durations, easings, fonts, getColor, radii, semanticTokens, space, textStyles, transparentize, zIndex };

package/dist/theme/index.js

@@ -0,0 +1,3 @@
+export { colors_default as colors, theme_default as default, durations, easings, fonts, getColor, radii_default as radii, semantic_default as semanticTokens, spacing_default as space, textStyles, transparentize, z_index_default as zIndex } from '../chunk-4D3EY2W2.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@knkcs/anker",
+  "version": "0.0.1",
+  "description": "UI component library for the knk software group",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "types": "./dist/theme/index.d.ts"
+    },
+    "./primitives": {
+      "import": "./dist/primitives/index.js",
+      "types": "./dist/primitives/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./atoms": {
+      "import": "./dist/atoms/index.js",
+      "types": "./dist/atoms/index.d.ts"
+    },
+    "./forms": {
+      "import": "./dist/forms/index.js",
+      "types": "./dist/forms/index.d.ts"
+    },
+    "./feedback": {
+      "import": "./dist/feedback/index.js",
+      "types": "./dist/feedback/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "lint": "biome check src",
+    "lint:write": "biome check src --write",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^3.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-hook-form": "^7.0.0",
+    "react-i18next": ">=12",
+    "react-router-dom": "^6.0.0",
+    "zod": "^3.0.0"
+  },
+  "dependencies": {
+    "chakra-react-select": "^6.0.0",
+    "color2k": "^2.0.0",
+    "dayjs": "^1.11.0",
+    "lodash.debounce": "^4.0.0",
+    "lucide-react": "^0.400.0",
+    "next-themes": "^0.4.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.0",
+    "@chakra-ui/react": "^3.33.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@tanstack/react-table": "^8.20.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/lodash.debounce": "^4.0.9",
+    "i18next": "^23.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.0",
+    "react-i18next": "^14.0.0",
+    "react-router-dom": "^6.28.0",
+    "remark-gfm": "^4.0.0",
+    "storybook": "^8.4.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "zod": "^3.23.0"
+  },
+  "license": "SEE LICENSE IN LICENSE"
+}