@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Form/Radio/Radio.module.scss

@@ -0,0 +1,61 @@
+@layer Radio {
+  .RadioRoot {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .RadioTrigger {
+    .RadioIcon {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--border-color, #8a8c8f);
+      border-radius: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        border-color: var(--hover-border-color, #b1916b);
+      }
+
+      &.checked {
+        border-color: var(--border-color, #b1916b);
+        background-color: var(--background-color, #b1916b);
+      }
+
+      .RadioInner {
+        width: 50%;
+        height: 50%;
+        background-color: var(--border-color, #ffffff);
+        margin: auto;
+        border-radius: 50%;
+      }
+
+      &.disabled,
+      &.readOnly {
+        border-color: var(--border-color, #8a8c8f);
+      }
+    }
+  }
+
+  .RadioLabel {
+    @include labelMedium;
+    color: var(--color, #8a8c8f);
+
+    &:hover {
+      color: var(--hover-color, #b1916b);
+    }
+
+    &.checked {
+      @include bodyRegularSmall;
+    }
+
+    &.disabled,
+    &.readOnly {
+      color: var(--color, #8a8c8f);
+    }
+  }
+}

package/src/components/Form/Radio/Radio.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import styles from "./Radio.module.scss";
+import cn from "classnames/bind";
+import {
+  initialState,
+  RadioContext,
+  RadioProviderProps,
+} from "./Radio.context";
+import HelperTextComponent from "../../HelperText/HelperText";
+import useRadioColors from "./Radio.colors";
+
+const cx = cn.bind(styles);
+
+type AsProps = {
+  checked: boolean;
+  value?: string;
+  className?: string;
+  id?: string;
+};
+
+type TriggerProps = React.PropsWithChildren<{
+  as?: (props: AsProps) => React.ReactNode;
+  className?: string;
+  checkedClassName?: string;
+}>;
+
+const Trigger = (props: TriggerProps) => {
+  const { as, className, checkedClassName } = props;
+  const { value, checked, name, id, disabled, readOnly, onChange } =
+    React.useContext(RadioContext);
+
+  const colorSet = useRadioColors();
+  const variant = React.useMemo(
+    () => (checked ? "selected" : "unselected"),
+    [checked]
+  );
+
+  return as ? (
+    <React.Fragment>
+      <input
+        id={id}
+        name={name}
+        type="radio"
+        checked={checked}
+        hidden
+        value={value}
+        onChange={onChange}
+      />
+      {as({ checked, value, className, id })}
+    </React.Fragment>
+  ) : (
+    <div className={cx("RadioTrigger", className)}>
+      <input
+        id={id}
+        name={name}
+        type="radio"
+        checked={checked}
+        hidden
+        onChange={onChange}
+        value={value}
+      />
+      <div
+        className={cx("RadioIcon", {
+          [checkedClassName ? checkedClassName : "checked"]: checked,
+          disabled,
+          readOnly,
+        })}
+        style={{
+          "--border-color": disabled
+            ? colorSet[variant].disabled.borderColor
+            : colorSet[variant].borderColor,
+          "--background-color": disabled
+            ? colorSet[variant].disabled.backgroundColor
+            : colorSet[variant].backgroundColor,
+          "--hover-border-color": colorSet[variant].hover.borderColor,
+        }}
+      >
+        {checked && <div className={cx("RadioInner")} />}
+      </div>
+    </div>
+  );
+};
+
+const HelperText = (
+  props: React.ComponentProps<typeof HelperTextComponent>
+) => {
+  const { status } = React.useContext(RadioContext);
+  return <HelperTextComponent {...props} status={status} />;
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  checkedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, checkedColor, children } = props;
+  const { checked, disabled, readOnly } = React.useContext(RadioContext);
+  const colorSet = useRadioColors();
+  const variant = React.useMemo(
+    () => (checked ? "selected" : "unselected"),
+    [checked]
+  );
+
+  return (
+    <span
+      className={cx("RadioLabel", className, {
+        checked,
+        disabled,
+        readOnly,
+      })}
+      style={{
+        "--color":
+          checkedColor ?? disabled
+            ? colorSet[variant].disabled.color
+            : colorSet[variant].color,
+        "--hover-color": colorSet[variant].hover.color,
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const Root = (props: RadioProviderProps) => {
+  const { id, value, className } = props;
+
+  const onChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (props.disabled || props.readOnly) {
+        return false;
+      }
+
+      props.onChange?.(e.target.id);
+    },
+    [props]
+  );
+
+  const checkedValue = id === value;
+
+  const ContextValue = React.useMemo(
+    () => ({
+      ...initialState,
+      ...props,
+      id: id ?? "",
+      checked: checkedValue,
+      onChange,
+    }),
+    [props, id, checkedValue, onChange]
+  );
+
+  return (
+    <RadioContext value={ContextValue}>
+      <label htmlFor={id} className={cx("RadioRoot", className)}>
+        {props.children}
+      </label>
+    </RadioContext>
+  );
+};
+
+interface IRadioInput {
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Label: typeof Label;
+  HelperText: typeof HelperText;
+}
+
+export default {
+  Root,
+  Trigger,
+  Label,
+  HelperText,
+} as IRadioInput;

package/src/components/Form/Switch/Switch.colors.tsx

@@ -0,0 +1,42 @@
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const useSwitchColors = () => {
+  const selected = {
+    backgroundColor: colorSet.primary.pMain,
+    color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    borderColor: "transparent",
+    hover: {
+      backgroundColor: colorSet.primary.pDark,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+    },
+  };
+
+  const unselected = {
+    backgroundColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+    borderColor: "transparent",
+    hover: {
+      backgroundColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+    },
+  };
+
+  return {
+    selected,
+    unselected,
+  };
+};
+
+export default useSwitchColors;

package/src/components/Form/Switch/Switch.context.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+type SwitchStatus = "error" | "warning" | "success" | undefined;
+
+type SwitchContextType = {
+  /** input value */
+  value?: boolean;
+  /** onChange */
+  onChange?: (...args: any) => void;
+  /** name */
+  name?: string;
+  /** Disabled */
+  disabled?: boolean;
+  /** readOnly */
+  readOnly?: boolean;
+  /** status */
+  status?: SwitchStatus;
+  /** size */
+  size?: "small" | "medium" | "large";
+};
+
+const initialState: SwitchContextType = {
+  value: false,
+  onChange: () => {},
+  name: "",
+  disabled: false,
+  readOnly: false,
+  size: "small",
+};
+
+export const SwitchContext =
+  React.createContext<SwitchContextType>(initialState);
+
+export type SwitchProviderProps = React.PropsWithChildren<
+  Partial<Omit<SwitchContextType, "">>
+> & {
+  className?: string;
+};
+
+export const SwitchProvider: React.FC<SwitchProviderProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <SwitchContext.Provider value={{ ...initialState, ...props }}>
+      {children}
+    </SwitchContext.Provider>
+  );
+};

package/src/components/Form/Switch/Switch.module.scss

@@ -0,0 +1,53 @@
+.SwitchWrapper {
+  // display: flex;
+  display: inline-flex;
+  align-items: center;
+  padding: 8px;
+  height: 64px;
+  background-color: var(--background-color, #e1e3e7);
+  min-width: 148px;
+  border-radius: 64px;
+  transition: background-color 0.3s;
+
+  &.small {
+    height: 32px;
+    min-width: 96px;
+  }
+
+  &.medium {
+    height: 48px;
+    min-width: 120px;
+  }
+
+  .SwitchInput {
+    display: none;
+  }
+
+  .SwitchInput:checked + .SwitchBullet {
+    margin-left: 100%;
+    transform: translateX(-100%);
+  }
+
+  .SwitchBullet {
+    height: 85%;
+    aspect-ratio: 1 /1;
+    background-color: #ffffff;
+    border-radius: 50%;
+    transition: all 0.3s;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.SwitchLabel {
+  @include labelMedium;
+  color: var(--color, #8a8c8f);
+
+  &.checked {
+    @include bodyRegularSmall;
+  }
+}
+
+.SwitchRoot {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/Form/Switch/Switch.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import styles from "./Switch.module.scss";
+import cn from "classnames/bind";
+import {
+  SwitchContext,
+  SwitchProvider,
+  SwitchProviderProps,
+} from "./Switch.context";
+import useSwitchColors from "./Switch.colors";
+
+const cx = cn.bind(styles);
+
+type AsProps = {
+  checked?: boolean;
+  value?: boolean;
+  className?: string;
+  id?: string;
+};
+
+type TriggerProps = React.PropsWithChildren<{
+  as?: (props: AsProps) => React.ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  bulletClassName?: string;
+}>;
+
+const Trigger = (props: TriggerProps) => {
+  const { as, className, wrapperClassName, bulletClassName } = props;
+  const { value, onChange, name, size, disabled } =
+    React.useContext(SwitchContext);
+
+  const colorSet = useSwitchColors();
+  const variant = React.useMemo(
+    () => (value ? "selected" : "unselected"),
+    [value]
+  );
+
+  return as ? (
+    <React.Fragment>
+      <input
+        name={name}
+        type="checkbox"
+        checked={value}
+        hidden
+        value={value ? "on" : "off"}
+        id={name}
+        onChange={onChange}
+      />
+      {as({ checked: value, value, className, id: name })}
+    </React.Fragment>
+  ) : (
+    <div
+      className={cx("SwitchWrapper", size, wrapperClassName, {
+        checked: !!value,
+      })}
+      style={{
+        "--background-color": disabled
+          ? colorSet[variant].disabled.backgroundColor
+          : colorSet[variant].backgroundColor,
+      }}
+    >
+      <input
+        type={"checkbox"}
+        className={cx("SwitchInput")}
+        checked={value}
+        name={name}
+        value={value ? "on" : "off"}
+        id={name}
+        onChange={onChange}
+      />
+      <div
+        className={cx("SwitchBullet", bulletClassName, { checked: !!value })}
+        style={{
+          backgroundColor: value ? "#fff" : undefined,
+          // backgroundColor: value ? colorSet?.tintColor : undefined,
+        }}
+      ></div>
+    </div>
+  );
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  checkedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, checkedColor, children } = props;
+  const { value, disabled } = React.useContext(SwitchContext);
+
+  const colorSet = useSwitchColors();
+  const variant = React.useMemo(
+    () => (value ? "selected" : "unselected"),
+    [value]
+  );
+
+  return (
+    <span
+      className={cx("SwitchLabel", className, {
+        checked: value,
+      })}
+      style={{
+        "--color":
+          checkedColor ?? disabled
+            ? colorSet[variant].disabled.color
+            : colorSet[variant].color,
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const Root = (props: SwitchProviderProps) => {
+  const { name, value, className, size = "small" } = props;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.disabled) {
+      return false;
+    }
+
+    props.onChange?.(e.target.checked);
+    e.stopPropagation();
+  };
+
+  return (
+    <SwitchProvider
+      {...{
+        ...props,
+        onChange,
+        value,
+      }}
+    >
+      <label htmlFor={name} className={cx("SwitchRoot", size, className)}>
+        {props.children}
+      </label>
+    </SwitchProvider>
+  );
+};
+
+interface ISwitch {
+  Root: typeof Root;
+  Label: typeof Label;
+  Trigger: typeof Trigger;
+}
+
+export default {
+  Root,
+  Label,
+  Trigger,
+} as ISwitch;

package/src/components/Form/TextArea/TextArea.colors.tsx

@@ -0,0 +1,76 @@
+import { colorThemes as colorSet } from "../../../styles/color2";
+
+const useTextAreaColors = () => {
+  const outlined = {
+    inactive: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    focused: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    error: {
+      backgroundColor: "transparent",
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+  };
+
+  const contained = {
+    inactive: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    focused: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+    },
+    error: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: "transparent",
+    },
+  };
+
+  return {
+    outlined,
+    contained,
+  };
+};
+
+export default useTextAreaColors;

package/src/components/Form/TextArea/TextArea.context.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+
+type Variant = "contained" | "outlined";
+
+type InputStatus = "error" | "warning" | "success" | undefined;
+
+type TextAreaContextType = {
+  /** value */
+  value: string;
+  /** onChange */
+  onChange: (...args: any) => void;
+  /** placeholder */
+  placeholder: string;
+  /** rows */
+  rows: number;
+  /** disabled */
+  disabled: boolean;
+  /** variant */
+  variant: Variant;
+  /** readOnly */
+  readOnly: boolean;
+  /** name */
+  name: string;
+  /** focused */
+  focused: boolean;
+  /** onFocus */
+  onFocus?: (...args: any) => void;
+  /** onBlur */
+  onBlur?: (...args: any) => void;
+  /** status */
+  status?: InputStatus;
+  /** focused color */
+  focusedColor?: string;
+  /** input Ref */
+  _inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+  /** maxLength */
+  maxLength?: number;
+  /** maxRow */
+  maxRows?: number;
+  /** accentType */
+  accentType?: "in" | "out" | "all";
+};
+
+const initialState: TextAreaContextType = {
+  value: "",
+  onChange: () => {},
+  placeholder: "",
+  rows: 3,
+  disabled: false,
+  variant: "outlined",
+  readOnly: false,
+  name: "",
+  focused: false,
+  onFocus: () => {},
+  onBlur: () => {},
+  maxLength: undefined,
+  focusedColor: "var(--Simentic-Outline, #636567)",
+  accentType: "in",
+};
+
+export const TextAreaContext =
+  React.createContext<TextAreaContextType>(initialState);
+
+export type TextAreaProviderProps = React.PropsWithChildren<
+  Partial<TextAreaContextType>
+> & {
+  className?: string;
+};
+
+export const TextAreaProvider: React.FC<TextAreaProviderProps> = ({
+  children,
+  ...rest
+}) => {
+  const [focused, setFocused] = React.useState(false);
+  const _inputRef = React.useRef<HTMLTextAreaElement>(null);
+  return (
+    <TextAreaContext
+      value={{
+        ...initialState,
+        ...rest,
+        _inputRef,
+        focused,
+        onFocus: (e: any) => {
+          setFocused(true);
+          rest.onFocus?.call(null, e);
+        },
+        onBlur: (e: any) => {
+          setFocused(false);
+          rest.onBlur?.call(null, e);
+        },
+      }}
+    >
+      {children}
+    </TextAreaContext>
+  );
+};