tharaday 0.8.2 → 0.8.4

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Avatar } from './Avatar.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Avatar } from './Avatar.tsx';
 
 const meta = {
   title: 'Components/Avatar',

package/src/components/Avatar/Avatar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import { Avatar } from './Avatar.tsx';
 

package/src/components/Badge/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Badge } from './Badge.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Badge } from './Badge.tsx';
 
 const meta = {
   title: 'Components/Badge',

package/src/components/Box/Box.module.css

@@ -102,563 +102,6 @@
   text-align: justify;
 }
 
-/* Padding */
-.p-0 {
-  padding: 0;
-}
-.p-1 {
-  padding: var(--ds-space-1);
-}
-.p-2 {
-  padding: var(--ds-space-2);
-}
-.p-3 {
-  padding: var(--ds-space-3);
-}
-.p-4 {
-  padding: var(--ds-space-4);
-}
-.p-5 {
-  padding: var(--ds-space-5);
-}
-.p-6 {
-  padding: var(--ds-space-6);
-}
-.p-8 {
-  padding: var(--ds-space-8);
-}
-.p-10 {
-  padding: var(--ds-space-10);
-}
-.p-12 {
-  padding: var(--ds-space-12);
-}
-.p-14 {
-  padding: var(--ds-space-14);
-}
-
-.px-0 {
-  padding-left: 0;
-  padding-right: 0;
-}
-.px-1 {
-  padding-left: var(--ds-space-1);
-  padding-right: var(--ds-space-1);
-}
-.px-2 {
-  padding-left: var(--ds-space-2);
-  padding-right: var(--ds-space-2);
-}
-.px-3 {
-  padding-left: var(--ds-space-3);
-  padding-right: var(--ds-space-3);
-}
-.px-4 {
-  padding-left: var(--ds-space-4);
-  padding-right: var(--ds-space-4);
-}
-.px-5 {
-  padding-left: var(--ds-space-5);
-  padding-right: var(--ds-space-5);
-}
-.px-6 {
-  padding-left: var(--ds-space-6);
-  padding-right: var(--ds-space-6);
-}
-.px-8 {
-  padding-left: var(--ds-space-8);
-  padding-right: var(--ds-space-8);
-}
-.px-10 {
-  padding-left: var(--ds-space-10);
-  padding-right: var(--ds-space-10);
-}
-.px-12 {
-  padding-left: var(--ds-space-12);
-  padding-right: var(--ds-space-12);
-}
-.px-14 {
-  padding-left: var(--ds-space-14);
-  padding-right: var(--ds-space-14);
-}
-
-.py-0 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.py-1 {
-  padding-top: var(--ds-space-1);
-  padding-bottom: var(--ds-space-1);
-}
-.py-2 {
-  padding-top: var(--ds-space-2);
-  padding-bottom: var(--ds-space-2);
-}
-.py-3 {
-  padding-top: var(--ds-space-3);
-  padding-bottom: var(--ds-space-3);
-}
-.py-4 {
-  padding-top: var(--ds-space-4);
-  padding-bottom: var(--ds-space-4);
-}
-.py-5 {
-  padding-top: var(--ds-space-5);
-  padding-bottom: var(--ds-space-5);
-}
-.py-6 {
-  padding-top: var(--ds-space-6);
-  padding-bottom: var(--ds-space-6);
-}
-.py-8 {
-  padding-top: var(--ds-space-8);
-  padding-bottom: var(--ds-space-8);
-}
-.py-10 {
-  padding-top: var(--ds-space-10);
-  padding-bottom: var(--ds-space-10);
-}
-.py-12 {
-  padding-top: var(--ds-space-12);
-  padding-bottom: var(--ds-space-12);
-}
-.py-14 {
-  padding-top: var(--ds-space-14);
-  padding-bottom: var(--ds-space-14);
-}
-
-.pt-0 {
-  padding-top: 0;
-}
-.pt-1 {
-  padding-top: var(--ds-space-1);
-}
-.pt-2 {
-  padding-top: var(--ds-space-2);
-}
-.pt-3 {
-  padding-top: var(--ds-space-3);
-}
-.pt-4 {
-  padding-top: var(--ds-space-4);
-}
-.pt-5 {
-  padding-top: var(--ds-space-5);
-}
-.pt-6 {
-  padding-top: var(--ds-space-6);
-}
-.pt-8 {
-  padding-top: var(--ds-space-8);
-}
-.pt-10 {
-  padding-top: var(--ds-space-10);
-}
-.pt-12 {
-  padding-top: var(--ds-space-12);
-}
-.pt-14 {
-  padding-top: var(--ds-space-14);
-}
-
-.pb-0 {
-  padding-bottom: 0;
-}
-.pb-1 {
-  padding-bottom: var(--ds-space-1);
-}
-.pb-2 {
-  padding-bottom: var(--ds-space-2);
-}
-.pb-3 {
-  padding-bottom: var(--ds-space-3);
-}
-.pb-4 {
-  padding-bottom: var(--ds-space-4);
-}
-.pb-5 {
-  padding-bottom: var(--ds-space-5);
-}
-.pb-6 {
-  padding-bottom: var(--ds-space-6);
-}
-.pb-8 {
-  padding-bottom: var(--ds-space-8);
-}
-.pb-10 {
-  padding-bottom: var(--ds-space-10);
-}
-.pb-12 {
-  padding-bottom: var(--ds-space-12);
-}
-.pb-14 {
-  padding-bottom: var(--ds-space-14);
-}
-
-.pl-0 {
-  padding-left: 0;
-}
-.pl-1 {
-  padding-left: var(--ds-space-1);
-}
-.pl-2 {
-  padding-left: var(--ds-space-2);
-}
-.pl-3 {
-  padding-left: var(--ds-space-3);
-}
-.pl-4 {
-  padding-left: var(--ds-space-4);
-}
-.pl-5 {
-  padding-left: var(--ds-space-5);
-}
-.pl-6 {
-  padding-left: var(--ds-space-6);
-}
-.pl-8 {
-  padding-left: var(--ds-space-8);
-}
-.pl-10 {
-  padding-left: var(--ds-space-10);
-}
-.pl-12 {
-  padding-left: var(--ds-space-12);
-}
-.pl-14 {
-  padding-left: var(--ds-space-14);
-}
-
-.pr-0 {
-  padding-right: 0;
-}
-.pr-1 {
-  padding-right: var(--ds-space-1);
-}
-.pr-2 {
-  padding-right: var(--ds-space-2);
-}
-.pr-3 {
-  padding-right: var(--ds-space-3);
-}
-.pr-4 {
-  padding-right: var(--ds-space-4);
-}
-.pr-5 {
-  padding-right: var(--ds-space-5);
-}
-.pr-6 {
-  padding-right: var(--ds-space-6);
-}
-.pr-8 {
-  padding-right: var(--ds-space-8);
-}
-.pr-10 {
-  padding-right: var(--ds-space-10);
-}
-.pr-12 {
-  padding-right: var(--ds-space-12);
-}
-.pr-14 {
-  padding-right: var(--ds-space-14);
-}
-
-/* Gap */
-.gap-0 {
-  gap: 0;
-}
-.gap-1 {
-  gap: var(--ds-space-1);
-}
-.gap-2 {
-  gap: var(--ds-space-2);
-}
-.gap-3 {
-  gap: var(--ds-space-3);
-}
-.gap-4 {
-  gap: var(--ds-space-4);
-}
-.gap-5 {
-  gap: var(--ds-space-5);
-}
-.gap-6 {
-  gap: var(--ds-space-6);
-}
-.gap-8 {
-  gap: var(--ds-space-8);
-}
-.gap-10 {
-  gap: var(--ds-space-10);
-}
-.gap-12 {
-  gap: var(--ds-space-12);
-}
-.gap-14 {
-  gap: var(--ds-space-14);
-}
-
-/* Margin */
-.m-0 {
-  margin: 0;
-}
-.m-1 {
-  margin: var(--ds-space-1);
-}
-.m-2 {
-  margin: var(--ds-space-2);
-}
-.m-3 {
-  margin: var(--ds-space-3);
-}
-.m-4 {
-  margin: var(--ds-space-4);
-}
-.m-5 {
-  margin: var(--ds-space-5);
-}
-.m-6 {
-  margin: var(--ds-space-6);
-}
-.m-8 {
-  margin: var(--ds-space-8);
-}
-.m-10 {
-  margin: var(--ds-space-10);
-}
-.m-12 {
-  margin: var(--ds-space-12);
-}
-.m-14 {
-  margin: var(--ds-space-14);
-}
-
-.mx-0 {
-  margin-left: 0;
-  margin-right: 0;
-}
-.mx-1 {
-  margin-left: var(--ds-space-1);
-  margin-right: var(--ds-space-1);
-}
-.mx-2 {
-  margin-left: var(--ds-space-2);
-  margin-right: var(--ds-space-2);
-}
-.mx-3 {
-  margin-left: var(--ds-space-3);
-  margin-right: var(--ds-space-3);
-}
-.mx-4 {
-  margin-left: var(--ds-space-4);
-  margin-right: var(--ds-space-4);
-}
-.mx-5 {
-  margin-left: var(--ds-space-5);
-  margin-right: var(--ds-space-5);
-}
-.mx-6 {
-  margin-left: var(--ds-space-6);
-  margin-right: var(--ds-space-6);
-}
-.mx-8 {
-  margin-left: var(--ds-space-8);
-  margin-right: var(--ds-space-8);
-}
-.mx-10 {
-  margin-left: var(--ds-space-10);
-  margin-right: var(--ds-space-10);
-}
-.mx-12 {
-  margin-left: var(--ds-space-12);
-  margin-right: var(--ds-space-12);
-}
-.mx-14 {
-  margin-left: var(--ds-space-14);
-  margin-right: var(--ds-space-14);
-}
-
-.my-0 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.my-1 {
-  margin-top: var(--ds-space-1);
-  margin-bottom: var(--ds-space-1);
-}
-.my-2 {
-  margin-top: var(--ds-space-2);
-  margin-bottom: var(--ds-space-2);
-}
-.my-3 {
-  margin-top: var(--ds-space-3);
-  margin-bottom: var(--ds-space-3);
-}
-.my-4 {
-  margin-top: var(--ds-space-4);
-  margin-bottom: var(--ds-space-4);
-}
-.my-5 {
-  margin-top: var(--ds-space-5);
-  margin-bottom: var(--ds-space-5);
-}
-.my-6 {
-  margin-top: var(--ds-space-6);
-  margin-bottom: var(--ds-space-6);
-}
-.my-8 {
-  margin-top: var(--ds-space-8);
-  margin-bottom: var(--ds-space-8);
-}
-.my-10 {
-  margin-top: var(--ds-space-10);
-  margin-bottom: var(--ds-space-10);
-}
-.my-12 {
-  margin-top: var(--ds-space-12);
-  margin-bottom: var(--ds-space-12);
-}
-.my-14 {
-  margin-top: var(--ds-space-14);
-  margin-bottom: var(--ds-space-14);
-}
-
-.mt-0 {
-  margin-top: 0;
-}
-.mt-1 {
-  margin-top: var(--ds-space-1);
-}
-.mt-2 {
-  margin-top: var(--ds-space-2);
-}
-.mt-3 {
-  margin-top: var(--ds-space-3);
-}
-.mt-4 {
-  margin-top: var(--ds-space-4);
-}
-.mt-5 {
-  margin-top: var(--ds-space-5);
-}
-.mt-6 {
-  margin-top: var(--ds-space-6);
-}
-.mt-8 {
-  margin-top: var(--ds-space-8);
-}
-.mt-10 {
-  margin-top: var(--ds-space-10);
-}
-.mt-12 {
-  margin-top: var(--ds-space-12);
-}
-.mt-14 {
-  margin-top: var(--ds-space-14);
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-.mb-1 {
-  margin-bottom: var(--ds-space-1);
-}
-.mb-2 {
-  margin-bottom: var(--ds-space-2);
-}
-.mb-3 {
-  margin-bottom: var(--ds-space-3);
-}
-.mb-4 {
-  margin-bottom: var(--ds-space-4);
-}
-.mb-5 {
-  margin-bottom: var(--ds-space-5);
-}
-.mb-6 {
-  margin-bottom: var(--ds-space-6);
-}
-.mb-8 {
-  margin-bottom: var(--ds-space-8);
-}
-.mb-10 {
-  margin-bottom: var(--ds-space-10);
-}
-.mb-12 {
-  margin-bottom: var(--ds-space-12);
-}
-.mb-14 {
-  margin-bottom: var(--ds-space-14);
-}
-
-.ml-0 {
-  margin-left: 0;
-}
-.ml-1 {
-  margin-left: var(--ds-space-1);
-}
-.ml-2 {
-  margin-left: var(--ds-space-2);
-}
-.ml-3 {
-  margin-left: var(--ds-space-3);
-}
-.ml-4 {
-  margin-left: var(--ds-space-4);
-}
-.ml-5 {
-  margin-left: var(--ds-space-5);
-}
-.ml-6 {
-  margin-left: var(--ds-space-6);
-}
-.ml-8 {
-  margin-left: var(--ds-space-8);
-}
-.ml-10 {
-  margin-left: var(--ds-space-10);
-}
-.ml-12 {
-  margin-left: var(--ds-space-12);
-}
-.ml-14 {
-  margin-left: var(--ds-space-14);
-}
-
-.mr-0 {
-  margin-right: 0;
-}
-.mr-1 {
-  margin-right: var(--ds-space-1);
-}
-.mr-2 {
-  margin-right: var(--ds-space-2);
-}
-.mr-3 {
-  margin-right: var(--ds-space-3);
-}
-.mr-4 {
-  margin-right: var(--ds-space-4);
-}
-.mr-5 {
-  margin-right: var(--ds-space-5);
-}
-.mr-6 {
-  margin-right: var(--ds-space-6);
-}
-.mr-8 {
-  margin-right: var(--ds-space-8);
-}
-.mr-10 {
-  margin-right: var(--ds-space-10);
-}
-.mr-12 {
-  margin-right: var(--ds-space-12);
-}
-.mr-14 {
-  margin-right: var(--ds-space-14);
-}
-
 /* Background Color */
 .bg-main {
   background-color: var(--ds-surface-0);

package/src/components/Box/Box.test.tsx

@@ -38,14 +38,14 @@ describe('Box', () => {
     expect(container.firstChild).toHaveClass('fullWidth');
   });
 
-  it('applies numeric padding as a CSS class', () => {
+  it('applies numeric padding as inline style', () => {
     const { container } = render(<Box padding={4}>Content</Box>);
-    expect(container.firstChild).toHaveClass('p-4');
+    expect((container.firstChild as HTMLElement).style.padding).toBe('var(--ds-space-4)');
   });
 
-  it('applies numeric margin as a CSS class', () => {
+  it('applies numeric margin as inline style', () => {
     const { container } = render(<Box margin={2}>Content</Box>);
-    expect(container.firstChild).toHaveClass('m-2');
+    expect((container.firstChild as HTMLElement).style.margin).toBe('var(--ds-space-2)');
   });
 
   it('applies string padding as inline style', () => {

package/src/components/Box/Box.tsx

@@ -54,7 +54,14 @@ export const Box = ({
     height,
     maxWidth,
     gridTemplateColumns,
-    gap: typeof gap === 'string' ? gap : undefined,
+    gap:
+      gap !== undefined
+        ? gap === 0
+          ? '0'
+          : typeof gap === 'number'
+            ? `var(--ds-space-${gap})`
+            : gap
+        : undefined,
     ...getSpacingStyles(
       'padding',
       padding,
@@ -83,21 +90,6 @@ export const Box = ({
         styles.box,
         display && styles[`display-${display}`],
         textAlign && styles[`textAlign-${textAlign}`],
-        typeof padding === 'number' && styles[`p-${padding}`],
-        typeof paddingX === 'number' && styles[`px-${paddingX}`],
-        typeof paddingY === 'number' && styles[`py-${paddingY}`],
-        typeof paddingTop === 'number' && styles[`pt-${paddingTop}`],
-        typeof paddingBottom === 'number' && styles[`pb-${paddingBottom}`],
-        typeof paddingLeft === 'number' && styles[`pl-${paddingLeft}`],
-        typeof paddingRight === 'number' && styles[`pr-${paddingRight}`],
-        typeof margin === 'number' && styles[`m-${margin}`],
-        typeof marginX === 'number' && styles[`mx-${marginX}`],
-        typeof marginY === 'number' && styles[`my-${marginY}`],
-        typeof marginTop === 'number' && styles[`mt-${marginTop}`],
-        typeof marginBottom === 'number' && styles[`mb-${marginBottom}`],
-        typeof marginLeft === 'number' && styles[`ml-${marginLeft}`],
-        typeof marginRight === 'number' && styles[`mr-${marginRight}`],
-        typeof gap === 'number' && styles[`gap-${gap}`],
         flexDirection && styles[`flexDirection-${flexDirection}`],
         alignItems && styles[`alignItems-${alignItems}`],
         justifyContent && styles[`justifyContent-${justifyContent}`],

package/src/components/Box/Box.types.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, ElementType } from 'react';
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 
 export type BoxPadding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14 | (string & {});
 export type BoxMargin = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14 | (string & {});

package/src/components/Box/helpers/getSpacingStyles.ts

@@ -1,5 +1,13 @@
 import type { BoxPadding } from '../Box.types.ts';
 
+const toSpaceValue = (value: BoxPadding): string => {
+  if (typeof value === 'number') {
+    return value === 0 ? '0' : `var(--ds-space-${value})`;
+  }
+
+  return value;
+};
+
 export const getSpacingStyles = (
   type: 'padding' | 'margin',
   prop: BoxPadding | undefined,
@@ -12,29 +20,28 @@ export const getSpacingStyles = (
 ) => {
   const styles: Record<string, string | undefined> = {};
 
-  if (typeof prop === 'string') {
-    styles[type] = prop;
+  if (prop !== undefined) {
+    styles[type] = toSpaceValue(prop);
   }
-  if (typeof propTop === 'string') {
-    styles[`${type}Top`] = propTop;
+  if (propTop !== undefined) {
+    styles[`${type}Top`] = toSpaceValue(propTop);
   }
-  if (typeof propBottom === 'string') {
-    styles[`${type}Bottom`] = propBottom;
+  if (propBottom !== undefined) {
+    styles[`${type}Bottom`] = toSpaceValue(propBottom);
   }
-  if (typeof propLeft === 'string') {
-    styles[`${type}Left`] = propLeft;
+  if (propLeft !== undefined) {
+    styles[`${type}Left`] = toSpaceValue(propLeft);
   }
-  if (typeof propRight === 'string') {
-    styles[`${type}Right`] = propRight;
+  if (propRight !== undefined) {
+    styles[`${type}Right`] = toSpaceValue(propRight);
   }
-
-  if (typeof propX === 'string') {
-    styles[`${type}Left`] = propX;
-    styles[`${type}Right`] = propX;
+  if (propX !== undefined) {
+    styles[`${type}Left`] = toSpaceValue(propX);
+    styles[`${type}Right`] = toSpaceValue(propX);
   }
-  if (typeof propY === 'string') {
-    styles[`${type}Top`] = propY;
-    styles[`${type}Bottom`] = propY;
+  if (propY !== undefined) {
+    styles[`${type}Top`] = toSpaceValue(propY);
+    styles[`${type}Bottom`] = toSpaceValue(propY);
   }
 
   return styles;

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs.tsx';
+import { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs.tsx';
 
 const meta = {
   title: 'Components/Breadcrumbs',