tharaday 0.1.1

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

@@ -0,0 +1,638 @@
+.box {
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+/* Display */
+.display-block {
+  display: block;
+}
+.display-flex {
+  display: flex;
+}
+.display-inline-flex {
+  display: inline-flex;
+}
+.display-grid {
+  display: grid;
+}
+.display-inline-block {
+  display: inline-block;
+}
+.display-none {
+  display: none;
+}
+
+/* Flex Direction */
+.flexDirection-row {
+  flex-direction: row;
+}
+.flexDirection-column {
+  flex-direction: column;
+}
+.flexDirection-row-reverse {
+  flex-direction: row-reverse;
+}
+.flexDirection-column-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Align Items */
+.alignItems-stretch {
+  align-items: stretch;
+}
+.alignItems-flex-start {
+  align-items: flex-start;
+}
+.alignItems-center {
+  align-items: center;
+}
+.alignItems-flex-end {
+  align-items: flex-end;
+}
+.alignItems-baseline {
+  align-items: baseline;
+}
+
+/* Justify Content */
+.justifyContent-flex-start {
+  justify-content: flex-start;
+}
+.justifyContent-center {
+  justify-content: center;
+}
+.justifyContent-flex-end {
+  justify-content: flex-end;
+}
+.justifyContent-space-between {
+  justify-content: space-between;
+}
+.justifyContent-space-around {
+  justify-content: space-around;
+}
+.justifyContent-space-evenly {
+  justify-content: space-evenly;
+}
+
+/* Flex Wrap */
+.flexWrap-nowrap {
+  flex-wrap: nowrap;
+}
+.flexWrap-wrap {
+  flex-wrap: wrap;
+}
+.flexWrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+/* Text Align */
+.textAlign-left {
+  text-align: left;
+}
+.textAlign-center {
+  text-align: center;
+}
+.textAlign-right {
+  text-align: right;
+}
+.textAlign-justify {
+  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-6 {
+  padding: var(--ds-space-6);
+}
+.p-8 {
+  padding: var(--ds-space-8);
+}
+.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-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-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-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-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-6 {
+  padding-top: var(--ds-space-6);
+}
+.pt-8 {
+  padding-top: var(--ds-space-8);
+}
+.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-6 {
+  padding-bottom: var(--ds-space-6);
+}
+.pb-8 {
+  padding-bottom: var(--ds-space-8);
+}
+.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-6 {
+  padding-left: var(--ds-space-6);
+}
+.pl-8 {
+  padding-left: var(--ds-space-8);
+}
+.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-6 {
+  padding-right: var(--ds-space-6);
+}
+.pr-8 {
+  padding-right: var(--ds-space-8);
+}
+.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-6 {
+  gap: var(--ds-space-6);
+}
+.gap-8 {
+  gap: var(--ds-space-8);
+}
+.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-6 {
+  margin: var(--ds-space-6);
+}
+.m-8 {
+  margin: var(--ds-space-8);
+}
+.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-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-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-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-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-6 {
+  margin-top: var(--ds-space-6);
+}
+.mt-8 {
+  margin-top: var(--ds-space-8);
+}
+.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-6 {
+  margin-bottom: var(--ds-space-6);
+}
+.mb-8 {
+  margin-bottom: var(--ds-space-8);
+}
+.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-6 {
+  margin-left: var(--ds-space-6);
+}
+.ml-8 {
+  margin-left: var(--ds-space-8);
+}
+.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-6 {
+  margin-right: var(--ds-space-6);
+}
+.mr-8 {
+  margin-right: var(--ds-space-8);
+}
+.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);
+}
+.bg-subtle {
+  background-color: var(--ds-surface-1);
+}
+.bg-info-subtle {
+  background-color: var(--ds-info-subtle, var(--ds-info));
+}
+.bg-success-subtle {
+  background-color: var(--ds-success-subtle, var(--ds-success));
+}
+.bg-warning-subtle {
+  background-color: var(--ds-warning-subtle, var(--ds-warning));
+}
+.bg-danger-subtle {
+  background-color: var(--ds-danger-subtle, var(--ds-danger));
+}
+
+/* Border */
+.border {
+  border: 1px solid var(--ds-border-1);
+}
+.borderBottom {
+  border-bottom: 1px solid var(--ds-border-1);
+}
+
+/* Border Color */
+.borderColor-main {
+  border-color: var(--ds-border-1);
+}
+.borderColor-subtle {
+  border-color: var(--ds-border-2);
+}
+.borderColor-danger {
+  border-color: var(--ds-danger);
+}
+
+/* Background Color */
+.backgroundColor-none {
+  background-color: transparent;
+}
+.backgroundColor-subtle {
+  background-color: var(--ds-surface-1);
+}
+.backgroundColor-danger-subtle {
+  background-color: var(--ds-danger-subtle);
+}
+.backgroundColor-success-subtle {
+  background-color: var(--ds-success-subtle);
+}
+.backgroundColor-warning-subtle {
+  background-color: var(--ds-warning-subtle);
+}
+.backgroundColor-info-subtle {
+  background-color: var(--ds-info-subtle);
+}
+
+/* Border Radius */
+.borderRadius-none {
+  border-radius: 0;
+}
+.borderRadius-sm {
+  border-radius: var(--ds-radius-sm);
+}
+.borderRadius-md {
+  border-radius: var(--ds-radius-md);
+}
+.borderRadius-lg {
+  border-radius: var(--ds-radius-lg);
+}
+.borderRadius-full {
+  border-radius: var(--ds-radius-full);
+}

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from './Box.tsx';
+
+const meta = {
+  title: 'Components/Box',
+  component: Box,
+  tags: ['autodocs'],
+  argTypes: {
+    display: {
+      control: 'select',
+      options: ['block', 'flex', 'inline-flex', 'grid', 'inline-block', 'none'],
+    },
+    padding: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 6, 8, 12, 14],
+    },
+    gap: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 6, 8, 12, 14],
+    },
+    flexDirection: {
+      control: 'select',
+      options: ['row', 'column', 'row-reverse', 'column-reverse'],
+    },
+    alignItems: {
+      control: 'select',
+      options: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
+    },
+    justifyContent: {
+      control: 'select',
+      options: [
+        'flex-start',
+        'center',
+        'flex-end',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+  },
+} satisfies Meta<typeof Box>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'This is a Box component',
+    padding: 4,
+    border: true,
+  },
+};
+
+export const FlexRow: Story = {
+  args: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 4,
+    padding: 4,
+    border: true,
+    children: (
+      <>
+        <Box padding={3} backgroundColor="subtle">
+          Item 1
+        </Box>
+        <Box padding={3} backgroundColor="subtle">
+          Item 2
+        </Box>
+        <Box padding={3} backgroundColor="subtle">
+          Item 3
+        </Box>
+      </>
+    ),
+  },
+};
+
+export const FlexColumn: Story = {
+  args: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    padding: 4,
+    border: true,
+    children: (
+      <>
+        <Box padding={3} backgroundColor="subtle">
+          Item 1
+        </Box>
+        <Box padding={3} backgroundColor="subtle">
+          Item 2
+        </Box>
+        <Box padding={3} backgroundColor="subtle">
+          Item 3
+        </Box>
+      </>
+    ),
+  },
+};
+
+export const CustomElement: Story = {
+  args: {
+    as: 'section',
+    padding: 8,
+    backgroundColor: 'subtle',
+    borderRadius: 'md',
+    children: 'This box is rendered as a <section> element',
+  },
+};