create-template-html-css 2.0.4 → 2.2.0

package/templates-react/badge/Badge.jsx

@@ -0,0 +1,44 @@
+
+import './Badge.css';
+
+function Badge({ 
+  children,
+  variant = 'default',
+  size = 'medium',
+  dot = false,
+  pill = false,
+  position = 'top-right',
+  count = null,
+  maxCount = 99,
+  showZero = false,
+  className = ''
+}) {
+  const getBadgeContent = () => {
+    if (dot) return null;
+    if (count !== null) {
+      if (count === 0 && !showZero) return null;
+      if (count > maxCount) return `${maxCount}+`;
+      return count;
+    }
+    return children;
+  };
+
+  const badgeContent = getBadgeContent();
+  const isEmpty = badgeContent === null;
+
+  if (isEmpty && !dot) return null;
+
+  const badgeClasses = [
+    'badge',
+    `badge-${variant}`,
+    `badge-${size}`,
+    pill ? 'badge-pill' : '',
+    dot ? 'badge-dot' : '',
+    position ? `badge-${position}` : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return <span className={badgeClasses}>{badgeContent}</span>;
+}
+
+export default Badge;

package/templates-react/button/Button.css

@@ -0,0 +1,88 @@
+/* Button Styles */
+.btn {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+/* Size Variations */
+.btn-small {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.btn-medium {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+.btn-large {
+  padding: 16px 32px;
+  font-size: 18px;
+}
+
+/* Variant Styles - Primary */
+.btn-primary {
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* Variant Styles - Secondary */
+.btn-secondary {
+  background: transparent;
+  color: {{primaryColor}};
+  border: 2px solid {{primaryColor}};
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: {{primaryColor}};
+  color: white;
+}
+
+/* Variant Styles - Danger */
+.btn-danger {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+}
+
+/* Variant Styles - Success */
+.btn-success {
+  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(81, 207, 102, 0.3);
+}
+
+.btn-success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(81, 207, 102, 0.4);
+}
+
+/* Disabled State */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/templates-react/button/Button.example.jsx

@@ -0,0 +1,40 @@
+
+import Button from './Button';
+
+/**
+ * Example usage of Button component
+ */
+const ButtonExample = () => {
+  const handleClick = () => {
+    console.log('Button clicked!');
+  };
+
+  return (
+    <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <h2>Button Component Examples</h2>
+      
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>Variants</h3>
+        <Button variant="primary" onClick={handleClick}>Primary Button</Button>
+        <Button variant="secondary" onClick={handleClick}>Secondary Button</Button>
+        <Button variant="success" onClick={handleClick}>Success Button</Button>
+        <Button variant="danger" onClick={handleClick}>Danger Button</Button>
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>Sizes</h3>
+        <Button size="small" onClick={handleClick}>Small</Button>
+        <Button size="medium" onClick={handleClick}>Medium</Button>
+        <Button size="large" onClick={handleClick}>Large</Button>
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>States</h3>
+        <Button onClick={handleClick}>Enabled</Button>
+        <Button disabled>Disabled</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ButtonExample;

package/templates-react/button/Button.jsx

@@ -0,0 +1,29 @@
+
+import './Button.css';
+
+/**
+ * Button Component
+ * A customizable button component with various styles and states
+ */
+const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'medium',
+  disabled = false,
+  onClick,
+  type = 'button',
+  className = ''
+}) => {
+  return (
+    <button
+      type={type}
+      className={`btn btn-${variant} btn-${size} ${className}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/templates-react/card/Card.css

@@ -0,0 +1,86 @@
+/* Card Styles */
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  max-width: 400px;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.card:hover .card-image img {
+  transform: scale(1.05);
+}
+
+.card-content {
+  padding: 24px;
+}
+
+.card-title {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 12px 0;
+  color: #2d3748;
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.card-description {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #4a5568;
+  margin: 0;
+}
+
+.card-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f7fafc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .card {
+    background: #2d3748;
+  }
+
+  .card-title {
+    color: #e2e8f0;
+  }
+
+  .card-description {
+    color: #cbd5e0;
+  }
+
+  .card-footer {
+    background: #1a202c;
+    border-top-color: #4a5568;
+  }
+}

package/templates-react/card/Card.example.jsx

@@ -0,0 +1,49 @@
+
+import Card from './Card';
+
+/**
+ * Example usage of Card component
+ */
+const CardExample = () => {
+  const handleCardClick = () => {
+    console.log('Card clicked!');
+  };
+
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
+      <Card
+        title="Beautiful Mountain"
+        description="Explore the breathtaking views of mountain landscapes and discover the beauty of nature."
+        image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop"
+        imageAlt="Mountain landscape"
+        footer={
+          <button style={{ padding: '8px 16px', background: '#3182ce', color: 'white', border: 'none', borderRadius: '6px' }}>
+            Learn More
+          </button>
+        }
+        onClick={handleCardClick}
+      />
+
+      <Card
+        title="Ocean Sunset"
+        description="Watch the sun set over the endless horizon and feel the peaceful ocean breeze."
+        image="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400&h=200&fit=crop"
+        imageAlt="Ocean sunset"
+        footer={
+          <button style={{ padding: '8px 16px', background: '#3182ce', color: 'white', border: 'none', borderRadius: '6px' }}>
+            Learn More
+          </button>
+        }
+        onClick={handleCardClick}
+      />
+
+      <Card
+        title="Card Without Image"
+        description="This card demonstrates how the component looks without an image. It still maintains the same elegant design."
+        footer={<span style={{ color: '#718096' }}>No image variant</span>}
+      />
+    </div>
+  );
+};
+
+export default CardExample;

package/templates-react/card/Card.jsx

@@ -0,0 +1,35 @@
+
+import './Card.css';
+
+/**
+ * Card Component
+ * A versatile card component for displaying content
+ */
+const Card = ({ 
+  title, 
+  description, 
+  image, 
+  imageAlt = '',
+  footer,
+  onClick,
+  className = '',
+  children
+}) => {
+  return (
+    <div className={`card ${className}`} onClick={onClick}>
+      {image && (
+        <div className="card-image">
+          <img src={image} alt={imageAlt} />
+        </div>
+      )}
+      <div className="card-content">
+        {title && <h3 className="card-title">{title}</h3>}
+        {description && <p className="card-description">{description}</p>}
+        {children}
+      </div>
+      {footer && <div className="card-footer">{footer}</div>}
+    </div>
+  );
+};
+
+export default Card;

package/templates-react/checkbox/Checkbox.css

@@ -0,0 +1,217 @@
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-input-wrapper.small {
+  width: 1rem;
+  height: 1rem;
+}
+
+.checkbox-input-wrapper.medium {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.checkbox-input-wrapper.large {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.checkbox-input:disabled {
+  cursor: not-allowed;
+}
+
+.checkbox-custom {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 2px solid #d1d5db;
+  border-radius: 0.25rem;
+  background-color: white;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.checkbox-custom svg {
+  width: 70%;
+  height: 70%;
+  stroke-width: 3;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.checkbox-input:checked + .checkbox-custom svg,
+.checkbox-custom.indeterminate svg {
+  opacity: 1;
+}
+
+.checkbox-input:hover:not(:disabled) + .checkbox-custom {
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.checkbox-input:focus + .checkbox-custom {
+  outline: 2px solid ##PRIMARY_COLOR##;
+  outline-offset: 2px;
+}
+
+.checkbox-input:checked + .checkbox-custom,
+.checkbox-custom.indeterminate {
+  background-color: ##PRIMARY_COLOR##;
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.checkbox-input:checked + .checkbox-custom svg,
+.checkbox-custom.indeterminate svg {
+  stroke: white;
+}
+
+.checkbox-input.primary:checked + .checkbox-custom,
+.checkbox-input.primary + .checkbox-custom.indeterminate {
+  background-color: ##PRIMARY_COLOR##;
+  border-color: ##PRIMARY_COLOR##;
+}
+
+.checkbox-input.secondary:checked + .checkbox-custom,
+.checkbox-input.secondary + .checkbox-custom.indeterminate {
+  background-color: ##SECONDARY_COLOR##;
+  border-color: ##SECONDARY_COLOR##;
+}
+
+.checkbox-input.success:checked + .checkbox-custom,
+.checkbox-input.success + .checkbox-custom.indeterminate {
+  background-color: #10b981;
+  border-color: #10b981;
+}
+
+.checkbox-input.error:checked + .checkbox-custom,
+.checkbox-input.error + .checkbox-custom.indeterminate {
+  background-color: #ef4444;
+  border-color: #ef4444;
+}
+
+.checkbox-input:disabled + .checkbox-custom {
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+  opacity: 0.6;
+}
+
+.checkbox-input:disabled:checked + .checkbox-custom {
+  background-color: #9ca3af;
+  border-color: #9ca3af;
+}
+
+.checkbox-label {
+  user-select: none;
+  cursor: pointer;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.checkbox-input:disabled ~ .checkbox-label {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.checkbox-helper-text {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-left: 1.75rem;
+}
+
+.checkbox-error .checkbox-custom {
+  border-color: #ef4444;
+}
+
+.checkbox-error-message {
+  font-size: 0.75rem;
+  color: #ef4444;
+  margin-left: 1.75rem;
+}
+
+/* Animation for checkbox check */
+@keyframes checkboxCheck {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.checkbox-input:checked + .checkbox-custom svg {
+  animation: checkboxCheck 0.2s ease;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .checkbox-custom {
+    background-color: #1f2937;
+    border-color: #4b5563;
+  }
+
+  .checkbox-input:hover:not(:disabled) + .checkbox-custom {
+    border-color: ##SECONDARY_COLOR##;
+  }
+
+  .checkbox-input:focus + .checkbox-custom {
+    outline-color: ##SECONDARY_COLOR##;
+  }
+
+  .checkbox-input:checked + .checkbox-custom,
+  .checkbox-custom.indeterminate {
+    background-color: ##SECONDARY_COLOR##;
+    border-color: ##SECONDARY_COLOR##;
+  }
+
+  .checkbox-input:disabled + .checkbox-custom {
+    background-color: #111827;
+    border-color: #374151;
+  }
+
+  .checkbox-label {
+    color: #e5e7eb;
+  }
+
+  .checkbox-input:disabled ~ .checkbox-label {
+    color: #6b7280;
+  }
+
+  .checkbox-helper-text {
+    color: #9ca3af;
+  }
+}