@forgedevstack/bear 1.1.3 → 1.1.8

package/dist/postcss/bear-plugin.cjs

@@ -0,0 +1,86 @@
+/**
+ * PostCSS plugin for Bear CSS directives.
+ *
+ * Usage in CSS/SCSS:
+ *   @BearIncludeAll;          — injects all Bear styles
+ *   @BearInclude 'base';     — injects only the base module
+ *   @BearInclude 'buttons';  — injects only the button styles
+ *   @BearInclude 'alerts';   — injects only the alert styles
+ *   @BearInclude 'effects';  — injects only effects/animations
+ *   @BearInclude 'marquee';  — injects only marquee styles
+ *
+ * Configure in postcss.config:
+ *   module.exports = {
+ *     plugins: [
+ *       require('@forgedevstack/bear/postcss'),
+ *     ],
+ *   };
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const MODULES = ['base', 'buttons', 'alerts', 'effects', 'marquee'];
+
+function resolveStyleFile(name) {
+  const distPath = path.resolve(__dirname, '..', 'styles', `_${name}.css`);
+  if (fs.existsSync(distPath)) return distPath;
+
+  const srcPath = path.resolve(__dirname, '..', '..', 'src', 'styles', `_${name}.css`);
+  if (fs.existsSync(srcPath)) return srcPath;
+
+  return null;
+}
+
+function resolveAllStyles() {
+  const distPath = path.resolve(__dirname, '..', 'styles.css');
+  if (fs.existsSync(distPath)) return distPath;
+
+  const srcPath = path.resolve(__dirname, '..', '..', 'src', 'styles', 'main.css');
+  if (fs.existsSync(srcPath)) return srcPath;
+
+  return null;
+}
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = () => {
+  return {
+    postcssPlugin: 'bear-include',
+
+    AtRule(atRule) {
+      if (atRule.name === 'BearIncludeAll') {
+        const file = resolveAllStyles();
+        if (file) {
+          const css = fs.readFileSync(file, 'utf8');
+          atRule.replaceWith(css);
+        } else {
+          throw atRule.error('Could not resolve Bear styles.css. Make sure @forgedevstack/bear is installed.');
+        }
+        return;
+      }
+
+      if (atRule.name === 'BearInclude') {
+        const raw = (atRule.params || '').replace(/['";\s]/g, '');
+        if (!raw) {
+          throw atRule.error('@BearInclude requires a module name, e.g. @BearInclude \'base\';');
+        }
+        if (!MODULES.includes(raw)) {
+          throw atRule.error(
+            `Unknown Bear module '${raw}'. Available: ${MODULES.join(', ')}`
+          );
+        }
+        const file = resolveStyleFile(raw);
+        if (file) {
+          const css = fs.readFileSync(file, 'utf8');
+          atRule.replaceWith(css);
+        } else {
+          throw atRule.error(`Could not resolve Bear module '${raw}'.`);
+        }
+      }
+    },
+  };
+};
+
+module.exports.postcss = true;

package/dist/styles/_alerts.css

@@ -0,0 +1,14 @@
+@layer components {
+  .bear-alert-filled-success {
+    background-color: var(--bear-success-500);
+  }
+  .bear-alert-filled-info {
+    background-color: var(--bear-info-500);
+  }
+  .bear-alert-filled-warning {
+    background-color: var(--bear-warning-500);
+  }
+  .bear-alert-filled-error {
+    background-color: var(--bear-danger-500);
+  }
+}

package/dist/styles/_base.css

@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Bear CSS Variables */
+:root {
+  /* Primary colors (Bear Pink) */
+  --bear-primary-50: #fdf2f8;
+  --bear-primary-100: #fce7f3;
+  --bear-primary-200: #fbcfe8;
+  --bear-primary-300: #f9a8d4;
+  --bear-primary-400: #f472b6;
+  --bear-primary-500: #ec4899;
+  --bear-primary-600: #db2777;
+  --bear-primary-700: #be185d;
+  --bear-primary-800: #9d174d;
+  --bear-primary-900: #831843;
+  --bear-primary-950: #500724;
+
+  /* Background colors - Light mode */
+  --bear-bg-primary: #ffffff;
+  --bear-bg-secondary: #f9fafb;
+  --bear-bg-tertiary: #f3f4f6;
+
+  /* Text colors - Light mode */
+  --bear-text-primary: #111827;
+  --bear-text-secondary: #4b5563;
+  --bear-text-muted: #9ca3af;
+
+  /* Border colors - Light mode */
+  --bear-border-default: #e5e7eb;
+}
+
+/* Dark mode variables */
+.bear-dark {
+  --bear-bg-primary: #09090b;
+  --bear-bg-secondary: #18181b;
+  --bear-bg-tertiary: #27272a;
+
+  --bear-text-primary: #fafafa;
+  --bear-text-secondary: #a1a1aa;
+  --bear-text-muted: #71717a;
+
+  --bear-border-default: #27272a;
+}
+
+/* Base component layer */
+@layer components {
+  .bear-focus-ring:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5);
+    box-shadow: 0 0 0 2px var(--bear-primary-500, rgba(236, 72, 153, 0.5)), 0 0 0 4px #fff;
+  }
+
+  .bear-transition {
+    transition-property: all;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+  }
+}

package/dist/styles/_buttons.css

@@ -0,0 +1,108 @@
+@layer components {
+  .bear-btn-primary {
+    background-color: var(--bear-btn-primary-bg, var(--bear-primary-500));
+    --tw-ring-color: var(--bear-btn-primary-ring, var(--bear-primary-500));
+  }
+  .bear-btn-primary:hover:not(:disabled) {
+    background-color: var(--bear-btn-primary-bg-hover, var(--bear-primary-600));
+  }
+  .bear-btn-primary:active:not(:disabled) {
+    background-color: var(--bear-btn-primary-bg-active, var(--bear-primary-700));
+  }
+
+  .bear-btn-secondary {
+    background-color: var(--bear-btn-secondary-bg, var(--bear-secondary-500));
+    --tw-ring-color: var(--bear-btn-secondary-ring, var(--bear-secondary-500));
+  }
+  .bear-btn-secondary:hover:not(:disabled) {
+    background-color: var(--bear-btn-secondary-bg-hover, var(--bear-secondary-600));
+  }
+  .bear-btn-secondary:active:not(:disabled) {
+    background-color: var(--bear-btn-secondary-bg-active, var(--bear-secondary-700));
+  }
+
+  .bear-btn-success {
+    background-color: var(--bear-btn-success-bg, var(--bear-success-500));
+    --tw-ring-color: var(--bear-btn-success-ring, var(--bear-success-500));
+  }
+  .bear-btn-success:hover:not(:disabled) {
+    background-color: var(--bear-btn-success-bg-hover, var(--bear-success-600));
+  }
+  .bear-btn-success:active:not(:disabled) {
+    background-color: var(--bear-btn-success-bg-active, var(--bear-success-700));
+  }
+
+  .bear-btn-warning {
+    background-color: var(--bear-btn-warning-bg, var(--bear-warning-500));
+    --tw-ring-color: var(--bear-btn-warning-ring, var(--bear-warning-500));
+  }
+  .bear-btn-warning:hover:not(:disabled) {
+    background-color: var(--bear-btn-warning-bg-hover, var(--bear-warning-600));
+  }
+  .bear-btn-warning:active:not(:disabled) {
+    background-color: var(--bear-btn-warning-bg-active, var(--bear-warning-700));
+  }
+
+  .bear-btn-danger, .bear-btn-error {
+    background-color: var(--bear-btn-danger-bg, var(--bear-danger-500));
+    --tw-ring-color: var(--bear-btn-danger-ring, var(--bear-danger-500));
+  }
+  .bear-btn-danger:hover:not(:disabled), .bear-btn-error:hover:not(:disabled) {
+    background-color: var(--bear-btn-danger-bg-hover, var(--bear-danger-600));
+  }
+  .bear-btn-danger:active:not(:disabled), .bear-btn-error:active:not(:disabled) {
+    background-color: var(--bear-btn-danger-bg-active, var(--bear-danger-700));
+  }
+
+  .bear-btn-info {
+    background-color: var(--bear-btn-info-bg, var(--bear-info-500));
+    --tw-ring-color: var(--bear-btn-info-ring, var(--bear-info-500));
+  }
+  .bear-btn-info:hover:not(:disabled) {
+    background-color: var(--bear-btn-info-bg-hover, var(--bear-info-600));
+  }
+  .bear-btn-info:active:not(:disabled) {
+    background-color: var(--bear-btn-info-bg-active, var(--bear-info-700));
+  }
+
+  .bear-btn-ghost {
+    background-color: transparent;
+    color: var(--bear-text-primary);
+    --tw-ring-color: var(--bear-neutral-500);
+  }
+  .bear-btn-ghost:hover:not(:disabled) {
+    background-color: var(--bear-neutral-100, rgba(0, 0, 0, 0.05));
+  }
+  .bear-btn-ghost:active:not(:disabled) {
+    background-color: var(--bear-neutral-200, rgba(0, 0, 0, 0.1));
+  }
+  .dark .bear-btn-ghost:hover:not(:disabled) {
+    background-color: var(--bear-neutral-800, rgba(255, 255, 255, 0.05));
+  }
+  .dark .bear-btn-ghost:active:not(:disabled) {
+    background-color: var(--bear-neutral-700, rgba(255, 255, 255, 0.1));
+  }
+
+  .bear-btn-outline {
+    background-color: transparent;
+    border-color: var(--bear-btn-outline-border, var(--bear-primary-500));
+    color: var(--bear-btn-outline-text, var(--bear-primary-500));
+    --tw-ring-color: var(--bear-btn-outline-ring, var(--bear-primary-500));
+  }
+  .bear-btn-outline:hover:not(:disabled) {
+    background-color: var(--bear-btn-outline-bg-hover, var(--bear-primary-50));
+  }
+  .bear-btn-outline:active:not(:disabled) {
+    background-color: var(--bear-btn-outline-bg-active, var(--bear-primary-100));
+  }
+  .dark .bear-btn-outline {
+    border-color: var(--bear-btn-outline-border, var(--bear-primary-400));
+    color: var(--bear-btn-outline-text, var(--bear-primary-400));
+  }
+  .dark .bear-btn-outline:hover:not(:disabled) {
+    background-color: var(--bear-btn-outline-bg-hover, var(--bear-primary-950));
+  }
+  .dark .bear-btn-outline:active:not(:disabled) {
+    background-color: var(--bear-btn-outline-bg-active, var(--bear-primary-900));
+  }
+}

package/dist/styles/_effects.css

@@ -0,0 +1,90 @@
+@keyframes bounce-custom {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(var(--bounce-height, -20px)); }
+}
+
+@keyframes float-vertical {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(calc(var(--float-distance, 10px) * -1)); }
+}
+
+@keyframes float-horizontal {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(var(--float-distance, 10px)); }
+}
+
+@keyframes float-diagonal {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(var(--float-distance, 10px), calc(var(--float-distance, 10px) * -1)); }
+}
+
+@keyframes pulse-scale {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(var(--pulse-scale, 1.05)); }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(var(--shake-intensity, 10px) * -1)); }
+  20%, 40%, 60%, 80% { transform: translateX(var(--shake-intensity, 10px)); }
+}
+
+@keyframes grow-up {
+  from { height: 0%; opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes grow-right {
+  from { width: 0%; opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes draw-line {
+  from { stroke-dashoffset: 1000; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { transform: scale(0); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* Gradient Text Keyframes */
+@keyframes bear-gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Typewriter Cursor Blink */
+@keyframes bear-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Animation utility classes */
+.animate-grow-up {
+  animation: grow-up 0.5s ease-out forwards;
+}
+
+.animate-grow-right {
+  animation: grow-right 0.5s ease-out forwards;
+}
+
+.animate-draw-line {
+  stroke-dasharray: 1000;
+  animation: draw-line 1.5s ease-out forwards;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out forwards;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.3s ease-out forwards;
+}

package/dist/styles/_marquee.css

@@ -0,0 +1,25 @@
+.Bear-Marquee--gradient-h {
+  mask-image: linear-gradient(to right, transparent, black var(--bear-marquee-gradient-w, 40px), black calc(100% - var(--bear-marquee-gradient-w, 40px)), transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black var(--bear-marquee-gradient-w, 40px), black calc(100% - var(--bear-marquee-gradient-w, 40px)), transparent);
+}
+.Bear-Marquee--gradient-v {
+  mask-image: linear-gradient(to bottom, transparent, black var(--bear-marquee-gradient-w, 40px), black calc(100% - var(--bear-marquee-gradient-w, 40px)), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--bear-marquee-gradient-w, 40px), black calc(100% - var(--bear-marquee-gradient-w, 40px)), transparent);
+}
+
+@keyframes bear-marquee-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+@keyframes bear-marquee-right {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes bear-marquee-up {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+@keyframes bear-marquee-down {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}

package/dist/styles/main.css

@@ -0,0 +1,5 @@
+@import './_base.css';
+@import './_buttons.css';
+@import './_alerts.css';
+@import './_effects.css';
+@import './_marquee.css';