@infonomic/uikit 3.8.0 → 3.10.0

package/dist/widgets/datepicker/datepicker_module.css

@@ -11,10 +11,10 @@
 
   .content-UK9iLF {
     width: 100%;
-    padding-top: var(--spacing-4);
-    padding-bottom: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-1);
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    padding-right: var(--spacing-4);
     background-color: var(--background);
     border: 1px solid var(--border-color);
     box-shadow: var(--shadow-md);
@@ -49,7 +49,7 @@
   }
 
   .content-components-jcG649 {
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
     width: 100%;
     display: flex;
   }
@@ -63,8 +63,8 @@
   }
 
   .content-status-XRGKXg {
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-2);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-8);
     font-size: var(--font-size-sm);
     color: var(--foreground);
     align-items: center;
@@ -73,11 +73,11 @@
   }
 
   .content-actions-GVU14S {
-    margin-top: var(--spacing-3);
-    padding-left: var(--spacing-4);
+    margin-top: var(--spacing-12);
+    padding-left: var(--spacing-16);
     padding-right: var(--spacing-6);
     justify-content: space-between;
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
     flex-direction: row;
     width: 100%;
     display: flex;
@@ -121,12 +121,12 @@
 
   .time-picker-scroll-area-q5TiRD {
     height: 280px;
-    padding-right: var(--spacing-4);
+    padding-right: var(--spacing-16);
   }
 
   .time-picker-Xhertk {
-    padding-left: var(--spacing-1);
-    padding-right: var(--spacing-1);
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
     flex-direction: column;
     gap: .5rem;
     display: flex;

package/dist/widgets/drawer/drawer_module.css

@@ -61,9 +61,9 @@
   }
 
   .drawer-top-actions-FiHu4U {
-    padding-top: var(--spacing-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-12);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     justify-content: flex-end;
     align-items: center;
     max-width: 100%;
@@ -76,8 +76,8 @@
     align-items: center;
     gap: var(--gap-3);
     padding-top: 0;
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     max-width: 100%;
     display: flex;
   }
@@ -87,7 +87,7 @@
   }
 
   .drawer-content-QQqzOR {
-    padding: var(--spacing-6);
+    padding: var(--spacing-12);
   }
 
   @keyframes slideIn-dDQJvD {

package/dist/widgets/modal/modal_module.css

@@ -21,8 +21,8 @@
     width: 100%;
     min-height: 300px;
     max-height: 88vh;
-    margin-left: var(--spacing-2);
-    margin-right: var(--spacing-2);
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
     flex-direction: column;
     display: flex;
     position: absolute;
@@ -42,9 +42,9 @@
     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);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-20);
     max-width: 100%;
     display: flex;
   }
@@ -55,9 +55,9 @@
 
   .modal-content-eDnix2 {
     gap: var(--gap-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-    padding-bottom: var(--spacing-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
     flex-direction: column;
     flex: 1;
     max-width: 100%;
@@ -68,10 +68,10 @@
     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);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
     display: flex;
   }
 }

package/dist/widgets/timeline/timeline_module.css

@@ -2,11 +2,11 @@
 
 @layer infonomic-components {
   .timeline-qJOU85 {
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
   }
 
   .timeline-root-kIek3q {
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
     padding-left: var(--spacing-8);
     border-left-width: var(--border-width-thin);
     border-left-color: var(--border-color);
@@ -16,7 +16,7 @@
   }
 
   .timeline-item-VoOzOk {
-    margin: 0 0 var(--spacing-6) 0;
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
   .timeline-icon-xO1p1F {
@@ -49,8 +49,8 @@
   }
 
   .timeline-date-U7Pr_G {
-    margin-top: var(--spacing-2);
-    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
     font-size: .9em;
     font-weight: var(--font-weight-medium);
     color: var(--gray-600);
@@ -60,14 +60,14 @@
 
   .timeline-content-rwFfPc {
     margin: 0;
-    margin-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
     font-weight: var(--font-weight-normal);
   }
 
   .timeline-content-rwFfPc p {
     margin: 0;
-    margin-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-16);
   }
 
   .dark .timeline-icon-xO1p1F:not(:where([class~="not-dark"], [class~="not-dark"] *)) {

package/package.json

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

package/src/components/accordion/accordion.stories.tsx

@@ -26,7 +26,7 @@ export const Accordion: Story = {
     className: 'accordion-root border',
   },
   render: (args) => (
-    <>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <style>
         {`
       .accordion-root {
@@ -112,6 +112,6 @@ export const Accordion: Story = {
           </AccordionComponent.Item>
         </nav>
       </AccordionComponent.Root>
-    </>
+    </div>
   ),
 }

package/src/components/avatar/avatar.stories.tsx

@@ -18,7 +18,7 @@ export const Avatar = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '300px',
-      marginBottom: '24px',
+      margin: '2rem auto',
       display: 'flex',
       gap: '24px',
       alignItems: 'center',

package/src/components/badge/badge.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<typeof Badge>
 
 const AllIntents = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       {intent.map((i) => {
         return (
           <div

package/src/components/button/button-group.stories.tsx

@@ -25,7 +25,7 @@ const ButtonGroupDemo = (): React.JSX.Element => {
     setValue(value)
   }
   return (
-    <div className="ml-12 mb-6 max-w-[500px]">
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <ButtonGroupComponent
         type="single"
         expandToFit={true}

package/src/components/button/button-intents.stories.tsx

@@ -10,7 +10,7 @@ type Story = StoryObj<typeof Button>
 
 const AllIntents = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
       {intent.map((i) => {
         return (
           <div

package/src/components/button/button-variants.stories.tsx

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof Button>
 const AllVariants = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div

package/src/components/button/control-buttons.stories.tsx

@@ -6,7 +6,7 @@ type Story = StoryObj<typeof DirectionalButton>
 
 const ControlsDemo = (): React.JSX.Element => {
   return (
-    <>
+     <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <div className="ml-12 mb-6">
         <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Small</h2>
         <div className="flex items-center gap-4 mb-6">
@@ -40,7 +40,7 @@ const ControlsDemo = (): React.JSX.Element => {
           <DirectionalButton direction="down" size="lg" />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/components/button/icon-button.stories.tsx

@@ -28,7 +28,7 @@ const getUserIconSize = (size: string) => {
 export const IconButtonsRound = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div
@@ -82,7 +82,7 @@ export const IconButtonsRound = (): React.JSX.Element => {
 export const IconButtonsSquare = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto' }}>
         {variant.map((variant: any) => {
           return (
             <div

package/src/components/card/card.stories.tsx

@@ -17,7 +17,7 @@ export default meta
 
 export const Card = (): React.JSX.Element => {
   return (
-    <>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <div style={{ marginBottom: '48px' }} className="mb-6">
         <div style={{ maxWidth: '400px', marginBottom: '24px' }}>
           <CardComponent>
@@ -56,6 +56,6 @@ export const Card = (): React.JSX.Element => {
           </CardComponent>
         </div>
       </div>
-    </>
+    </div>
   )
 }

package/src/components/container/container.stories.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta } from '@storybook/react-vite'
 
 import { Section } from '../section/section.js'
 import { Container as ContainerComponent } from './container.js'
@@ -17,26 +17,20 @@ const meta: Meta<typeof ContainerComponent> = {
 
 export default meta
 
-type Story = StoryObj<typeof ContainerComponent>
-
 export const Container = (): React.JSX.Element => {
   return (
-    <Section style={{ height: '100vh' }}>
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
       <ContainerComponent
+        className="primary-strong"
         style={{
-          backgroundColor: 'lightblue',
           height: '400px',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
         }}
       >
-        <p>I'm in a container</p>
+        <p>I'm in a container with shy edges.</p>
       </ContainerComponent>
     </Section>
   )
 }
-
-// export const Default: Story = {
-//   render: () => <DivDemo />,
-// }

package/src/components/dropdown/dropdown.module.css

@@ -61,7 +61,7 @@
     margin: 0 auto;
     width: 90%;
     background-color: var(--surface-panel-border);
-    margin: var(--spacing-1) 0;
+    margin: var(--spacing-4) 0;
     border-top-width: var(--border-width-thin);
     border-top-color: var(--surface-panel-border);
     border-top-style: var(--border-style-solid);

package/src/components/dropdown/dropdown.stories.tsx

@@ -49,7 +49,7 @@ export const Dropdown: Story = {
         <div
           style={{
             maxWidth: '400px',
-            marginBottom: '24px',
+            margin: '2rem 0 24px',
             display: 'flex',
             justifyContent: 'center',
           }}

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

@@ -2,7 +2,7 @@
 
 @layer infonomic-components {
   .day-picker {
-    padding: var(--spacing-3)
+    padding: var(--spacing-12)
   }
 
   /* relative flex flex-col gap-4 sm:flex-row */
@@ -10,7 +10,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-4);
+    gap: var(--spacing-16);
   }
 
   /* 'relative flex h-7 items-center justify-center', */
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
     width: 100%;
   }
 
@@ -103,7 +103,7 @@
 
   /* 'pt-3 text-sm' */
   .footer {
-    padding-top: var(--spacing-3);
+    padding-top: var(--spacing-12);
     font-size: 0.875rem;
     /* 14px */
   }
@@ -136,12 +136,12 @@
   .month-grid {
     margin-left: auto;
     margin-right: auto;
-    margin-top: var(--spacing-4);
+    margin-top: var(--spacing-16);
   }
 
   /* 'mt-2 flex w-max items-start' */
   .week {
-    margin-top: var(--spacing-2);
+    margin-top: var(--spacing-8);
     display: flex;
     width: max-content;
     align-items: flex-start;
@@ -170,13 +170,13 @@
   /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
   .today>button {
     /* background-color: var(--gray-50); */
-    border: solid 1px var(--primary-300);
+    border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
   .day>button:hover,
   .day-selected>button {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: white;
   }
 
@@ -198,17 +198,17 @@
 
   /* 'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground' */
   .button-range {
-    background-color: var(--gray-100);
+    background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
   .button-range>button {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: white;
   }
 
   .button-range>button:hover {
-    background-color: var(--primary-400);
+    background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
 
@@ -224,7 +224,7 @@
 
   /* 'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground', */
   .range-middle {
-    background-color: var(--gray-50);
+    background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
@@ -265,51 +265,5 @@
       stroke: var(--primary-200);
       opacity: 0.7;
     }
-
-    .footer {
-      color: var(--muted);
-    }
-
-    .day>button {
-      color: var(--foreground);
-    }
-
-    .day>button:hover,
-    .day-selected>button {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
-    .today>button {
-      /* background-color: var(--canvas-700); */
-      border: solid 1px var(--primary-300);
-      color: var(--foreground);
-    }
-
-    .button-range {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
-
-    .button-range>button {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    .button-range>button:hover {
-      background-color: var(--primary-400);
-      color: var(--foreground);
-    }
-
-    .range-middle {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
-
-    .range-middle>button {
-      background-color: var(--canvas-700);
-      color: var(--foreground);
-    }
   }
 }

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

@@ -25,7 +25,7 @@ export const Calendar = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required
@@ -79,7 +79,7 @@ export const Multiple = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required
@@ -112,7 +112,7 @@ export const Range = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required

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

@@ -19,7 +19,7 @@ export const Default = (): React.JSX.Element => {
 
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto 2rem' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
         <h2 className="text-xl" style={{ marginBottom: '1rem' }}>
           Outlined
         </h2>

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

@@ -17,7 +17,7 @@ export default {
 export const Default = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ marginBottom: '2rem' }}>
+      <div style={{ margin: '2rem 0' }}>
         <div
           style={{
             maxWidth: '600px',

package/src/components/forms/radio-group.module.css

@@ -78,12 +78,12 @@
     color: var(--foreground);
     font-size: 15px;
     line-height: 1;
-    padding-left: var(--spacing-2);
+    padding-left: var(--spacing-8);
   }
 
   .row .label {
     padding-left: 0;
-    padding-right: var(--spacing-4)
+    padding-right: var(--spacing-16)
   }
 
 

package/src/components/forms/text-area.stories.tsx

@@ -13,7 +13,7 @@ export default {
 export const Default = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <TextArea
           required
           id="message"
@@ -33,7 +33,7 @@ export const Default = (): React.JSX.Element => {
 export const Error = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <TextArea
           required
           id="message"