@amiceli/papierjs 0.2.0 → 0.4.0

package/dist/types/components/form/slider/sliders.d.ts

@@ -0,0 +1,11 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+export declare class PSliders {
+    value?: number;
+    min?: number;
+    max?: number;
+    block?: boolean;
+    dark?: boolean;
+    changeEvent: EventEmitter<number>;
+    onInput(e: Event): void;
+    render(): any;
+}

package/dist/types/components/form/slider/sliders.preview.d.ts

@@ -0,0 +1 @@
+export declare function previewSlider(): void;

package/dist/types/components/form/switch/switch.d.ts

@@ -0,0 +1,12 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+export declare class PSwitch {
+    /** define switch style */
+    round?: boolean;
+    /** define switch parent style */
+    square?: boolean;
+    dark?: boolean;
+    checked?: boolean;
+    changeEvent: EventEmitter<boolean>;
+    onInput(e: Event): void;
+    render(): any;
+}

package/dist/types/components/form/switch-tile/switch-tile.d.ts

@@ -0,0 +1,25 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+type TileBackground = 'primary' | 'danger' | 'secondary' | 'success' | 'muted';
+/**
+ * @slot unchecked-text - displayed text when switch is unchecked
+ * @slot checked-text - displayed text when switch is checked
+ */
+export declare class SwitchTile {
+    /** Enable dark mode */
+    dark?: boolean;
+    checked?: boolean;
+    checkedBackground?: TileBackground;
+    uncheckedBackground?: TileBackground;
+    changeEvent: EventEmitter<boolean>;
+    onInput(e: Event): void;
+    getFrontCardClass(): {
+        'paper-switch-tile-card-front': boolean;
+        border: boolean;
+    };
+    getBackCardClass(): {
+        'paper-switch-tile-card-back': boolean;
+        border: boolean;
+    };
+    render(): any;
+}
+export {};

package/dist/types/components/modal/modal.d.ts

@@ -0,0 +1,8 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+export declare class PModal {
+    isOpen: boolean;
+    closeEvent: EventEmitter<void>;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/modal/modal.preview.d.ts

@@ -0,0 +1 @@
+export declare function previewModal(): void;

package/dist/types/components/modal/stories/modal.preview.d.ts

@@ -0,0 +1,7 @@
+export declare class PModalPreview {
+    title?: boolean;
+    el: HTMLElement;
+    openModal(): void;
+    closeModal(): void;
+    render(): any;
+}

package/dist/types/components/progress-bar/stories/progress-bar.preview.d.ts

@@ -0,0 +1 @@
+export declare function previewProgressbar(): void;

package/dist/types/components.d.ts

@@ -6,7 +6,14 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface PAccordion {
+        "open": boolean;
+        "title": string;
+    }
     interface PAlert {
+        /**
+          * Show close icon
+         */
         "closable"?: boolean;
         "dark"?: boolean;
         "type"?: AlertColor;
@@ -15,6 +22,14 @@ export namespace Components {
         "dark"?: boolean;
         "type"?: BadgeColor;
     }
+    interface PBreadcrumb {
+        "dark"?: boolean;
+    }
+    interface PBreadcrumbItem {
+        "dark"?: boolean;
+        "first"?: boolean;
+        "link"?: string;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -27,12 +42,22 @@ export namespace Components {
     interface PDropdown {
         "dark"?: boolean;
         "placeholder"?: string;
+        /**
+          * Prevent dropdown self update selected value
+         */
+        "preventSelected"?: boolean;
+        /**
+          * Selected item value
+         */
+        "value"?: string;
     }
     interface PDropdownItem {
         "dark"?: boolean;
         "selected"?: boolean;
         "value": string;
     }
+    interface PDropdownPreview {
+    }
     interface PInputText {
         "block"?: boolean;
         "dark"?: boolean;
@@ -46,12 +71,47 @@ export namespace Components {
     interface PLeaf {
         "dark"?: boolean;
     }
+    interface PModal {
+        "close": () => Promise<void>;
+        "open": () => Promise<void>;
+    }
+    interface PModalPreview {
+        "title"?: boolean;
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
         "type"?: ProgressBarColor;
         "value"?: number;
     }
+    interface PSlider {
+        "block"?: boolean;
+        "dark"?: boolean;
+        "max"?: number;
+        "min"?: number;
+        "value"?: number;
+    }
+    interface PSwitch {
+        "checked"?: boolean;
+        "dark"?: boolean;
+        /**
+          * define switch style
+         */
+        "round"?: boolean;
+        /**
+          * define switch parent style
+         */
+        "square"?: boolean;
+    }
+    interface PSwitchTile {
+        "checked"?: boolean;
+        "checkedBackground"?: TileBackground;
+        /**
+          * Enable dark mode
+         */
+        "dark"?: boolean;
+        "uncheckedBackground"?: TileBackground;
+    }
 }
 export interface PAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -69,7 +129,29 @@ export interface PInputTextCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPInputTextElement;
 }
+export interface PModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPModalElement;
+}
+export interface PSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPSliderElement;
+}
+export interface PSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPSwitchElement;
+}
+export interface PSwitchTileCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPSwitchTileElement;
+}
 declare global {
+    interface HTMLPAccordionElement extends Components.PAccordion, HTMLStencilElement {
+    }
+    var HTMLPAccordionElement: {
+        prototype: HTMLPAccordionElement;
+        new (): HTMLPAccordionElement;
+    };
     interface HTMLPAlertElementEventMap {
         "close": any;
     }
@@ -93,6 +175,18 @@ declare global {
         prototype: HTMLPBadgeElement;
         new (): HTMLPBadgeElement;
     };
+    interface HTMLPBreadcrumbElement extends Components.PBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLPBreadcrumbElement: {
+        prototype: HTMLPBreadcrumbElement;
+        new (): HTMLPBreadcrumbElement;
+    };
+    interface HTMLPBreadcrumbItemElement extends Components.PBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLPBreadcrumbItemElement: {
+        prototype: HTMLPBreadcrumbItemElement;
+        new (): HTMLPBreadcrumbItemElement;
+    };
     interface HTMLPButtonElement extends Components.PButton, HTMLStencilElement {
     }
     var HTMLPButtonElement: {
@@ -133,6 +227,12 @@ declare global {
         prototype: HTMLPDropdownItemElement;
         new (): HTMLPDropdownItemElement;
     };
+    interface HTMLPDropdownPreviewElement extends Components.PDropdownPreview, HTMLStencilElement {
+    }
+    var HTMLPDropdownPreviewElement: {
+        prototype: HTMLPDropdownPreviewElement;
+        new (): HTMLPDropdownPreviewElement;
+    };
     interface HTMLPInputTextElementEventMap {
         "change": string;
     }
@@ -156,25 +256,115 @@ declare global {
         prototype: HTMLPLeafElement;
         new (): HTMLPLeafElement;
     };
+    interface HTMLPModalElementEventMap {
+        "close": void;
+    }
+    interface HTMLPModalElement extends Components.PModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPModalElementEventMap>(type: K, listener: (this: HTMLPModalElement, ev: PModalCustomEvent<HTMLPModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPModalElementEventMap>(type: K, listener: (this: HTMLPModalElement, ev: PModalCustomEvent<HTMLPModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPModalElement: {
+        prototype: HTMLPModalElement;
+        new (): HTMLPModalElement;
+    };
+    interface HTMLPModalPreviewElement extends Components.PModalPreview, HTMLStencilElement {
+    }
+    var HTMLPModalPreviewElement: {
+        prototype: HTMLPModalPreviewElement;
+        new (): HTMLPModalPreviewElement;
+    };
     interface HTMLPProgressBarElement extends Components.PProgressBar, HTMLStencilElement {
     }
     var HTMLPProgressBarElement: {
         prototype: HTMLPProgressBarElement;
         new (): HTMLPProgressBarElement;
     };
+    interface HTMLPSliderElementEventMap {
+        "change": number;
+    }
+    interface HTMLPSliderElement extends Components.PSlider, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPSliderElementEventMap>(type: K, listener: (this: HTMLPSliderElement, ev: PSliderCustomEvent<HTMLPSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPSliderElementEventMap>(type: K, listener: (this: HTMLPSliderElement, ev: PSliderCustomEvent<HTMLPSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPSliderElement: {
+        prototype: HTMLPSliderElement;
+        new (): HTMLPSliderElement;
+    };
+    interface HTMLPSwitchElementEventMap {
+        "change": boolean;
+    }
+    interface HTMLPSwitchElement extends Components.PSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPSwitchElementEventMap>(type: K, listener: (this: HTMLPSwitchElement, ev: PSwitchCustomEvent<HTMLPSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPSwitchElementEventMap>(type: K, listener: (this: HTMLPSwitchElement, ev: PSwitchCustomEvent<HTMLPSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPSwitchElement: {
+        prototype: HTMLPSwitchElement;
+        new (): HTMLPSwitchElement;
+    };
+    interface HTMLPSwitchTileElementEventMap {
+        "change": boolean;
+    }
+    interface HTMLPSwitchTileElement extends Components.PSwitchTile, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPSwitchTileElementEventMap>(type: K, listener: (this: HTMLPSwitchTileElement, ev: PSwitchTileCustomEvent<HTMLPSwitchTileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPSwitchTileElementEventMap>(type: K, listener: (this: HTMLPSwitchTileElement, ev: PSwitchTileCustomEvent<HTMLPSwitchTileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPSwitchTileElement: {
+        prototype: HTMLPSwitchTileElement;
+        new (): HTMLPSwitchTileElement;
+    };
     interface HTMLElementTagNameMap {
+        "p-accordion": HTMLPAccordionElement;
         "p-alert": HTMLPAlertElement;
         "p-badge": HTMLPBadgeElement;
+        "p-breadcrumb": HTMLPBreadcrumbElement;
+        "p-breadcrumb-item": HTMLPBreadcrumbItemElement;
         "p-button": HTMLPButtonElement;
         "p-dropdown": HTMLPDropdownElement;
         "p-dropdown-item": HTMLPDropdownItemElement;
+        "p-dropdown-preview": HTMLPDropdownPreviewElement;
         "p-input-text": HTMLPInputTextElement;
         "p-leaf": HTMLPLeafElement;
+        "p-modal": HTMLPModalElement;
+        "p-modal-preview": HTMLPModalPreviewElement;
         "p-progress-bar": HTMLPProgressBarElement;
+        "p-slider": HTMLPSliderElement;
+        "p-switch": HTMLPSwitchElement;
+        "p-switch-tile": HTMLPSwitchTileElement;
     }
 }
 declare namespace LocalJSX {
+    interface PAccordion {
+        "open"?: boolean;
+        "title"?: string;
+    }
     interface PAlert {
+        /**
+          * Show close icon
+         */
         "closable"?: boolean;
         "dark"?: boolean;
         "onClose"?: (event: PAlertCustomEvent<any>) => void;
@@ -184,6 +374,14 @@ declare namespace LocalJSX {
         "dark"?: boolean;
         "type"?: BadgeColor;
     }
+    interface PBreadcrumb {
+        "dark"?: boolean;
+    }
+    interface PBreadcrumbItem {
+        "dark"?: boolean;
+        "first"?: boolean;
+        "link"?: string;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -197,12 +395,22 @@ declare namespace LocalJSX {
         "dark"?: boolean;
         "onSelect"?: (event: PDropdownCustomEvent<string>) => void;
         "placeholder"?: string;
+        /**
+          * Prevent dropdown self update selected value
+         */
+        "preventSelected"?: boolean;
+        /**
+          * Selected item value
+         */
+        "value"?: string;
     }
     interface PDropdownItem {
         "dark"?: boolean;
         "onChange"?: (event: PDropdownItemCustomEvent<string>) => void;
         "selected"?: boolean;
-        "value"?: string;
+        "value": string;
+    }
+    interface PDropdownPreview {
     }
     interface PInputText {
         "block"?: boolean;
@@ -218,35 +426,90 @@ declare namespace LocalJSX {
     interface PLeaf {
         "dark"?: boolean;
     }
+    interface PModal {
+        "onClose"?: (event: PModalCustomEvent<void>) => void;
+    }
+    interface PModalPreview {
+        "title"?: boolean;
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
         "type"?: ProgressBarColor;
         "value"?: number;
     }
+    interface PSlider {
+        "block"?: boolean;
+        "dark"?: boolean;
+        "max"?: number;
+        "min"?: number;
+        "onChange"?: (event: PSliderCustomEvent<number>) => void;
+        "value"?: number;
+    }
+    interface PSwitch {
+        "checked"?: boolean;
+        "dark"?: boolean;
+        "onChange"?: (event: PSwitchCustomEvent<boolean>) => void;
+        /**
+          * define switch style
+         */
+        "round"?: boolean;
+        /**
+          * define switch parent style
+         */
+        "square"?: boolean;
+    }
+    interface PSwitchTile {
+        "checked"?: boolean;
+        "checkedBackground"?: TileBackground;
+        /**
+          * Enable dark mode
+         */
+        "dark"?: boolean;
+        "onChange"?: (event: PSwitchTileCustomEvent<boolean>) => void;
+        "uncheckedBackground"?: TileBackground;
+    }
     interface IntrinsicElements {
+        "p-accordion": PAccordion;
         "p-alert": PAlert;
         "p-badge": PBadge;
+        "p-breadcrumb": PBreadcrumb;
+        "p-breadcrumb-item": PBreadcrumbItem;
         "p-button": PButton;
         "p-dropdown": PDropdown;
         "p-dropdown-item": PDropdownItem;
+        "p-dropdown-preview": PDropdownPreview;
         "p-input-text": PInputText;
         "p-leaf": PLeaf;
+        "p-modal": PModal;
+        "p-modal-preview": PModalPreview;
         "p-progress-bar": PProgressBar;
+        "p-slider": PSlider;
+        "p-switch": PSwitch;
+        "p-switch-tile": PSwitchTile;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "p-accordion": LocalJSX.PAccordion & JSXBase.HTMLAttributes<HTMLPAccordionElement>;
             "p-alert": LocalJSX.PAlert & JSXBase.HTMLAttributes<HTMLPAlertElement>;
             "p-badge": LocalJSX.PBadge & JSXBase.HTMLAttributes<HTMLPBadgeElement>;
+            "p-breadcrumb": LocalJSX.PBreadcrumb & JSXBase.HTMLAttributes<HTMLPBreadcrumbElement>;
+            "p-breadcrumb-item": LocalJSX.PBreadcrumbItem & JSXBase.HTMLAttributes<HTMLPBreadcrumbItemElement>;
             "p-button": LocalJSX.PButton & JSXBase.HTMLAttributes<HTMLPButtonElement>;
             "p-dropdown": LocalJSX.PDropdown & JSXBase.HTMLAttributes<HTMLPDropdownElement>;
             "p-dropdown-item": LocalJSX.PDropdownItem & JSXBase.HTMLAttributes<HTMLPDropdownItemElement>;
+            "p-dropdown-preview": LocalJSX.PDropdownPreview & JSXBase.HTMLAttributes<HTMLPDropdownPreviewElement>;
             "p-input-text": LocalJSX.PInputText & JSXBase.HTMLAttributes<HTMLPInputTextElement>;
             "p-leaf": LocalJSX.PLeaf & JSXBase.HTMLAttributes<HTMLPLeafElement>;
+            "p-modal": LocalJSX.PModal & JSXBase.HTMLAttributes<HTMLPModalElement>;
+            "p-modal-preview": LocalJSX.PModalPreview & JSXBase.HTMLAttributes<HTMLPModalPreviewElement>;
             "p-progress-bar": LocalJSX.PProgressBar & JSXBase.HTMLAttributes<HTMLPProgressBarElement>;
+            "p-slider": LocalJSX.PSlider & JSXBase.HTMLAttributes<HTMLPSliderElement>;
+            "p-switch": LocalJSX.PSwitch & JSXBase.HTMLAttributes<HTMLPSwitchElement>;
+            "p-switch-tile": LocalJSX.PSwitchTile & JSXBase.HTMLAttributes<HTMLPSwitchTileElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amiceli/papierjs",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Papercss web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -55,24 +55,26 @@
     "@chromatic-com/storybook": "^3.2.4",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
-    "@stencil/core": "^4.7.0",
+    "@stencil/core": "^4.26.0",
     "@stencil/sass": "^3.0.12",
-    "@storybook/addon-essentials": "^8.5.5",
-    "@storybook/addon-interactions": "^8.5.5",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/html": "^8.5.3",
-    "@storybook/html-vite": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@types/jest": "^29.5.6",
+    "@storybook/addon-controls": "^8.5.8",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/addon-interactions": "^8.5.8",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/html": "^8.5.8",
+    "@storybook/html-vite": "^8.5.8",
+    "@storybook/test": "^8.5.8",
+    "@types/jest": "^29.5.14",
     "@types/node": "^16.18.11",
     "@types/react": "^19.0.8",
     "dotenv": "^16.4.7",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lefthook": "^1.10.10",
-    "puppeteer": "^21.9.0",
-    "remark-gfm": "^4.0.0",
-    "storybook": "^8.5.3"
+    "storybook": "^8.5.8"
+  },
+  "optionalDependencies": {
+    "puppeteer": "^24.2.1"
   },
   "license": "MIT",
   "dependencies": {

package/readme.md

@@ -17,9 +17,10 @@ Available components:
 - [X] Progress bar
 - [X] Text input
 - [X] Badge
+- [X] Slider
 - [ ] Card
-- [ ] Breadcrumb
-- [ ] Modals
+- [X] Breadcrumb
+- [X] Modals
 - [ ] NavBar
 - [ ] Tabs