{"_id":"@dennerrondinely/tailor","_rev":"2-cdfbdd5d6aefeed03e469c22fa272a5e","name":"@dennerrondinely/tailor","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@dennerrondinely/tailor","version":"0.1.0","keywords":["react","tailwind","styled-components","typescript"],"author":{"name":"Denner Rondinely"},"license":"MIT","_id":"@dennerrondinely/tailor@0.1.0","maintainers":[{"name":"denner503","email":"denner.rondinely@gmail.com"}],"dist":{"shasum":"53242db0b19fd73d6683cc0ca61fcc4960236899","tarball":"https://registry.npmjs.org/@dennerrondinely/tailor/-/tailor-0.1.0.tgz","fileCount":88,"integrity":"sha512-HWZraoH5ZTxgIp/YP2NpVTuA6m6+OMEFr4SHioUhUKfcFaYYs8uZ2QbGyGUO83Oo4zavwBAckeL98z9Ib/gHkg==","signatures":[{"sig":"MEUCIQCiMcROnFWWNbYJklNHDWQlifi483Zxe4VaNn8Z6wAxEQIgHdQ+Z+dJ3QWWA5mRMVc677ppNvmqBQj//Knq9I8TwZ0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1099527},"main":"dist/index.js","_from":"file:dennerrondinely-tailor-0.1.0.tgz","types":"dist/index.d.ts","scripts":{"test":"jest","build":"tsc","test:watch":"jest --watch"},"_npmUser":{"name":"denner503","email":"denner.rondinely@gmail.com"},"_resolved":"/tmp/8b8f5a02e745b96e1ffcb13c5446397d/dennerrondinely-tailor-0.1.0.tgz","_integrity":"sha512-HWZraoH5ZTxgIp/YP2NpVTuA6m6+OMEFr4SHioUhUKfcFaYYs8uZ2QbGyGUO83Oo4zavwBAckeL98z9Ib/gHkg==","_npmVersion":"10.8.2","description":"A library for creating styled React components with Tailwind CSS in an organized and typed way","directories":{},"_nodeVersion":"18.20.8","dependencies":{"tailwind-merge":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.2","typescript":"^5.3.3","@types/jest":"^29.5.12","@types/react":"^18.2.61","@types/react-dom":"^18.2.19","identity-obj-proxy":"^3.0.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@tailwindcss/typography":"^0.5.16","@testing-library/jest-dom":"^6.4.2"},"peerDependencies":{"react":"^18.0.0","tailwindcss":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailor_0.1.0_1747088021645_0.7453167617875658","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@dennerrondinely/tailor","version":"0.2.0","description":"A library for creating styled React components with Tailwind CSS in an organized and typed way","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","sideEffects":false,"exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"keywords":["react","tailwind","styled-components","typescript"],"author":{"name":"Denner Rondinely"},"license":"MIT","peerDependencies":{"react":"^18.0.0","tailwindcss":"^3.0.0"},"dependencies":{"tailwind-merge":"^2.2.1"},"devDependencies":{"@changesets/changelog-github":"^0.6.0","@changesets/cli":"^2.30.0","@tailwindcss/typography":"^0.5.16","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.1","@types/jest":"^29.5.12","@types/react":"^18.2.61","@types/react-dom":"^18.2.19","identity-obj-proxy":"^3.0.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.1.2","tsup":"^8.5.1","typescript":"^5.3.3"},"scripts":{"build":"tsup","build:types":"tsc --emitDeclarationOnly","dev":"tsup --watch","test":"jest","test:watch":"jest --watch","changeset":"changeset","version":"changeset version","release":"pnpm build && changeset publish"},"_id":"@dennerrondinely/tailor@0.2.0","_integrity":"sha512-T6qCF+DvBnTAC/pjMBzj0E6JqrsL5wa0EC0A7R6ovAKpxClenh2OiXG3j/mL97LFgbHh6Vv3d7sCqfPvX4MylQ==","_resolved":"/tmp/989181cfc1b1ff16588b33134a118c9c/dennerrondinely-tailor-0.2.0.tgz","_from":"file:dennerrondinely-tailor-0.2.0.tgz","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-T6qCF+DvBnTAC/pjMBzj0E6JqrsL5wa0EC0A7R6ovAKpxClenh2OiXG3j/mL97LFgbHh6Vv3d7sCqfPvX4MylQ==","shasum":"d9a9a7b15391ca1bffb5f8773f3da715c65b8bb8","tarball":"https://registry.npmjs.org/@dennerrondinely/tailor/-/tailor-0.2.0.tgz","fileCount":9,"unpackedSize":161270,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIENWCvPhpDjrRAJScqkrpPmjEDN+g2zlV1ncb+pNqaxXAiASNOZx1pGu+aOCXDkAV3LQaUqBxK0+BjYRhhTMgBfsQg=="}]},"_npmUser":{"name":"denner503","email":"denner.rondinely@gmail.com"},"directories":{},"maintainers":[{"name":"denner503","email":"denner.rondinely@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailor_0.2.0_1773201234270_0.2449716061160574"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-12T22:13:41.573Z","modified":"2026-03-11T03:53:54.579Z","0.1.0":"2025-05-12T22:13:41.917Z","0.2.0":"2026-03-11T03:53:54.430Z"},"author":{"name":"Denner Rondinely"},"license":"MIT","keywords":["react","tailwind","styled-components","typescript"],"description":"A library for creating styled React components with Tailwind CSS in an organized and typed way","maintainers":[{"name":"denner503","email":"denner.rondinely@gmail.com"}],"readme":"# \"Tailor\"\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/dennerrondinely/tailor/ci.yml?branch=main)](https://github.com/dennerrondinely/tailor/actions)\n[![npm version](https://img.shields.io/npm/v/tailor.svg)](https://www.npmjs.com/package/tailor)\n[![npm downloads](https://img.shields.io/npm/dm/tailor.svg)](https://www.npmjs.com/package/tailor)\n[![license](https://img.shields.io/github/license/dennerrondinely/tailor)](https://github.com/dennerrondinely/tailor/blob/main/LICENSE)\n[![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@dennerrondinely/tailor@0.1.0)](https://bundlephobia.com/package/@dennerrondinely/tailor@0.1.0)\n\n
\n \"Tailor\n
\n

A library for creating styled React components with Tailwind CSS in an organized and typed way, with support for nested styles, variants, and responsive design.

\n \n [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/yourusername/tailor/pulls)\n
\n\n## Features\n\n- 🎨 Type-safe styling with TypeScript\n- 🎯 Smart class merging\n- 📱 Responsive design support\n- 🎭 Dynamic class generation based on props\n- 🎪 Nested styles\n- 🎬 Animation support\n\n## Installation\n\n```bash\nnpm install @dennerrondinely/tailor\n# or\nyarn add @dennerrondinely/tailor\n# or\npnpm add @dennerrondinely/tailor\n```\n\n## Quick Start\n\n### Basic Component\n\n```tsx\nimport { craft } from '@tailor/react';\n\ninterface ButtonProps {\n isActive?: boolean;\n disabled?: boolean;\n children: React.ReactNode;\n}\n\nconst Button: React.FC = ({ children, ...props }) => (\n \n);\n\nconst StyledButton = craft(Button)({\n base: 'px-4 py-2 rounded font-medium transition-colors',\n dynamic: {\n 'bg-blue-500 text-white': (props) => !props.isActive,\n 'bg-green-500 text-white': (props) => props.isActive,\n 'hover:opacity-90': (props) => !props.disabled,\n 'active:scale-95': (props) => !props.disabled,\n 'disabled:opacity-50 disabled:cursor-not-allowed': (props) => props.disabled\n },\n responsive: {\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg'\n }\n});\n\n// Usage\nClick me\n```\n\n### Using Dynamic Classes\n\nDynamic classes allow you to apply styles based on component props. This is particularly useful for managing component states and variants:\n\n```tsx\ninterface DynamicButtonProps {\n isActive?: boolean;\n disabled?: boolean;\n isPressed?: boolean;\n children: React.ReactNode;\n}\n\nconst DynamicButton: React.FC = ({ children, ...props }) => (\n \n);\n\nconst StyledDynamicButton = craft(DynamicButton)({\n base: 'px-4 py-2 rounded font-medium transition-all',\n dynamic: {\n // Base styles based on active state\n 'bg-blue-500 text-white': (props) => !props.isActive,\n 'bg-green-500 text-white': (props) => props.isActive,\n \n // Interactive states\n 'hover:opacity-90': (props) => !props.disabled,\n 'active:scale-95': (props) => !props.disabled,\n \n // Disabled state\n 'disabled:opacity-50 disabled:cursor-not-allowed': (props) => props.disabled,\n \n // Additional states\n 'shadow-lg': (props) => props.isPressed\n }\n});\n\n// Usage examples\nDefault\nActive\nDisabled\nPressed\n```\n\n### Advanced Example with Multiple Conditions\n\nHere's a more complex example showing how to combine multiple conditions and features:\n\n```tsx\ninterface StatusCardProps {\n status: 'success' | 'error' | 'warning' | 'info';\n size?: 'small' | 'medium' | 'large';\n disabled?: boolean;\n loading?: boolean;\n children: React.ReactNode;\n}\n\nconst StatusCard: React.FC = ({ children, ...props }) => (\n
{children}
\n);\n\nconst StyledStatusCard = craft(StatusCard)({\n base: 'p-4 rounded-lg shadow transition-all',\n dynamic: {\n // Status-based styles\n 'bg-green-100 text-green-800 border-green-200': (props) => props.status === 'success',\n 'bg-red-100 text-red-800 border-red-200': (props) => props.status === 'error',\n 'bg-yellow-100 text-yellow-800 border-yellow-200': (props) => props.status === 'warning',\n 'bg-blue-100 text-blue-800 border-blue-200': (props) => props.status === 'info',\n \n // Size-based styles\n 'p-2 text-sm': (props) => props.size === 'small',\n 'p-6 text-lg': (props) => props.size === 'large',\n \n // State-based styles\n 'opacity-50 cursor-not-allowed': (props) => props.disabled,\n 'animate-pulse': (props) => props.loading\n },\n responsive: {\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg'\n },\n nested: {\n '.status-icon': 'mr-2',\n '.status-title': 'font-bold mb-1',\n '.status-description': 'text-sm opacity-80'\n }\n});\n\n// Usage examples\nSuccess\nError\nWarning\nInfo\n```\n\n### Themed Components\n\nYou can also use dynamic classes to create themed components:\n\n```tsx\ninterface ThemedButtonProps {\n theme: 'light' | 'dark';\n variant: 'default' | 'primary' | 'success' | 'danger';\n disabled?: boolean;\n loading?: boolean;\n children: React.ReactNode;\n}\n\nconst ThemedButton: React.FC = ({ children, ...props }) => (\n \n);\n\nconst StyledThemedButton = craft(ThemedButton)({\n base: 'px-4 py-2 rounded font-medium transition-all',\n dynamic: {\n // Light theme variants\n 'bg-gray-100 text-gray-900 border border-gray-300': (props) => \n props.theme === 'light' && props.variant === 'default',\n 'bg-blue-100 text-blue-900 border border-blue-300': (props) => \n props.theme === 'light' && props.variant === 'primary',\n 'bg-green-100 text-green-900 border border-green-300': (props) => \n props.theme === 'light' && props.variant === 'success',\n 'bg-red-100 text-red-900 border border-red-300': (props) => \n props.theme === 'light' && props.variant === 'danger',\n \n // Dark theme variants\n 'bg-gray-800 text-gray-100 border border-gray-700': (props) => \n props.theme === 'dark' && props.variant === 'default',\n 'bg-blue-800 text-blue-100 border border-blue-700': (props) => \n props.theme === 'dark' && props.variant === 'primary',\n 'bg-green-800 text-green-100 border border-green-700': (props) => \n props.theme === 'dark' && props.variant === 'success',\n 'bg-red-800 text-red-100 border border-red-700': (props) => \n props.theme === 'dark' && props.variant === 'danger',\n \n // Interactive states\n 'hover:opacity-90': (props) => !props.disabled && !props.loading,\n 'active:scale-95': (props) => !props.disabled && !props.loading,\n 'disabled:opacity-50 disabled:cursor-not-allowed': (props) => props.disabled,\n 'animate-pulse': (props) => props.loading\n }\n});\n\n// Usage examples\nLight Primary\nDark Success\nLight Danger Disabled\nDark Default Loading\n```\n\n## API Reference\n\n### `craft(Component)`\n\nCreates a styled version of a React component with Tailwind CSS classes.\n\n#### Configuration\n\nThe `craft` function accepts a configuration object with the following properties:\n\n- `base`: Base classes applied to the component\n- `dynamic`: Object mapping class names to functions that receive props and return boolean values\n- `responsive`: Object mapping breakpoint names to class names\n- `nested`: Object mapping selectors to class names for nested elements\n- `animation`: Object mapping animation names to class names\n\n## Helper Functions\n\nTailor provides several helper functions to make styling components easier and more maintainable.\n\n### `spinThread(config: TailwindAnimationConfig)`\n\nCreates animation classes for your components. Perfect for loading states, transitions, and interactive elements.\n\n```tsx\nimport { spinThread } from '@dennerrondinely/tailor';\n\n// Basic usage\nconst spinAnimation = spinThread({ type: 'spin' });\n// Result: 'animate-spin'\n\n// Advanced usage with all options\nconst customAnimation = spinThread({\n type: 'pulse',\n duration: '1000',\n delay: '200',\n iteration: 'infinite',\n direction: 'reverse',\n timing: 'ease-in-out'\n});\n// Result: 'animate-pulse duration-1000 delay-200 infinite reverse ease-in-out'\n\n// Usage in a component\nconst LoadingSpinner = craft('div')({\n base: spinThread({ type: 'spin', duration: '1000' }),\n // ... other styles\n});\n```\n\n### `stitch(styles: NestedStyles)`\n\nCreates nested styles for child elements within your components using Tailwind's nesting pattern. This allows you to style child elements using Tailwind's modifier syntax, group utilities, and arbitrary selectors.\n\n```tsx\nimport { stitch } from '@dennerrondinely/tailor';\n\n// Example of styling article content - a common use case\nconst Article = craft('article')({\n base: 'prose prose-lg max-w-3xl mx-auto',\n nested: stitch({\n // Basic typography styles\n 'h1': 'font-bold text-3xl mb-4',\n 'h2': 'font-semibold text-2xl mb-3',\n 'h3': 'font-medium text-xl mb-2',\n 'p': 'mb-4 text-gray-700',\n \n // Link styles within paragraphs\n 'p > a': 'text-blue-500 hover:text-blue-600 underline',\n \n // List styles\n 'ul': 'list-disc list-inside mb-4',\n 'ol': 'list-decimal list-inside mb-4',\n 'li': 'mb-1',\n \n // Code blocks\n 'pre': 'bg-gray-100 p-4 rounded-lg mb-4',\n 'code': 'font-mono text-sm',\n \n // Blockquotes\n 'blockquote': 'border-l-4 border-gray-300 pl-4 italic my-4',\n \n // Images\n 'img': 'rounded-lg my-4',\n 'figcaption': 'text-sm text-gray-500 text-center mt-2',\n \n // Tables\n 'table': 'w-full border-collapse mb-4',\n 'th': 'border border-gray-300 bg-gray-100 p-2',\n 'td': 'border border-gray-300 p-2',\n \n // Dark mode support\n 'dark': {\n 'p': 'text-gray-300',\n 'blockquote': 'border-gray-600',\n 'pre': 'bg-gray-800',\n 'th': 'border-gray-600 bg-gray-700',\n 'td': 'border-gray-600'\n }\n })\n});\n\n// Usage\n
\n

Getting Started with Tailwind CSS

\n

\n Tailwind CSS is a utility-first CSS framework that allows you to build custom designs\n without ever leaving your HTML. Learn more about Tailwind.\n

\n

Key Features

\n
    \n
  • Utility-first approach
    • \n
  • Responsive design
    • \n
  • Customizable
    • \n
\n
\n \"Tailwind CSS is the only framework that I've seen scale on large teams.\"\n
\n 
\n    npm install tailwindcss\n
\n
\n\n// Example with SVG icon component using arbitrary selectors\nconst IconButton = craft('button')({\n base: 'p-2 rounded-full transition-colors',\n nested: stitch({\n // Using arbitrary selectors to target SVG elements\n 'svg': {\n base: 'w-6 h-6',\n // Target specific SVG elements using [&_selector]\n 'hover:[&_path]:fill-white': true,\n 'hover:[&_circle]:fill-black': true,\n 'hover:[&_circle]:stroke-black': true,\n // You can also use group modifiers\n 'group-hover:[&_path]:fill-blue-500': true,\n 'group-focus:[&_rect]:stroke-2': true\n }\n })\n});\n\n// Example with a more complex component using various nesting patterns\nconst SocialButton = craft('button')({\n base: 'p-3 rounded-lg transition-all group',\n nested: stitch({\n // Base styles for the icon container\n '.icon-wrapper': 'relative inline-block',\n \n // SVG specific styles with arbitrary selectors\n 'svg': {\n base: 'w-6 h-6',\n // Target multiple elements\n 'hover:[&_path]:fill-white': true,\n 'hover:[&_circle]:fill-black': true,\n 'hover:[&_rect]:stroke-2': true,\n // Use with other modifiers\n 'dark:[&_path]:fill-gray-200': true,\n 'dark:hover:[&_path]:fill-white': true,\n // Complex selectors\n 'hover:[&_.icon-path]:fill-blue-500': true,\n 'hover:[&_.icon-circle]:stroke-blue-500': true\n },\n \n // Text styles with hover effects\n '.button-text': {\n base: 'ml-2 text-sm font-medium',\n 'group-hover:text-white': true,\n 'dark:text-gray-200': true\n },\n \n // Background effects\n '&': {\n base: 'bg-gray-100',\n 'hover:bg-blue-500': true,\n 'dark:bg-gray-800': true,\n 'dark:hover:bg-blue-600': true\n }\n })\n});\n\n// Usage examples\n\n \n \n \n \n\n\n\n
\n \n \n \n \n
\n Follow\n\n```\n\nThe `stitch` helper supports all Tailwind CSS nesting features:\n\n- Direct child selectors using `>`\n- Group modifiers using `group-*`\n- State variants (hover, focus, active, etc.)\n- Responsive modifiers (sm, md, lg, xl, 2xl)\n- Dark mode using `dark:`\n- Custom modifiers\n- Arbitrary selectors using `[&_selector]` syntax\n- Multiple modifiers can be combined\n\nThis makes it easy to create complex component styles while maintaining Tailwind's utility-first approach and keeping your styles organized and maintainable. Common use cases include:\n\n- Styling article/blog content\n- Creating consistent typography systems\n- Styling SVG elements\n- Targeting specific elements within complex components\n- Creating custom hover/focus states for nested elements\n- Applying styles to elements based on parent state\n\n### `tailorFit(config: ResponsiveConfig)`\n\nCreates responsive styles that adapt to different screen sizes.\n\n```tsx\nimport { tailorFit } from '@dennerrondinely/tailor';\n\n// Create responsive styles\nconst responsiveStyles = tailorFit({\n sm: 'text-sm p-2',\n md: 'text-base p-4',\n lg: 'text-lg p-6',\n xl: 'text-xl p-8',\n '2xl': 'text-2xl p-10'\n});\n\n// Usage in a component\nconst ResponsiveContainer = craft('div')({\n base: 'bg-white rounded',\n responsive: responsiveStyles\n});\n```\n\n### `embroider(config: EmbroiderConfig)`\n\nCreates interactive state styles (hover, active, focus, disabled) for your components.\n\n```tsx\nimport { embroider } from '@dennerrondinely/tailor';\n\n// Create interactive styles\nconst interactiveStyles = embroider({\n base: 'px-4 py-2 rounded transition-colors',\n hover: 'hover:bg-blue-600',\n active: 'active:bg-blue-700',\n focus: 'focus:ring-2 focus:ring-blue-500 focus:outline-none',\n disabled: 'disabled:opacity-50 disabled:cursor-not-allowed'\n});\n\n// Usage in a component\nconst InteractiveButton = craft('button')({\n ...interactiveStyles,\n base: 'bg-blue-500 text-white'\n});\n```\n\n## 🎯 TypeScript Support\n\nThe library is fully typed and provides autocompletion for all available properties.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n
\n \"Tailor\"\n
\n

Crafted with ❤️ for React developers

\n
\n\n## 📄 License\n\nMIT ","readmeFilename":"README.md"}