@remember-web/primitive 0.2.13 → 0.3.0

package/src/Labels/Label/styles.ts

@@ -0,0 +1,138 @@
+import {
+  contents000,
+  contents100,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+import type { LabelProps } from './types';
+
+interface LabelContainerProps {
+  $size: LabelProps['size'];
+  $direction: LabelProps['direction'];
+  $gap: LabelProps['gap'];
+  $width: LabelProps['width'];
+}
+export const LabelContainer = styled.label<LabelContainerProps>`
+  display: flex;
+  position: relative;
+  width: ${({ $width = 'auto' }) => $width};
+  min-width: min-content; 
+
+  ${({ $size, $gap }) => {
+    const defaultGap = $size === 'large' ? '12px' : '8px';
+    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;
+
+    return css`
+      gap: ${finalGap};
+    `;
+  }}
+
+  ${({ $direction = 'top' }) => {
+    switch ($direction) {
+      // Top variations
+      case 'top':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-left':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-right':
+        return css`
+          flex-direction: column;
+          align-items: flex-end;
+        `;
+      case 'top-center':
+        return css`
+          flex-direction: column;
+          align-items: center;
+        `;
+
+      // Bottom variations
+      case 'bottom':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-left':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-right':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-end;
+        `;
+      case 'bottom-center':
+        return css`
+          flex-direction: column-reverse;
+          align-items: center;
+        `;
+
+      // Left variations
+      case 'left':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+      case 'left-top':
+        return css`
+          flex-direction: row;
+          align-items: flex-start;
+        `;
+      case 'left-bottom':
+        return css`
+          flex-direction: row;
+          align-items: flex-end;
+        `;
+      case 'left-center':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+
+      // Right variations
+      case 'right':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+      case 'right-top':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-start;
+        `;
+      case 'right-bottom':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-end;
+        `;
+      case 'right-center':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+    }
+  }}
+
+  /* Size styles */
+   ${({ $size }) => {
+     switch ($size) {
+       case 'small':
+         return css`
+          ${getTypographyStyles('UIBody2')}
+          color: ${contents100};
+        `;
+       case 'large':
+       default:
+         return css`
+          ${getTypographyStyles('Title2')}
+          color: ${contents000};
+        `;
+     }
+   }}
+`;

package/src/Labels/Label/types.ts

@@ -0,0 +1,30 @@
+import type { LabelHTMLAttributes } from 'react';
+
+export type Direction =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'left-center'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'right-center';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  text: string;
+  size?: 'small' | 'large';
+  gap?: number;
+  width?: string;
+  rightElement?: React.ReactNode;
+  required?: boolean;
+  direction?: Direction;
+  children?: React.ReactNode;
+}

package/src/Labels/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/src/index.ts

@@ -9,3 +9,4 @@ export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
 export * from './Chips';
+export * from './Labels';