@infonomic/uikit 5.42.0 → 5.43.0

package/dist/components/forms/checkbox.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .container,
   :global(.infonomic-checkbox-container) {
     width: 100%;
@@ -62,9 +63,17 @@
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
+    /* Hidden by default — prevents flash on initial render before data-state is applied */
+    opacity: 0;
+    transform: scale(0.8);
+    /* Transition handles the unchecked→unchecked no-op and the checked→unchecked exit.
+       It only fires on state changes, never on initial mount, so no flash. */
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s ease-in;
   }
 
-  /* Style for the "checked" state */
+  /* Style for the "checked" state — animation overrides the transition for bouncy entry */
   .indicator[data-state="checked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
@@ -72,10 +81,9 @@
     transform: scale(1);
   }
 
-  /* Style for the "unchecked" state */
+  /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
   .indicator[data-state="unchecked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
-    animation: checkBoxOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
@@ -88,10 +96,10 @@
     color: var(--label-color);
   }
 
-  .checkbox:disabled ~ .label,
-  .checkbox[disabled] ~ .label,
-  :global(.infonomic-checkbox):disabled ~ :global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled] ~ :global(.infonomic-checkbox-label) {
+  .checkbox:disabled~.label,
+  .checkbox[disabled]~.label,
+  :global(.infonomic-checkbox):disabled~ :global(.infonomic-checkbox-label),
+  :global(.infonomic-checkbox)[disabled]~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -115,8 +123,8 @@
     height: 16px;
   }
 
-  .sm ~ .label,
-  :global(.infonomic-checkbox-sm) ~ :global(.infonomic-checkbox-label) {
+  .sm~.label,
+  :global(.infonomic-checkbox-sm)~ :global(.infonomic-checkbox-label) {
     font-size: 0.85rem;
   }
 
@@ -132,8 +140,8 @@
     height: 18px;
   }
 
-  .md ~ .label,
-  :global(.infonomic-checkbox-md) ~ :global(.infonomic-checkbox-label) {
+  .md~.label,
+  :global(.infonomic-checkbox-md)~ :global(.infonomic-checkbox-label) {
     font-size: 0.875rem;
   }
 
@@ -149,8 +157,8 @@
     height: 22px;
   }
 
-  .lg ~ .label,
-  :global(.infonomic-checkbox-lg) ~ :global(.infonomic-checkbox-label) {
+  .lg~.label,
+  :global(.infonomic-checkbox-lg)~ :global(.infonomic-checkbox-label) {
     font-size: 1rem;
   }
 
@@ -269,16 +277,4 @@
     }
   }
 
-  /* Define keyframes for the "unchecked" state */
-  @keyframes checkBoxOut {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-  }
-}
+}

package/dist/components/forms/checkbox.module.js

@@ -7,7 +7,6 @@ const checkbox_module = {
     indicator: "indicator-uDQYoF",
     icon: "icon-gwRvT_",
     checkBoxIn: "checkBoxIn-DSnbUl",
-    checkBoxOut: "checkBoxOut-lbT33D",
     label: "label-rsCVhp",
     errorText: "errorText-nwgg63",
     sm: "sm-FMFjMf",

package/dist/components/forms/checkbox_module.css

@@ -47,6 +47,9 @@
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
+    opacity: 0;
+    transition: opacity .2s ease-in, transform .2s ease-in;
+    transform: scale(.8);
   }
 
   :is(.indicator-uDQYoF[data-state="checked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="checked"] .infonomic-checkbox-icon) {
@@ -57,7 +60,6 @@
 
   :is(.indicator-uDQYoF[data-state="unchecked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="unchecked"] .infonomic-checkbox-icon) {
     opacity: 0;
-    animation: .2s ease-in checkBoxOut-lbT33D;
     transform: scale(.8);
   }
 
@@ -207,17 +209,5 @@
       transform: scale(1);
     }
   }
-
-  @keyframes checkBoxOut-lbT33D {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(.8);
-    }
-  }
 }
 

package/dist/components/forms/select.js

@@ -45,7 +45,7 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
                                     children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
                                 }),
                                 /*#__PURE__*/ jsx(Select.Viewport, {
-                                    className: select_module.viewport,
+                                    className: classnames(select_module.viewport, null != size && select_module[`viewport-${size}`]),
                                     children: /*#__PURE__*/ jsx(Select.Group, {
                                         className: select_module.group,
                                         children: children

package/dist/components/forms/select.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .content,
   :global(.infonomic-select-content) {
     z-index: 50;
@@ -22,6 +23,26 @@
     padding: 6px;
   }
 
+  .viewport-xs {
+    padding: 4px;
+  }
+
+  .viewport-sm {
+    padding: 4px;
+  }
+
+  .viewport-md {
+    padding: 6px;
+  }
+
+  .viewport-lg {
+    padding: 6px;
+  }
+
+  .viewport-xl {
+    padding: 8px;
+  }
+
   .group,
   :global(.infonomic-select-group) {
     z-index: 50;
@@ -48,8 +69,8 @@
     background-color: var(--surface-item);
     font-size: 1rem;
     line-height: 1;
-    padding-right: 35px;
-    padding-left: 25px;
+    padding-right: 32px;
+    padding-left: 24px;
     height: 32px;
     display: flex;
     align-items: center;
@@ -73,9 +94,60 @@
   :global(.infonomic-select-item-indicator) {
     position: absolute;
     left: 0;
-    width: 25px;
+    width: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-}
+
+  /* size variants — treat current values as 'md' */
+  .viewport-xs .select-item {
+    font-size: 0.75rem;
+    height: 24px;
+    padding-right: 28px;
+    padding-left: 20px;
+    border-radius: 4px;
+  }
+
+  .viewport-xs .select-item-indicator {
+    width: 20px;
+  }
+
+  .viewport-sm .select-item {
+    font-size: 0.875rem;
+    height: 28px;
+    padding-right: 30px;
+    padding-left: 22px;
+    border-radius: 5px;
+  }
+
+  .viewport-sm .select-item-indicator {
+    width: 22px;
+  }
+
+  /* .viewport-md — inherits base .select-item values */
+
+  .viewport-lg .select-item {
+    font-size: 1.125rem;
+    height: 34px;
+    padding-right: 32px;
+    padding-left: 24px;
+    border-radius: 6px;
+  }
+
+  .viewport-lg .select-item-indicator {
+    width: 24px;
+  }
+
+  .viewport-xl .select-item {
+    font-size: 1.25rem;
+    height: 40px;
+    padding-right: 36px;
+    padding-left: 28px;
+    border-radius: 8px;
+  }
+
+  .viewport-xl .select-item-indicator {
+    width: 28px;
+  }
+}

package/dist/components/forms/select.module.js

@@ -2,6 +2,16 @@ import "./select_module.css";
 const select_module = {
     content: "content-Dr272c",
     viewport: "viewport-avysx0",
+    "viewport-xs": "viewport-xs-ddEB1m",
+    viewportXs: "viewport-xs-ddEB1m",
+    "viewport-sm": "viewport-sm-fUHdZh",
+    viewportSm: "viewport-sm-fUHdZh",
+    "viewport-md": "viewport-md-GHDx8O",
+    viewportMd: "viewport-md-GHDx8O",
+    "viewport-lg": "viewport-lg-joLSnL",
+    viewportLg: "viewport-lg-joLSnL",
+    "viewport-xl": "viewport-xl-RoyZD9",
+    viewportXl: "viewport-xl-RoyZD9",
     group: "group-MyzEdB",
     "scroll-button": "scroll-button-JaxK2W",
     scrollButton: "scroll-button-JaxK2W",

package/dist/components/forms/select_module.css

@@ -15,6 +15,18 @@
     padding: 6px;
   }
 
+  .viewport-xs-ddEB1m, .viewport-sm-fUHdZh {
+    padding: 4px;
+  }
+
+  .viewport-md-GHDx8O, .viewport-lg-joLSnL {
+    padding: 6px;
+  }
+
+  .viewport-xl-RoyZD9 {
+    padding: 8px;
+  }
+
   :is(.group-MyzEdB, .infonomic-select-group) {
     z-index: 50;
   }
@@ -39,8 +51,8 @@
     border-radius: 6px;
     align-items: center;
     height: 32px;
-    padding-left: 25px;
-    padding-right: 35px;
+    padding-left: 24px;
+    padding-right: 32px;
     font-size: 1rem;
     line-height: 1;
     display: flex;
@@ -72,10 +84,58 @@
   :is(.select-item-indicator-nXFGV7, .infonomic-select-item-indicator) {
     justify-content: center;
     align-items: center;
-    width: 25px;
+    width: 24px;
     display: inline-flex;
     position: absolute;
     left: 0;
   }
+
+  .viewport-xs-ddEB1m .select-item-HiANA0 {
+    border-radius: 4px;
+    height: 24px;
+    padding-left: 20px;
+    padding-right: 28px;
+    font-size: .75rem;
+  }
+
+  .viewport-xs-ddEB1m .select-item-indicator-nXFGV7 {
+    width: 20px;
+  }
+
+  .viewport-sm-fUHdZh .select-item-HiANA0 {
+    border-radius: 5px;
+    height: 28px;
+    padding-left: 22px;
+    padding-right: 30px;
+    font-size: .875rem;
+  }
+
+  .viewport-sm-fUHdZh .select-item-indicator-nXFGV7 {
+    width: 22px;
+  }
+
+  .viewport-lg-joLSnL .select-item-HiANA0 {
+    border-radius: 6px;
+    height: 34px;
+    padding-left: 24px;
+    padding-right: 32px;
+    font-size: 1.125rem;
+  }
+
+  .viewport-lg-joLSnL .select-item-indicator-nXFGV7 {
+    width: 24px;
+  }
+
+  .viewport-xl-RoyZD9 .select-item-HiANA0 {
+    border-radius: 8px;
+    height: 40px;
+    padding-left: 28px;
+    padding-right: 36px;
+    font-size: 1.25rem;
+  }
+
+  .viewport-xl-RoyZD9 .select-item-indicator-nXFGV7 {
+    width: 28px;
+  }
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.42.0",
+  "version": "5.43.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.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .container,
   :global(.infonomic-checkbox-container) {
     width: 100%;
@@ -62,9 +63,17 @@
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
+    /* Hidden by default — prevents flash on initial render before data-state is applied */
+    opacity: 0;
+    transform: scale(0.8);
+    /* Transition handles the unchecked→unchecked no-op and the checked→unchecked exit.
+       It only fires on state changes, never on initial mount, so no flash. */
+    transition:
+      opacity 0.2s ease-in,
+      transform 0.2s ease-in;
   }
 
-  /* Style for the "checked" state */
+  /* Style for the "checked" state — animation overrides the transition for bouncy entry */
   .indicator[data-state="checked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
@@ -72,10 +81,9 @@
     transform: scale(1);
   }
 
-  /* Style for the "unchecked" state */
+  /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
   .indicator[data-state="unchecked"] .icon,
   :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
-    animation: checkBoxOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
@@ -88,10 +96,10 @@
     color: var(--label-color);
   }
 
-  .checkbox:disabled ~ .label,
-  .checkbox[disabled] ~ .label,
-  :global(.infonomic-checkbox):disabled ~ :global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled] ~ :global(.infonomic-checkbox-label) {
+  .checkbox:disabled~.label,
+  .checkbox[disabled]~.label,
+  :global(.infonomic-checkbox):disabled~ :global(.infonomic-checkbox-label),
+  :global(.infonomic-checkbox)[disabled]~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -115,8 +123,8 @@
     height: 16px;
   }
 
-  .sm ~ .label,
-  :global(.infonomic-checkbox-sm) ~ :global(.infonomic-checkbox-label) {
+  .sm~.label,
+  :global(.infonomic-checkbox-sm)~ :global(.infonomic-checkbox-label) {
     font-size: 0.85rem;
   }
 
@@ -132,8 +140,8 @@
     height: 18px;
   }
 
-  .md ~ .label,
-  :global(.infonomic-checkbox-md) ~ :global(.infonomic-checkbox-label) {
+  .md~.label,
+  :global(.infonomic-checkbox-md)~ :global(.infonomic-checkbox-label) {
     font-size: 0.875rem;
   }
 
@@ -149,8 +157,8 @@
     height: 22px;
   }
 
-  .lg ~ .label,
-  :global(.infonomic-checkbox-lg) ~ :global(.infonomic-checkbox-label) {
+  .lg~.label,
+  :global(.infonomic-checkbox-lg)~ :global(.infonomic-checkbox-label) {
     font-size: 1rem;
   }
 
@@ -269,16 +277,4 @@
     }
   }
 
-  /* Define keyframes for the "unchecked" state */
-  @keyframes checkBoxOut {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-  }
-}
+}

package/src/components/forms/select.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .content,
   :global(.infonomic-select-content) {
     z-index: 50;
@@ -22,6 +23,26 @@
     padding: 6px;
   }
 
+  .viewport-xs {
+    padding: 4px;
+  }
+
+  .viewport-sm {
+    padding: 4px;
+  }
+
+  .viewport-md {
+    padding: 6px;
+  }
+
+  .viewport-lg {
+    padding: 6px;
+  }
+
+  .viewport-xl {
+    padding: 8px;
+  }
+
   .group,
   :global(.infonomic-select-group) {
     z-index: 50;
@@ -48,8 +69,8 @@
     background-color: var(--surface-item);
     font-size: 1rem;
     line-height: 1;
-    padding-right: 35px;
-    padding-left: 25px;
+    padding-right: 32px;
+    padding-left: 24px;
     height: 32px;
     display: flex;
     align-items: center;
@@ -73,9 +94,60 @@
   :global(.infonomic-select-item-indicator) {
     position: absolute;
     left: 0;
-    width: 25px;
+    width: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-}
+
+  /* size variants — treat current values as 'md' */
+  .viewport-xs .select-item {
+    font-size: 0.75rem;
+    height: 24px;
+    padding-right: 28px;
+    padding-left: 20px;
+    border-radius: 4px;
+  }
+
+  .viewport-xs .select-item-indicator {
+    width: 20px;
+  }
+
+  .viewport-sm .select-item {
+    font-size: 0.875rem;
+    height: 28px;
+    padding-right: 30px;
+    padding-left: 22px;
+    border-radius: 5px;
+  }
+
+  .viewport-sm .select-item-indicator {
+    width: 22px;
+  }
+
+  /* .viewport-md — inherits base .select-item values */
+
+  .viewport-lg .select-item {
+    font-size: 1.125rem;
+    height: 34px;
+    padding-right: 32px;
+    padding-left: 24px;
+    border-radius: 6px;
+  }
+
+  .viewport-lg .select-item-indicator {
+    width: 24px;
+  }
+
+  .viewport-xl .select-item {
+    font-size: 1.25rem;
+    height: 40px;
+    padding-right: 36px;
+    padding-left: 28px;
+    border-radius: 8px;
+  }
+
+  .viewport-xl .select-item-indicator {
+    width: 28px;
+  }
+}

package/src/components/forms/select.stories.tsx

@@ -19,14 +19,52 @@ const values: SelectValue[] = [
 
 export const Default = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-      <Select placeholder="Select one..." helpText="Select an item.">
-        {values.map((value) => (
-          <SelectItem key={value.value} value={value.value}>
-            {value.label}
-          </SelectItem>
-        ))}
-      </Select>
-    </div>
+    <>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="xl" placeholder="Select one..." helpText="Extra Large select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="lg" placeholder="Select one..." helpText="Large select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="md" placeholder="Select one..." helpText="Medium select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="sm" placeholder="Select one..." helpText="Small select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <Select size="xs" placeholder="Select one..." helpText="Extra small select.">
+          {values.map((value) => (
+            <SelectItem key={value.value} value={value.value}>
+              {value.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+    </>
   )
 }

package/src/components/forms/select.tsx

@@ -77,7 +77,7 @@ export function Select({
             <SelectPrimitive.ScrollUpButton className={styles['scroll-button']}>
               <ChevronUpIcon />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className={styles.viewport}>
+            <SelectPrimitive.Viewport className={cx(styles.viewport, size != null && styles[`viewport-${size}`])}>
               <SelectPrimitive.Group className={styles.group}>{children}</SelectPrimitive.Group>
             </SelectPrimitive.Viewport>
             <SelectPrimitive.ScrollDownButton className={styles['scroll-button']}>