{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-with-css",
  "title": "Example with CSS",
  "description": "A login form with a CSS file.",
  "files": [
    {
      "path": "registry/new-york/blocks/example-with-css/example-card.tsx",
      "content": "import \"./example-card.css\";\n\nexport function ExampleCard() {\n\treturn (\n\t\t<div className=\"login-container\">\n\t\t\t<div className=\"login-card\">\n\t\t\t\t<h1 className=\"login-title\">Login</h1>\n\t\t\t\t<p className=\"login-subtitle\">\n\t\t\t\t\tPlease enter your credentials to continue\n\t\t\t\t</p>\n\t\t\t\t<form className=\"login-form\">\n\t\t\t\t\t<div className=\"form-group\">\n\t\t\t\t\t\t<label htmlFor=\"field-email\">Email</label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid=\"field-email\"\n\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\tplaceholder=\"Enter your email\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-group\">\n\t\t\t\t\t\t<label htmlFor=\"field-password\">Password</label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid=\"field-password\"\n\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\tplaceholder=\"Enter your password\"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-actions\">\n\t\t\t\t\t\t<button type=\"submit\" className=\"login-button\">\n\t\t\t\t\t\t\tSign In\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"form-footer\">\n\t\t\t\t\t\t<a href=\"#\" className=\"forgot-password\">\n\t\t\t\t\t\t\tForgot password?\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/blocks/example-with-css/example-card.css",
      "content": ".login-container {\r\n  --primary-color: #111111;\r\n  --primary-hover: #484747;\r\n  --error-color: #ef4444;\r\n  --text-color: #1f2937;\r\n  --text-light: #6b7280;\r\n  --border-color: #e5e7eb;\r\n  --background-light: #f9fafb;\r\n  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  background-color: var(--background-light);\r\n  width: 100%;\r\n}\r\n\r\n.login-card {\r\n  width: 100%;\r\n  max-width: 400px;\r\n  padding: 2rem;\r\n  background-color: white;\r\n  border-radius: 8px;\r\n  box-shadow: var(--card-shadow);\r\n}\r\n\r\n.login-title {\r\n  margin: 0 0 0.5rem 0;\r\n  font-size: 1.5rem;\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n}\r\n\r\n.login-subtitle {\r\n  margin: 0 0 1.5rem 0;\r\n  font-size: 0.875rem;\r\n  color: var(--text-light);\r\n}\r\n\r\n.login-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1.25rem;\r\n}\r\n\r\n.login-error {\r\n  padding: 0.75rem;\r\n  margin-bottom: 0.5rem;\r\n  background-color: rgba(239, 68, 68, 0.1);\r\n  border-left: 3px solid var(--error-color);\r\n  color: var(--error-color);\r\n  font-size: 0.875rem;\r\n  border-radius: 4px;\r\n}\r\n\r\n.form-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.form-group label {\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  color: var(--text-color);\r\n}\r\n\r\n.form-group input {\r\n  padding: 0.75rem;\r\n  border: 1px solid var(--border-color);\r\n  border-radius: 4px;\r\n  font-size: 1rem;\r\n  transition: border-color 0.15s ease;\r\n}\r\n\r\n.form-group input:focus {\r\n  outline: none;\r\n  border-color: var(--primary-color);\r\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\r\n}\r\n\r\n.form-group input::placeholder {\r\n  color: var(--text-light);\r\n}\r\n\r\n.form-actions {\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.login-button {\r\n  width: 100%;\r\n  padding: 0.75rem;\r\n  background-color: var(--primary-color);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 4px;\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: background-color 0.15s ease;\r\n}\r\n\r\n.login-button:hover {\r\n  background-color: var(--primary-hover);\r\n}\r\n\r\n.login-button:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);\r\n}\r\n\r\n.form-footer {\r\n  display: flex;\r\n  justify-content: center;\r\n  margin-top: 1rem;\r\n}\r\n\r\n.forgot-password {\r\n  font-size: 0.875rem;\r\n  color: var(--primary-color);\r\n  text-decoration: none;\r\n}\r\n\r\n.forgot-password:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .login-card {\r\n    padding: 1.5rem;\r\n  }\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}