@itcase/ui 1.3.34 → 1.3.37

package/dist/css/components/Label/Label.tokens.css

@@ -7,13 +7,13 @@
   --label-size-m-shape-rounded: 12px;
   --label-size-s-shape-rounded: 12px;
   --label-size-xs-shape-rounded: 12px;
-  --label-size-xxs-shape-rounded: 6px;
+  --label-size-xxs-shape-rounded: 12px;
 
   --label-size-xxl-padding: 10px 10px;
   --label-size-xl-padding: 7px 8px;
   --label-size-l-padding: 4px 6px;
   --label-size-m-padding: 2px 8px;
   --label-size-s-padding: 2px 6px;
-  --label-size-xs-padding: 1px 4px;
-  --label-size-xxs-padding: 1px 4px;
+  --label-size-xs-padding: 0px 4px;
+  --label-size-xxs-padding: 0px 4px;
 }

package/dist/css/components/Logo/Logo.tokens.css

@@ -1,10 +1,25 @@
 :root {
-  --logo-size-l-width: 240px;
+  /* --logo-size-l-width: 240px;
   --logo-size-l-height: 90px;
 
   --logo-size-m-width: 200px;
   --logo-size-m-height: 75px;
 
   --logo-size-s-width: 140px;
-  --logo-size-s-height: 52px;
+  --logo-size-s-height: 52px; */
+
+  --logo-size-xl-width: 194px;
+  --logo-size-xl-height: 102px;
+
+  --logo-size-l-width: 145px;
+  --logo-size-l-height: 77px;
+
+  --logo-size-m-width: 100px;
+  --logo-size-m-height: 53px;
+
+  --logo-size-s-width: 82px;
+  --logo-size-s-height: 43px;
+
+  --logo-size-xs-width: 52px;
+  --logo-size-xs-height: 27px;
 }

package/dist/css/components/MenuItem/MenuItem.tokens.css

@@ -2,16 +2,16 @@
   --menu-item-size-xxs-padding: 0 4px;
   --menu-item-size-xs-padding: 0 4px;
   --menu-item-size-s-padding: 3px 4px;
-  --menu-item-size-m-padding: 4px 4px;
+  --menu-item-size-m-padding: 4px 12px;
   --menu-item-size-l-padding: 6px 6px;
   --menu-item-size-xl-padding: 10px 8px;
   --menu-item-size-xxl-padding: 12px 10px;
-  --menu-item-shape-rounded: 6px;
+
+  --menu-item-shape-rounded: 20px;
+  --menu-item-set-subitem-padding-left: 36px;
 
   --menu-item-set-filter-padding: 10px 16px;
   --menu-item-set-filter-border-right: 1px solid
     var(--color-surface-border-tertiary);
   --menu-item-set-filter-active-color: var(--color-surface-item-accent);
-
-  --menu-item-set-subitem-padding-left: 32px;
 }

package/dist/css/components/Modal/Modal.css

@@ -37,3 +37,6 @@
     width: 100%;
   }
 }
+:root {
+  --modal-max-width: 450px;
+}

package/dist/css/components/Modal/Modal.tokens.css

@@ -0,0 +1,3 @@
+:root {
+  --modal-max-width: 450px;
+}

package/dist/css/components/Pagination/Pagination.css

@@ -106,3 +106,28 @@
     }
   }
 }
+:root {
+  --paginator-margin: 0;
+
+  --paginator-item-width: 32px;
+  --paginator-item-height: 32px;
+  --paginator-item-border: none;
+  --paginator-item-border-radius: 50%;
+
+  --pagination-item-state-disabled-display: none;
+
+  --paginator-item-transition: all 0.2s ease 0s;
+
+  --paginator-item-default-fill: var(--color-surface-primary);
+  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
+  --paginator-item-default-text: var(--color-surface-text-primary);
+
+  --paginator-item-active-fill: var(--color-accent-primary);
+  --paginator-item-active-fill-hover: var(--color-accent-primary);
+  --paginator-item-active-text: var(--color-accent-text-primary);
+
+  --paginator-item-disabled-fill: none;
+  --paginator-item-disabled-fill-hover: none;
+  --paginator-item-disabled-text: var(--color-surface-text-primary);
+  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
+}

package/dist/css/components/Search/Search.css

@@ -113,3 +113,19 @@
     }
   }
 }
+:root {
+  --search-input-normal-padding: 8px;
+  --search-input-normal-gap: 8px;
+  --search-input-normal-line-height: 24px;
+
+  --search-input-compact-padding: 8px;
+  --search-input-compact-gap: 4px;
+
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
+
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
+}

package/dist/css/components/Search/Search.tokens.css

@@ -6,8 +6,11 @@
   --search-input-compact-padding: 8px;
   --search-input-compact-gap: 4px;
 
-  --search-input-l-padding: 6px 12px;
-  --search-input-l-gap: 4px;
+  --search-input-l-padding: 8px 7px;
+  --search-input-l-gap: 6px;
 
-  --search-shape-rounded: 4px;
+  --search-input-s-padding: 2px 7px;
+  --search-input-s-gap: 6px;
+
+  --search-shape-rounded: 8px;
 }

package/dist/css/components/Segmented/Segmented.css

@@ -115,3 +115,9 @@
     }
   }
 }
+:root {
+  --segmented-item-size-normal-padding: 12px 24px;
+  --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
+}

package/dist/css/components/Segmented/Segmented.tokens.css

@@ -1,4 +1,6 @@
 :root {
   --segmented-item-size-normal-padding: 12px 24px;
   --segmented-item-size-compact-padding: 6px 16px;
+
+  --segmented-item-size-s-padding: 4px 16px;
 }

package/dist/css/components/Tab/Tab.css

@@ -68,3 +68,31 @@ div.tab-reset {
     }
   }
 }
+:root {
+  --tab-size-normal-padding: 12px;
+  --tab-size-normal-gap: 4px;
+
+  --tab-size-compact-padding: 12px;
+  --tab-size-compact-gap: 4px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+
+  --tab-size-m-padding: 7px;
+  --tab-size-m-gap: 4px;
+
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+
+  --tab-size-xl-padding: 15px;
+  --tab-size-xl-gap: 4px;
+
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+}

package/dist/css/components/Textarea/Textarea.css

@@ -38,3 +38,10 @@
     }
   }
 }
+:root {
+  --textarea-shape-rounded: 8px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-min-height: 80px;
+  --textarea-max-height: 80px;
+  --textarea-success-border: var(--color-surface-border-tertiary);
+}

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -111,6 +111,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             },
         };
         return new Proxy(propsGenerator, generatorProxyHandler);
+        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }

package/dist/stories/Size.mdx

@@ -1,15 +1,35 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as SwitchStories from '../stories/Switch.stories.tsx'
+import * as SizeStories from '../stories/Size.stories.tsx'
 
-<Meta title="Atoms / Switch / Size" />
+<Meta title="Atoms / Tab / Size" />
 
 # Size
 
-## Normal
+## XXS
 
-<Canvas sourceState="shown" of={SwitchStories.Normal} />
+<Canvas sourceState="shown" of={SizeStories.SizeXXS} />
 
-## Compact
+## XS
 
-<Canvas sourceState="shown" of={SwitchStories.Compact} />
+<Canvas sourceState="shown" of={SizeStories.SizeXS} />
+
+## S
+
+<Canvas sourceState="shown" of={SizeStories.SizeS} />
+
+## M
+
+<Canvas sourceState="shown" of={SizeStories.SizeM} />
+
+## L
+
+<Canvas sourceState="shown" of={SizeStories.SizeL} />
+
+## XL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXL} />
+
+## XXL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXXL} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.34",
+  "version": "1.3.37",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",