am-shared-assets 0.0.3 → 0.0.4

package/src/components/Button.tsx

@@ -1,137 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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;