@arkyn/components 3.0.1-beta.3 → 3.0.1-beta.30

package/src/components/Button/index.tsx

@@ -1,48 +0,0 @@
-import { ButtonProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { GenerateIcon } from "../../services";
-import "./styles.css";
-
-function Button(args: ButtonProps) {
-  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 loadingClass = isLoading ? "loadingTrue" : "loadingFalse";
-  const loadingTextClass = !!loadingText
-    ? "loadingTextTrue"
-    : "loadingTextFalse";
-
-  const className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;
-
-  return (
-    <button className={className} disabled={disabled || isLoading} {...rest}>
-      <div className="arkynButtonSpinner">
-        <Loader2 size={iconSize} strokeWidth={2.5} />
-        {loadingText && loadingText}
-      </div>
-
-      <div className="arkynButtonContent">
-        {GenerateIcon(iconSize, leftIcon)}
-        {children}
-        {GenerateIcon(iconSize, rightIcon)}
-      </div>
-    </button>
-  );
-}
-
-export { Button };

package/src/components/Button/styles.css

@@ -1,231 +0,0 @@
-/* BASE */
-.arkynButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(0.95);
-}
-
-html.dark .arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynButton .arkynButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-/* VARIANTS */
-.arkynButton.solid {
-  color: #fff;
-}
-
-.arkynButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.outline {
-  background-color: rgba(var(--input-background), 1);
-  border-color: var(--border);
-}
-
-.arkynButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-
-.arkynButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-
-.arkynButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-
-.arkynButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-
-.arkynButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* SIZE */
-.arkynButton.lg {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-
-  border-radius: var(--rounded-inputs);
-  padding: 0px 20px;
-  height: 44px;
-}
-
-.arkynButton.lg .arkynButtonContent,
-.arkynButton.lg .arkynButtonSpinner {
-  gap: 16px;
-}
-
-.arkynButton.md {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-
-  border-radius: var(--rounded-inputs);
-  gap: 16px;
-  padding: 0px 16px;
-  height: 40px;
-}
-
-.arkynButton.md .arkynButtonContent,
-.arkynButton.md .arkynButtonSpinner {
-  gap: 14px;
-}
-
-.arkynButton.sm {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-
-  border-radius: var(--rounded-inputs);
-  padding: 0px 16px;
-  height: 32px;
-}
-
-.arkynButton.sm .arkynButtonContent,
-.arkynButton.sm .arkynButtonSpinner {
-  gap: 12px;
-}
-
-.arkynButton.xs {
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 10px;
-
-  border-radius: calc(var(--rounded-inputs) * 0.6667);
-  padding: 0px 16px;
-  height: 24px;
-}
-
-.arkynButton.xs .arkynButtonContent,
-.arkynButton.xs .arkynButtonSpinner {
-  gap: 8px;
-}
-
-/* SPIN */
-.arkynButton .arkynButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  white-space: nowrap;
-  opacity: 0;
-}
-
-.arkynButton .arkynButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynButton.loadingTextFalse .arkynButtonSpinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arkynButton.loadingTextTrue .arkynButtonSpinner {
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonContent {
-  opacity: 0;
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonSpinner {
-  opacity: 1;
-  max-height: unset;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/Card/index.tsx

@@ -1,11 +0,0 @@
-import { CardProps } from "@arkyn/types";
-import "./styles.css";
-
-function Card(props: CardProps) {
-  const { className: baseClassName, ...rest } = props;
-  const className = `arkynCard ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { Card };

package/src/components/Card/styles.css

@@ -1,10 +0,0 @@
-.arkynCard {
-  display: flex;
-
-  padding: 20px;
-  width: 100%;
-  height: max-content;
-
-  border-radius: var(--rounded-cards);
-  background-color: var(--card);
-}

package/src/components/Checkbox/index.tsx

@@ -1,59 +0,0 @@
-import { CheckboxProps } from "@arkyn/types";
-import { Check } from "lucide-react";
-import { useState } from "react";
-
-import { useFormController } from "../Form/FormController";
-import "./styles.css";
-
-function Checkbox(props: CheckboxProps) {
-  const {
-    name,
-    className: baseClassName = "",
-    size = "md",
-    isError: defaultIsError,
-    defaultChecked = false,
-    checked: baseChecked = null,
-    onCheck,
-    value,
-    ...rest
-  } = props;
-
-  const { id, inputRef, error } = useFormController();
-  const isError = defaultIsError || !!error;
-
-  const [isChecked, setIsChecked] = useState(defaultChecked || false);
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  const errorClass = isError ? "errorTrue" : "errorFalse";
-  const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-
-  const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass} ${baseClassName}`;
-
-  function handleCheck() {
-    const defaultChecked = isChecked;
-    setIsChecked(!defaultChecked);
-    onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-  }
-
-  return (
-    <button
-      id={id}
-      type="button"
-      className={className}
-      onClick={handleCheck}
-      {...rest}
-    >
-      <input
-        type="hidden"
-        name={name}
-        ref={inputRef}
-        value={currentChecked ? value || "checked" : ""}
-      />
-
-      <Check />
-    </button>
-  );
-}
-
-export { Checkbox };

package/src/components/Checkbox/styles.css

@@ -1,78 +0,0 @@
-.arkynCheckbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 2px solid var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-
-.arkynCheckbox:hover {
-  cursor: pointer;
-}
-
-.arkynCheckbox > svg {
-  display: none;
-  stroke-width: 3px;
-}
-
-/* SIZE */
-.arkynCheckbox.sm {
-  min-height: 16px;
-  min-width: 16px;
-  max-height: 16px;
-  max-width: 16px;
-  border-radius: calc(var(--rounded-inputs) * 0.3333);
-}
-
-.arkynCheckbox.sm > svg {
-  min-height: 12px;
-  min-width: 12px;
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynCheckbox.md {
-  min-height: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  max-width: 20px;
-  border-radius: calc(var(--rounded-inputs) * 0.6667);
-}
-
-.arkynCheckbox.md > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-.arkynCheckbox.lg {
-  min-height: 24px;
-  min-width: 24px;
-  max-height: 24px;
-  max-width: 24px;
-  border-radius: var(--rounded-inputs);
-}
-
-.arkynCheckbox.lg > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-/* CHECKED */
-.arkynCheckbox.checkedTrue {
-  background-color: rgb(var(--spotlight-primary), 1);
-  border-color: rgb(var(--spotlight-primary), 1);
-}
-
-.arkynCheckbox.checkedTrue > svg {
-  display: unset;
-  color: #fff;
-}
-
-.arkynCheckbox.errorTrue {
-  border-color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ClientOnly.tsx

@@ -1,10 +0,0 @@
-import { useHydrated } from "../hooks/useHydrated";
-
-type Props = {
-  children(): React.ReactNode;
-  fallback?: React.ReactNode;
-};
-
-export function ClientOnly({ children, fallback = null }: Props) {
-  return useHydrated() ? <>{children()}</> : <>{fallback}</>;
-}

package/src/components/Divider/index.tsx

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

package/src/components/Divider/styles.css

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

package/src/components/Drawer/Container/index.tsx

@@ -1,55 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { DrawerContainerProps } from "@arkyn/types";
-import { createContext } from "react";
-
-import "./styles.css";
-
-type DrawerContext = { makeInvisible: () => void };
-const drawerContext = createContext({} as DrawerContext);
-
-function DrawerContainer(props: DrawerContainerProps) {
-  const {
-    isVisibled,
-    makeInvisible,
-    orientation = "left",
-    children,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const translateX = orientation === "left" ? "-100%" : "100%";
-
-  const visibledClass = isVisibled ? "visibleTrue" : "visibleFalse";
-  const className = `arkynDrawerContainer ${orientation} ${visibledClass} ${baseClassName}`;
-
-  return (
-    <drawerContext.Provider value={{ makeInvisible }}>
-      <AnimatePresence>
-        {isVisibled && (
-          <aside className={className.trim()} {...rest}>
-            <motion.div
-              className="arkynDrawerContainerOverlay"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={makeInvisible}
-            />
-
-            <motion.div
-              className="arkynDrawerContainerContent"
-              transition={{ ease: "easeOut", duration: 0.15 }}
-              initial={{ transform: `translateX(${translateX})` }}
-              animate={{ transform: "translateX(0px)" }}
-              exit={{ transform: `translateX(${translateX})` }}
-            >
-              {children}
-            </motion.div>
-          </aside>
-        )}
-      </AnimatePresence>
-    </drawerContext.Provider>
-  );
-}
-
-export { DrawerContainer, drawerContext };

package/src/components/Drawer/Container/styles.css

@@ -1,46 +0,0 @@
-.arkynDrawerContainer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  overflow: auto;
-  z-index: 9999;
-}
-
-.arkynDrawerContainerOverlay {
-  position: fixed;
-  z-index: 9997;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.arkynDrawerContainerOverlay:hover {
-  cursor: pointer;
-}
-
-.arkynDrawerContainerContent {
-  z-index: 9999;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: max-content;
-  background: var(--card);
-
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  height: 100vh;
-}
-
-.arkynDrawerContainer.left > .arkynDrawerContainerContent {
-  left: 0;
-}
-
-.arkynDrawerContainer.right > .arkynDrawerContainerContent {
-  right: 0;
-}

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

@@ -1,38 +0,0 @@
-import { ModalHeaderProps } from "@arkyn/types";
-
-import { X } from "lucide-react";
-import { useContext } from "react";
-
-import { drawerContext } from "../Container";
-import "./styles.css";
-
-function DrawerHeader(props: ModalHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = props;
-
-  const { makeInvisible } = useContext(drawerContext);
-  const className = `arkynDrawerHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          className="arkynDrawerHeaderCloseButton"
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close drawer"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { DrawerHeader };

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

@@ -1,38 +0,0 @@
-.arkynDrawerHeader {
-  display: flex;
-  align-items: center;
-
-  height: 56px;
-  padding: 16px;
-
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 20px;
-
-  color: var(--text-heading);
-
-  border-bottom: 1px solid var(--border);
-}
-
-.arkynDrawerHeaderCloseButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  margin-left: auto;
-
-  padding: 2px;
-  border-radius: 4px;
-
-  border: none;
-  background: none;
-
-  color: var(--text-body);
-  background-color: var(--card);
-  transition: all 0.15s ease-out;
-}
-
-.arkynDrawerHeaderCloseButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}

package/src/components/Drawer/index.ts

@@ -1,4 +0,0 @@
-import { DrawerContainer } from "./Container";
-import { DrawerHeader } from "./Header";
-
-export { DrawerContainer, DrawerHeader };

package/src/components/FacebookPixel/FacebookPixel.client.tsx

@@ -1,33 +0,0 @@
-import { FacebookPixelProps } from "@arkyn/types";
-import { FacebookPixel } from "./pixel";
-
-function FacebookPixelClient(props: FacebookPixelProps) {
-  const {
-    pixelId,
-    options,
-    pageView,
-    track,
-    trackCustom,
-    trackSingle,
-    trackSingleCustom,
-    grantConsent,
-    revokeConsent,
-  } = props;
-
-  const pixel = new FacebookPixel(pixelId, options);
-
-  pixel.init();
-
-  if (pageView) pixel.pageView();
-  if (grantConsent) pixel.grantConsent();
-  if (revokeConsent) pixel.revokeConsent();
-
-  if (track) pixel.track(...track);
-  if (trackCustom) pixel.trackCustom(...trackCustom);
-  if (trackSingle) pixel.trackSingle(pixelId, ...trackSingle);
-  if (trackSingleCustom) pixel.trackSingleCustom(pixelId, ...trackSingleCustom);
-
-  return <></>;
-}
-
-export { FacebookPixelClient };