@arkyn/components 1.2.4 → 1.3.0

package/src/components/Select/styles.css

@@ -0,0 +1,305 @@
+/* BASE */
+.arkyn_select {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: 6px;
+
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+}
+
+.arkyn_select:hover {
+  cursor: pointer;
+}
+
+.arkyn_select input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+}
+
+.arkyn_select input {
+  color: var(--secondary-900);
+}
+
+.arkyn_select .prefix {
+  color: var(--secondary-600);
+  background: var(--secondary-200);
+  font-weight: 400;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+}
+
+.arkyn_select .prefix {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 5px 0 0 5px;
+  border-right: 1px solid var(--secondary-300);
+}
+
+.arkyn_select.placeholder_dark_true input::placeholder {
+  color: var(--secondary-900);
+}
+
+.arkyn_select.placeholder_dark_false input::placeholder {
+  color: var(--secondary-400);
+}
+
+.arkyn_select svg {
+  color: var(--secondary-400);
+}
+
+.arkyn_select.errored svg {
+  color: var(--danger-600);
+}
+
+.arkyn_select:not(.opacity).focused svg {
+  color: var(--primary-500);
+}
+
+.arkyn_select.opacity {
+  opacity: 0.5;
+}
+
+.arkyn_select .arkyn_select_arrow {
+  transition: 0.15s all ease-in-out;
+  color: var(--secondary-400);
+}
+
+.arkyn_select:not(.opacity).focused .arkyn_select_arrow {
+  transform: rotate(180deg);
+}
+
+/* VARIANTS */
+.arkyn_select.solid {
+  border-color: var(--secondary-300);
+  background-color: var(--secondary-50);
+}
+
+.arkyn_select.solid.errored {
+  border-color: var(--danger-600);
+  outline-color: var(--danger-600);
+}
+
+.arkyn_select:not(.opacity).solid.focused {
+  border-color: var(--primary-500);
+  outline-color: var(--primary-500);
+}
+
+.arkyn_select.outline {
+  border-color: var(--secondary-300);
+}
+
+.arkyn_select.outline.errored {
+  border-color: var(--danger-600);
+  outline-color: var(--danger-600);
+}
+
+.arkyn_select:not(.opacity).outline.focused {
+  border-color: var(--primary-500);
+  outline-color: var(--primary-500);
+}
+
+.arkyn_select.underline {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  outline: none;
+  border-color: var(--secondary-300);
+}
+
+.arkyn_select.underline .prefix {
+  display: none;
+}
+
+.arkyn_select.underline::before {
+  content: " ";
+  position: absolute;
+  height: 1px;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  background: transparent;
+}
+
+.arkyn_select.underline.errored {
+  border-color: var(--danger-600);
+}
+
+.arkyn_select.underline.errored::before {
+  background: var(--danger-600);
+}
+
+.arkyn_select:not(.opacity).underline.focused {
+  border-color: var(--primary-500);
+}
+
+.arkyn_select:not(.opacity).underline.focused::before {
+  background: var(--primary-500);
+}
+
+/* SIZE */
+.arkyn_select.md input {
+  min-height: 40px;
+  max-height: 40px;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
+.arkyn_select.md input::placeholder {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.arkyn_select.md.hasPrefix {
+  padding-left: 60px;
+}
+
+.arkyn_select.md .prefix {
+  height: 40px;
+  width: 44px;
+  font-size: 14px;
+}
+
+.arkyn_select.lg input {
+  min-height: 44px;
+  max-height: 44px;
+  line-height: 16px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.arkyn_select.lg input::placeholder {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.arkyn_select.lg .prefix {
+  height: 44px;
+  width: 48px;
+  font-size: 16px;
+}
+
+.arkyn_select.lg.hasPrefix {
+  padding-left: 64px;
+}
+
+/* CONTENT */
+.arkyn_select_content {
+  position: absolute;
+  z-index: 6;
+
+  top: calc(100% + 5px);
+  left: -2px;
+  right: -2px;
+
+  border-radius: 6px;
+  list-style: none;
+
+  display: flex;
+  flex-direction: column;
+
+  flex: 1;
+  overflow: hidden;
+  height: max-content;
+
+  border: 1px solid var(--secondary-300);
+  background-color: var(--secondary-50);
+}
+
+.arkyn_select_content > li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-weight: 400;
+  line-height: 21.79px;
+
+  color: var(--secondary-500);
+}
+
+.arkyn_select.md .arkyn_select_content > li {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.arkyn_select.lg .arkyn_select_content > li {
+  font-size: 16px;
+  padding: 8px 16px;
+}
+
+.arkyn_select_content > p {
+  font-weight: 400;
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+  line-height: 21.79px;
+
+  color: var(--secondary-500);
+}
+
+.arkyn_select_content > li svg {
+  height: 20px;
+  width: 20px;
+  color: var(--primary-500);
+  display: none;
+}
+
+.arkyn_select_content > li:hover {
+  cursor: pointer;
+  background-color: var(--secondary-100);
+}
+
+.arkyn_select_content > li:not(:last-child) {
+  border-bottom: 1px solid var(--secondary-300);
+}
+
+.arkyn_select_content > li.active {
+  font-weight: 600;
+
+  color: var(--secondary-900);
+  background-color: var(--secondary-100);
+}
+
+.arkyn_select_content > li.active svg {
+  display: unset;
+}
+
+/* SPIN */
+.arkyn_select .spinner {
+  animation: spin 2s linear infinite;
+}
+
+/* OVERLAY */
+.arkyn_select_overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Select/utils/morpheme.tsx

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+
+function morpheme(
+  data: LucideIcon | string | undefined,
+  iconSize: number,
+  type?: "prefix" | "sufix"
+) {
+  if (!data) return <></>;
+  if (typeof data === "string") return <p className={type}>{data}</p>;
+
+  const Data = data;
+  return (
+    <p className={type}>
+      <Data color="var(--secondary-600)" size={iconSize} strokeWidth={2.5} />
+    </p>
+  );
+}
+
+export { morpheme };

package/src/index.ts

@@ -5,9 +5,11 @@ export { Skeleton } from "./components/Skeleton";
 
 // Form
 export { Button } from "./components/Button";
+export { Checkbox } from "./components/Checkbox";
 export { FormController, FormError, FormLabel } from "./components/Form";
 export { IconButton } from "./components/IconButton";
 export { Input } from "./components/Input";
+export { Select } from "./components/Select";
 
 // Navigation
 export { Breadcrumb, BreadcrumbLink } from "./components/Breadcrumb";