{"id":23139108,"url":"https://github.com/horberlan/cyberfuture","last_synced_at":"2026-04-09T12:55:55.954Z","repository":{"id":57130245,"uuid":"478302130","full_name":"horberlan/cyberFuture","owner":"horberlan","description":"CyberFuture npm's package","archived":false,"fork":false,"pushed_at":"2023-03-22T00:26:27.000Z","size":41932,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T17:38:17.224Z","etag":null,"topics":["component","cyber","npm","react","styled-system"],"latest_commit_sha":null,"homepage":"https://cyberfuture.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/horberlan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-04-05T21:13:09.000Z","updated_at":"2024-05-24T23:27:56.000Z","dependencies_parsed_at":"2024-10-24T23:20:51.907Z","dependency_job_id":null,"html_url":"https://github.com/horberlan/cyberFuture","commit_stats":{"total_commits":104,"total_committers":5,"mean_commits":20.8,"dds":"0.47115384615384615","last_synced_commit":"278eb921c1fe4dd498f8e191a6622fca77a76bb6"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2FcyberFuture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2FcyberFuture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2FcyberFuture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2FcyberFuture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/horberlan","download_url":"https://codeload.github.com/horberlan/cyberFuture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157283,"owners_count":20893220,"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":["component","cyber","npm","react","styled-system"],"created_at":"2024-12-17T13:13:16.264Z","updated_at":"2025-12-30T23:08:44.682Z","avatar_url":"https://github.com/horberlan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Cyberfuture \u003c/h1\u003e\n\u003cdiv\u003e\n  \u003cimg align=\"left\" alt=\"npm\" src=\"https://img.shields.io/npm/dm/cyberfuture?style=flat-square\"\u003e\n  \u003cimg align=\"right\" alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/horberlan/CyberFuture?style=flat-square\"\u003e\n  \u003cimg align=\"right\" alt=\"Snyk Vulnerabilities for npm package\" src=\"https://img.shields.io/snyk/vulnerabilities/npm/cyberfuture?style=flat-square\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\nTimes change and apps need to adapt to those changes!\n\nThe Cyberfuture package provides several components for React that can be used to quickly and easily create styled user interfaces.\n\nAll of these components can be customized using CSS variables or by passing in props to modify their appearance. \n\nBy using the Cyberfuture package, developers can save time and effort when building user interfaces. The purpose is to create more visually appealing and engaging experiences for users.\n\n## CyberButton Component\nThe CyberButton component is a customizable button with an animated clip-path effect. It receives a text prop, which sets the text that appears inside the button.\n\n### Props\n\n\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003eProp\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003etext\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eYes\u003c/td\u003e\u003ctd\u003e-\u003c/td\u003e\u003ctd\u003eThe text that appears inside the button.\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n```jsx\nimport { CyberButton } from 'cyberfuture';\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cCyberButton text=\"Click me!\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Customization\nThe CyberButton component can be customized by modifying the following CSS variables:\n\n\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003eCSS Variable\u003c/th\u003e\u003cth\u003eDefault Value\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e--cyber-button-color\u003c/td\u003e\u003ctd\u003e#fff\u003c/td\u003e\u003ctd\u003eThe text color of the button.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e--cyber-button-background\u003c/td\u003e\u003ctd\u003elinear-gradient(106deg, #ffe900 8%, #0043ff 44%, #a200ff 87%)\u003c/td\u003e\u003ctd\u003eThe background of the button.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e--cyber-button-background-noise1\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ekeyframes\u003c/code\u003e animation\u003c/td\u003e\u003ctd\u003eThe first noise animation of the button background.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e--cyber-button-background-noise2\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ekeyframes\u003c/code\u003e animation\u003c/td\u003e\u003ctd\u003eThe second noise animation of the button background.\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\nHere's an example of how to modify these CSS variables:\n\n```css\n.Cyber-green-button {\n  --cyber-button-color: #000;\n  --cyber-button-background: linear-gradient(106deg, #ff296d 8%, #8e52f5 44%, #95f11c 87%);\n}\n```\n#### Additional Notes\nThe CyberButton component is part of a larger theme object that contains additional colors and text styles. These can be used to further customize the component and the app as a whole.\n\n\n## Card Component\nA styled card component with customized styles and responsive layout. It includes a title, a body, and a footer, and can be used in various scenarios such as displaying product information or showcasing team members.\n\n### Usage\n\n```javascript\nimport { Card } from \"cyberfuture\";\n\n\u003cCard \n  title=\"Card Title\"\n  body={\u003cdiv\u003eCard Body\u003c/div\u003e}\n  end={\u003cdiv\u003eCard Footer\u003c/div\u003e}\n  variant=\"Matrix\"\n  background=\"#333333\"\n/\u003e\n```\n### Props\n\u003cul\u003e\u003cli\u003e\u003ccode\u003etitle\u003c/code\u003e: Title of the carousel (required).\u003c/li\u003e\u003cli\u003e\u003ccode\u003ebody\u003c/code\u003e: Body of the carousel, not used in this variant.\u003c/li\u003e\u003cli\u003e\u003ccode\u003eend\u003c/code\u003e: Footer of the carousel, can be any valid JSX element.\u003c/li\u003e\u003cli\u003e\u003ccode\u003eCardBody\u003c/code\u003e: A required prop to be used with the \u003ccode\u003eCardCarousel\u003c/code\u003e variant, renders a carousel of cards with this element as a template.\u003c/li\u003e\u003cli\u003e\u003ccode\u003evariant\u003c/code\u003e: A prop used to customize the colors of the cards. It must be \u003ccode\u003e\"Matrix\"\u003c/code\u003e, \u003ccode\u003e\"Rose\"\u003c/code\u003e, \u003ccode\u003e\"Punk\"\u003c/code\u003e, or \u003ccode\u003e\"Gold\"\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ccode\u003ebackground\u003c/code\u003e: Background color of the carousel. If not provided, a default color of \u003ccode\u003ergba(17, 25, 40, 0.75)\u003c/code\u003e will be used.\u003c/li\u003e\u003cli\u003e\u003ccode\u003ewidth\u003c/code\u003e: Width of the carousel in CSS units. Default is \u003ccode\u003ecalc(350px - 2vmin)\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ccode\u003eheight\u003c/code\u003e: Height of the carousel in CSS units. Default is \u003ccode\u003e30em\u003c/code\u003e.\u003c/li\u003e\u003c/ul\u003e\n\n## CardCarousel Component\nThis is a variation of the Card component that includes a horizontal carousel with body items.\n\n### Usage\n\n```javascript\nimport { CardCarousel } from \"cyberfuture\";\n\n\u003cCardCarousel \n  title=\"Carousel Title\"\n  end={\u003cdiv\u003eCarousel Footer\u003c/div\u003e}\n  variant=\"Matrix\"\n  background=\"#333333\"\n/\u003e\n```\n\n### Props\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003etitle\u003c/code\u003e: The title of the card (string, required).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eend\u003c/code\u003e: The content of the card footer (React node).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evariant\u003c/code\u003e: The variant of the card style (string, required). It can be one of these:\u003ccode\u003e\"Matrix\"\u003c/code\u003e, \u003ccode\u003e\"Rose\"\u003c/code\u003e, \u003ccode\u003e\"Punk\"\u003c/code\u003e, \u003ccode\u003e\"Gold\"\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ebackground\u003c/code\u003e: The background color of the card. Default is rgba(17, 25, 40, 0.75).\u003c/li\u003e\n\u003c/ul\u003e\n\n### Usage\n```javascript\n\u003cCardCarousel\n  title=\"My Carousel Title\"\n  CardBody={\u003cp\u003eSome text here\u003c/p\u003e}\n  variant=\"Matrix\"\n  background=\"#00FF00\"\n/\u003e\n```\n## CyberInput Component\nThe CyberInput component is a reusable React input component with an optional label. It renders an HTML input element with a label when the label prop is provided.\n\n## Props\nThe component accepts the following props:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003etype\u003c/code\u003e: This is the type of the input element, such as \"text\", \"password\", etc (string, optional, default \"text\").\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003elabel\u003c/code\u003e: This is the label that will be displayed for the input element (string, optional).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalue\u003c/code\u003e: The value of the input element (string).\u003c/li\u003e\n\u003c/ul\u003e\n\n#### Example Usage\n```jsx\nimport React, { useState } from \"react\";\nimport { CyberInput } from \"cyberfuture\";\n\nconst MyForm = () =\u003e {\n  const [username, setUsername] = useState(\"\");\n\n  const handleUsernameChange = (event) =\u003e {\n    setUsername(event.target.value);\n  };\n\n  return (\n    \u003cform\u003e\n      \u003cCyberInput\n        type=\"text\"\n        label=\"Username\"\n        value={username}\n        onChange={handleUsernameChange}\n      /\u003e\n    \u003c/form\u003e\n  );\n};\n```\nIn this example, the CyberInput component is used inside a form. The type prop is set to \"text\", the label prop is set to \"Username\", and the value prop is set to the value of the username state variable. The onChange prop is also provided to handle changes in the input element.\n\n\n\u003cbr/\u003e\nWe are working on improvements. But, we are very busy. Please, be patient...\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://media.giphy.com/media/1aIDN81XDJuDK/giphy.gif\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhorberlan%2Fcyberfuture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhorberlan%2Fcyberfuture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhorberlan%2Fcyberfuture/lists"}