{"_id":"@bluecowdigital/ui","name":"@bluecowdigital/ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bluecowdigital/ui","version":"1.0.0","description":"Blue Cow Digital's reusable React component UI library","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./compiler":{"types":"./dist/compiler/index.d.ts","import":"./dist/compiler/index.mjs","require":"./dist/compiler/index.js"}},"scripts":{"build":"tsup","test":"npm run build && node --test tests/*.test.mjs","prepack":"npm run build","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@radix-ui/react-slot":"^1.0.2","@radix-ui/react-tabs":"^1.0.4","class-variance-authority":"^0.7.0","clsx":"^2.1.0","gsap":"^3.12.5","tailwind-merge":"^2.2.1","typescript":"^5.3.3"},"devDependencies":{"@types/node":"^20.11.24","@types/react":"^18.2.61","@types/react-dom":"^18.2.19","autoprefixer":"^10.4.18","postcss":"^8.4.35","tailwindcss":"^3.4.1","tsup":"^8.0.2"},"license":"MIT","author":{"name":"Blue Cow Digital"},"publishConfig":{"access":"public"},"keywords":["react","ui","components","tailwind","radix-ui"],"bin":{"bluecowdigital-ui":"dist/cli.js"},"_id":"@bluecowdigital/ui@1.0.0","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-JfjUPshlXsnGc0rjC1hS2py0nX0nPGprlvtv0A5cRZJx/ZgeU0GhCsWsXRH+je8uxLJE4hRLk7NCRrjC3iD9mg==","shasum":"2dd1ffb3f873484cdf5211abed586b25bd2249cf","tarball":"https://registry.npmjs.org/@bluecowdigital/ui/-/ui-1.0.0.tgz","fileCount":23,"unpackedSize":692102,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCGk/lLSW7EiAimYmFdQa0bEUodnYfdlkDlCapRhnsA5AIgL9aCJtW/S7spbZ5EfeFabKlFCjYSSuEQW7qGh+v601A="}]},"_npmUser":{"name":"daniel2484","email":"ushiedaniel2484@gmail.com"},"directories":{},"maintainers":[{"name":"daniel2484","email":"ushiedaniel2484@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.0.0_1781615314260_0.16925417062274728"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-16T13:08:34.078Z","1.0.0":"2026-06-16T13:08:34.393Z","modified":"2026-06-16T13:08:34.645Z"},"maintainers":[{"name":"daniel2484","email":"ushiedaniel2484@gmail.com"}],"description":"Blue Cow Digital's reusable React component UI library","keywords":["react","ui","components","tailwind","radix-ui"],"author":{"name":"Blue Cow Digital"},"license":"MIT","readme":"# Bluecow Digital UI\n\n[![npm version](https://img.shields.io/npm/v/@bluecowdigital/ui.svg)](https://www.npmjs.com/package/@bluecowdigital/ui)\n[![license](https://img.shields.io/npm/l/@bluecowdigital/ui.svg)](https://github.com/yourusername/bluecow-ui/blob/main/LICENSE)\n[![npm downloads](https://img.shields.io/npm/dm/@bluecowdigital/ui.svg)](https://www.npmjs.com/package/@bluecowdigital/ui)\n\nA modern, accessible, and customizable React component library built with Tailwind CSS and Radix UI primitives. Bluecow Digital UI provides a collection of reusable components that follow best practices for accessibility, performance, and developer experience.\n\r\n## Features\r\n\r\n- 🎨 Built with Tailwind CSS for easy customization\r\n- ♿️ Accessible components powered by Radix UI\r\n- 🚀 Modern React patterns with TypeScript support\r\n- 🎭 Customizable animations with GSAP\r\n- 📦 Tree-shakeable and lightweight\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @bluecowdigital/ui\n```\r\n\r\n### Peer Dependencies\r\n\r\nThis library requires the following peer dependencies:\r\n\r\n```json\r\n{\r\n  \"react\": \"^18.0.0\",\r\n  \"react-dom\": \"^18.0.0\",\r\n  \"tailwindcss\": \"^3.0.0\",\r\n  \"@radix-ui/react-tabs\": \"^1.0.0\",\r\n  \"@radix-ui/react-slot\": \"^1.0.0\",\r\n  \"gsap\": \"^3.0.0\"\r\n}\r\n```\r\n\r\n## Tailwind Setup\r\n\r\nTo use Bluecow Digital UI components, you need to configure your `tailwind.config.js` to include the library's styles:\n\r\n```js\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  content: [\r\n    \"./src/**/*.{js,ts,jsx,tsx}\",\r\n    \"./node_modules/@bluecowdigital/ui/**/*.{js,ts,jsx,tsx}\"\n  ],\r\n  theme: {\r\n    extend: {\r\n      colors: {\r\n        border: \"hsl(var(--border))\",\r\n        input: \"hsl(var(--input))\",\r\n        ring: \"hsl(var(--ring))\",\r\n        background: \"hsl(var(--background))\",\r\n        foreground: \"hsl(var(--foreground))\",\r\n        primary: {\r\n          DEFAULT: \"hsl(var(--primary))\",\r\n          foreground: \"hsl(var(--primary-foreground))\",\r\n        },\r\n        secondary: {\r\n          DEFAULT: \"hsl(var(--secondary))\",\r\n          foreground: \"hsl(var(--secondary-foreground))\",\r\n        },\r\n        destructive: {\r\n          DEFAULT: \"hsl(var(--destructive))\",\r\n          foreground: \"hsl(var(--destructive-foreground))\",\r\n        },\r\n        muted: {\r\n          DEFAULT: \"hsl(var(--muted))\",\r\n          foreground: \"hsl(var(--muted-foreground))\",\r\n        },\r\n        accent: {\r\n          DEFAULT: \"hsl(var(--accent))\",\r\n          foreground: \"hsl(var(--accent-foreground))\",\r\n        },\r\n        card: {\r\n          DEFAULT: \"hsl(var(--card))\",\r\n          foreground: \"hsl(var(--card-foreground))\",\r\n        },\r\n      },\r\n    },\r\n  },\r\n  plugins: [],\r\n}\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { \r\n  Button,\r\n  Input,\r\n  TabsRoot,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent,\r\n  Card,\r\n  CardHeader,\r\n  CardTitle,\r\n  CardDescription,\r\n  CardContent,\r\n  CardFooter,\r\n  Label\r\n} from \"@bluecowdigital/ui\"\n\r\nfunction App() {\r\n  return (\r\n    <div className=\"p-4\">\r\n      <TabsRoot defaultValue=\"tab1\">\r\n        <TabsList>\r\n          <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\r\n          <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\r\n        </TabsList>\r\n        <TabsContent value=\"tab1\">\r\n          <Card>\r\n            <CardHeader>\r\n              <CardTitle>Welcome</CardTitle>\r\n              <CardDescription>This is a sample card</CardDescription>\r\n            </CardHeader>\r\n            <CardContent>\r\n              <div className=\"space-y-4\">\r\n                <div>\r\n                  <Label htmlFor=\"name\">Name</Label>\r\n                  <Input id=\"name\" placeholder=\"Enter your name\" />\r\n                </div>\r\n                <Button>Submit</Button>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n        <TabsContent value=\"tab2\">\r\n          <p>Tab 2 content</p>\r\n        </TabsContent>\r\n      </TabsRoot>\r\n    </div>\r\n  )\r\n}\r\n```\r\n\r\n## Customization\r\n\r\nAll components are built with Tailwind and `class-variance-authority`, making it easy to:\r\n\r\n- Extend variants (e.g., add a `danger` button)\r\n- Override styles using `className`\r\n- Create your own themes by editing `tailwind.config.js`\r\n\r\n### Example: Custom Button Variant\r\n\r\n```tsx\r\nimport { Button } from \"@bluecowdigital/ui\"\nimport { cva } from \"class-variance-authority\"\r\n\r\n// Extend the button variants\r\nconst buttonVariants = cva(\r\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n        outline: \"border border-input hover:bg-accent hover:text-accent-foreground\",\r\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n        link: \"underline-offset-4 hover:underline text-primary\",\r\n        // Add your custom variant\r\n        danger: \"bg-red-500 text-white hover:bg-red-600\",\r\n      },\r\n      size: {\r\n        default: \"h-10 py-2 px-4\",\r\n        sm: \"h-9 px-3 rounded-md\",\r\n        lg: \"h-11 px-8 rounded-md\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\n// Use the custom variant\r\nfunction MyComponent() {\r\n  return (\r\n    <Button variant=\"danger\" size=\"lg\">\r\n      Delete Account\r\n    </Button>\r\n  )\r\n}\r\n```\r\n\r\n### Example: Theme Customization\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  theme: {\r\n    extend: {\r\n      colors: {\r\n        primary: {\r\n          DEFAULT: \"#0070f3\",\r\n          foreground: \"#ffffff\",\r\n        },\r\n        secondary: {\r\n          DEFAULT: \"#f4f4f5\",\r\n          foreground: \"#18181b\",\r\n        },\r\n        // Add your custom colors\r\n      },\r\n      borderRadius: {\r\n        DEFAULT: \"0.5rem\",\r\n      },\r\n    },\r\n  },\r\n}\r\n```\r\n\r\n## Available Components\r\n\r\n- `Button` - A customizable button component\r\n- `Input` - A styled input component\r\n- `Label` - A form label component\r\n- `Card` - A container component with header, content, and footer sections\r\n- `Tabs` - A tabbed interface component with animated indicators\r\n\r\n## CLI Tool\n\nWe also provide a CLI tool to help you add components to your project:\n\r\n```bash\r\n# Add a component\nnpx @bluecowdigital/ui add button\n\n# Add a component to a specific directory\nnpx @bluecowdigital/ui add tabs --path src/components/ui\n\n# Force overwrite existing files\nnpx @bluecowdigital/ui add input --overwrite\n\n# Install missing component dependencies too\nnpx @bluecowdigital/ui add button --install\n```\n\nThe package exposes `ui`, `bluecowdigital-ui`, `bluecowdigital`, `component-library`, `bluecow-ui`, and `bluecow` bin aliases. npm scoped package names must include both a scope and package name, so the valid scoped `npx` form for this package is `npx @bluecowdigital/ui add button`. If an older published package is still being used by npm, run `npx @bluecowdigital/ui@latest add button` after publishing the fixed version.\n\n## WPMotion Compiler\n\nThe package also exposes a build-time compiler at `@bluecowdigital/ui/compiler`. It compiles a closed WPMotion component bundle:\n\n```txt\nhero-aurora/\n  component.jsx\n  meta.js\n  preview.js\n```\n\n```ts\nimport { compileWPMotionComponent, writeWPMotionOutput } from \"@bluecowdigital/ui/compiler\"\n\nconst result = compileWPMotionComponent(\"./hero-aurora\", { strict: true })\n\nif (result.ok) {\n  writeWPMotionOutput(result.output, { outDir: \"./registry\" })\n} else {\n  console.table(result.diagnostics)\n}\n```\n\nThe compiler validates the authoring contract, builds a typed IR, emits React registry output, emits a scoped universal HTML/CSS/JS block, and rejects unsafe JSX, URLs, attributes, imports, and unsupported expressions.\n\n### Compiler Guarantees\n\n- Closed bundles only: `component.jsx`, `meta.js`, and `preview.js`\n- Static metadata and preview defaults; no source execution\n- Allow-listed JSX tags, attributes, imports, hooks, URLs, and expression forms\n- Token-aware styling with scoped universal CSS\n- IR-based React output, not source passthrough\n- Interaction validation for `reveal`, `toggle`, `tabs`, and `carousel-lite`\n- Deterministic content hashes and reproducible output\n- Structured diagnostics plus a human-readable formatter\n\nThe output writer emits:\n\n```txt\ncomponent.jsx\nregistry.json\nuniversal.html\nuniversal.css\nuniversal.js\nmodel.json\nreport.json\nmanifest.json\n```\n\n`report.json` includes deterministic source/output byte counts, IR analysis counts, diagnostic counts, and the active compiler security policies.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\r\n## License\r\n\r\nMIT © [Your Name] \n","readmeFilename":"README.md","_rev":"1-1c09f1f41113cc4f70f383f499446f5d"}