atomsystem 0.1.38 → 0.1.39

package/app/templates/Button/Button.tsx

@@ -3,20 +3,24 @@ import clsx from "clsx";
 
 export const Button = ({
   children,
-  type,
+  type = "primary",
+  size = "md",
+  className,
   style,
   disabled,
   onClick,
 }: {
   children: React.ReactNode;
-  type: "primary" | "secondary" | "success" | "warning" | "danger" | "gray";
+  type?: "primary" | "secondary" | "success" | "warning" | "danger" | "gray" | "outline";
+  size?: "sm" | "md" | "lg";
+  className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
   onClick?: () => void;
 }) => {
   return (
     <button
-      className={clsx("btn", type)}
+      className={clsx("btn", type, size, className)}
       style={style}
       disabled={disabled}
       onClick={onClick}

package/app/templates/Button/button.css

@@ -9,67 +9,127 @@
 }
 
 .btn.primary { 
-    --btn-bg: var(--color-primary); 
-    --btn-hover: var(--color-blue-600);
-    --btn-active: var(--color-blue-700);
-    --btn-bg-disabled: var(--button-primary-bg-disabled);
-    --btn-text-disabled: var(--button-primary-text-disabled);
-    --btn-border-disabled: var(--button-primary-border-disabled);
+    background-color: var(--color-primary);
+    color: var(--color-white);
+}
+.btn.primary:hover:not(:disabled) {
+    background-color: var(--color-blue-600);
+}
+.btn.primary:active:not(:disabled) {
+    background-color: var(--color-blue-700);
 }
+.btn.primary:disabled {
+    background-color: var(--button-primary-bg-disabled);
+    color: var(--button-primary-text-disabled);
+    border: 1px solid var(--button-primary-border-disabled);
+}
+
 .btn.secondary { 
-    --btn-bg: var(--color-secondary);
-    --btn-hover: var(--color-indigo-600);
-    --btn-active: var(--color-indigo-700);
-    --btn-bg-disabled: var(--button-secondary-bg-disabled);
-    --btn-text-disabled: var(--button-secondary-text-disabled);
-    --btn-border-disabled: var(--button-secondary-border-disabled);
+    background-color: var(--color-secondary);
+    color: var(--color-white);
+}
+.btn.secondary:hover:not(:disabled) {
+    background-color: var(--color-indigo-600);
+}
+.btn.secondary:active:not(:disabled) {
+    background-color: var(--color-indigo-700);
 }
+.btn.secondary:disabled {
+    background-color: var(--button-secondary-bg-disabled);
+    color: var(--button-secondary-text-disabled);
+    border: 1px solid var(--button-secondary-border-disabled);
+}
+
 .btn.success { 
-    --btn-bg: var(--color-success); 
-    --btn-hover: var(--color-green-600);
-    --btn-active: var(--color-green-700);
-    --btn-bg-disabled: var(--button-success-bg-disabled);
-    --btn-text-disabled: var(--button-success-text-disabled);
-    --btn-border-disabled: var(--button-success-border-disabled);
+    background-color: var(--color-success);
+    color: var(--color-white);
+}
+.btn.success:hover:not(:disabled) {
+    background-color: var(--color-green-600);
+}
+.btn.success:active:not(:disabled) {
+    background-color: var(--color-green-700);
 }
+.btn.success:disabled {
+    background-color: var(--button-success-bg-disabled);
+    color: var(--button-success-text-disabled);
+    border: 1px solid var(--button-success-border-disabled);
+}
+
 .btn.warning { 
-    --btn-bg: var(--color-warning); 
-    --btn-hover: var(--color-yellow-600);
-    --btn-active: var(--color-yellow-700);
-    --btn-bg-disabled: var(--button-warning-bg-disabled);
-    --btn-text-disabled: var(--button-warning-text-disabled);
-    --btn-border-disabled: var(--button-warning-border-disabled);
+    background-color: var(--color-warning);
+    color: var(--color-white);
+}
+.btn.warning:hover:not(:disabled) {
+    background-color: var(--color-yellow-600);
+}
+.btn.warning:active:not(:disabled) {
+    background-color: var(--color-yellow-700);
+}
+.btn.warning:disabled {
+    background-color: var(--button-warning-bg-disabled);
+    color: var(--button-warning-text-disabled);
+    border: 1px solid var(--button-warning-border-disabled);
 }
+
 .btn.danger { 
-    --btn-bg: var(--color-danger); 
-    --btn-hover: var(--color-red-600);
-    --btn-active: var(--color-red-700);
-    --btn-bg-disabled: var(--button-danger-bg-disabled);
-    --btn-text-disabled: var(--button-danger-text-disabled);
-    --btn-border-disabled: var(--button-danger-border-disabled);
+    background-color: var(--color-danger);
+    color: var(--color-white);
+}
+.btn.danger:hover:not(:disabled) {
+    background-color: var(--color-red-600);
+}
+.btn.danger:active:not(:disabled) {
+    background-color: var(--color-red-700);
+}
+.btn.danger:disabled {
+    background-color: var(--button-danger-bg-disabled);
+    color: var(--button-danger-text-disabled);
+    border: 1px solid var(--button-danger-border-disabled);
 }
+
 .btn.gray { 
-    --btn-bg: var(--color-gray-500); 
-    --btn-hover: var(--color-gray-600);
-    --btn-active: var(--color-gray-700);
-    --btn-bg-disabled: var(--button-gray-bg-disabled);
-    --btn-text-disabled: var(--button-gray-text-disabled);
-    --btn-border-disabled: var(--button-gray-border-disabled);
+    background-color: var(--color-gray-500);
+    color: var(--color-white);
+}
+.btn.gray:hover:not(:disabled) {
+    background-color: var(--color-gray-600);
+}
+.btn.gray:active:not(:disabled) {
+    background-color: var(--color-gray-700);
+}
+.btn.gray:disabled {
+    background-color: var(--button-gray-bg-disabled);
+    color: var(--button-gray-text-disabled);
+    border: 1px solid var(--button-gray-border-disabled);
 }
 
-.btn {
-    background-color: var(--btn-bg);
+.btn.outline {
+    background-color: transparent;
+    border: 1px solid var(--color-border-standard);
+    color: var(--color-text-body);
 }
-.btn:hover:not(:disabled) {
-    background-color: var(--btn-hover);
+.btn.outline:hover:not(:disabled) {
+    background-color: var(--color-bg-hover);
 }
-.btn:active:not(:disabled) {
-    background-color: var(--btn-active);
+.btn.outline:active:not(:disabled) {
+    background-color: var(--color-bg-input-standard);
 }
+
+.btn.sm {
+    padding: var(--spacing-sm-y) var(--spacing-common-x);
+    font-size: var(--text-sm);
+}
+.btn.md {
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    font-size: var(--text-body);
+}
+.btn.lg {
+    padding: var(--spacing-small) var(--spacing-common-x);
+    font-size: var(--text-h6);
+}
+
 .btn:disabled {
-    background-color: var(--btn-bg-disabled);
-    color: var(--btn-text-disabled);
     cursor: not-allowed;
     opacity: 0.7;
-    border: 1px solid var(--btn-border-disabled);
-}
+}

package/app/templates/Dropdown/Dropdown.css

@@ -0,0 +1,112 @@
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
+  cursor: pointer;
+  display: flex;
+}
+
+.dropdown-content {
+  position: absolute;
+  z-index: 100;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-standard);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 15px -6px rgba(0, 0, 0, 0.08);
+  padding: 1rem;
+  min-width: 200px;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.95) translateY(10px);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+  background-clip: padding-box;
+}
+
+.dropdown-content.is-open {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+/* Positions with directional scaling */
+.dropdown-content.bottom-right {
+  top: 100%;
+  right: 0;
+  margin-top: 12px;
+  transform-origin: top right;
+}
+
+.dropdown-content.bottom-left {
+  top: 100%;
+  left: 0;
+  margin-top: 12px;
+  transform-origin: top left;
+}
+
+.dropdown-content.top-right {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 12px;
+  transform-origin: bottom right;
+}
+
+.dropdown-content.top-left {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 12px;
+  transform-origin: bottom left;
+}
+
+/* Premium Blur and Dark Mode Polish */
+@supports (backdrop-filter: blur(20px)) {
+  .dropdown-content {
+    background-color: rgba(var(--dropdown-bg, 255, 255, 255), 0.85);
+    backdrop-filter: blur(20px);
+  }
+}
+
+.dark .dropdown-content {
+  --dropdown-bg: 34, 34, 34;
+  background-color: rgba(34, 34, 34, 0.85);
+  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-small);
+  padding: var(--spacing-sm-y, 8px) var(--spacing-common-x);
+  border-radius: var(--radius-common);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  color: var(--text-standard);
+}
+
+
+.dropdown-item:hover {
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-200);
+}
+
+.dark .dropdown-item:hover {
+  background-color: var(--color-dark-400);
+  border-color: var(--color-dark-500);
+}
+
+.dropdown-item:active {
+  background-color: var(--color-gray-200);
+  transform: scale(0.98);
+}
+
+.dark .dropdown-item:active {
+  background-color: var(--color-dark-500);
+}
+
+
+

package/app/templates/Dropdown/Dropdown.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import "./Dropdown.css";
+
+type DropdownPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+
+interface DropdownProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  position?: DropdownPosition;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Dropdown = ({
+  trigger,
+  children,
+  className,
+  contentClassName,
+  position = "bottom-right",
+  isOpen: controlledIsOpen,
+  onOpenChange,
+}: DropdownProps) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggle = () => {
+    const nextValue = !isOpen;
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(nextValue);
+    }
+    onOpenChange?.(nextValue);
+  };
+
+  const close = () => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        close();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className={clsx("dropdown-container", className)} ref={dropdownRef}>
+      <div className="dropdown-trigger" onClick={toggle}>
+        {trigger}
+      </div>
+      <div
+        className={clsx(
+          "dropdown-content",
+          position,
+          isOpen && "is-open",
+          contentClassName
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const DropdownItem = ({
+  children,
+  className,
+  onClick,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}) => {
+  return (
+    <div 
+      className={clsx("dropdown-item", className)} 
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+

package/app/templates/Form/Form.tsx

@@ -50,7 +50,7 @@ export const Input = ({
 };
 
 export const Select = ({
-  options,
+  options = [],
   disabled,
 }: {
   options: string[];