@arkyn/components 1.2.0

package/src/components/Modal/Footer/index.tsx

@@ -0,0 +1,12 @@
+import type { ModalFooterProps } from "@arkyn/types";
+
+import "./styles.css";
+
+function Footer(args: ModalFooterProps) {
+  const { alignment = "right", className: baseClassName, ...rest } = args;
+  const className = `arkyn_modal_footer ${alignment} ${baseClassName}`;
+
+  return <footer className={className.trim()} {...rest} />;
+}
+
+export { Footer };

package/src/components/Modal/Footer/styles.css

@@ -0,0 +1,27 @@
+.arkyn_modal_footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  border-top: 1px solid var(--secondary-200);
+}
+
+.arkyn_modal_footer.left {
+  justify-content: flex-start;
+}
+
+.arkyn_modal_footer.right {
+  justify-content: flex-end;
+}
+
+.arkyn_modal_footer.center {
+  justify-content: center;
+}
+
+.arkyn_modal_footer.between {
+  justify-content: space-between;
+}
+
+.arkyn_modal_footer.around {
+  justify-content: space-around;
+}

package/src/components/Modal/Header/index.tsx

@@ -0,0 +1,26 @@
+import type { ModalHeaderProps } from "@arkyn/types";
+
+import { X } from "lucide-react";
+import { useContext } from "react";
+
+import { modalContext } from "../Container";
+import "./styles.css";
+
+function Header(args: ModalHeaderProps) {
+  const { showCloseButton, className: baseClassName, children, ...rest } = args;
+  const { makeInvisible } = useContext(modalContext);
+
+  const show = showCloseButton ? "show-close" : "";
+  const className = `arkyn_modal_header ${show} ${baseClassName}`;
+
+  return (
+    <header className={className.trim()} {...rest}>
+      {children}
+      <button type="button" onClick={makeInvisible}>
+        <X size={24} />
+      </button>
+    </header>
+  );
+}
+
+export { Header };

package/src/components/Modal/Header/styles.css

@@ -0,0 +1,36 @@
+.arkyn_modal_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 56px;
+  padding: 16px;
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+
+  color: var(--secondary-900);
+
+  border-bottom: 1px solid var(--secondary-200);
+}
+
+.arkyn_modal_header > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 2px;
+  border-radius: 4px;
+
+  border: none;
+  background: none;
+
+  color: var(--secondary-400);
+  transition: all 0.15s ease-out;
+}
+
+.arkyn_modal_header > button:hover {
+  cursor: pointer;
+  background-color: var(--secondary-100);
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,5 @@
+import { Container } from "./Container";
+import { Footer } from "./Footer";
+import { Header } from "./Header";
+
+export const Modal = { Container, Header, Footer };

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,26 @@
+import type { TooltipProps } from "@arkyn/types";
+
+import "./styles.css";
+
+function Tooltip(args: TooltipProps) {
+  const {
+    text,
+    size = "lg",
+    children,
+    orientation = "top",
+    className,
+    ...rest
+  } = args;
+
+  return (
+    <div
+      className={`arkyn_tooltip ${size} ${orientation} ${className}`}
+      {...rest}
+    >
+      {children}
+      <div className="arkyn_tooltip_text">{text}</div>
+    </div>
+  );
+}
+
+export { Tooltip };

package/src/components/Tooltip/styles.css

@@ -0,0 +1,112 @@
+.arkyn_tooltip {
+  position: relative;
+  display: block;
+}
+
+.arkyn_tooltip .arkyn_tooltip_text {
+  visibility: hidden;
+
+  opacity: 0;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  transition: 0.15s all ease-out;
+
+  border-radius: 4px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-weight: 400;
+  color: var(--secondary-100);
+  background-color: var(--secondary-900);
+
+  z-index: 9999;
+}
+
+.arkyn_tooltip.lg .arkyn_tooltip_text {
+  font-size: 14px;
+  line-height: 14px;
+  padding: 8px 12px;
+}
+
+.arkyn_tooltip.md .arkyn_tooltip_text {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 8px 12px;
+}
+
+.arkyn_tooltip:hover .arkyn_tooltip_text {
+  opacity: 1;
+  visibility: visible;
+}
+
+.arkyn_tooltip.top .arkyn_tooltip_text {
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.arkyn_tooltip.top .arkyn_tooltip_text::before {
+  content: "";
+  top: 100%;
+  border-style: solid;
+  border-color: var(--secondary-900) transparent;
+  border-width: 6px 6px 0 6px;
+  bottom: 20px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.arkyn_tooltip.left .arkyn_tooltip_text {
+  top: 50%;
+  right: calc(100% + 10px);
+  transform: translateY(-50%);
+}
+
+.arkyn_tooltip.left .arkyn_tooltip_text::before {
+  content: "";
+  top: 50%;
+  border-style: solid;
+  border-color: transparent var(--secondary-900);
+  border-width: 6px 0 6px 6px;
+  left: 100%;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.arkyn_tooltip.right .arkyn_tooltip_text {
+  top: 50%;
+  left: calc(100% + 10px);
+  transform: translateY(-50%);
+}
+
+.arkyn_tooltip.right .arkyn_tooltip_text::before {
+  content: "";
+  border-style: solid;
+  border-color: transparent var(--secondary-900);
+  border-width: 6px 6px 6px 0;
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
+  position: absolute;
+}
+
+.arkyn_tooltip.bottom .arkyn_tooltip_text {
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.arkyn_tooltip.bottom .arkyn_tooltip_text::before {
+  content: "";
+  border-style: solid;
+  border-color: var(--secondary-900) transparent;
+  border-width: 0 6px 6px 6px;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  position: absolute;
+}

package/src/config/buildBadgeConfig.tsx

@@ -0,0 +1,32 @@
+import type { BadgeProps } from "@arkyn/types";
+import { GenerateIcon } from "../utils/generateIcon";
+
+type BuildBadgeConfigProps = BadgeProps;
+
+function buildBadgeConfig(args: BuildBadgeConfigProps) {
+  const {
+    variant = "ghost",
+    scheme = "primary",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    className: baseClassName = "",
+    children,
+    ...rest
+  } = args;
+
+  const iconSizes = { md: 12, lg: 14 };
+  const iconSize = iconSizes[size];
+
+  const className = `arkyn_badge ${variant} ${scheme} ${size} ${baseClassName}`;
+
+  return {
+    className: className.trim(),
+    children,
+    leftIcon: GenerateIcon(iconSize, leftIcon),
+    rightIcon: GenerateIcon(iconSize, rightIcon),
+    ...rest,
+  };
+}
+
+export { buildBadgeConfig };

package/src/config/buildBreadcrumLinkConfig.tsx

@@ -0,0 +1,27 @@
+import type { BreadcrumbLinkProps } from "@arkyn/types";
+import { useLocation } from "@remix-run/react";
+
+type BuildBreadcrumbLinkConfigProps = BreadcrumbLinkProps & {};
+
+function buildBreadcrumbLinkConfig(args: BuildBreadcrumbLinkConfigProps) {
+  const { pathname } = useLocation();
+
+  const {
+    className: baseClassName = "",
+    disabled: baseDisabled = false,
+    to,
+    ...rest
+  } = args;
+
+  const active = pathname === to ? "active" : "inactive";
+  const className = `arkyn_breadcrumb_link ${active} ${baseClassName}`;
+
+  return {
+    to,
+    className: className.trim(),
+    disabled: baseDisabled || active === "active",
+    ...rest,
+  };
+}
+
+export { buildBreadcrumbLinkConfig };

package/src/config/buildBreadcrumbConfig.tsx

@@ -0,0 +1,12 @@
+import type { BreadcrumbProps } from "@arkyn/types";
+
+type BuildBreadcrumbConfigProps = BreadcrumbProps;
+
+function buildBreadcrumbConfig(args: BuildBreadcrumbConfigProps) {
+  const { className: baseClassName = "", ...rest } = args;
+  const className = `arkyn_breadcrumb ${baseClassName}`.trim();
+
+  return { className, ...rest };
+}
+
+export { buildBreadcrumbConfig };

package/src/config/buildButtonConfig.tsx

@@ -0,0 +1,38 @@
+import type { ButtonProps } from "@arkyn/types";
+import { GenerateIcon } from "../utils/generateIcon";
+
+type BuildButtonConfigProps = ButtonProps;
+
+function buildButtonConfig(args: BuildButtonConfigProps) {
+  const {
+    isLoading = false,
+    scheme = "primary",
+    variant = "solid",
+    loadingText,
+    size = "md",
+    leftIcon,
+    rightIcon,
+    disabled,
+    className: baseClassName = "",
+    children,
+    ...rest
+  } = args;
+
+  const iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };
+  const iconSize = iconSizes[size];
+
+  const className = `arkyn_button loading_text_${!!loadingText} ${variant} ${scheme} ${size} loading_${isLoading} ${baseClassName}`;
+
+  return {
+    className: className.trim(),
+    loadingText,
+    children,
+    iconSize,
+    disabled: disabled || isLoading,
+    leftIcon: GenerateIcon(iconSize, leftIcon),
+    rightIcon: GenerateIcon(iconSize, rightIcon),
+    ...rest,
+  };
+}
+
+export { buildButtonConfig };

package/src/config/buildFormLabelConfig.tsx

@@ -0,0 +1,17 @@
+import type { FormLabelProps } from "@arkyn/types";
+
+type BuildFormLabelConfigProps = FormLabelProps;
+
+function buildFormLabelConfig(args: BuildFormLabelConfigProps) {
+  const { showAsterisk = false, className: baseClassName = "", ...rest } = args;
+
+  const show = showAsterisk ? "show-asterisk" : "";
+  const className = `arkyn_form_label ${show} ${baseClassName}`;
+
+  return {
+    className: className.trim(),
+    ...rest,
+  };
+}
+
+export { buildFormLabelConfig };

package/src/index.ts

@@ -0,0 +1,16 @@
+// Data Display
+export { Badge } from "./components/Badge";
+export { Divider } from "./components/Divider";
+
+// Form
+export { Button } from "./components/Button";
+export { FormController, FormError, FormLabel } from "./components/Form";
+export { IconButton } from "./components/IconButton";
+export { Input } from "./components/Input";
+
+// Navigation
+export { Breadcrumb, BreadcrumbLink } from "./components/Breadcrumb";
+
+// Overlay
+export { Modal } from "./components/Modal";
+export { Tooltip } from "./components/Tooltip";

package/src/utils/generateIcon.tsx

@@ -0,0 +1,9 @@
+import type { LucideIcon } from "lucide-react";
+import React from "react";
+
+function GenerateIcon(iconSize: number, Icon?: LucideIcon) {
+  if (!Icon) return <></>;
+  return <Icon size={iconSize} strokeWidth={2.5} />;
+}
+
+export { GenerateIcon };

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "outDir": "./dist",
+    "composite": false,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "ESNext"],
+    "module": "ESNext",
+    "target": "ESNext"
+  }
+}

package/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+
+export default defineConfig({
+  build: {
+    minify: true,
+    outDir: "./dist",
+    rollupOptions: {
+      external: [
+        "@react-input/mask",
+        "@remix-run/react",
+        "framer-motion",
+        "lucide-react",
+        "react",
+        "react-dom",
+      ],
+      output: { format: "esm" },
+    },
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "@arkyn/components",
+      fileName: "bundle",
+    },
+  },
+});