@infonomic/uikit 1.0.0

package/dist/widgets/modal/modal_module.css

@@ -0,0 +1,82 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme;
+
+@layer infonomic-components {
+  .modal-wrapper-wF5Mv1 {
+    z-index: 30;
+    opacity: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  .modal-container-PPkPyj {
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    z-index: 20;
+    background-color: var(--canvas-25);
+    border: 1px solid var(--border-color);
+    width: 100%;
+    min-height: 300px;
+    max-height: 88vh;
+    margin-left: var(--spacing-2);
+    margin-right: var(--spacing-2);
+    flex-direction: column;
+    display: flex;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .modal-container-PPkPyj:is(.dark *) {
+    background: var(--canvas-800);
+  }
+
+  @media screen and (min-width: 640px) {
+    .modal-container-PPkPyj {
+      width: auto;
+      min-height: auto;
+      max-height: calc(100vh - 24px);
+      bottom: auto;
+    }
+  }
+
+  .modal-header-ewl_k2 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-5);
+    max-width: 100%;
+    display: flex;
+  }
+
+  .modal-header-ewl_k2 h2, .modal-header-ewl_k2 h3 {
+    margin: 0;
+  }
+
+  .modal-content-eDnix2 {
+    gap: var(--gap-3);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    padding-bottom: var(--spacing-3);
+    flex-direction: column;
+    flex: 1;
+    max-width: 100%;
+    display: flex;
+  }
+
+  .modal-actions-FxnG8C {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--gap-3);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-5);
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+    display: flex;
+  }
+}
+

package/dist/widgets/modal/motionDomAnimation.d.ts

@@ -0,0 +1,3 @@
+import { domAnimation } from 'motion/react';
+export default domAnimation;
+//# sourceMappingURL=motionDomAnimation.d.ts.map

package/dist/widgets/modal/motionDomAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionDomAnimation.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/motionDomAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,eAAe,YAAY,CAAA"}

package/dist/widgets/modal/motionDomAnimation.js

@@ -0,0 +1,4 @@
+'use client'
+import { domAnimation } from "motion/react";
+const motionDomAnimation = domAnimation;
+export { motionDomAnimation as default };

package/dist/widgets/modal/motionDomMax.d.ts

@@ -0,0 +1,3 @@
+import { domMax } from 'motion/react';
+export default domMax;
+//# sourceMappingURL=motionDomMax.d.ts.map

package/dist/widgets/modal/motionDomMax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionDomMax.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/motionDomMax.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,eAAe,MAAM,CAAA"}

package/dist/widgets/modal/motionDomMax.js

@@ -0,0 +1,4 @@
+'use client'
+import { domMax } from "motion/react";
+const motionDomMax = domMax;
+export { motionDomMax as default };

package/dist/widgets/search/index.js

@@ -0,0 +1 @@
+export * from "./search.js";

package/dist/widgets/search/search.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { ClassName, Intent, Size, Variant } from '../../components/input/@types/input.js';
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    variant?: Variant;
+    inputSize?: Size;
+    inputClassName?: ClassName;
+    intent?: Intent;
+    className?: ClassName;
+    ariaLabelForSearch?: string;
+    ariaLabelForClear?: string;
+    onClear?: () => void;
+    onEnter?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    validatorFn?: (value: string) => {
+        valid: boolean;
+        value: any;
+    };
+    placeHolderText?: string;
+}
+export declare function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: SearchProps): React.JSX.Element;
+//# sourceMappingURL=search.d.ts.map

package/dist/widgets/search/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/widgets/search/search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAA;AAG9F,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAC/B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,GAAG,CAAA;KACX,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAgBD,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,SAAS,EACT,cAAc,EACd,MAAM,EACN,SAAS,EACT,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,eAA0B,EAC1B,kBAA6B,EAC7B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiIjC"}

package/dist/widgets/search/search.js

@@ -0,0 +1,108 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconButton } from "../../components/button/index.js";
+import { Input, InputAdornment } from "../../components/input/index.js";
+import { CloseIcon, SearchIcon } from "../../icons/index.js";
+function fallbackSearchHandler(value) {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    if (value.length > 0) params.set('query', value);
+    else params.delete('query');
+    window.location.search = params.toString();
+}
+function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText = 'Search', ariaLabelForSearch = 'search', ariaLabelForClear = 'clear', ...rest }) {
+    const [search, setSearch] = useState(null);
+    const inputRef = useRef(null);
+    const handleClear = ()=>{
+        setSearch(null);
+        if (null != onClear) onClear();
+        else fallbackSearchHandler('');
+        if ((null == inputRef ? void 0 : inputRef.current) != null) inputRef.current.value = '';
+    };
+    const handleKeyDown = (event)=>{
+        if ('Enter' === event.key) {
+            if (null != search && search.length > 0) if (null != validatorFn) {
+                const result = validatorFn(search);
+                if (result.valid) if (null != onSearch) onSearch(search);
+                else fallbackSearchHandler(search);
+            } else if (null != onSearch) onSearch(search);
+            else fallbackSearchHandler(search);
+        }
+    };
+    const handleSearch = ()=>{
+        if (null != search && search.length > 0) if (null != validatorFn) {
+            const result = validatorFn(search);
+            if (result.valid) if (null != onSearch) onSearch(search);
+            else fallbackSearchHandler(search);
+        } else if (null != onSearch) onSearch(search);
+        else fallbackSearchHandler(search);
+    };
+    const handleChange = (event)=>{
+        setSearch(event.target.value);
+    };
+    useEffect(()=>{
+        const searchParams = new URLSearchParams(window.location.search);
+        const currentSearch = searchParams.get('query');
+        if (null != currentSearch && null == search) setSearch(currentSearch);
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ jsx(Input, {
+            variant: variant,
+            intent: intent,
+            inputSize: inputSize,
+            ref: inputRef,
+            className: inputClassName,
+            onKeyDown: handleKeyDown,
+            onChange: handleChange,
+            onClick: (e)=>{
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            id: "search",
+            defaultValue: search ?? '',
+            name: "search",
+            placeHolder: placeHolderText,
+            disabled: false,
+            error: false,
+            startAdornment: /*#__PURE__*/ jsx(InputAdornment, {
+                position: "start",
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    role: "button",
+                    intent: "noeffect",
+                    variant: "text",
+                    ripple: false,
+                    "arial-label": ariaLabelForSearch,
+                    size: "xs",
+                    onClick: ()=>{
+                        handleSearch();
+                    },
+                    children: /*#__PURE__*/ jsx(SearchIcon, {
+                        width: "20px",
+                        height: "20px"
+                    })
+                })
+            }),
+            endAdornment: /*#__PURE__*/ jsx(InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    role: "button",
+                    intent: "noeffect",
+                    variant: "text",
+                    "arial-label": ariaLabelForClear,
+                    size: "xs",
+                    onClick: ()=>{
+                        handleClear();
+                    },
+                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                        width: "16px",
+                        height: "16px"
+                    })
+                })
+            }),
+            ...rest
+        })
+    });
+}
+export { Search };

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@infonomic/uikit",
+  "private": false,
+  "license": "MIT",
+  "version": "1.0.0",
+  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
+  "keywords": [
+    "uikit",
+    "design system"
+  ],
+  "homepage": "https://github.com/infonomic/uikit",
+  "bugs": {
+    "url": "https://github.com/infonomic/uikit/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/infonomic/uikit.git",
+    "directory": "packages/uikit"
+  },
+  "sideEffects": false,
+  "types": "./dist/react.d.ts",
+  "module": "./dist/react.js",
+  "main": "./dist/react.js",
+  "files": [
+    "dist/",
+    "src/astro.js"
+  ],
+  "exports": {
+    "./astro": "./src/astro.ts",
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "default": "./dist/react.js"
+    },
+    "./styles.css": {
+      "import": "./dist/styles/styles.css",
+      "default": "./dist/styles/styles.css"
+    },
+    "./typography.css": {
+      "import": "./dist/styles/typography.css",
+      "default": "./dist/styles/typography.css"
+    }
+  },
+  "dependencies": {
+    "@mantine/hooks": "^8.2.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
+    "material-ripple-effects": "^2.0.1",
+    "motion": "^12.23.9",
+    "npm-run-all": "^4.1.5",
+    "prism-react-renderer": "^2.4.1",
+    "radix-ui": "^1.4.2",
+    "react": "19.1.0",
+    "react-day-picker": "^9.8.0",
+    "react-dom": "19.1.0",
+    "zod": "^4.0.8",
+    "zod-form-data": "^3.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.4",
+    "@astrojs/node": "9.3.0",
+    "@biomejs/biome": "2.1.2",
+    "@rsbuild/plugin-react": "^1.3.4",
+    "@rslib/core": "^0.11.0",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-links": "^9.0.18",
+    "@storybook/addon-themes": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.1.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@vitejs/plugin-react": "^4.7.0",
+    "astro": "5.12.3",
+    "chokidar": "^4.0.3",
+    "eslint-plugin-storybook": "^9.0.18",
+    "lightningcss": "^1.30.1",
+    "lightningcss-cli": "^1.30.1",
+    "storybook": "^9.0.18",
+    "typescript": "5.8.3",
+    "typescript-plugin-css-modules": "^5.2.0",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "run-p dev:*",
+    "skip:astro-compose": "node ./scripts/build-astro.js",
+    "dev:css": "node ./scripts/task-watch-css.js",
+    "skip:css": "lightningcss --sourcemap --bundle ./src/styles/styles.css ./src/styles/typography.css --output-dir ./dist/styles",
+    "dev:code": "rslib build --watch",
+    "build": "run-s build:*",
+    "build:clean": "rimraf dist build",
+    "build:code": "rslib build",
+    "skip:astro": "astro check && astro build",
+    "skip2:astro-compose": "node ./scripts/build-astro.js",
+    "build:css": "lightningcss --bundle ./src/styles/styles.css ./src/styles/typography.css --output-dir ./dist/styles",
+    "skip:post-process-css": "node ./scripts/task-merge-css.js",
+    "build:minify": "lightningcss --minify ./dist/styles/styles.css ./dist/styles/typography.css --output-dir ./dist/styles",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf node_modules dist build types .turbo",
+    "lint": "biome check . --diagnostic-level=warn",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "test": "vitest"
+  }
+}

package/src/astro.js

@@ -0,0 +1,43 @@
+import ButtonComponent from './components/button/button.astro'
+import IconButtonComponent from './components/button/icon-button.astro'
+import CardContentComponent from './components/card/card-content.astro'
+import CardDescriptionComponent from './components/card/card-description.astro'
+import CardFooterComponent from './components/card/card-footer.astro'
+import CardHeaderComponent from './components/card/card-header.astro'
+import CardTitleComponent from './components/card/card-title.astro'
+import CardComponent from './components/card/card.astro'
+import ContainerComponent from './components/container/container.astro'
+import HamburgerComponent from './components/hamburger/hamburger.astro'
+import ErrorTextComponent from './components/input/error-text.astro'
+import HelpTextComponent from './components/input/help-text.astro'
+import InputAdornmentComponent from './components/input/input-adornment.astro'
+import InputComponent from './components/input/input.astro'
+import LabelComponent from './components/input/label.astro'
+import SectionComponent from './components/section/section.astro'
+import CloseIconComponent from './icons/close-icon.astro'
+import IconElementComponent from './icons/icon-element.astro'
+import LightIconComponent from './icons/light-icon.astro'
+import MoonIconComponent from './icons/moon-icon.astro'
+import SearchIconComponent from './icons/search-icon.astro'
+
+export const Button = ButtonComponent
+export const Hamburger = HamburgerComponent
+export const IconButton = IconButtonComponent
+export const CardContent = CardContentComponent
+export const CardDescription = CardDescriptionComponent
+export const CardFooter = CardFooterComponent
+export const CardHeader = CardHeaderComponent
+export const CardTitle = CardTitleComponent
+export const Card = CardComponent
+export const Container = ContainerComponent
+export const ErrorText = ErrorTextComponent
+export const HelpText = HelpTextComponent
+export const InputAdornment = InputAdornmentComponent
+export const Input = InputComponent
+export const Label = LabelComponent
+export const Section = SectionComponent
+export const IconElement = IconElementComponent
+export const LightIcon = LightIconComponent
+export const MoonIcon = MoonIconComponent
+export const SearchIcon = SearchIconComponent
+export const CloseIcon = CloseIconComponent