@aristobyte-ui/switch 0.0.0-beta.1

package/@types/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

package/@types/styles/scss-modules.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/assets/svg/i_Copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/assets/svg/i_Error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-x-icon lucide-octagon-x"><path d="m15 9-6 6"/><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"/><path d="m9 9 6 6"/></svg>

package/assets/svg/i_Info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/assets/svg/i_Success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/assets/svg/i_Warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert-icon lucide-octagon-alert"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>

package/components/Switch/Switch.module.scss

@@ -0,0 +1,489 @@
+@use "../../styles/settings" as *;
+
+.switch {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  max-width: max-content;
+  user-select: none;
+  position: relative;
+
+  &-align-label {
+    &--horizontal {
+      flex-direction: row;
+    }
+
+    &--vertical {
+      flex-direction: column;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &-size {
+    &--xsm {
+      .switch {
+        &__track {
+          height: 1rem;
+          width: 1.8rem;
+
+          &-icon {
+            height: calc(0.8rem - 0.16rem * 2);
+            width: calc(0.8rem - 0.16rem * 2);
+          }
+        }
+
+        &__thumb {
+          border-radius: calc(0.8rem / 2);
+          height: 0.8rem;
+          left: 0.16rem;
+          width: 0.8rem;
+
+          &-icon {
+            height: 0.6rem;
+            width: 0.6rem;
+          }
+        }
+
+        &__label {
+          color: $white;
+          font-size: 0.625rem; // 10px
+        }
+      }
+
+      input {
+        + .switch__track .switch__track-icon {
+          &--checked {
+            left: -2rem;
+          }
+
+          &--unchecked {
+            right: 0.18rem;
+          }
+        }
+
+        &:checked + .switch__track {
+          .switch__track-icon {
+            &--checked {
+              left: 0.18rem;
+            }
+
+            &--unchecked {
+              right: -2rem;
+            }
+          }
+
+          .switch__thumb {
+            transform: translate(calc(1.8rem - 0.8rem - 0.16rem * 2), -50%);
+          }
+        }
+
+        &:active {
+          + .switch__track .switch__thumb {
+            width: 1rem;
+          }
+
+          &:checked + .switch__track .switch__thumb {
+            transform: translate(calc(0.8rem / 2 + 0.08rem), -50%);
+            width: 1rem;
+          }
+        }
+      }
+    }
+
+    &--sm {
+      .switch {
+        &__track {
+          height: 1.4rem;
+          width: 2.6rem;
+
+          &-icon {
+            height: calc(1.2rem - 0.2rem * 2);
+            width: calc(1.2rem - 0.2rem * 2);
+          }
+        }
+
+        &__thumb {
+          border-radius: calc(1rem / 2);
+          height: 1rem;
+          left: 0.2rem;
+          width: 1rem;
+
+          &-icon {
+            height: 0.8rem;
+            width: 0.8rem;
+          }
+        }
+
+        &__label {
+          color: $white;
+          font-size: 0.75rem; // 12px
+        }
+      }
+
+      input {
+        + .switch__track .switch__track-icon {
+          &--checked {
+            left: -2rem;
+          }
+
+          &--unchecked {
+            right: 0.24rem;
+          }
+        }
+
+        &:checked + .switch__track {
+          .switch__track-icon {
+            &--checked {
+              left: 0.24rem;
+            }
+
+            &--unchecked {
+              right: -2rem;
+            }
+          }
+
+          .switch__thumb {
+            transform: translate(calc(2.6rem - 1rem - 0.2rem * 2), -50%);
+          }
+        }
+
+        &:active {
+          + .switch__track .switch__thumb {
+            width: 1.3rem;
+          }
+
+          &:checked + .switch__track .switch__thumb {
+            transform: translate(calc(1.3rem / 2 + 0.25rem), -50%);
+            width: 1.3rem;
+          }
+        }
+      }
+    }
+
+    &--md {
+      .switch {
+        &__track {
+          height: 1.6rem;
+          width: 3rem;
+
+          &-icon {
+            height: calc(1.4rem - 0.2rem * 2);
+            width: calc(1.4rem - 0.2rem * 2);
+          }
+        }
+
+        &__thumb {
+          border-radius: calc(1.2rem / 2);
+          height: 1.2rem;
+          left: 0.2rem;
+          width: 1.2rem;
+
+          &-icon {
+            height: 0.9rem;
+            width: 0.9rem;
+          }
+        }
+
+        &__label {
+          color: $white;
+          font-size: 0.875rem; // 14px
+        }
+      }
+
+      input {
+        + .switch__track .switch__track-icon {
+          &--checked {
+            left: -2rem;
+          }
+
+          &--unchecked {
+            right: 0.3rem;
+          }
+        }
+
+        &:checked + .switch__track {
+          .switch__track-icon {
+            &--checked {
+              left: 0.3rem;
+            }
+
+            &--unchecked {
+              right: -2rem;
+            }
+          }
+
+          .switch__thumb {
+            transform: translate(calc(3rem - 1.2rem - 0.2rem * 2), -50%);
+          }
+        }
+        &:active {
+          + .switch__track .switch__thumb {
+            width: 1.5rem;
+          }
+
+          &:checked + .switch__track .switch__thumb {
+            transform: translate(calc(1.5rem / 2 + 0.3rem), -50%);
+            width: 1.5rem;
+          }
+        }
+      }
+    }
+
+    &--lg {
+      .switch {
+        &__track {
+          height: 1.8rem;
+          width: 3.4rem;
+
+          &-icon {
+            height: calc(1.6rem - 0.3rem * 2);
+            width: calc(1.6rem - 0.3rem * 2);
+          }
+        }
+
+        &__thumb {
+          border-radius: calc(1.4rem / 2);
+          height: 1.4rem;
+          left: 0.3rem;
+          width: 1.4rem;
+
+          &-icon {
+            height: 1rem;
+            width: 1rem;
+          }
+        }
+
+        &__label {
+          color: $white;
+          font-size: 1rem; // 16px
+        }
+      }
+
+      input {
+        + .switch__track .switch__track-icon {
+          &--checked {
+            left: -2rem;
+          }
+
+          &--unchecked {
+            right: 0.34rem;
+          }
+        }
+
+        &:checked + .switch__track {
+          .switch__track-icon {
+            &--checked {
+              left: 0.34rem;
+            }
+
+            &--unchecked {
+              right: -2rem;
+            }
+          }
+
+          .switch__thumb {
+            transform: translate(
+              calc(3.4rem - 1.4rem - 0.3rem * 2 + 0.05rem),
+              -50%
+            );
+          }
+        }
+
+        &:active {
+          + .switch__track .switch__thumb {
+            width: 1.8rem;
+          }
+
+          &:checked + .switch__track .switch__thumb {
+            transform: translate(calc(1.8rem / 2 + 0.2rem - 0.05rem), -50%);
+            width: 1.8rem;
+          }
+        }
+      }
+    }
+
+    &--xlg {
+      .switch {
+        &__track {
+          height: 2rem;
+          width: 3.8rem;
+
+          &-icon {
+            height: calc(1.8rem - 0.3rem * 2);
+            width: calc(1.8rem - 0.3rem * 2);
+          }
+        }
+
+        &__thumb {
+          border-radius: calc(1.6rem / 2);
+          height: 1.6rem;
+          left: 0.3rem;
+          width: 1.6rem;
+
+          &-icon {
+            height: 1.2rem;
+            width: 1.2rem;
+          }
+        }
+
+        &__label {
+          color: $white;
+          font-size: 1.125rem; // 18px
+        }
+      }
+
+      input {
+        + .switch__track .switch__track-icon {
+          &--checked {
+            left: -2rem;
+          }
+
+          &--unchecked {
+            right: 0.38rem;
+          }
+        }
+
+        &:checked + .switch__track {
+          .switch__track-icon {
+            &--checked {
+              left: 0.38rem;
+            }
+
+            &--unchecked {
+              right: -2rem;
+            }
+          }
+
+          .switch__thumb {
+            transform: translate(calc(3.8rem - 1.6rem - 0.3rem * 2), -50%);
+          }
+        }
+
+        &:active {
+          + .switch__track .switch__thumb {
+            width: 2rem;
+          }
+
+          &:checked + .switch__track .switch__thumb {
+            transform: translate(calc(2rem / 2 + 0.22rem), -50%);
+            width: 2rem;
+          }
+        }
+      }
+    }
+  }
+
+  &-variant--default input:checked + &__track {
+    background-color: $grey-500;
+  }
+
+  &-variant--primary input:checked + &__track {
+    background-color: $color-primary;
+  }
+
+  &-variant--secondary input:checked + &__track {
+    background-color: $color-secondary;
+  }
+
+  &-variant--success input:checked + &__track {
+    background-color: $color-success;
+  }
+
+  &-variant--error input:checked + &__track {
+    background-color: $color-error;
+  }
+
+  &-variant--warning input:checked + &__track {
+    background-color: $color-warning;
+  }
+
+  input {
+    display: none;
+
+    + .switch__track .switch__track-icon {
+      &--checked {
+        opacity: 0;
+        transform: translate(0, -50%) scale(0.55);
+      }
+
+      &--unchecked {
+        opacity: 1;
+        transform: translate(0, -50%) scale(1);
+      }
+    }
+
+    &:checked {
+      + .switch__track .switch__track-icon {
+        &--checked {
+          opacity: 1;
+          transform: translate(0, -50%) scale(1);
+        }
+
+        &--unchecked {
+          opacity: 0;
+          transform: translate(0, -50%) scale(0.55);
+        }
+      }
+    }
+  }
+
+  &__track {
+    position: relative;
+    background-color: $grey-700;
+    border-radius: 999px;
+    overflow: hidden;
+    position: relative;
+    transition: background-color 0.3s ease;
+
+    &-icon {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      top: 50%;
+      transition:
+        transform 120ms ease-out,
+        left 200ms ease-out,
+        right 200ms ease-out,
+        opacity 100ms ease-out;
+      z-index: 0;
+
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &__thumb {
+    align-items: center;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    transition: all 200ms ease-out;
+    z-index: 1;
+
+    &-icon {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &__label {
+    color: $white;
+  }
+}

package/components/Switch/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from "react";
+
+import styles from "./Switch.module.scss";
+
+export interface ISwitch {
+  label?: string;
+  alignLabel?: "horizontal" | "vertical";
+  switchSize?: "xsm" | "sm" | "md" | "lg" | "xlg";
+  variant?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "error"
+    | "warning";
+  trackIcon?: { checked?: React.ElementType; unchecked?: React.ElementType };
+  thumbIcon?: React.ElementType;
+  checked?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onChange?: () => void;
+}
+
+//@TODO: Fix the the switch styling, which is breaking when continuously clicking on the component
+export const Switch: React.FC<ISwitch> = ({
+  label,
+  alignLabel = "vertical",
+  checked,
+  switchSize = "md",
+  variant = "default",
+  disabled = false,
+  trackIcon,
+  thumbIcon,
+  className = "",
+  onChange,
+}) => {
+  const id = React.useId();
+  const [isChecked, setIsChecked] = React.useState<boolean>(!!checked);
+
+  const handleChange = () => {
+    setIsChecked((prev) => !prev);
+
+    if (onChange) onChange();
+  };
+
+  return (
+    <label
+      htmlFor={id}
+      className={`${styles["switch"]} ${styles[`switch-size--${switchSize}`]} ${
+        styles[`switch-variant--${variant}`]
+      } ${styles[`switch-align-label--${alignLabel}`]} ${disabled ? styles["switch--disabled"] : ""} ${className}`}
+    >
+      <input
+        id={id}
+        type="checkbox"
+        disabled={disabled}
+        checked={isChecked}
+        onChange={handleChange}
+      />
+      <span className={styles["switch__track"]}>
+        {trackIcon && trackIcon.checked && (
+          <span
+            className={`${styles["switch__track-icon"]} ${styles["switch__track-icon--checked"]}`}
+          >
+            {React.createElement(trackIcon.checked)}
+          </span>
+        )}
+        <span className={styles["switch__thumb"]}>
+          {thumbIcon && (
+            <span className={styles["switch__thumb-icon"]}>
+              {React.createElement(thumbIcon)}
+            </span>
+          )}
+        </span>
+        {trackIcon && trackIcon.unchecked && (
+          <span
+            className={`${styles["switch__track-icon"]} ${styles["switch__track-icon--unchecked"]}`}
+          >
+            {React.createElement(trackIcon.unchecked)}
+          </span>
+        )}
+      </span>
+      {label && <span className={styles["switch__label"]}>{label}</span>}
+    </label>
+  );
+};

package/components/index.ts

@@ -0,0 +1 @@
+export { Switch } from "./Switch";

package/dist/components/Anchor/index.js

@@ -0,0 +1,28 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { renderRipple } from "../../utils";
+import styles from "./Anchor.module.scss";
+export const Anchor = (_a) => {
+    var { href, variant = "default", className = "", children, onClick } = _a, props = __rest(_a, ["href", "variant", "className", "children", "onClick"]);
+    const ref = React.useRef(null);
+    const handleClick = (e) => {
+        const { clientX, clientY } = e;
+        renderRipple({ ref, clientX, clientY });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (_jsx("a", Object.assign({}, props, { ref: ref, href: href, className: `anchor ${styles["anchor"]} ${styles[`anchor--${variant}`]} ${className}`, onClick: handleClick, children: children })));
+};

package/dist/components/Button/index.js

@@ -0,0 +1,35 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "../Spinner";
+import { renderRipple } from "../../utils";
+import styles from "./Button.module.scss";
+export const Button = (_a) => {
+    var { onClick, children, variant = "default", appearance = "solid", size = "md", radius = "md", icon, spinnerType = "default", isLoading = false, disabled, className = "", dangerouslySetInnerHTML } = _a, restProps = __rest(_a, ["onClick", "children", "variant", "appearance", "size", "radius", "icon", "spinnerType", "isLoading", "disabled", "className", "dangerouslySetInnerHTML"]);
+    const ref = React.useRef(null);
+    const handleClick = (e) => {
+        const { clientX, clientY } = e;
+        renderRipple({ ref, clientX, clientY });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const Children = () => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [isLoading && (_jsx(Spinner, { size: size, variant: variant, type: spinnerType, className: styles["spinner"] })), icon && (_jsx("span", { className: `${styles["icon"]} ${styles[`icon--${(_a = icon.align) !== null && _a !== void 0 ? _a : "left"}`]}`, children: React.createElement(icon.component) })), children] }));
+    };
+    return (_jsx("button", Object.assign({ ref: ref, disabled: disabled || isLoading, className: `${styles["button"]} ${styles[`button-variant--${variant}`]} ${styles[`button-appearance--${appearance}`]} ${styles[`button-size--${size}`]} ${styles[`button-radius--${radius}`]} ${isLoading ? styles["button--loading"] : ""} ${className}`, onClick: handleClick }, (dangerouslySetInnerHTML
+        ? { dangerouslySetInnerHTML }
+        : { children: _jsx(Children, {}) }), restProps)));
+};

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../Button";
+import styles from "./ButtonGroup.module.scss";
+export const ButtonGroup = ({ children, align = "horizontal", variant = "default", size = "md", radius = "md", disabled, className = "", }) => {
+    return (_jsx("div", { className: `${styles["button-group"]} ${styles[`button-group-variant--${variant}`]} ${styles[`button-group-size--${size}`]} ${styles[`button-group-radius--${radius}`]} ${styles[`button-group-align--${align}`]} ${className}`, children: React.Children.toArray(children)
+            .filter((child) => React.isValidElement(child) && child.type === Button)
+            .map((child, index) => React.cloneElement(child, {
+            key: index || child.key,
+            size: size || child.props.size,
+            disabled: disabled || child.props.disabled,
+            variant: variant || child.props.variant,
+            radius: "none",
+        })) }));
+};