{"id":14990094,"url":"https://github.com/rpdevjesco/zephyrjs","last_synced_at":"2026-04-04T22:17:54.250Z","repository":{"id":247513467,"uuid":"811937890","full_name":"RPDevJesco/ZephyrJS","owner":"RPDevJesco","description":"A custom client side web component library for creating reusable UI components with Shadow DOM and state management.","archived":false,"fork":false,"pushed_at":"2024-10-21T23:43:25.000Z","size":258,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T02:05:14.899Z","etag":null,"topics":["custom-elements","frontend-development","html-css-javascript","html5","javascript-library","modular-design","shadow-dom","state-management","ui-components","web-components","web-components-library","zephyrjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RPDevJesco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-07T15:49:32.000Z","updated_at":"2024-10-21T23:43:29.000Z","dependencies_parsed_at":"2024-07-27T20:42:34.065Z","dependency_job_id":"7ea4bd4b-a37f-4515-8e78-34554bbc59b8","html_url":"https://github.com/RPDevJesco/ZephyrJS","commit_stats":{"total_commits":69,"total_committers":1,"mean_commits":69.0,"dds":0.0,"last_synced_commit":"23b0f8bb3a27b3700e6d2a9ba492a5e58087d68e"},"previous_names":["rpdevjesco/zephyrjs"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2FZephyrJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2FZephyrJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2FZephyrJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RPDevJesco%2FZephyrJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RPDevJesco","download_url":"https://codeload.github.com/RPDevJesco/ZephyrJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","frontend-development","html-css-javascript","html5","javascript-library","modular-design","shadow-dom","state-management","ui-components","web-components","web-components-library","zephyrjs"],"created_at":"2024-09-24T14:19:27.031Z","updated_at":"2025-04-12T02:05:19.905Z","avatar_url":"https://github.com/RPDevJesco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ZephyrLogo](https://github.com/user-attachments/assets/0bf39d61-0dfd-420a-9f2d-c3a3acdbcb36)\n\n\nZephyrJS is a lightweight, customizable web component framework for building modern web applications. It provides a set of reusable, encapsulated UI components and a core library for creating your own custom elements.\n\n## Features\n\n- Custom Elements**: Built on Web Components standards\n- Shadow DOM**: Encapsulation for styles and markup\n- Reactive State Management**: Simple and efficient state handling\n- Template System**: Easy-to-use HTML templating\n- Two-way Data Binding**: Seamless updates between state and UI\n- Lifecycle Hooks**: Familiar component lifecycle management\n- Event Handling**: Simplified custom event system\n- Theming**: CSS variables for easy customization\n- Utility Classes**: Common CSS utilities included\n\n## Quick Start\n\n### Import ZephyrJS:\n\n```js\nimport  ZephyrJS, {defineCustomElement } from 'zephyrjs';\n```\n\n### Create a custom element:\n\n```js\nclass MyComponent extends ZephyrJS {\n  constructor() {\n    super();\n  }\n\n  componentDidMount() {\n    // Component logic here\n  }\n}\n\ndefineCustomElement('my-component', MyComponent);\n```\n\n### Create the HTML template file (/templates/my-component.html):\n```html\n\u003ctemplate id=\"my-component\"\u003e\n  \u003cstyle\u003e\n    :host {\n      display: block;\n      padding: 10px;\n      border: 1px solid var(--primary-color);\n    }\n    .content {\n      font-family: var(--font-family-sans-serif);\n    }\n  \u003c/style\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003cslot\u003e\u003c/slot\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Use in HTML:\n```html\n\u003cmy-component\u003e\u003c/my-component\u003e\n```\n\n### Core Components\nZephyrJS comes with several pre-built components:\n```html\n\u003czephyr-accordion\u003e\n  \u003czephyr-accordion-item header=\"Section 1\"\u003e\n    Content for section 1.\n  \u003c/zephyr-accordion-item\u003e\n  \u003czephyr-accordion-item header=\"Section 2\"\u003e\n    Content for section 2.\n  \u003c/zephyr-accordion-item\u003e\n\u003c/zephyr-accordion\u003e\n\n\u003czephyr-accordion-table\u003e\n  \u003c!-- Define your table structure here --\u003e\n\u003c/zephyr-accordion-table\u003e\n\n\u003czephyr-basic-card title=\"Card Title\" content=\"This is a simple card.\"\u003e\u003c/zephyr-basic-card\u003e\n\n\u003czephyr-button label=\"Click Me\"\u003e\u003c/zephyr-button\u003e\n\n\u003czephyr-card-group\u003e\n  \u003czephyr-basic-card title=\"Card 1\" content=\"Content 1\"\u003e\u003c/zephyr-basic-card\u003e\n  \u003czephyr-basic-card title=\"Card 2\" content=\"Content 2\"\u003e\u003c/zephyr-basic-card\u003e\n\u003c/zephyr-card-group\u003e\n\n\u003czephyr-data-table\u003e\n  \u003c!-- Define your table structure here --\u003e\n\u003c/zephyr-data-table\u003e\n\n\u003czephyr-dropdown\u003e\n  \u003coption value=\"1\"\u003eOption 1\u003c/option\u003e\n  \u003coption value=\"2\"\u003eOption 2\u003c/option\u003e\n\u003c/zephyr-dropdown\u003e\n\n\u003czephyr-input type=\"text\" placeholder=\"Enter text\"\u003e\u003c/zephyr-input\u003e\n\n\u003czephyr-kanban-board\u003e\n  \u003c!-- Define your Kanban board structure here --\u003e\n\u003c/zephyr-kanban-board\u003e\n\n\u003czephyr-layout-component\u003e\n  \u003cheader slot=\"top\"\u003e\u003c/header\u003e\n  \u003cnav slot=\"left\"\u003e\u003c/nav\u003e\n  \u003cmain slot=\"center\"\u003e\u003c/main\u003e\n\u003c/zephyr-layout-component\u003e\n\n\u003czephyr-markdown-editor\u003e\u003c/zephyr-markdown-editor\u003e\n\n\u003czephyr-markdown-renderer content='\n  # Markdown Content\n  This is some **markdown** content to render.'\n\u003e\n\u003c/zephyr-markdown-renderer\u003e\n\n\u003czephyr-modal\u003e\n  \u003cp\u003eThis is a modal content.\u003c/p\u003e\n\u003c/zephyr-modal\u003e\n\n\u003czephyr-notification\u003e\n  \u003cp\u003eThis is a notification message.\u003c/p\u003e\n\u003c/zephyr-notification\u003e\n\n\u003czephyr-tabs\u003e\n  \u003czephyr-tab name=\"Tab 1\"\u003e\n    Content for tab 1.\n  \u003c/zephyr-tab\u003e\n  \u003czephyr-tab name=\"Tab 2\"\u003e\n    Content for tab 2.\n  \u003c/zephyr-tab\u003e\n\u003c/zephyr-tabs\u003e\n\n\u003czephyr-tooltip content=\"This is a tooltip\"\u003e\n  Hover over me\n\u003c/zephyr-tooltip\u003e\n\n\u003czephyr-tree-table\u003e\n  \u003c!-- Define your tree table structure here --\u003e\n\u003c/zephyr-tree-table\u003e\n```\n\n### Customization\nCustomize components using CSS variables:\n\n```css\n[data-theme=\"custom\"] {\n    /* Main palette colors */\n    --primary-color: #2C2C2C;    /* Dark gray */\n    --secondary-color: #4B0000;  /* Dark red */\n    --accent-color: #FF4500;     /* Bright orange-red */\n    --background-color: #1A1A1A; /* Almost black */\n    --neutral-color: #808080;    /* Medium gray */\n    --secondary-color-light: #8B0000; /* Dark red */\n\n    /* Semantic colors */\n    --info-color: #FF6347;       /* Tomato */\n    --info-background: #FFE4E1;  /* Light red */\n    --success-color: #32CD32;    /* Lime green */\n    --success-background: #F0FFF0; /* Honeydew */\n    --danger-color: #DC143C;     /* Crimson */\n    --danger-background: #FFE4E1; /* Light red */\n    --warning-color: #FFD700;    /* Gold */\n    --warning-background: #FFF8DC; /* Light yellow */\n\n    /* Text colors */\n    --light-text: #FFFFFF;       /* White */\n    --dark-text: #FF4500;        /* Bright orange-red */\n\n    /* Component-specific colors */\n    --button-hover-bg: #CD5C5C;  /* Indian red */\n    --input-focus-border: #FF4500; /* Adjusted to match the accent color */\n    --button-click-bg: #B22222;  /* Firebrick */\n\n    /* Typography */\n    --font-family-sans-serif: \"Montserrat\", \"Helvetica Neue\", Arial, sans-serif;\n    --font-family-serif: \"Merriweather\", Georgia, serif;\n    --font-family-monospace: \"Fira Code\", \"Courier New\", monospace;\n\n    /* Body styles */\n    --body-bg: var(--background-color);\n    --body-color: #FF4500;       /* Bright orange-red for main text */\n\n    /* Link styles */\n    --link-color: var(--accent-color);\n    --link-decoration: none;\n    --link-hover-color: #FF6347; /* Tomato */\n\n    /* Additional theme-specific variables */\n    --header-bg: var(--primary-color);\n    --header-color: var(--neutral-color);\n    --footer-bg: var(--secondary-color);\n    --footer-color: var(--primary-color);\n    --button-primary-bg: var(--accent-color);\n    --button-primary-color: white;\n    --card-bg: #2C2C2C; /* Dark gray for card background */\n    --card-border: var(--neutral-color);\n\n    /* Button specific variables */\n    --button-padding: 10px 20px;\n    --button-border-radius: 5px;\n    --button-font-size: 1em;\n    --button-primary-bg-color: var(--accent-color);\n    --button-disabled-background: var(--neutral-color);\n\n    /* Card specific variables */\n    --card-box-shadow: var(--shadow-light);\n    --card-padding: 16px;\n    --card-border-radius: 8px;\n    --card-header-font-size: 1.5em;\n    --card-header-margin-bottom: 12px;\n    --card-content-margin-top: 8px;\n\n    /* CardGroup Component Variables */\n    --card-group-gap: 1rem;\n    --card-min-width: 250px;\n    --card-border-color: #808080;\n    --card-header-color: #FF4500;\n    --card-content-color: #CD5C5C; /* Indian red */\n    --card-content-font-size: 1rem;\n\n    /* Input specific variables */\n    --input-margin: 10px 0;\n    --input-padding: 10px;\n    --input-border: 1px solid var(--neutral-color);\n    --input-border-radius: 4px;\n    --input-font-size: 1rem;\n    --input-focus-border-color: var(--accent-color);\n\n    /* Dropdown specific variables */\n    --dropdown-padding: 10px;\n    --dropdown-border: 1px solid var(--neutral-color);\n    --dropdown-border-radius: 4px;\n    --dropdown-font-size: 1rem;\n    --dropdown-background: var(--background-color);\n    --dropdown-arrow: url('data:image/svg+xml;utf8,\u003csvg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpolygon points=\"0,0 140,0 70,70\" style=\"fill:%23808080;\"/\u003e\u003c/svg\u003e');\n    --dropdown-focus-border-color: var(--accent-color);\n\n    /* Modal specific variables */\n    --modal-background: var(--background-color);\n    --modal-border-radius: 10px;\n    --modal-box-shadow: var(--shadow-dark);\n    --modal-width: 300px;\n    --modal-z-index: 1000;\n    --modal-header-padding: 16px;\n    --modal-header-background: var(--primary-color);\n    --modal-header-border-color: var(--neutral-color);\n    --modal-header-font-size: 1.25em;\n    --modal-body-padding: 16px;\n    --modal-footer-padding: 16px;\n    --modal-footer-background: var(--neutral-color);\n    --modal-footer-border-color: var(--neutral-color);\n\n    /* Notification specific variables */\n    --notification-padding: 16px;\n    --notification-background: var(--dark-text);\n    --notification-border-color: var(--primary-color);\n    --notification-font-size: 1em;\n    --notification-success-background: var(--success-background);\n    --notification-error-background: var(--danger-background);\n    --notification-warning-background: var(--warning-background);\n    --notification-success-text: var(--success-color);\n    --notification-error-text: var(--danger-color);\n    --notification-warning-text: var(--warning-color);\n\n    /* Markdown Editor and Renderer Colors */\n    --markdown-bg: #2C2C2C;\n    --markdown-color: #FF4500;\n    --markdown-keyword: #DC143C;\n    --markdown-string: #32CD32;\n    --markdown-number: #FFD700;\n    --markdown-function: #FF6347;\n    --markdown-comment: #75715E;\n    --markdown-method: #FF4500;\n    --markdown-tag: #4B0000;\n    --markdown-attribute: #FF6347;\n    --markdown-at-rule: #AF00DB;\n    --markdown-punctuation: #000000;\n    --markdown-property: #FF6347;\n    --markdown-value: #4B0000;\n    --markdown-selector: #FF4500;\n    --markdown-indentation: #CCCCCC;\n    --markdown-text: var(--markdown-indentation);\n\n    --spacing-none: 0;\n    --spacing-extra-small: 5px;\n    --spacing-small: 10px;\n    --spacing-medium: 16px;\n    --spacing-large: 20px;\n\n    --border-radius: 5px;\n}\n```\n\nYou can create your own theme to change the values to what suits your project over the defaults.\n\n### Using ZephyrJS in HTML Project\nImport the latest version from jsdelivr into your project as depicted below.\nFrom there, you will be able to make full usage of ZephyrJS.\n```html\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eTitle of project\u003c/title\u003e\n    \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.08/zephyrcore/zephyr.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.08/zephyrtemplates/ZephyrCore.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.08/zephyrcss/variables.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.08/zephyrcss/zephyr.css\"\u003e\n\u003c/head\u003e\n```\n\nZephyrJS also boasts a CSS Framework which houses utility classes and animations.\n\n### Available Utilities\n#### Available Color Categories\n\n#### Basic Colors: Standard colors like blue, red, green, etc.\n\n- --blue, \n- --red, \n- --green\n\n\n#### Extended Colors: Additional named colors for more variety.\n\n- --lime, \n- --gold, \n- --navy\n\n#### Light Shades: Lighter versions of basic colors.\n\n- --blue-light, \n- --red-light, \n- --green-light\n\n\n#### Dark Shades: Darker versions of basic colors.\n\n- --blue-dark, \n- --red-dark, \n- --green-dark\n\n\n#### Pastel Shades: Soft, muted colors.\n\n- --pastel-blue, \n- --pastel-green, \n- --pastel-pink\n\n\n#### Additional Shades: Extra light variations of colors.\n\n- --light-blue, \n- --light-coral, \n- --light-sea-green\n\n\n#### Custom Shades: Specific color variations for your project.\n\n- --custom-blue, \n- --custom-green, \n- --custom-red\n\n\n#### Semantic Colors: Colors with specific meanings or uses.\n\n- --info-color, \n- --success-color, \n- --danger-color\n\n\n#### Gradient Colors: Predefined gradient backgrounds.\n\n- --gradient-primary, \n- --gradient-secondary\n\n\n#### Shadows: Predefined shadow styles.\n\n- --shadow-light, \n- --shadow-dark\n\n### Layout\n#### Container and Grid System\n\n- .container: Main container class\n- .row: Flex row\n- .col: Flex column\n\n### Display\n\n- .d-none, \n- .d-inline, \n- .d-inline-block, \n- .d-block, \n- .d-table, \n- .d-table-row, \n- .d-table-cell, \n- .d-flex, \n- .d-inline-flex\n- Responsive variants: .d-{breakpoint}-{value} (e.g., .d-md-none)\n\n### Flexbox\n\n- Flex container: .d-flex, .d-inline-flex\n- Justify content: .justify-content-start, .justify-content-end, .justify-content-center, .justify-content-between, .justify-content-around\n- Align items: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, .align-items-stretch\n\n### Positioning\n\n- .position-static, \n- .position-relative, \n- .position-absolute, \n- .position-fixed, \n- .position-sticky\n- .top-0, \n- .right-0, \n- .bottom-0, \n- .left-0, \n- .top-50, \n- .right-50, \n- .bottom-50, \n- .left-50, \n- .top-100, \n- .right-100, \n- .bottom-100, \n- .left-100\n- .translate-middle, \n- .translate-middle-x, \n- .translate-middle-y\n\n### Spacing\n#### Margin\n\n- .m-0 to .m-5, \n- .mt-0 to .mt-5, \n- .mr-0 to .mr-5, \n- .mb-0 to .mb-5, \n- .ml-0 to .ml-5\n- .mx-0 to .mx-5, \n- .my-0 to .my-5\n- .m-auto, \n- .mx-auto, \n- .my-auto\n\n### Padding\n\n- .p-0 to .p-5, \n- .pt-0 to .pt-5, \n- .pr-0 to .pr-5, \n- .pb-0 to .pb-5, \n- .pl-0 to .pl-5\n- .px-0 to .px-5, \n- .py-0 to .py-5\n\n### Typography\n#### Font Size\n\n- .text-xs, \n- .text-sm, \n- .text-base, \n- .text-lg, \n- .text-xl, \n- .text-2xl, \n- .text-3xl, \n- .text-4xl\n\n### Font Weight\n\n- .font-light, \n- .font-normal, \n- .font-medium, \n- .font-semibold, \n- .font-bold\n\n### Text Alignment\n\n- .text-left, \n- .text-center, \n- .text-right, \n- .text-justify\n\n### Text Decoration\n\n- .underline, \n- .line-through, \n- .no-underline\n\n### Text Transform\n\n- .uppercase, \n- .lowercase, \n- .capitalize, \n- .normal-case\n\n### Line Height\n\n- .leading-none, \n- .leading-tight, \n- .leading-normal, \n- .leading-loose\n\n### Letter Spacing\n\n- .tracking-tight, \n- .tracking-normal, \n- .tracking-wide\n\n### Colors\n#### Background Colors\n\n- .bg-primary, \n- .bg-secondary, \n- .bg-success, \n- .bg-danger, \n- .bg-warning, \n- .bg-info, \n- .bg-light, \n- .bg-dark\n\n### Text Colors\n\n- .text-primary, \n- .text-secondary, \n- .text-success, \n- .text-danger, \n- .text-warning, \n- .text-info, \n- .text-light, \n- .text-dark\n\n### Borders\n\n- .border, \n- .border-top, \n- .border-right, \n- .border-bottom, \n- .border-left, \n- .border-0\n- .rounded, \n- .rounded-top, \n- .rounded-right, \n- .rounded-bottom, \n- .rounded-left, \n- .rounded-circle, \n- .rounded-0\n\n### Shadows\n\n- .shadow-sm, \n- .shadow, \n- .shadow-lg, \n- .shadow-none\n\n### Sizing\n#### Width\n\n- .w-25, \n- .w-50, \n- .w-75, \n- .w-100, \n- .w-auto\n- .max-w-25, \n- .max-w-50, \n- .max-w-75, \n- .max-w-100, \n- .max-w-none\n\n### Height\n\n- .h-25, \n- .h-50, \n- .h-75, \n- .h-100, \n- .h-auto\n- .max-h-25, \n- .max-h-50, \n- .max-h-75, \n- .max-h-100, \n- .max-h-none\n\n### Interactions\n\n- .pointer-events-none, \n- .pointer-events-auto\n- .user-select-none, \n- .user-select-auto\n\n### Overflow\n\n- .overflow-auto, \n- .overflow-hidden, \n- .overflow-visible, \n- .overflow-scroll\n- .overflow-x-auto, \n- .overflow-x-hidden, \n- .overflow-x-visible, \n- .overflow-x-scroll\n- .overflow-y-auto, \n- .overflow-y-hidden, \n- .overflow-y-visible, \n- .overflow-y-scroll\n\n### Accessibility\n\n- .focus-visible: Provides a visible outline for keyboard focus\n- .skip-to-main: Allows keyboard users to skip to the main content\n- .high-contrast-border: Adds a border in high contrast mode\n- .reduce-motion: Removes animations and transitions for users who prefer reduced motion\n\n### Logical Properties\n\n- Margin: .m-inline-start-1, .m-inline-end-1, .m-block-start-1, .m-block-end-1\n- Padding: .p-inline-start-1, .p-inline-end-1, .p-block-start-1, .p-block-end-1\n- Border: .border-inline-start, .border-inline-end, .border-block-start, .border-block-end\n- Text alignment: .text-start, .text-end\n- Position: .inset-inline-start-0, .inset-inline-end-0, .inset-block-start-0, .inset-block-end-0\n\n### Responsive Classes\n#### Many utilities include responsive variants that apply at different breakpoints:\n\n- sm: Small screens (≥576px)\n- md: Medium screens (≥768px)\n- lg: Large screens (≥992px)\n- xl: Extra large screens (≥1200px)\n\n### Reset\n- visible - sets item visible\n- invisible - sets item invisible\n\n### Available Animations\n\n- fade-in: Fades in the element\n- swing: Swings the element back and forth\n- slide-in-left: Slides in the element from different directions\n- slide-in-right: Slides in the element from different directions\n- slide-in-up: Slides in the element from different directions \n- slide-in-down: Slides in the element from different directions\n- slide-in-bottom: Slides in the element from different directions\n- slide-out-top: Slides out the element to the top\n- bounce: Makes the element bounce\n- rotate: Rotates the element 360 degrees\n- zoom-in, zoom-out: Zooms the element in or out\n- flip: Flips the element horizontally\n- pulse: Makes the element pulse\n- shake: Shakes the element\n- wobble: Makes the element wobble\n- text-hide: Hides text by moving it up\n- text-reveal: Reveals text by moving it up\n- typewriter: Creates a typewriter effect\n- floating: Makes the element float up and down\n- blur-in, blur-out: Blurs the element in or out\n- hinge: Creates a hinge effect\n- glitch: Creates a glitch effect\n- ripple: Creates a ripple effect\n- spotlight: Creates a spotlight effect\n- text-shadow-pop: Makes text pop out with a shadow\n- elastic-scale: Scales the element with an elastic effect\n- roll-in, roll-out: Rolls the element in or out\n- flash: Makes the element flash\n- swing-in, swing-out: Swings the element in or out\n\n\n### License\nZephyrJS is MIT licensed.\n\n### Support\nFor support, please open an issue on our GitHub repository.\n\nBuilt with ❤️\n\n### ToDO:\n\n#### Form-Related Components\n- `\u003czephyr-form\u003e`: A wrapper component for handling form submissions, validation, and data management.\n- `\u003czephyr-checkbox\u003e`: A customizable checkbox input element with clear styling options.\n- `\u003czephyr-radio\u003e`: Similar to `\u003czephyr-checkbox\u003e`, but for radio button groups.\n- `\u003czephyr-switch\u003e`: A toggle switch component for binary options.\n- `\u003czephyr-select\u003e`: A styled dropdown selection component.\n- `\u003czephyr-datepicker\u003e`: A calendar component for date input.\n- `\u003czephyr-timepicker\u003e`: A component for selecting time.\n- `\u003czephyr-calendar\u003e`: A full calendar component for scheduling and events.\n- `\u003czephyr-range-slider\u003e`: An input slider for selecting a value within a range.\n- `\u003czephyr-file-upload\u003e`: A component for handling file uploads.\n- `\u003czephyr-multi-form\u003e`: Guides users through multi-step processes, such as checkout processes.\n\n#### Authentication Components\n- `\u003czephyr-login-form\u003e`: A pre-built login form component.\n- `\u003czephyr-signup-form\u003e`: A registration form component.\n- `\u003czephyr-password-strength\u003e`: A password strength indicator.\n\n#### Utility Components\n- `\u003czephyr-scroll-to-top\u003e`: A button to scroll back to the top of the page.\n- `\u003czephyr-infinite-scroll\u003e`: A component to handle infinite scrolling.\n- `\u003czephyr-lazy-load\u003e`: A component for lazy loading images or other content.\n\n#### Navigation \u0026 Layout Components\n- `Popover/Popover Menu`: Similar to tooltips but more complex, allowing for interaction within the content.\n- `\u003czephyr-navbar\u003e`: A top-level navigation bar component.\n- `\u003czephyr-sidebar\u003e`: A collapsible side navigation menu.\n- `\u003czephyr-breadcrumb\u003e`: A navigational aid that shows the user's path within a website or application.\n- `\u003czephyr-grid\u003e`: A flexible grid system for creating responsive layouts (could integrate with a popular CSS grid library).\n- `\u003czephyr-carousel\u003e`: A slideshow component for displaying images or content.\n- `\u003czephyr-masonry\u003e`: A masonry layout component for dynamic content arrangement.\n- `\u003czephyr-pagination\u003e`: A component to help users navigate through large sets of data.\n\n#### Data Visualization Components\n- `\u003czephyr-chart\u003e`: A generic chart component that can be configured for various chart types (line, bar, pie, etc.). Could potentially integrate with a charting library like Chart.js or D3.js.\n- `\u003czephyr-progress\u003e`: A progress bar or circle component for visualizing progress.\n- `\u003czephyr-timeline\u003e`: A component to display events or data points in chronological order.\n\n#### Interactive Components\n- `\u003czephyr-drawer\u003e`: A sliding panel that emerges from the side of the screen.\n- `\u003czephyr-snackbar\u003e`: A brief notification that appears at the bottom of the screen.\n- `\u003czephyr-rating\u003e`: A component for displaying and collecting user ratings (e.g., star ratings).\n\n#### Additional Ideas\n- `\u003czephyr-avatar\u003e`: A circular image component for displaying user profile pictures.\n- `\u003czephyr-badge\u003e`: A small label or tag to highlight a piece of information.\n- `\u003czephyr-loader/spinner\u003e`: Animated loading indicators to provide feedback during asynchronous operations.\n- `\u003czephyr-audio-player\u003e`: A component for playing audio files.\n- `\u003czephyr-video-player\u003e`: A component for playing video files.\n- `\u003czephyr-sortable-list\u003e`: Allows users to reorder list items via drag and drop.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpdevjesco%2Fzephyrjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frpdevjesco%2Fzephyrjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpdevjesco%2Fzephyrjs/lists"}