@infonomic/uikit 5.30.0 → 5.32.0

package/README.md

@@ -52,11 +52,12 @@ And then in your application in a global.css or other root CSS file...
 
 ```css
 /**
- * Core uikit styles including var system for breakpoints,
- * colors, scales, utils  etc., which can be optionally
+ * Optional reset and core styles including var system for 
+ * breakpoints, colors, scales, utils  etc., which can be
  * integrated with Tailwind (colors, breakpoints etc.) via
  * Tailwind theme configuration.
  */
+@import '@infonomic/uikit/reset.css';
 @import '@infonomic/uikit/styles.css';
 
 /**
@@ -98,33 +99,6 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
 
 @custom-variant dark (&:is(.dark *));
 
-/* 
-   Set the utility class in Tailwind to match our own, as for now
-   at least, we add the 'container' class attribute to our container
-   component - which conflicts with Tailwind's own container utility.
-*/
-@utility container {
-  width: 100%;
-  padding: 0 16px;
-  margin: 0 auto;
-  max-width: 960px;
-
-  /* Large */
-  @media (min-width: 1050px) {
-    max-width: 1024px;
-  }
-
-  /* X-Large */
-  @media (min-width: 1230px) {
-    max-width: 1190px;
-  }
-
-  /* 2X-Large */
-  @media (min-width: 1500px) {
-    max-width: 1400px;
-  }
-}
-
 @theme {
   --breakpoint-*: initial;
   --breakpoint-sm: 640px;

package/dist/components/forms/checkbox-group.d.ts

@@ -1,6 +1,8 @@
 import type React from 'react';
 export interface CheckboxGroupProps {
     groupName: string;
+    className?: string;
+    checkBoxClasses?: string;
     checkBoxes: {
         id: string;
         label: string;

package/dist/components/forms/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6DtD,CAAA"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}

package/dist/components/forms/checkbox-group.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import classnames from "classnames";
 import { Checkbox } from "./checkbox.js";
-const CheckboxGroup = ({ groupName, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
+const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
     let initialValue = [];
     if (void 0 !== controlledValue && controlledValue.length > 0) initialValue = controlledValue.split(',');
     else if (void 0 !== defaultValues) initialValue = defaultValues;
@@ -28,11 +29,12 @@ const CheckboxGroup = ({ groupName, checkBoxes, defaultValues, controlledValue,
         onChange?.(s);
     };
     return /*#__PURE__*/ jsx("div", {
-        className: "space-y-2",
+        className: classnames('infonomic-checkbox-group', className),
         children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
                 id: `${groupName}-${cb.id}`,
                 name: `${groupName}-${cb.id}`,
                 label: cb.label,
+                checkBoxClasses: checkBoxClasses,
                 checked: selected.includes(cb.id),
                 disabled: disabled,
                 onCheckedChange: (checked)=>handleCheckboxChange(cb.id, checked)

package/dist/widgets/datepicker/datepicker.js

@@ -47,7 +47,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
         }
     });
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames(datepicker_module.container, containerClassName),
+        className: classnames('infonomic-datepicker-container', datepicker_module.container, containerClassName),
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: {
@@ -65,8 +65,8 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     intent: intent,
                     inputSize: inputSize,
                     ref: inputRef,
-                    className: classnames(datepicker_module.input, inputClassName),
-                    inputWrapperClassName: classnames(datepicker_module["input-wrapper"], inputWrapperClassName),
+                    className: classnames('infonomic-datepicker-input', datepicker_module.input, inputClassName),
+                    inputWrapperClassName: classnames('infonomic-datepicker-input-wrapper', datepicker_module["input-wrapper"], inputWrapperClassName),
                     onKeyDown: handleOnKeyDown,
                     onClick: (e)=>{
                         e.preventDefault();
@@ -134,10 +134,10 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     /*#__PURE__*/ jsx(Popover.Portal, {
                         children: /*#__PURE__*/ jsxs(Popover.Content, {
                             sideOffset: 5,
-                            className: classnames(datepicker_module.content, contentClassName),
+                            className: classnames('infonomic-datepicker-content', datepicker_module.content, contentClassName),
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: datepicker_module["content-components"],
+                                    className: classnames('infonomic-datepicker-content-components', datepicker_module["content-components"]),
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
                                             ref: calendarRef,
@@ -195,20 +195,20 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: datepicker_module["status-and-actions"],
+                                    className: classnames('infonomic-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
-                                            className: datepicker_module["content-status"],
+                                            className: classnames('infonomic-datepicker-content-status', datepicker_module["content-status"]),
                                             children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
                                         }),
                                         /*#__PURE__*/ jsxs("div", {
-                                            className: datepicker_module["content-actions"],
+                                            className: classnames('infonomic-datepicker-content-actions', datepicker_module["content-actions"]),
                                             children: [
                                                 /*#__PURE__*/ jsx("div", {
                                                     children: /*#__PURE__*/ jsx(Button, {
                                                         variant: "outlined",
                                                         size: "sm",
-                                                        className: datepicker_module["content-actions-button"],
+                                                        className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                         onClick: ()=>{
                                                             const today = new Date();
                                                             setDate(today);
@@ -227,7 +227,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                         /*#__PURE__*/ jsx(Button, {
                                                             size: "sm",
                                                             intent: "noeffect",
-                                                            className: datepicker_module["content-actions-button"],
+                                                            className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
                                                                 setIsOpen(false);
                                                             },
@@ -236,7 +236,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                         /*#__PURE__*/ jsx(Button, {
                                                             variant: "outlined",
                                                             size: "sm",
-                                                            className: datepicker_module["content-actions-button"],
+                                                            className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
                                                                 setIsOpen(false);
                                                                 handleOnDateChange(date);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.30.0",
+  "version": "5.32.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/forms/checkbox-group.tsx

@@ -3,10 +3,14 @@
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
+import cx from 'classnames'
+
 import { Checkbox } from './checkbox.js'
 
 export interface CheckboxGroupProps {
   groupName: string
+  className?: string
+  checkBoxClasses?: string,
   checkBoxes: { id: string; label: string }[]
   defaultValues?: string[]
   controlledValue?: string
@@ -16,6 +20,8 @@ export interface CheckboxGroupProps {
 
 export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   groupName,
+  className,
+  checkBoxClasses,
   checkBoxes,
   defaultValues,
   controlledValue,
@@ -61,13 +67,14 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   }
 
   return (
-    <div className="space-y-2">
+    <div className={cx('infonomic-checkbox-group', className)}>
       {checkBoxes.map((cb) => (
         <Checkbox
           key={cb.id}
           id={`${groupName}-${cb.id}`}
           name={`${groupName}-${cb.id}`}
           label={cb.label}
+          checkBoxClasses={checkBoxClasses}
           checked={selected.includes(cb.id)}
           disabled={disabled}
           onCheckedChange={(checked) => handleCheckboxChange(cb.id, checked)}

package/src/widgets/datepicker/datepicker.stories.tsx

@@ -19,6 +19,7 @@ export const Default = (): React.JSX.Element => {
           onDateChange={handleDateChange}
           id="published_on"
           name="published_on"
+          yearsInPast={70}
           variant="outlined"
           helpText="Select published on date."
         />
@@ -32,6 +33,7 @@ export const Default = (): React.JSX.Element => {
           id="published_on"
           name="published_on"
           variant="outlined"
+          yearsInPast={70}
           helpText="Select published on date."
         />
       </div>

package/src/widgets/datepicker/datepicker.tsx

@@ -136,7 +136,7 @@ export function DatePicker({
   })
 
   return (
-    <div className={cx(styles.container, containerClassName)}>
+    <div className={cx('infonomic-datepicker-container', styles.container, containerClassName)}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-8)' }}>
         <Input
           id={id}
@@ -148,8 +148,8 @@ export function DatePicker({
           intent={intent}
           inputSize={inputSize}
           ref={inputRef}
-          className={cx(styles.input, inputClassName)}
-          inputWrapperClassName={cx(styles['input-wrapper'], inputWrapperClassName)}
+          className={cx('infonomic-datepicker-input', styles.input, inputClassName)}
+          inputWrapperClassName={cx('infonomic-datepicker-input-wrapper', styles['input-wrapper'], inputWrapperClassName)}
           onKeyDown={handleOnKeyDown}
           onClick={(e) => {
             e.preventDefault()
@@ -200,8 +200,8 @@ export function DatePicker({
           </div>
         </Popover.Trigger>
         <Popover.Portal>
-          <Popover.Content sideOffset={5} className={cx(styles.content, contentClassName)}>
-            <div className={styles['content-components']}>
+          <Popover.Content sideOffset={5} className={cx('infonomic-datepicker-content', styles.content, contentClassName)}>
+            <div className={cx('infonomic-datepicker-content-components', styles['content-components'])}>
               <div ref={calendarRef}>
                 <Calendar
                   mode="single"
@@ -270,16 +270,16 @@ export function DatePicker({
                 </div>
               )}
             </div>
-            <div className={styles['status-and-actions']}>
-              <div className={styles['content-status']}>
+            <div className={cx('infonomic-datepicker-status-and-actions', styles['status-and-actions'])}>
+              <div className={cx('infonomic-datepicker-content-status', styles['content-status'])}>
                 {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
               </div>
-              <div className={styles['content-actions']}>
+              <div className={cx('infonomic-datepicker-content-actions', styles['content-actions'])}>
                 <div>
                   <Button
                     variant="outlined"
                     size="sm"
-                    className={styles['content-actions-button']}
+                    className={cx('infonomic-datepicker-content-actions-button', styles['content-actions-button'])}
                     onClick={() => {
                       const today = new Date()
                       setDate(today)
@@ -294,7 +294,7 @@ export function DatePicker({
                   <Button
                     size="sm"
                     intent="noeffect"
-                    className={styles['content-actions-button']}
+                    className={cx('infonomic-datepicker-content-actions-button', styles['content-actions-button'])}
                     onClick={() => {
                       setIsOpen(false)
                     }}
@@ -304,7 +304,7 @@ export function DatePicker({
                   <Button
                     variant="outlined"
                     size="sm"
-                    className={styles['content-actions-button']}
+                    className={cx('infonomic-datepicker-content-actions-button', styles['content-actions-button'])}
                     onClick={() => {
                       setIsOpen(false)
                       handleOnDateChange(date)