@infonomic/uikit 1.0.1 → 1.1.0

package/README.md

@@ -19,20 +19,19 @@ We built this with the following goals in mind:
 
 ## Getting Started
 
-Install packages and build once...
+Install packages
 
-`pnpm install && pnpm build`
+`npm install @infonomic/uikit`
 
-To start the Next.js 15 and Astro apps in dev mode...
+or...
 
-`pnpm dev`
+`pnpm add @infonomic/uikit`
 
-To start Storybook for the ui kit.
+And then in your application...
 
-`cd packages/uikt`
+```ts
+import { Button, Card, Container, Section } from '@infonomic/uikit/react
 
-`pnpm storybook`
+```
 
-## Note
-
-UI kit vars / colors have been registered with Tailwind in Next.js
+At the moment docs are in the main repo and stories are available via Storybook.

package/dist/components/avatar/avatar.d.ts

@@ -1,3 +1,5 @@
 import type React from 'react';
-export declare const Avatar: () => React.JSX.Element;
+export declare const Avatar: ({ initials }: {
+    initials: string;
+}) => React.JSX.Element;
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,eAAO,MAAM,MAAM,QAAO,KAAK,CAAC,GAAG,CAAC,OASnC,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAG,KAAK,CAAC,GAAG,CAAC,OASrE,CAAA"}

package/dist/components/avatar/avatar.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "radix-ui";
 import avatar_module from "./avatar.module.js";
 const url = 'https://picsum.photos/150';
-const avatar_Avatar = ()=>/*#__PURE__*/ jsxs(Avatar.Root, {
+const avatar_Avatar = ({ initials })=>/*#__PURE__*/ jsxs(Avatar.Root, {
         className: avatar_module["avatar-root"],
         children: [
             /*#__PURE__*/ jsx(Avatar.Image, {
@@ -16,7 +16,7 @@ const avatar_Avatar = ()=>/*#__PURE__*/ jsxs(Avatar.Root, {
                 delayMs: 600,
                 children: /*#__PURE__*/ jsx("span", {
                     className: avatar_module["avatar-text"],
-                    children: "AB"
+                    children: initials
                 })
             })
         ]

package/dist/components/notifications/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI/C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAWD,eAAO,MAAM,KAAK,GAAkB,mEASjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAuEvB,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI/C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAWD,eAAO,MAAM,KAAK,GAAkB,mEASjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqEvB,CAAA"}

package/dist/components/notifications/alert.js

@@ -1,13 +1,13 @@
 'use client'
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import classnames from "classnames";
-import { Button } from "../button/button.js";
+import { useEffect, useState } from "react";
 import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
 import { SuccessIcon } from "../../icons/success-icon.js";
 import { WarningIcon } from "../../icons/warning-icon.js";
+import { Button } from "../button/button.js";
 import alert_module from "./alert.module.js";
 const alertIcons = {
     primary: WarningIcon,
@@ -35,48 +35,44 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
             [alert_module.fade]: fade
         }),
         ...rest,
-        children: null != title ? /*#__PURE__*/ jsx(Fragment, {
-            children: /*#__PURE__*/ jsxs("div", {
-                className: alert_module["alert-with-title"],
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: classnames(alert_module.header),
-                        children: [
-                            icon && /*#__PURE__*/ jsx(Icon, {
-                                useSprite: true,
-                                className: alert_module.icon
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                className: classnames(alert_module.title),
-                                children: /*#__PURE__*/ jsx("span", {
-                                    children: title
-                                })
-                            }),
-                            true === close && /*#__PURE__*/ jsx(Button, {
-                                intent: intent,
-                                variant: "filled",
-                                "aria-label": "Close",
-                                className: classnames(alert_module.close),
-                                type: "button",
-                                onClick: handleOnClose,
-                                ...rest,
-                                children: /*#__PURE__*/ jsx(CloseIcon, {
-                                    height: "12px",
-                                    width: "12px"
-                                })
+        children: null != title ? /*#__PURE__*/ jsxs("div", {
+            className: alert_module["alert-with-title"],
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames(alert_module.header),
+                    children: [
+                        icon && /*#__PURE__*/ jsx(Icon, {
+                            className: alert_module.icon
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames(alert_module.title),
+                            children: /*#__PURE__*/ jsx("span", {
+                                children: title
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: classnames(alert_module.content),
-                        children: children
-                    })
-                ]
-            })
+                        }),
+                        true === close && /*#__PURE__*/ jsx(Button, {
+                            intent: intent,
+                            variant: "filled",
+                            "aria-label": "Close",
+                            className: classnames(alert_module.close),
+                            type: "button",
+                            onClick: handleOnClose,
+                            ...rest,
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                height: "12px",
+                                width: "12px"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classnames(alert_module.content),
+                    children: children
+                })
+            ]
         }) : /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 icon && /*#__PURE__*/ jsx(Icon, {
-                    useSprite: true,
                     className: alert_module.icon
                 }),
                 /*#__PURE__*/ jsx("div", {

package/dist/components/notifications/toast.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Toast as ToastPrimitive } from 'radix-ui';
+import React from 'react';
 import type { IconType, Intent, OnOpenChange, Position } from './@types/toast.js';
 export interface ToastProps extends React.InputHTMLAttributes<HTMLLIElement> {
     intent?: Intent;

package/dist/components/notifications/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/toast.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAalD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AASjF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,6CAA0B,CAAA;AACpD,eAAO,MAAM,aAAa,4GAA0B,CAAA;AAIpD,eAAO,MAAM,KAAK,GAAkB,kGAYjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;CACrC,sBAqEA,CAAA"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/toast.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAUjF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,6CAA0B,CAAA;AACpD,eAAO,MAAM,aAAa,4GAA0B,CAAA;AAIpD,eAAO,MAAM,KAAK,GAAkB,kGAYjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;CACrC,sBAqEA,CAAA"}

package/dist/components/notifications/toast.js

@@ -2,15 +2,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusTrap, useMergedRef } from "@mantine/hooks";
 import classnames from "classnames";
-import react from "react";
 import { Toast as external_radix_ui_Toast } from "radix-ui";
+import react from "react";
+import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
 import { SuccessIcon } from "../../icons/success-icon.js";
 import { WarningIcon } from "../../icons/warning-icon.js";
 import { Button } from "../button/button.js";
 import toast_module from "./toast.module.js";
-import { CloseIcon } from "../../icons/close-icon.js";
 const toastIcons = {
     success: SuccessIcon,
     info: InfoIcon,

package/dist/components/scroll-area/scroll-area_module.css

@@ -47,7 +47,7 @@
 
   .thumb-G2gkhj {
     background: var(--primary-100);
-    border-radius: var(--scrollbar-size);
+    border-radius: var(--border-radius-sm);
     flex: 1;
     position: relative;
   }

package/dist/icons/close-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/icons/close-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,eAAO,MAAM,SAAS;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoB5F,CAAA"}
+{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/icons/close-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,SAAS;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoB5F,CAAA"}

package/dist/icons/danger-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const DangerIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const DangerIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=danger-icon.d.ts.map

package/dist/icons/danger-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger-icon.d.ts","sourceRoot":"","sources":["../../src/icons/danger-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,UAAU,GAAI,iDAKxB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"danger-icon.d.ts","sourceRoot":"","sources":["../../src/icons/danger-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,UAAU,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUtF,CAAA"}

package/dist/icons/danger-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-danger';
-const DangerIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const DangerIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-danger"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('danger-icon', className),
@@ -13,9 +12,7 @@ const DangerIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
             })
         })

package/dist/icons/info-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const InfoIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const InfoIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=info-icon.d.ts.map

package/dist/icons/info-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"info-icon.d.ts","sourceRoot":"","sources":["../../src/icons/info-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,QAAQ,GAAI,iDAKtB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"info-icon.d.ts","sourceRoot":"","sources":["../../src/icons/info-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUpF,CAAA"}

package/dist/icons/info-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-info';
-const InfoIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const InfoIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-info"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('info-icon', className),
@@ -13,9 +12,7 @@ const InfoIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
             })
         })

package/dist/icons/primary-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const PrimaryIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const PrimaryIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=primary-icon.d.ts.map

package/dist/icons/primary-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primary-icon.d.ts","sourceRoot":"","sources":["../../src/icons/primary-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUxB,CAAA"}
+{"version":3,"file":"primary-icon.d.ts","sourceRoot":"","sources":["../../src/icons/primary-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/primary-icon.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const PrimaryIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const PrimaryIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-primary"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('primary-icon', className),

package/dist/icons/success-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const SuccessIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const SuccessIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=success-icon.d.ts.map

package/dist/icons/success-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"success-icon.d.ts","sourceRoot":"","sources":["../../src/icons/success-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"success-icon.d.ts","sourceRoot":"","sources":["../../src/icons/success-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/success-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-success';
-const SuccessIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const SuccessIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-success"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('success-icon', className),
@@ -13,9 +12,7 @@ const SuccessIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
             })
         })

package/dist/icons/types/icon.d.ts

@@ -5,6 +5,5 @@ export interface IconProps extends React.ComponentProps<'div'> {
     stroke?: string;
     width?: string;
     height?: string;
-    useSprite?: boolean;
 }
 //# sourceMappingURL=icon.d.ts.map

package/dist/icons/types/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/icons/types/icon.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/icons/types/icon.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/dist/icons/warning-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const WarningIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const WarningIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=warning-icon.d.ts.map

package/dist/icons/warning-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"warning-icon.d.ts","sourceRoot":"","sources":["../../src/icons/warning-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"warning-icon.d.ts","sourceRoot":"","sources":["../../src/icons/warning-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/warning-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-warning';
-const WarningIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const WarningIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-warning"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('warning-icon', className),
@@ -13,9 +12,7 @@ const WarningIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
             })
         })

package/dist/widgets/datepicker/datepicker.js

@@ -3,26 +3,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import { format } from "date-fns";
 import { Popover } from "radix-ui";
-import { useRef, useState } from "react";
-import { Button, IconButton } from "../../components/button/index.js";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../components/button/button.js";
+import { IconButton } from "../../components/button/icon-button.js";
 import { Calendar } from "../../components/calendar/calendar.js";
 import { Input, InputAdornment } from "../../components/input/index.js";
 import { ScrollArea } from "../../components/scroll-area/scroll-area.js";
 import { CalendarIcon } from "../../icons/calendar-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import datepicker_module from "./datepicker.module.js";
-function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = 'Date', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
+function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [time, setTime] = useState('08:00');
-    const [date, setDate] = useState(initialValue ?? new Date());
+    const [date, setDate] = useState(()=>{
+        if (initialValue) return initialValue;
+        if (null == initialValue && true === required) return new Date();
+        return null;
+    });
     const [month, setMonth] = useState(date);
     const calendarRef = useRef(null);
     const inputRef = useRef(null);
+    const hasInitialized = useRef(false);
     const handleClear = ()=>{
-        setDate(void 0);
         if ((null == inputRef ? void 0 : inputRef.current) != null) inputRef.current.value = '';
+        setDate(null);
+        onDateChange(null);
         onClear();
-        onDateChange(void 0);
     };
     const handleOnDateChange = (value)=>{
         if (null != onDateChange && 'function' == typeof onDateChange) onDateChange(value);
@@ -33,6 +39,12 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
             setIsOpen(true);
         }
     };
+    useEffect(()=>{
+        if (null == initialValue && null != date && true === required && false === hasInitialized.current) {
+            hasInitialized.current = true;
+            onDateChange(date);
+        }
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: classnames(datepicker_module.container, containerClassName),
         children: [
@@ -44,7 +56,9 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                 },
                 children: /*#__PURE__*/ jsx(Input, {
                     id: id,
+                    label: label,
                     readOnly: true,
+                    required: required,
                     name: name,
                     variant: variant,
                     intent: intent,
@@ -58,7 +72,7 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                         e.stopPropagation();
                         setIsOpen(true);
                     },
-                    value: date ? `${format(date, 'PP HH:mm')}` : 'Pick a date',
+                    value: date ? `${format(date, 'PP HH:mm')}` : '',
                     placeHolder: placeHolderText,
                     helpText: helpText,
                     disabled: false,
@@ -130,8 +144,8 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                                                 mode: "single",
                                                 required: true,
                                                 captionLayout: "dropdown",
-                                                selected: date,
-                                                month: month,
+                                                selected: date ?? void 0,
+                                                month: month ?? void 0,
                                                 onMonthChange: setMonth,
                                                 onSelect: (selectedDate)=>{
                                                     if (selectedDate) {

package/package.json

@@ -2,7 +2,8 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.1.0",
+  "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [
     "uikit",
@@ -22,7 +23,7 @@
   "module": "./dist/react.js",
   "main": "./dist/react.js",
   "files": [
-    "dist/",
+    "dist",
     "src/astro.js"
   ],
   "exports": {
@@ -30,6 +31,7 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
+      "main": "./dist/react.js",
       "default": "./dist/react.js"
     },
     "./styles.css": {
@@ -86,7 +88,11 @@
     "vitest": "^3.2.4"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "files": [
+      "dist/",
+      "src/astro.js"
+    ]
   },
   "scripts": {
     "dev": "run-p dev:*",