@arkyn/components 1.2.0

package/src/components/Button/styles.css

@@ -0,0 +1,363 @@
+/* BASE */
+.arkyn_button {
+  background: transparent;
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+  position: relative;
+  transition: 0.15s all ease-out;
+}
+
+.arkyn_button:hover {
+  cursor: pointer;
+}
+
+.arkyn_button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.arkyn_button .content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+/* VARIANTS */
+.arkyn_button.solid {
+  color: #fff;
+}
+
+.arkyn_button.solid:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_button.solid.primary {
+  background-color: var(--primary-500);
+}
+
+.arkyn_button.solid.primary:hover {
+  background-color: var(--primary-400);
+}
+
+.arkyn_button.solid.primary:disabled {
+  background-color: var(--primary-400);
+}
+
+.arkyn_button.solid.danger {
+  background-color: var(--danger-600);
+}
+
+.arkyn_button.solid.danger:hover {
+  background-color: var(--danger-500);
+}
+
+.arkyn_button.solid.danger:disabled {
+  background-color: var(--danger-500);
+}
+
+.arkyn_button.solid.success {
+  background-color: var(--success-500);
+}
+
+.arkyn_button.solid.success:hover {
+  background-color: var(--success-400);
+}
+
+.arkyn_button.solid.success:disabled {
+  background-color: var(--success-400);
+}
+
+.arkyn_button.solid.warning {
+  background-color: var(--warning-600);
+}
+
+.arkyn_button.solid.warning:hover {
+  background-color: var(--warning-500);
+}
+
+.arkyn_button.solid.warning:disabled {
+  background-color: var(--warning-500);
+}
+
+.arkyn_button.outline {
+  border-color: var(--secondary-300);
+}
+
+.arkyn_button.outline:hover {
+  border-color: var(--secondary-200);
+}
+
+.arkyn_button.outline:disabled {
+  border-color: var(--secondary-200);
+}
+
+.arkyn_button.outline.primary {
+  color: var(--primary-500);
+}
+
+.arkyn_button.outline.primary:hover {
+  color: var(--primary-400);
+}
+
+.arkyn_button.outline.primary:disabled {
+  color: var(--primary-400);
+}
+
+.arkyn_button.outline.danger {
+  color: var(--danger-600);
+}
+
+.arkyn_button.outline.danger:hover {
+  color: var(--danger-500);
+}
+
+.arkyn_button.outline.danger:disabled {
+  color: var(--danger-500);
+}
+
+.arkyn_button.outline.success {
+  color: var(--success-500);
+}
+
+.arkyn_button.outline.success:hover {
+  color: var(--success-400);
+}
+
+.arkyn_button.outline.success:disabled {
+  color: var(--success-400);
+}
+
+.arkyn_button.outline.warning {
+  color: var(--warning-600);
+}
+
+.arkyn_button.outline.warning:hover {
+  color: var(--warning-500);
+}
+
+.arkyn_button.outline.warning:disabled {
+  color: var(--warning-500);
+}
+
+.arkyn_button.ghost:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_button.ghost.primary {
+  color: var(--primary-500);
+  background-color: var(--primary-100);
+}
+
+.arkyn_button.ghost.primary:hover {
+  color: var(--primary-400);
+  background-color: var(--primary-50);
+}
+
+.arkyn_button.ghost.primary:disabled {
+  color: var(--primary-400);
+  background-color: var(--primary-50);
+}
+
+.arkyn_button.ghost.danger {
+  color: var(--danger-600);
+  background-color: var(--danger-100);
+}
+
+.arkyn_button.ghost.danger:hover {
+  color: var(--danger-500);
+  background-color: var(--danger-50);
+}
+
+.arkyn_button.ghost.danger:disabled {
+  color: var(--danger-500);
+  background-color: var(--danger-50);
+}
+
+.arkyn_button.ghost.success {
+  color: var(--success-500);
+  background-color: var(--success-100);
+}
+
+.arkyn_button.ghost.success:hover {
+  color: var(--success-400);
+  background-color: var(--success-50);
+}
+
+.arkyn_button.ghost.success:disabled {
+  color: var(--success-400);
+  background-color: var(--success-50);
+}
+
+.arkyn_button.ghost.warning {
+  color: var(--warning-600);
+  background-color: var(--warning-100);
+}
+
+.arkyn_button.ghost.warning:hover {
+  color: var(--warning-500);
+  background-color: var(--warning-50);
+}
+
+.arkyn_button.ghost.warning:disabled {
+  color: var(--warning-500);
+  background-color: var(--warning-50);
+}
+
+.arkyn_button.invisible:disabled {
+  opacity: 0.4;
+}
+
+.arkyn_button.invisible.primary {
+  color: var(--primary-500);
+}
+
+.arkyn_button.invisible.primary:hover {
+  color: var(--primary-400);
+}
+
+.arkyn_button.invisible.primary:disabled {
+  color: var(--primary-400);
+}
+
+.arkyn_button.invisible.danger {
+  color: var(--danger-600);
+}
+
+.arkyn_button.invisible.danger:hover {
+  color: var(--danger-500);
+}
+
+.arkyn_button.invisible.danger:disabled {
+  color: var(--danger-500);
+}
+
+.arkyn_button.invisible.success {
+  color: var(--success-500);
+}
+
+.arkyn_button.invisible.success:hover {
+  color: var(--success-400);
+}
+
+.arkyn_button.invisible.success:disabled {
+  color: var(--success-400);
+}
+
+.arkyn_button.invisible.warning {
+  color: var(--warning-600);
+}
+
+.arkyn_button.invisible.warning:hover {
+  color: var(--warning-500);
+}
+
+.arkyn_button.invisible.warning:disabled {
+  color: var(--warning-500);
+}
+
+/* SIZE */
+.arkyn_button.lg {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 14px;
+
+  border-radius: 6px;
+  padding: 0px 20px;
+  height: 44px;
+}
+
+.arkyn_button.lg .content,
+.arkyn_button.lg .spinner {
+  gap: 16px;
+}
+
+.arkyn_button.md {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 14px;
+
+  border-radius: 6px;
+  gap: 16px;
+  padding: 0px 16px;
+  height: 40px;
+}
+
+.arkyn_button.md .content,
+.arkyn_button.md .spinner {
+  gap: 14px;
+}
+
+.arkyn_button.sm {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 12px;
+
+  border-radius: 6px;
+  padding: 0px 16px;
+  height: 32px;
+}
+
+.arkyn_button.sm .content,
+.arkyn_button.sm .spinner {
+  gap: 12px;
+}
+
+.arkyn_button.xs {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 10px;
+
+  border-radius: 4px;
+  padding: 0px 16px;
+  height: 24px;
+}
+
+.arkyn_button.xs .content,
+.arkyn_button.xs .spinner {
+  gap: 8px;
+}
+
+/* SPIN */
+.arkyn_button .spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  white-space: nowrap;
+  opacity: 0;
+}
+
+.arkyn_button .spinner > svg {
+  animation: spin 2s linear infinite;
+}
+
+.arkyn_button.loading_text_false .spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.arkyn_button.loading_text_true .spinner {
+  max-height: 0px;
+}
+
+.arkyn_button.loading_true .content {
+  opacity: 0;
+  max-height: 0px;
+}
+
+.arkyn_button.loading_true .spinner {
+  opacity: 1;
+  max-height: unset;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Divider/index.tsx

@@ -0,0 +1,17 @@
+import type { DividerProps } from "@arkyn/types";
+
+import "./styles.css";
+
+function Divider(args: DividerProps) {
+  const {
+    className: baseClassName,
+    orientation = "horizontal",
+    ...rest
+  } = args;
+
+  const className = `arkyn_divider ${orientation} ${baseClassName}`;
+
+  return <div className={className} {...rest} />;
+}
+
+export { Divider };

package/src/components/Divider/styles.css

@@ -0,0 +1,17 @@
+.arkyn_divider {
+  display: block;
+  flex: 1;
+  background-color: var(--secondary-300);
+}
+
+.arkyn_divider.horizontal {
+  width: 100%;
+  min-height: 1px;
+  max-height: 1px;
+}
+
+.arkyn_divider.vertical {
+  height: 100%;
+  min-width: 1px;
+  max-width: 1px;
+}

package/src/components/Form/FormController/index.tsx

@@ -0,0 +1,36 @@
+import type {
+  FormControllerContextProps,
+  FormControllerProps,
+} from "@arkyn/types";
+
+import { useActionData } from "@remix-run/react";
+import { createContext, useContext, useId, useRef } from "react";
+
+import "./styles.css";
+
+const FormControllerContext = createContext({} as FormControllerContextProps);
+
+function FormController({ children, ...rest }: FormControllerProps) {
+  const actionData = useActionData<any>();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const name = inputRef.current?.name || "";
+  const error = actionData?.fieldErrors?.[name] || null;
+
+  const id = useId();
+
+  return (
+    <FormControllerContext.Provider value={{ error, id, inputRef }}>
+      <section className="arkyn_form_controller" {...rest}>
+        {children}
+      </section>
+    </FormControllerContext.Provider>
+  );
+}
+
+function useFormController() {
+  return useContext(FormControllerContext);
+}
+
+export { FormController, useFormController };

package/src/components/Form/FormController/styles.css

@@ -0,0 +1,5 @@
+.arkyn_form_controller {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/src/components/Form/FormError/index.tsx

@@ -0,0 +1,11 @@
+import { useFormController } from "../FormController";
+
+import "./styles.css";
+
+function FormError() {
+  const { error } = useFormController();
+  if (!error) return <></>;
+  return <strong className="arkyn_form_error">{error}</strong>;
+}
+
+export { FormError };

package/src/components/Form/FormError/styles.css

@@ -0,0 +1,6 @@
+.arkyn_form_error {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 600;
+  color: var(--danger-600);
+}

package/src/components/Form/FormLabel/index.tsx

@@ -0,0 +1,13 @@
+import type { FormLabelProps } from "@arkyn/types";
+
+import { buildFormLabelConfig } from "../../../config/buildFormLabelConfig";
+import { useFormController } from "../FormController";
+
+import "./styles.css";
+
+function FormLabel(props: FormLabelProps) {
+  const { id } = useFormController();
+  return <label {...buildFormLabelConfig(props)} htmlFor={id} />;
+}
+
+export { FormLabel };

package/src/components/Form/FormLabel/styles.css

@@ -0,0 +1,15 @@
+.arkyn_form_label {
+  color: var(--secondary-700);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 19.07px;
+}
+
+.arkyn_form_label.show-asterisk::before {
+  content: "* ";
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16.34px;
+  text-align: left;
+  color: var(--danger-600);
+}

package/src/components/Form/index.ts

@@ -0,0 +1,3 @@
+export { FormController } from "./FormController";
+export { FormError } from "./FormError";
+export { FormLabel } from "./FormLabel";

package/src/components/IconButton/index.tsx

@@ -0,0 +1,44 @@
+import type { IconButtonProps } from "@arkyn/types";
+import { Loader2 } from "lucide-react";
+
+import "./styles.css";
+
+const iconSize = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+function IconButton(args: IconButtonProps) {
+  const {
+    isLoading = false,
+    scheme = "primary",
+    variant = "solid",
+    size = "md",
+    icon: Icon,
+    disabled,
+    className: baseClassName = "",
+    ...rest
+  } = args;
+
+  const className = `arkyn_icon_button ${variant} ${scheme} ${size} loading_${isLoading} ${baseClassName}`;
+
+  return (
+    <button
+      disabled={disabled || isLoading}
+      className={className.trim()}
+      {...rest}
+    >
+      <div className="spinner">
+        <Loader2 size={iconSize[size]} strokeWidth={2.5} />
+      </div>
+
+      <div className={"content " + size}>
+        <Icon size={iconSize[size]} strokeWidth={2.5} />
+      </div>
+    </button>
+  );
+}
+
+export { IconButton };