@shokirovr16/frontend-library 0.1.2

package/templates/ui/button.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+const SIZE_CLASSES = {
+  "extra-small":
+    "px-[6px] py-[4px] gap-0.5 rounded-[6px] text-[14px] font-normal font-['Inter']",
+  small: "px-[12px] py-[8px] gap-0.5 text-[14px] font-semibold font-['Inter']",
+  medium: "px-[12px] py-[10px] gap-1 text-[16px] font-semibold font-['Inter']",
+  large: "px-[16px] py-[12px] gap-1 text-[16px] font-semibold font-['Inter']",
+};
+
+const ICON_SIZE_CLASSES = {
+  "extra-small": "h-4 w-4",
+  small: "h-4 w-4",
+  medium: "h-5 w-5",
+  large: "h-5 w-5",
+};
+
+const TONE_CLASSES = {
+  neutral: {
+    primary: {
+      filled:
+        "bg-colors-button-neutral-primary-active text-colors-texticons-on-accentdark hover:bg-colors-button-neutral-primary-on-hover active:bg-colors-button-neutral-primary-on-press",
+      ghost:
+        "bg-colors-button-neutral-ghost-active text-colors-texticons-primary hover:bg-colors-button-neutral-ghost-on-hover active:bg-colors-button-neutral-ghost-on-press",
+    },
+    secondary:
+      "bg-colors-button-neutral-secondary-active text-colors-texticons-primary hover:bg-colors-button-neutral-secondary-on-hover active:bg-colors-button-neutral-secondary-on-press",
+  },
+  negative: {
+    primary: {
+      filled:
+        "bg-colors-button-negative-primary-active text-colors-texticons-on-accentdark hover:bg-colors-button-negative-primary-on-hover active:bg-colors-button-negative-primary-on-press",
+      ghost:
+        "bg-colors-button-negative-ghost-active text-colors-texticons-negative hover:bg-colors-button-negative-ghost-on-hover active:bg-colors-button-negative-ghost-on-press",
+    },
+    secondary:
+      "bg-colors-button-negative-secondary-active text-colors-texticons-negative hover:bg-colors-button-negative-secondary-on-hover active:bg-colors-button-negative-secondary-on-press",
+  },
+  positive: {
+    primary: {
+      filled:
+        "bg-colors-button-positive-primary-active text-colors-texticons-on-accentdark hover:bg-colors-button-positive-primary-on-hover active:bg-colors-button-positive-primary-on-press",
+      ghost:
+        "bg-colors-button-positive-ghost-active text-colors-texticons-positive hover:bg-colors-button-positive-ghost-on-hover active:bg-colors-button-positive-ghost-on-press",
+    },
+    secondary:
+      "bg-colors-button-positive-secondary-active text-colors-texticons-positive hover:bg-colors-button-positive-secondary-on-hover active:bg-colors-button-positive-secondary-on-press",
+  },
+  accent: {
+    primary: {
+      filled:
+        "bg-colors-button-themed-primary-active text-colors-texticons-on-accentdark hover:bg-colors-button-themed-primary-on-hover active:bg-colors-button-themed-primary-on-press",
+      ghost:
+        "bg-colors-button-themed-ghost-active text-colors-texticons-accent hover:bg-colors-button-themed-ghost-on-hover active:bg-colors-button-themed-ghost-on-press",
+    },
+    secondary:
+      "bg-colors-button-themed-secondary-active text-colors-texticons-accent hover:bg-colors-button-themed-secondary-on-hover active:bg-colors-button-themed-secondary-on-press",
+  },
+};
+
+const DISABLED_CLASSES = {
+  filled:
+    "bg-colors-button-disabled-primarysecondary text-colors-texticons-tertiary",
+  ghost: "bg-colors-button-disabled-ghost text-colors-texticons-tertiary",
+};
+
+function withIconSize(icon, sizeClass) {
+  if (!icon) return null;
+  if (React.isValidElement(icon)) {
+    return React.cloneElement(icon, {
+      className: cn(icon.props.className, sizeClass, "shrink-0"),
+    });
+  }
+  return <span className={cn(sizeClass, "inline-flex shrink-0")}>{icon}</span>;
+}
+
+export function Button({
+  primary = true,
+  size = "medium",
+  tone = "neutral",
+  type = "filled",
+  leftIcon = null,
+  rightIcon = null,
+  disabled = false,
+  label,
+  className,
+  children,
+  ...props
+}) {
+  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.medium;
+  const iconClass = ICON_SIZE_CLASSES[size] ?? ICON_SIZE_CLASSES.medium;
+  const normalizedType = type === "flled" ? "filled" : type;
+  const variantClass = disabled
+    ? (DISABLED_CLASSES[normalizedType] ?? DISABLED_CLASSES.filled)
+    : primary
+      ? TONE_CLASSES[tone]?.primary?.[normalizedType]
+      : TONE_CLASSES[tone]?.secondary;
+
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center border-0 rounded-[10px] transition-colors duration-200 ease-in-out cursor-pointer",
+        "disabled:cursor-auto",
+        sizeClass,
+        variantClass,
+        className,
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {withIconSize(leftIcon, iconClass)}
+      {label || children}
+      {withIconSize(rightIcon, iconClass)}
+    </button>
+  );
+}