@arkyn/components 1.2.0

package/dist/config/buildFormLabelConfig.d.ts

@@ -0,0 +1,274 @@
+/// <reference types="react" />
+import type { FormLabelProps } from "@arkyn/types";
+type BuildFormLabelConfigProps = FormLabelProps;
+declare function buildFormLabelConfig(args: BuildFormLabelConfigProps): {
+    form?: string;
+    htmlFor?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    autoFocus?: boolean;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only";
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "true" | "false";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    nonce?: string;
+    slot?: string;
+    spellCheck?: boolean | "true" | "false";
+    style?: import("react").CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: import("react").AriaRole;
+    about?: string;
+    content?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    rel?: string;
+    resource?: string;
+    rev?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is?: string;
+    "aria-activedescendant"?: string;
+    "aria-atomic"?: boolean | "true" | "false";
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both";
+    "aria-braillelabel"?: string;
+    "aria-brailleroledescription"?: string;
+    "aria-busy"?: boolean | "true" | "false";
+    "aria-checked"?: boolean | "true" | "false" | "mixed";
+    "aria-colcount"?: number;
+    "aria-colindex"?: number;
+    "aria-colindextext"?: string;
+    "aria-colspan"?: number;
+    "aria-controls"?: string;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time";
+    "aria-describedby"?: string;
+    "aria-description"?: string;
+    "aria-details"?: string;
+    "aria-disabled"?: boolean | "true" | "false";
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup";
+    "aria-errormessage"?: string;
+    "aria-expanded"?: boolean | "true" | "false";
+    "aria-flowto"?: string;
+    "aria-grabbed"?: boolean | "true" | "false";
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree";
+    "aria-hidden"?: boolean | "true" | "false";
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+    "aria-keyshortcuts"?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-level"?: number;
+    "aria-live"?: "off" | "assertive" | "polite";
+    "aria-modal"?: boolean | "true" | "false";
+    "aria-multiline"?: boolean | "true" | "false";
+    "aria-multiselectable"?: boolean | "true" | "false";
+    "aria-orientation"?: "horizontal" | "vertical";
+    "aria-owns"?: string;
+    "aria-placeholder"?: string;
+    "aria-posinset"?: number;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed";
+    "aria-readonly"?: boolean | "true" | "false";
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-required"?: boolean | "true" | "false";
+    "aria-roledescription"?: string;
+    "aria-rowcount"?: number;
+    "aria-rowindex"?: number;
+    "aria-rowindextext"?: string;
+    "aria-rowspan"?: number;
+    "aria-selected"?: boolean | "true" | "false";
+    "aria-setsize"?: number;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other";
+    "aria-valuemax"?: number;
+    "aria-valuemin"?: number;
+    "aria-valuenow"?: number;
+    "aria-valuetext"?: string;
+    children?: import("react").ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    };
+    onCopy?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onCut?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onPaste?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLLabelElement>;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLLabelElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLLabelElement>;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLLabelElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLLabelElement>;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLLabelElement>;
+    onChange?: import("react").FormEventHandler<HTMLLabelElement>;
+    onChangeCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onBeforeInput?: import("react").FormEventHandler<HTMLLabelElement>;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onInput?: import("react").FormEventHandler<HTMLLabelElement>;
+    onInputCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onReset?: import("react").FormEventHandler<HTMLLabelElement>;
+    onResetCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onSubmit?: import("react").FormEventHandler<HTMLLabelElement>;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onInvalid?: import("react").FormEventHandler<HTMLLabelElement>;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLLabelElement>;
+    onLoad?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onError?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLLabelElement>;
+    onAbort?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onCanPlay?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onDurationChange?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEmptied?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEncrypted?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEnded?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadedData?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadStart?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPause?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPlay?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPlaying?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onProgress?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onRateChange?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onResize?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSeeked?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSeeking?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onStalled?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSuspend?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onWaiting?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onAuxClick?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onClick?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onClickCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onContextMenu?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onDrag?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragEnd?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragEnter?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragExit?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragLeave?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragOver?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragStart?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDrop?: import("react").DragEventHandler<HTMLLabelElement>;
+    onDropCapture?: import("react").DragEventHandler<HTMLLabelElement>;
+    onMouseDown?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseMove?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseOut?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseOver?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseUp?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLLabelElement>;
+    onSelect?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLLabelElement>;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchMove?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchStart?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLLabelElement>;
+    onPointerDown?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerMove?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerUp?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerOver?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerOut?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement>;
+    onScroll?: import("react").UIEventHandler<HTMLLabelElement>;
+    onScrollCapture?: import("react").UIEventHandler<HTMLLabelElement>;
+    onWheel?: import("react").WheelEventHandler<HTMLLabelElement>;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLLabelElement>;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLabelElement>;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLLabelElement>;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLabelElement>;
+    className: string;
+};
+export { buildFormLabelConfig };
+//# sourceMappingURL=buildFormLabelConfig.d.ts.map

package/dist/config/buildFormLabelConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildFormLabelConfig.d.ts","sourceRoot":"","sources":["../../src/config/buildFormLabelConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,KAAK,yBAAyB,GAAG,cAAc,CAAC;AAEhD,iBAAS,oBAAoB,CAAC,IAAI,EAAE,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU5D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/config/buildFormLabelConfig.js

@@ -0,0 +1,10 @@
+function buildFormLabelConfig(args) {
+    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/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Badge } from "./components/Badge";
+export { Divider } from "./components/Divider";
+export { Button } from "./components/Button";
+export { FormController, FormError, FormLabel } from "./components/Form";
+export { IconButton } from "./components/IconButton";
+export { Input } from "./components/Input";
+export { Breadcrumb, BreadcrumbLink } from "./components/Breadcrumb";
+export { Modal } from "./components/Modal";
+export { Tooltip } from "./components/Tooltip";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+// 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/dist/style.css

@@ -0,0 +1 @@
+.arkyn_badge{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid transparent}.arkyn_badge.solid{color:#fff}.arkyn_badge.solid.primary{background-color:var(--primary-500)}.arkyn_badge.solid.secondary{background-color:var(--secondary-500)}.arkyn_badge.solid.danger{background-color:var(--danger-600)}.arkyn_badge.solid.success{background-color:var(--success-500)}.arkyn_badge.solid.warning{background-color:var(--warning-600)}.arkyn_badge.solid.info{background-color:var(--info-500)}.arkyn_badge.outline.primary{color:var(--primary-500);border-color:var(--primary-500)}.arkyn_badge.outline.secondary{color:var(--secondary-500);border-color:var(--secondary-500)}.arkyn_badge.outline.danger{color:var(--danger-600);border-color:var(--danger-600)}.arkyn_badge.outline.success{color:var(--success-500);border-color:var(--success-500)}.arkyn_badge.outline.warning{color:var(--warning-600);border-color:var(--warning-600)}.arkyn_badge.outline.info{color:var(--info-600);border-color:var(--info-600)}.arkyn_badge.ghost.primary{color:var(--primary-500);background-color:var(--primary-100)}.arkyn_badge.ghost.secondary{color:var(--secondary-500);background-color:var(--secondary-100)}.arkyn_badge.ghost.danger{color:var(--danger-600);background-color:var(--danger-100)}.arkyn_badge.ghost.success{color:var(--success-500);background-color:var(--success-100)}.arkyn_badge.ghost.warning{color:var(--warning-600);background-color:var(--warning-100)}.arkyn_badge.ghost.info{color:var(--info-600);background-color:var(--info-100)}.arkyn_badge.lg{font-weight:400;font-size:12px;line-height:12px;border-radius:4px;padding:0 16px;height:24px}.arkyn_badge.md{font-weight:400;font-size:10px;line-height:10px;border-radius:4px;padding:0 12px;height:20px}.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}.arkyn_button{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkyn_button:hover{cursor:pointer}.arkyn_button:disabled{cursor:not-allowed;opacity:.5}.arkyn_button .content{display:flex;align-items:center;justify-content:center;white-space:nowrap}.arkyn_button.solid{color:#fff}.arkyn_button.solid:disabled{opacity:.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:.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:.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)}.arkyn_button.lg{font-weight:600;font-size:14px;line-height:14px;border-radius:6px;padding:0 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:0 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:0 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:0 16px;height:24px}.arkyn_button.xs .content,.arkyn_button.xs .spinner{gap:8px}.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}.arkyn_form_controller{display:flex;flex-direction:column;gap:6px}.arkyn_form_error{font-size:12px;line-height:12px;font-weight:600;color:var(--danger-600)}.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)}.arkyn_icon_button{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkyn_icon_button:hover{cursor:pointer}.arkyn_icon_button:disabled{cursor:not-allowed;opacity:.5}.arkyn_icon_button .content{display:flex;align-items:center;justify-content:center}.arkyn_icon_button.solid{color:#fff}.arkyn_icon_button.solid:disabled{opacity:.4}.arkyn_icon_button.solid.primary{background-color:var(--primary-500)}.arkyn_icon_button.solid.primary:hover{background-color:var(--primary-400)}.arkyn_icon_button.solid.primary:disabled{background-color:var(--primary-400)}.arkyn_icon_button.solid.danger{background-color:var(--danger-600)}.arkyn_icon_button.solid.danger:hover{background-color:var(--danger-500)}.arkyn_icon_button.solid.danger:disabled{background-color:var(--danger-500)}.arkyn_icon_button.solid.success{background-color:var(--success-500)}.arkyn_icon_button.solid.success:hover{background-color:var(--success-400)}.arkyn_icon_button.solid.success:disabled{background-color:var(--success-400)}.arkyn_icon_button.solid.warning{background-color:var(--warning-600)}.arkyn_icon_button.solid.warning:hover{background-color:var(--warning-500)}.arkyn_icon_button.solid.warning:disabled{background-color:var(--warning-500)}.arkyn_icon_button.outline{border-color:var(--secondary-300)}.arkyn_icon_button.outline:hover{border-color:var(--secondary-200)}.arkyn_icon_button.outline:disabled{border-color:var(--secondary-200)}.arkyn_icon_button.outline.primary{color:var(--primary-500)}.arkyn_icon_button.outline.primary:hover{color:var(--primary-400)}.arkyn_icon_button.outline.primary:disabled{color:var(--primary-400)}.arkyn_icon_button.outline.danger{color:var(--danger-600)}.arkyn_icon_button.outline.danger:hover{color:var(--danger-500)}.arkyn_icon_button.outline.danger:disabled{color:var(--danger-500)}.arkyn_icon_button.outline.success{color:var(--success-500)}.arkyn_icon_button.outline.success:hover{color:var(--success-400)}.arkyn_icon_button.outline.success:disabled{color:var(--success-400)}.arkyn_icon_button.outline.warning{color:var(--warning-600)}.arkyn_icon_button.outline.warning:hover{color:var(--warning-500)}.arkyn_icon_button.outline.warning:disabled{color:var(--warning-500)}.arkyn_icon_button.ghost:disabled{opacity:.4}.arkyn_icon_button.ghost.primary{color:var(--primary-500);background-color:var(--primary-100)}.arkyn_icon_button.ghost.primary:hover{color:var(--primary-400);background-color:var(--primary-50)}.arkyn_icon_button.ghost.primary:disabled{color:var(--primary-400);background-color:var(--primary-50)}.arkyn_icon_button.ghost.danger{color:var(--danger-600);background-color:var(--danger-100)}.arkyn_icon_button.ghost.danger:hover{color:var(--danger-500);background-color:var(--danger-50)}.arkyn_icon_button.ghost.danger:disabled{color:var(--danger-500);background-color:var(--danger-50)}.arkyn_icon_button.ghost.success{color:var(--success-500);background-color:var(--success-100)}.arkyn_icon_button.ghost.success:hover{color:var(--success-400);background-color:var(--success-50)}.arkyn_icon_button.ghost.success:disabled{color:var(--success-400);background-color:var(--success-50)}.arkyn_icon_button.ghost.warning{color:var(--warning-600);background-color:var(--warning-100)}.arkyn_icon_button.ghost.warning:hover{color:var(--warning-500);background-color:var(--warning-50)}.arkyn_icon_button.ghost.warning:disabled{color:var(--warning-500);background-color:var(--warning-50)}.arkyn_icon_button.invisible:disabled{opacity:.4}.arkyn_icon_button.invisible.primary{color:var(--primary-500)}.arkyn_icon_button.invisible.primary:hover{color:var(--primary-400)}.arkyn_icon_button.invisible.primary:disabled{color:var(--primary-400)}.arkyn_icon_button.invisible.danger{color:var(--danger-600)}.arkyn_icon_button.invisible.danger:hover{color:var(--danger-500)}.arkyn_icon_button.invisible.danger:disabled{color:var(--danger-500)}.arkyn_icon_button.invisible.success{color:var(--success-500)}.arkyn_icon_button.invisible.success:hover{color:var(--success-400)}.arkyn_icon_button.invisible.success:disabled{color:var(--success-400)}.arkyn_icon_button.invisible.warning{color:var(--warning-600)}.arkyn_icon_button.invisible.warning:hover{color:var(--warning-500)}.arkyn_icon_button.invisible.warning:disabled{color:var(--warning-500)}.arkyn_icon_button.lg{border-radius:6px;height:44px;width:44px}.arkyn_icon_button.md{border-radius:6px;height:40px;width:40px}.arkyn_icon_button.sm{border-radius:6px;height:32px;width:32px}.arkyn_icon_button.xs{border-radius:4px;height:24px;width:24px}.arkyn_icon_button .spinner{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}.arkyn_icon_button .spinner svg{animation:spin 2s linear infinite}.arkyn_icon_button.loading_true .content{opacity:0}.arkyn_icon_button.loading_true .spinner{opacity:1}.arkyn_input{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_input:hover{cursor:text}.arkyn_input input{border:none;outline:none;background:transparent;width:100%}.arkyn_input input{color:var(--secondary-900)}.arkyn_input .prefix,.arkyn_input .sufix{color:var(--secondary-600);background:var(--secondary-200);font-weight:400;display:flex;align-items:center;justify-content:center;position:absolute}.arkyn_input .prefix{left:0;top:0;bottom:0;border-radius:5px 0 0 5px;border-right:1px solid var(--secondary-300)}.arkyn_input .sufix{right:0;top:0;bottom:0;border-radius:0 5px 5px 0;border-left:1px solid var(--secondary-300)}.arkyn_input input::placeholder{color:var(--secondary-400)}.arkyn_input svg{color:var(--secondary-400)}.arkyn_input.errored svg{color:var(--danger-600)}.arkyn_input:not(.opacity).focused svg{color:var(--primary-500)}.arkyn_input.opacity{opacity:.5}.arkyn_input.solid{border-color:var(--secondary-300);background-color:var(--secondary-50)}.arkyn_input.solid.errored{border-color:var(--danger-600);outline-color:var(--danger-600)}.arkyn_input:not(.opacity).solid.focused{border-color:var(--primary-500);outline-color:var(--primary-500)}.arkyn_input.outline{border-color:var(--secondary-300)}.arkyn_input.outline.errored{border-color:var(--danger-600);outline-color:var(--danger-600)}.arkyn_input:not(.opacity).outline.focused{border-color:var(--primary-500);outline-color:var(--primary-500)}.arkyn_input.underline{border-radius:0;border-top:none;border-left:none;border-right:none;outline:none;border-color:var(--secondary-300)}.arkyn_input.underline .sufix,.arkyn_input.underline .prefix{display:none}.arkyn_input.underline:before{content:" ";position:absolute;height:1px;left:0;right:0;bottom:-2px;background:transparent}.arkyn_input.underline.errored{border-color:var(--danger-600)}.arkyn_input.underline.errored:before{background:var(--danger-600)}.arkyn_input:not(.opacity).underline.focused{border-color:var(--primary-500)}.arkyn_input:not(.opacity).underline.focused:before{background:var(--primary-500)}.arkyn_input.md input{min-height:40px;max-height:40px;font-size:14px;line-height:14px;font-weight:400}.arkyn_input.md input::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkyn_input.md.hasPrefix{padding-left:60px}.arkyn_input.md.hasSufix{padding-right:60px}.arkyn_input.md .prefix,.arkyn_input.md .sufix{height:40px;width:44px;font-size:14px}.arkyn_input.lg input{min-height:44px;max-height:44px;line-height:16px;font-size:16px;font-weight:400}.arkyn_input.lg input::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkyn_input.lg .prefix,.arkyn_input.lg .sufix{height:44px;width:48px;font-size:16px}.arkyn_input.lg.hasPrefix{padding-left:64px}.arkyn_input.lg.hasSufix{padding-right:64px}.arkyn_input .spinner{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.arkyn_breadcrumb{display:flex;align-items:center;justify-content:start;flex-wrap:wrap;gap:4px}.arkyn_breadcrumb_link{-webkit-user-select:none;user-select:none;text-decoration:none;font-size:14px;color:var(--secondary-500)}.arkyn_breadcrumb_link.active{color:var(--secondary-900)}.arkyn_breadcrumb_link.inactive:hover{cursor:pointer;color:var(--secondary-900)}.arkyn_breadcrumb_link:first-child>svg{display:none}.arkyn_breadcrumb_link:not(:first-child){display:flex;align-items:center;gap:4px}.arkyn_breadcrumb_link:not(:first-child)>svg{display:unset;color:var(--secondary-400)}.arkyn_modal_container{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:start;justify-content:center;padding:10vh 0;padding-bottom:2rem;overflow:auto}.arkyn_modal_container>.overlay{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;background:#00000080}.arkyn_modal_container>.overlay:hover{cursor:pointer}.arkyn_modal_container>.content{z-index:9999;border-radius:6px;background:var(--secondary-50)}.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}.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 .15s ease-out}.arkyn_modal_header>button:hover{cursor:pointer;background-color:var(--secondary-100)}.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:.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:translate(-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:translate(-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:translate(-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/dist/utils/generateIcon.d.ts

@@ -0,0 +1,4 @@
+import type { LucideIcon } from "lucide-react";
+declare function GenerateIcon(iconSize: number, Icon?: LucideIcon): import("react/jsx-runtime").JSX.Element;
+export { GenerateIcon };
+//# sourceMappingURL=generateIcon.d.ts.map

package/dist/utils/generateIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateIcon.d.ts","sourceRoot":"","sources":["../../src/utils/generateIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,iBAAS,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,2CAGxD;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/utils/generateIcon.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+function GenerateIcon(iconSize, Icon) {
+    if (!Icon)
+        return _jsx(_Fragment, {});
+    return _jsx(Icon, { size: iconSize, strokeWidth: 2.5 });
+}
+export { GenerateIcon };

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@arkyn/components",
+  "version": "1.2.0",
+  "main": "./dist/bundle.js",
+  "types": "./dist/index.d.ts",
+  "author": "Lucas Gonçalves",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "build": "bunx vite build && tsc",
+    "typecheck": "bunx tsc --project tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@react-input/mask": ">=1.1.1",
+    "framer-motion": ">=11.0.8",
+    "lucide-react": ">=0.349.0"
+  },
+  "peerDependencies": {
+    "@remix-run/react": ">=2.0.1",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": ">=18.3.1",
+    "@types/react-dom": ">=18.3.0",
+    "bun-types": "latest",
+    "typescript": ">=5.4.5",
+    "vite": "^5.1.0"
+  }
+}

package/src/components/Badge/index.tsx

@@ -0,0 +1,18 @@
+import type { BadgeProps } from "@arkyn/types";
+
+import { buildBadgeConfig } from "../../config/buildBadgeConfig";
+import "./styles.css";
+
+function Badge(args: BadgeProps) {
+  const { leftIcon, children, rightIcon, ...rest } = buildBadgeConfig(args);
+
+  return (
+    <div {...rest}>
+      {leftIcon}
+      {children}
+      {rightIcon}
+    </div>
+  );
+}
+
+export { Badge };

package/src/components/Badge/styles.css

@@ -0,0 +1,119 @@
+/* BASE */
+.arkyn_badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  border: 1px solid transparent;
+}
+
+/* VARIANTS */
+.arkyn_badge.solid {
+  color: #fff;
+}
+
+.arkyn_badge.solid.primary {
+  background-color: var(--primary-500);
+}
+
+.arkyn_badge.solid.secondary {
+  background-color: var(--secondary-500);
+}
+
+.arkyn_badge.solid.danger {
+  background-color: var(--danger-600);
+}
+
+.arkyn_badge.solid.success {
+  background-color: var(--success-500);
+}
+
+.arkyn_badge.solid.warning {
+  background-color: var(--warning-600);
+}
+
+.arkyn_badge.solid.info {
+  background-color: var(--info-500);
+}
+
+.arkyn_badge.outline.primary {
+  color: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.arkyn_badge.outline.secondary {
+  color: var(--secondary-500);
+  border-color: var(--secondary-500);
+}
+
+.arkyn_badge.outline.danger {
+  color: var(--danger-600);
+  border-color: var(--danger-600);
+}
+
+.arkyn_badge.outline.success {
+  color: var(--success-500);
+  border-color: var(--success-500);
+}
+
+.arkyn_badge.outline.warning {
+  color: var(--warning-600);
+  border-color: var(--warning-600);
+}
+
+.arkyn_badge.outline.info {
+  color: var(--info-600);
+  border-color: var(--info-600);
+}
+
+.arkyn_badge.ghost.primary {
+  color: var(--primary-500);
+  background-color: var(--primary-100);
+}
+
+.arkyn_badge.ghost.secondary {
+  color: var(--secondary-500);
+  background-color: var(--secondary-100);
+}
+
+.arkyn_badge.ghost.danger {
+  color: var(--danger-600);
+  background-color: var(--danger-100);
+}
+
+.arkyn_badge.ghost.success {
+  color: var(--success-500);
+  background-color: var(--success-100);
+}
+
+.arkyn_badge.ghost.warning {
+  color: var(--warning-600);
+  background-color: var(--warning-100);
+}
+
+.arkyn_badge.ghost.info {
+  color: var(--info-600);
+  background-color: var(--info-100);
+}
+
+/* SIZE */
+.arkyn_badge.lg {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+
+  border-radius: 4px;
+  padding: 0px 16px;
+  height: 24px;
+}
+
+.arkyn_badge.md {
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 10px;
+
+  border-radius: 4px;
+  padding: 0px 12px;
+  height: 20px;
+}

package/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,35 @@
+import type { BreadcrumbLinkProps, BreadcrumbProps } from "@arkyn/types";
+import { Link } from "@remix-run/react";
+import { ChevronRight } from "lucide-react";
+
+import { buildBreadcrumbConfig } from "../../config/buildBreadcrumbConfig";
+import { buildBreadcrumbLinkConfig } from "../../config/buildBreadcrumLinkConfig";
+import "./styles.css";
+
+function Breadcrumb(args: BreadcrumbProps) {
+  const { className, ...rest } = buildBreadcrumbConfig(args);
+  return <nav className={className} {...rest} />;
+}
+
+function BreadcrumbLink(args: BreadcrumbLinkProps) {
+  const { children, className, disabled, ...rest } =
+    buildBreadcrumbLinkConfig(args);
+
+  if (disabled) {
+    return (
+      <p className={className}>
+        <ChevronRight size={14} strokeWidth={2.5} />
+        {children}
+      </p>
+    );
+  }
+
+  return (
+    <Link className={className} {...rest}>
+      <ChevronRight size={14} strokeWidth={2.5} />
+      {children}
+    </Link>
+  );
+}
+
+export { Breadcrumb, BreadcrumbLink };

package/src/components/Breadcrumb/styles.css

@@ -0,0 +1,39 @@
+.arkyn_breadcrumb {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.arkyn_breadcrumb_link {
+  user-select: none;
+  text-decoration: none;
+  font-size: 14px;
+  color: var(--secondary-500);
+}
+
+.arkyn_breadcrumb_link.active {
+  color: var(--secondary-900);
+}
+
+.arkyn_breadcrumb_link.inactive:hover {
+  cursor: pointer;
+  color: var(--secondary-900);
+}
+
+.arkyn_breadcrumb_link:first-child > svg {
+  display: none;
+}
+
+.arkyn_breadcrumb_link:not(:first-child) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.arkyn_breadcrumb_link:not(:first-child) > svg {
+  display: unset;
+  color: var(--secondary-400);
+}

package/src/components/Button/index.tsx

@@ -0,0 +1,27 @@
+import type { ButtonProps } from "@arkyn/types";
+import { Loader2 } from "lucide-react";
+
+import { buildButtonConfig } from "../../config/buildButtonConfig";
+import "./styles.css";
+
+function Button(args: ButtonProps) {
+  const { leftIcon, rightIcon, iconSize, children, loadingText, ...rest } =
+    buildButtonConfig(args);
+
+  return (
+    <button {...rest}>
+      <div className="spinner">
+        <Loader2 size={iconSize} strokeWidth={2.5} />
+        {loadingText && loadingText}
+      </div>
+
+      <div className="content">
+        {leftIcon}
+        {children}
+        {rightIcon}
+      </div>
+    </button>
+  );
+}
+
+export { Button };