am-shared-assets 0.0.2

package/src/components/Button.tsx

@@ -0,0 +1,137 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+const sizes = {
+  sm: "h-8 text-xs px-3",
+  md: "h-10 text-sm px-4",
+  lg: "h-12 text-base px-6",
+};
+
+const textColors: { [key: string]: string } = {
+  white: "text-white",
+  black: "text-default-900",
+  default: "text-default-900",
+  primary: "text-base-primary",
+  secondary: "text-base-secondary",
+  success: "text-base-success",
+  warning: "text-base-warning",
+  danger: "text-base-danger",
+};
+
+const bgColors: { [key: string]: string } = {
+  default: "bg-default-300",
+  primary: "bg-base-primary",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+const borderColors: { [key: string]: string } = {
+  default: "border-default-300",
+  primary: "border-base-primary",
+  secondary: "border-base-secondary",
+  success: "border-base-success",
+  warning: "border-base-warning",
+  danger: "border-base-danger",
+};
+
+const bgFlatColors: { [key: string]: string } = {
+  default: "bg-default-100",
+  primary: "bg-primary-100",
+  secondary: "bg-secondary-100",
+  success: "bg-success-100",
+  warning: "bg-warning-100",
+  danger: "bg-danger-100",
+};
+
+const radiuses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+const variantFunc = (variant: string, color: string, textColor: string) => {
+  let style = "";
+
+  switch (variant) {
+    case "solid":
+      style = `${bgColors[color]} ${textColors[textColor]}`;
+      break;
+    case "bordered":
+      style = `border-2 ${borderColors[color]} ${textColors[color]}`;
+      break;
+    case "light":
+      style = textColors[color];
+      break;
+    case "flat":
+      style = `${bgFlatColors[color]} ${textColors[color]}`;
+      break;
+    case "faded":
+      style = `border-2 ${borderColors["default"]} ${bgFlatColors["default"]} ${textColors[color]}`;
+      break;
+    case "shadow":
+      style = `shadow-lg ${bgColors[color]} ${textColors[textColor]}`;
+      break;
+    default:
+      break;
+  }
+
+  return style;
+};
+
+export interface ButtonProps {
+  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow";
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  textColor?: "black" | "white";
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  label?: string;
+  icon?: ReactNode;
+  iconPosition?: "right" | "left";
+  width?: "full" | "auto";
+  onClick?: () => void;
+}
+
+export const Button = ({
+  variant = "solid",
+  color = "default",
+  textColor = "black",
+  size = "md",
+  rounded = "none",
+  label,
+  icon,
+  iconPosition = "left",
+  width = "auto",
+  onClick,
+}: ButtonProps) => {
+  const cls = clsx(
+    width === "full" ? "w-full" : "w-auto",
+    iconPosition === "right" ? "flex-row" : "flex-row-reverse",
+    radiuses[rounded],
+    sizes[size],
+    variantFunc(variant, color, textColor),
+  );
+
+  return (
+    <button
+      type="button"
+      className={
+        "flex items-center justify-center gap-2 font-semibold transition-all duration-300 " +
+        cls
+      }
+      onClick={onClick}
+    >
+      {icon}
+      {label && <p>{label}</p>}
+    </button>
+  );
+};

package/src/components/Chip.tsx

@@ -0,0 +1,139 @@
+import clsx from "clsx";
+
+const sizes = {
+  sm: "h-6 text-xs",
+  md: "h-7 text-sm",
+  lg: "h-8 text-base",
+};
+
+const radiuses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+const bgColors: { [key: string]: string } = {
+  default: "bg-default-200",
+  primary: "bg-base-primary",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+const textColors: { [key: string]: string } = {
+  white: "text-content-1",
+  black: "text-layout-fg",
+  default: "text-layout-fg",
+  primary: "text-base-primary",
+  secondary: "text-base-secondary",
+  success: "text-base-success",
+  warning: "text-base-warning",
+  danger: "text-base-danger",
+};
+
+const borderColors: { [key: string]: string } = {
+  default: "border-default-200",
+  primary: "border-base-primary",
+  secondary: "border-base-secondary",
+  success: "border-base-success",
+  warning: "border-base-warning",
+  danger: "border-base-danger",
+};
+
+const bgFlatColors: { [key: string]: string } = {
+  default: "bg-default-200",
+  primary: "bg-primary-100",
+  secondary: "bg-secondary-100",
+  success: "bg-success-100",
+  warning: "bg-warning-100",
+  danger: "bg-danger-100",
+};
+
+const dotColors: { [key: string]: string } = {
+  default: "bg-default-400",
+  primary: "bg-base-primary",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+const variantFunc = (variant: string, color: string, textColor: string) => {
+  let style = "";
+
+  switch (variant) {
+    case "solid":
+      style = `${bgColors[color]} ${textColors[textColor]}`;
+      break;
+    case "bordered":
+      style = `border-2 ${borderColors[color]} ${textColors[color]}`;
+      break;
+    case "light":
+      style = textColors[color];
+      break;
+    case "flat":
+      style = `${bgFlatColors[color]} ${textColors[color]}`;
+      break;
+    case "faded":
+      style = `border-2 ${borderColors["default"]} bg-default-100 ${textColors[color]}`;
+      break;
+    case "shadow":
+      style = `shadow-lg ${bgColors[color]} ${textColors[textColor]}`;
+      break;
+    case "dot":
+      style = `border-2 ${borderColors["default"]} ${textColors["black"]}`;
+      break;
+    default:
+      break;
+  }
+
+  return style;
+};
+
+interface IChipProps {
+  variant?:
+    | "solid"
+    | "bordered"
+    | "light"
+    | "flat"
+    | "faded"
+    | "shadow"
+    | "dot";
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  textColor?: "black" | "white";
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  label?: string;
+}
+
+const Chip = ({
+  variant = "solid",
+  color = "default",
+  textColor = "black",
+  label,
+  size = "md",
+  rounded = "none",
+}: IChipProps) => {
+  const cls = clsx(
+    radiuses[rounded],
+    sizes[size],
+    variantFunc(variant, color, textColor)
+  );
+  return (
+    <div className={`w-fit flex items-center justify-center gap-1 px-2 ${cls}`}>
+      <p>{label}</p>
+      {variant === "dot" && <div className={`size-2 rounded-full ${dotColors[color]}`}></div>}
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/Input.tsx

@@ -0,0 +1,137 @@
+import clsx from "clsx";
+
+const sizes = {
+  sm: "h-8 py-1",
+  lg: "h-10 py-2",
+};
+
+const labelColors: { [key: string]: string } = {
+  default: "text-default-600",
+  primary: "text-base-primary",
+  success: "text-base-success",
+  warning: "text-base-warning",
+  danger: "text-base-danger",
+};
+
+const textColors: { [key: string]: string } = {
+  primary: "text-base-primary hover:text-base-primary",
+  success: "text-base-success hover:text-base-success",
+  warning: "text-base-warning hover:text-base-warning",
+};
+
+const flatBgColors: { [key: string]: string } = {
+  default: "bg-default-100 hover:bg-default-200",
+  primary: "bg-primary-100 hover:bg-primary-50",
+  success: "bg-success-100 hover:bg-success-50",
+  warning: "bg-warning-100 hover:bg-warning-50",
+  danger: "bg-danger-100 hover:bg-danger-50",
+};
+
+const focusedState: { [key: string]: string } = {
+  default: "focus:bg-transparent focus:border focus:border-layout-fg",
+  primary: "focus:bg-transparent focus:border focus:border-base-primary",
+  success: "focus:bg-transparent focus:border focus:border-base-success",
+  warning: "focus:bg-transparent focus:border focus:border-base-warning",
+  danger: "focus:bg-transparent focus:border focus:border-base-danger",
+};
+
+const fadedBorderColors: { [key: string]: string } = {
+  default: "hover:border-default-400",
+  primary: "hover:border-base-primary",
+  success: "hover:border-base-success",
+  warning: "hover:border-base-warning",
+  danger: "hover:border-base-danger",
+};
+
+const radiuses = {
+  sm: "rounded-sm",
+  full: "rounded-full",
+};
+
+const variantFunc = (variant: string, color: string, hasError: boolean) => {
+  let style = "";
+
+  if (hasError)
+    return (style =
+      "bg-danger-100 hover:bg-danger-50 focus:bg-transparent focus:border focus:border-base-danger");
+
+  switch (variant) {
+    case "flat":
+      style = `${flatBgColors[color]} ${focusedState[color]} ${textColors[color]} focus:text-layout-fg`;
+      break;
+    case "bordered":
+      style = `bg-transparent border border-default-200 hover:border-default-400 ${focusedState[color]}`;
+      break;
+    case "faded":
+      style = `border border-default-200 bg-default-100 hover:bg-default-200 ${fadedBorderColors[color]} ${focusedState[color]}`;
+      break;
+    default:
+      break;
+  }
+
+  return style;
+};
+
+interface IInputProps {
+  id: string | number;
+  label?: string;
+  required?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeHolder?: string;
+  variant?: "flat" | "bordered" | "faded";
+  color?: "default" | "primary" | "success" | "warning" | "danger";
+  size?: "sm" | "lg";
+  rounded?: "sm" | "full";
+  description?: string;
+  errorMsg?: string;
+  hasError?: boolean;
+}
+const Input = ({
+  id,
+  label,
+  required = false,
+  value,
+  onChange,
+  placeHolder,
+  variant = "flat",
+  color = "default",
+  size = "sm",
+  rounded = "sm",
+  description = "",
+  errorMsg = "",
+  hasError = false,
+}: IInputProps) => {
+  const cls = clsx(
+    sizes[size],
+    radiuses[rounded],
+    variantFunc(variant, color, hasError),
+  );
+  return (
+    <div className="flex flex-col">
+      {label && (
+        <label
+          htmlFor={`${id}`}
+          className={`text-xs mb-2 ${hasError ? "text-base-danger" : labelColors[color]}`}
+        >
+          {label}
+          {required && <span className="text-base-danger text-sm">*</span>}
+        </label>
+      )}
+      <input
+        id={`${id}`}
+        type="text"
+        value={value}
+        onChange={(e) => onChange && onChange(e.target.value)}
+        placeholder={placeHolder}
+        className={`${cls} w-full px-3 text-sm transition-all duration-200 outline-none`}
+      />
+      {description && !errorMsg && (
+        <p className="mt-1 text-xs text-default-400">{description}</p>
+      )}
+      {errorMsg && <p className="mt-1 mr-1 text-xs text-base-danger">{errorMsg}</p>}
+    </div>
+  );
+};
+
+export default Input;

package/src/components/Radio.tsx

@@ -0,0 +1,89 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+const sizes = {
+  sm: "size-4 min-w-4 p-[3px]",
+  md: "size-5 min-w-5 p-1",
+  lg: "size-6 min-w-6 p-[5px]",
+};
+
+const radioBorderColor = {
+  primary: "border-base-primary",
+  secondary: "border-base-secondary",
+  success: "border-base-success",
+  warning: "border-base-warning",
+  danger: "border-base-danger",
+  neutral: "border-default-500",
+};
+
+const radioBgColor = {
+  primary: "bg-base-primary",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+  neutral: "bg-default-500",
+};
+
+interface IRadioProps {
+  name: string;
+  value?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  size?: "sm" | "md" | "lg";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger"
+    | "neutral";
+  children?: ReactNode;
+}
+
+const Radio = ({
+  name,
+  value,
+  checked,
+  disabled = false,
+  onChange,
+  size = "md",
+  color = "primary",
+  children,
+}: IRadioProps) => {
+  const cls = clsx(
+    sizes[size],
+    checked
+      ? radioBorderColor[color]
+      : "border-base-default hover:bg-default-100 transition-all duration-200",
+  );
+
+  return (
+    <label
+      className={`flex items-center gap-2 ${disabled ? "opacity-50" : "cursor-pointer"}`}
+    >
+      <input
+        name={name}
+        type="radio"
+        value={value}
+        checked={checked}
+        onChange={(e) => onChange && onChange(e.target.value)}
+        disabled={disabled}
+        style={{ display: "none" }}
+      />
+      <div
+        className={`flex justify-center items-center rounded-full border-2 ${cls}`}
+      >
+        {checked && (
+          <span
+            className={`block w-full h-full rounded-full ${radioBgColor[color]}`}
+          />
+        )}
+      </div>
+      <div>{children}</div>
+    </label>
+  );
+};
+
+export default Radio;

package/src/components/RangeSlider.tsx

@@ -0,0 +1,106 @@
+import { Slider } from "@mui/material";
+import type { Dispatch, SetStateAction } from "react";
+import Tooltip from "./Tooltip";
+
+const colors: { [key: string]: string } = {
+  foreground: "#000000",
+  primary: "#112E62",
+  secondary: "#C59C4E",
+  success: "#17C964",
+  warning: "#F5A524",
+  danger: "#F31260",
+};
+const shadowColors: { [key: string]: string } = {
+  foreground: "#A1A1AA",
+  primary: "#D6E0F3",
+  secondary: "#EEE1C9",
+  success: "#d1f4e0",
+  warning: "#fdedd3",
+  danger: "#fdd0df",
+};
+
+interface IRangeSliderProps {
+  value: number | number[];
+  setValue: Dispatch<SetStateAction<any>>;
+  min?: number;
+  max?: number;
+  step?: number;
+  color?:
+    | "foreground"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  tooltipColor?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  tooltipTextColor?: "white" | "black";
+}
+
+export const RangeSlider = ({
+  value,
+  setValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  color = "primary",
+  tooltipColor = "primary",
+  tooltipTextColor = "white",
+}: IRangeSliderProps) => {
+  return (
+    <Slider
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(_, newValue) => {
+        setValue(newValue);
+        // if (typeof newValue !== "number") setSliderValue(newValue);
+      }}
+      onChangeCommitted={(_, newValue) => {
+        // if (typeof newValue !== "number") handleChooseRange(newValue);
+      }}
+      valueLabelFormat={(value) => (
+        <Tooltip
+          color={tooltipColor}
+          textColor={tooltipTextColor}
+          label={`${value.toLocaleString()}`}
+        />
+      )}
+      valueLabelDisplay="auto"
+      sx={{
+        width: "100%",
+        height: "4px",
+        borderRadius: "8px",
+        color: "#D4D4D8",
+        "& .MuiSlider-thumb": {
+          width: "16px",
+          height: "16px",
+          border: "2px solid",
+          borderColor: colors[color],
+          color: "#fff",
+        },
+        "& .MuiSlider-thumb.Mui-focusVisible": {
+          boxShadow: `0 0 0 4px ${shadowColors[color]}`,
+        },
+        "& .MuiSlider-thumb.Mui-active": {
+          boxShadow: `0 0 0 4px ${shadowColors[color]}`,
+        },
+        "& .MuiSlider-thumb:hover": {
+          boxShadow: `0 0 0 4px ${shadowColors[color]}`,
+        },
+        "& .MuiSlider-track": {
+          color: colors[color],
+        },
+        "& .MuiSlider-valueLabel": {
+          backgroundColor: "transparent",
+        },
+      }}
+    />
+  );
+};

package/src/components/Select.tsx

@@ -0,0 +1,13 @@
+const Select = () => {
+    return ( 
+        <div className="w-[328px] p-2 rounded-sm bg-content-1 shadow-[0px_1px_2px_0px_#0000000F,0px_1px_3px_0px_#0000001A]">
+            <div className="flex flex-col gap-1">
+                {new Array(10).fill({}).map((_,i) => (
+                    <div className="w-full h-8 py-1.5 px-2 text-sm rounded-sm hover:bg-content-2 cursor-pointer">متن</div>
+                ))}
+            </div>
+        </div>
+     );
+}
+ 
+export default Select;

package/src/components/Switch.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+
+const sizes = {
+  sm: "min-w-10 min-h-6",
+  md: "min-w-12 min-h-7",
+  lg: "min-w-14 min-h-8",
+};
+
+const colors: { [key: string]: string } = {
+  default: "bg-default-400",
+  primary: "bg-layout-focus",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+interface ISwitchProps {
+  enabled: boolean;
+  onChange: () => void;
+  label?: string;
+  labelPosition?: "right" | "left";
+  size?: "sm" | "md" | "lg";
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  disabled?: boolean;
+}
+const Switch = ({
+  enabled,
+  onChange,
+  label,
+  labelPosition = "left",
+  size = "md",
+  color = "default",
+  disabled = false,
+}: ISwitchProps) => {
+  const cls = clsx(
+    labelPosition === "left" ? "flex-row" : "flex-row-reverse",
+    disabled && "opacity-50",
+  );
+  const buttonCls = clsx(
+    sizes[size],
+    enabled ? colors[color] : "bg-default-700",
+    disabled && "cursor-auto",
+  );
+
+  return (
+    <div className={`flex items-center gap-2 ${cls}`}>
+      <button
+        onClick={onChange}
+        className={`relative rounded-full transition-colors duration-300 p-1 ${buttonCls}`}
+        disabled={disabled}
+      >
+        <span
+          className={`
+            block h-[calc(100%-8px)] aspect-square rounded-full bg-content-1
+            transition-all duration-300 shadow-[0px_0px_1px_0px_#0000004D,0px_2px_10px_0px_#0000000F,0px_0px_5px_0px_#00000005]
+            absolute top-1 left-1 ${enabled && "translate-x-full"}
+            `}
+        />
+      </button>
+      {label && (
+        <p className={`text-default-600 ${size === "sm" && "text-sm"}`}>
+          {label}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Switch;