@cyber-harbour/ui 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Checkbox/Checkbox.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+
+type CheckboxProps = FabricComponent<{
+  label?: any;
+}> &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+  const spaceProps = destructSpaceProps(props);
+  return (
+    <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
+      <HiddenInput type="checkbox" disabled={disabled} {...props} />
+      <CustomCheckbox />
+      {!!label && <LabelText>{label}</LabelText>}
+    </StyledCheckbox>
+  );
+};
+
+const CustomCheckbox = styled.div(
+  ({ theme }) => `
+    width: ${pxToRem(15)};
+    height: ${pxToRem(15)};
+    border-radius: ${pxToRem(2)};
+    border: 1px solid ${theme.colors.stroke.main};
+    background-color: ${theme.colors.background};
+    transition: all 0.2s ease;
+  `
+);
+
+const LabelText = styled.span(
+  ({ theme }) => `
+  margin-left: ${pxToRem(5)};
+  font-size: ${theme.typography.variants.h3.fontSize};
+  color: ${theme.colors.text.main};
+`
+);
+
+const HiddenInput = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+
+const StyledCheckbox = createComponent(
+  styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
+    return `
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+
+    &:hover {
+        ${HiddenInput}:not(:disabled) + ${CustomCheckbox} {
+          border-color: ${theme.colors.primary.main};
+        }
+    }
+
+    ${HiddenInput}:checked + ${CustomCheckbox} {
+        background-color: ${theme.colors.primary.main};
+        border-color: ${theme.colors.primary.main};
+    }
+    ${HiddenInput}:disabled + ${CustomCheckbox} {
+        background-color: ${theme.colors.disable};
+    }
+    `;
+  })
+);

package/src/Core/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/src/Core/Label/Label.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, LabelSize, createComponent, generatePropertySpaceStyle, propToRem } from '../../Theme';
+
+type LabelProps = FabricComponent<{
+  label?: any;
+  helpText?: any;
+  errorText?: string;
+  size?: LabelSize;
+  children: any;
+}> &
+  Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
+  (LabelDirection | LabelDirectionRaw);
+
+type LabelDirectionRaw = {
+  direction?: 'row' | 'row-reverse';
+  childrenWidth?: number | string;
+};
+
+type LabelDirection = {
+  direction?: Omit<React.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
+};
+
+export const Label = ({
+  label,
+  helpText,
+  children,
+  direction = 'column',
+  size = 'small',
+  errorText,
+  ...props
+}: LabelProps) => {
+  const $width =
+    direction === 'row' || direction === 'row-reverse' ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
+
+  return (
+    <StyledLabel $size={size} $direction={direction} {...props}>
+      <LabelWrapper $width={$width} $size={size}>
+        {!!label && <LabelText $size={size}>{label}</LabelText>}
+        {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
+      </LabelWrapper>
+      <Wrapper $size={size} $width={$width}>
+        {children}
+        {!!errorText && <ErrorText $size={size}>{errorText}</ErrorText>}
+      </Wrapper>
+    </StyledLabel>
+  );
+};
+
+type StyledProps = {
+  $size: LabelSize;
+  $direction?: LabelDirection['direction'] | LabelDirectionRaw['direction'];
+};
+
+const Wrapper = styled.div<StyledProps & { $width: number | string }>(
+  ({ theme, $width }) => `
+  flex-basis: 100%;
+  @media (min-width: ${theme.breakpoints.m}px) {
+    flex-basis: ${propToRem($width, theme.baseSize)};
+  }
+  `
+);
+
+const LabelWrapper = styled(Wrapper)<StyledProps>`
+  align-self: flex-start;
+`;
+
+const LabelText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  line-height: 1.2;
+  font-weight: 500;
+  font-size: ${theme.label.sizes[$size].fontSize};
+  color: ${theme.label.color};
+  cursor: pointer;
+  :hover {
+    color: ${theme.colors.primary.main};
+  }
+
+`
+);
+
+const HelpText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.label.helpTextColor};
+`
+);
+const ErrorText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.colors.error};
+`
+);
+
+const StyledLabel = createComponent(
+  styled.label<FabricComponent<StyledProps>>(
+    ({ theme, $direction = 'column', $size, mb = theme.label.sizes[$size].marginBottom }) => {
+      return `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+
+        @media (min-width: ${theme.breakpoints.m}px) {
+          flex-direction: ${$direction};
+        }
+
+        gap: ${theme.label.sizes[$size].gap};
+        ${generatePropertySpaceStyle(theme, 'margin-bottom', mb)};
+      `;
+    }
+  ),
+  { ignoreStyles: ['margin-bottom'] }
+);

package/src/Core/Label/index.ts

@@ -0,0 +1 @@
+export * from './Label';

package/src/Core/index.ts

@@ -16,3 +16,5 @@ export * from './Line';
 export * from './EmptyData';
 export * from './Tag';
 export * from './Alert';
+export * from './Label';
+export * from './Checkbox';