флексбоксы гандоны бля

.idea/watcherTasks.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="sass" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Sass" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>

app/page.tsx

@@ -1,113 +1,24 @@
 import React, { Fragment } from 'react';
-import Fabs from './components/fabs';
+import { Button, Divider } from '../src/primitive-components/components';
-import Badges from './components/badges';
-import Radios from './components/radios';
-import Buttons from './components/buttons';
-import Switches from './components/switches';
-import Checkboxes from './components/checkboxes';
-import IconButtons from './components/icon-buttons';
-import { TextFields } from './components/text-fields';
-import {
-    ButtonLayout,
-    Divider,
-    SegmentedButtons,
-} from '../src/primitive-components/components';
 
 export default function Page() {
     return (
         <Fragment>
-            <div
+            <div className={'m3 m3-wrapper'}>
-                style={{
+                <div>
-                    display: 'flex',
+                    <Button>Label</Button>
-                    flexDirection: 'column',
+                </div>
-                    justifyContent: 'center',
+                <Divider orientation={'vertical'} variant={'full-width'} />
-                    alignItems: 'center',
+                <div>
-                    overflowX: 'auto',
+                    <Button>Label</Button>
-                    gap: '0em',
+                </div>
-                }}
+                <Divider orientation={'vertical'} variant={'inset'} />
-            >
+                <div>
-                <h1>Google Material You UI kit</h1>
+                    <Button>Label</Button>
-                <div
+                </div>
-                    style={{
+                <Divider orientation={'vertical'} variant={'middle-inset'} />
-                        display: 'flex',
+                <div>
-                        flexDirection: 'column',
+                    <Button disabled>Label</Button>
-                        gap: '0.5em',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <div className={'m3 m3-wrapper'}>
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                padding: '25px',
-                            }}
-                        >
-                            <SegmentedButtons>
-                                <ButtonLayout>Segment 1</ButtonLayout>
-                                <ButtonLayout>Segment 2</ButtonLayout>
-                            </SegmentedButtons>
-                        </div>
-                    </div>
-                    <div
-                        className={'m3 m3-wrapper'}
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: '0.5em',
-                            justifyContent: 'space-evenly',
-                            alignItems: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                padding: '25px',
-                            }}
-                        >
-                            <Buttons />
-                        </div>
-                        <Divider
-                            orientation={'vertical'}
-                            variant={'middle-inset'}
-                        />
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                padding: '25px',
-                            }}
-                        >
-                            <IconButtons />
-                        </div>
-                    </div>
-                    <div
-                        className={'m3 m3-wrapper'}
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: '0.5em',
-                            justifyContent: 'space-evenly',
-                            alignItems: 'center',
-                        }}
-                    >
-                        <Checkboxes />
-                        <Divider
-                            orientation={'vertical'}
-                            variant={'middle-inset'}
-                        />
-                        <Radios />
-                        <Divider
-                            orientation={'vertical'}
-                            variant={'middle-inset'}
-                        />
-                        <Badges />
-                    </div>
-                    <Switches />
-                    <TextFields />
-                    <Fabs />
                 </div>
             </div>
         </Fragment>

src/primitive-components/badge/badge.tsx

@@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
             >
                 {children && (
                     <text x={'50%'} y={'50%'}>
-                        {children}
+                        {parseInt(children) > 999 ? '999+' : children}
                     </text>
                 )}
             </svg>

src/primitive-components/card/card.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'outlined' | 'filled' | 'elevated';
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+    ({ variant = 'filled', ...props }, ref) => {
+        const classes =
+            `m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <div {...props} className={classes} ref={ref}>
+                {props.children}
+            </div>
+        );
+    },
+);
+
+export default Card;

src/styles/divider.sass

@@ -1,26 +1,26 @@
 hr.m3.m3-divider
     border: none
     outline: 0.5px solid var(--md-sys-color-outline-variant)
-    margin-inline: 4px
     position: relative
+    margin: 0
 
     &.vertical
-        height: 100%
+        height: auto
+        writing-mode: vertical-lr
 
         &.inset
-            margin-top: 16px
+            margin-inline-start: 16px
 
         &.middle-inset
-            margin-bottom: 16px
+            margin-inline: 16px
-            margin-top: 16px
 
 
     &.horizontal
-        width: 100%
+        width: auto
+        writing-mode: horizontal-tb
 
         &.inset
-            margin-left: 16px
+            margin-inline-start: 16px
 
         &.middle-inset
-            margin-left: 16px
+            margin-inline: 16px
-            margin-right: 16px

src/styles/generics.sass

@@ -25,7 +25,6 @@ html
     user-select: none
 
 .m3.m3-wrapper
-    width: 100%
     position: relative
     display: block
     background-color: var(--md-sys-color-surface)