{"id":13468341,"url":"https://github.com/crswll/clb","last_synced_at":"2025-06-11T01:38:31.357Z","repository":{"id":46793046,"uuid":"340806467","full_name":"crswll/clb","owner":"crswll","description":"clb is a small, utility function that builds a class list based on a simple api.","archived":false,"fork":false,"pushed_at":"2023-04-23T01:58:14.000Z","size":239,"stargazers_count":175,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-26T05:33:33.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/crswll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-02-21T03:11:59.000Z","updated_at":"2025-03-04T14:48:20.000Z","dependencies_parsed_at":"2024-04-09T22:50:52.731Z","dependency_job_id":"16b767bd-7a74-4a0c-b281-3b8bc2a743fc","html_url":"https://github.com/crswll/clb","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crswll%2Fclb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crswll%2Fclb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crswll%2Fclb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crswll%2Fclb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crswll","download_url":"https://codeload.github.com/crswll/clb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crswll%2Fclb/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259182645,"owners_count":22818133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T15:01:09.107Z","updated_at":"2025-06-11T01:38:31.332Z","avatar_url":"https://github.com/crswll.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Tools"],"sub_categories":[],"readme":"# clb\n\nclb (class list builder) is a small, utility function that builds a class list based on a simple api.\n\nIt's like [classnames](https://github.com/JedWatson/classnames) and [Stitches](https://stitches.dev/) made a really lazy baby. It works really well with [tailwindcss](https://tailwindcss.com/) but will work with any functional / utility / atomic css approach.\n\nIf you're looking for a very similar thing with type support check out https://github.com/joe-bell/cva.\n\n## Install It\n\n```bash\nyarn add clb\nnpm install clb\n```\n\n## Annotated Examples\n\n### Nothing Fancy\n\n```js\nconst clb = require('clb')\n\nconst buttonBuilder = clb({\n\n  /* This can be anything `classnames` accepts. */\n  base: 'font-serif rounded-2xl',\n\n  defaultVariants: {\n    color: 'gray',\n    size: 'medium',\n    spacing: 'medium',\n  },\n\n  /*\n    The value for each variant value below can be anything\n    `classnames` accepts.\n  */\n  variants: {\n    color: {\n      gray: 'text-gray-800 bg-gray-800',\n      red: 'text-red-800 bg-red-200',\n      blue: 'text-blue-800 bg-blue-200',\n      green: 'text-green-800 bg-green-200',\n    },\n    size: {\n      small: 'text-sm',\n      medium: 'text-md',\n      large: 'text-lg',\n    },\n    spacing: {\n      small: 'p-2',\n      medium: 'p-4',\n      large: 'p-6',\n    },\n  },\n})\n\nbuttonBuilder()\n// -\u003e font-serif rounded-2xl text-gray-800 bg-gray-800 text-md p-4\n\nbuttonBuilder({ color: 'red' })\n// -\u003e font-serif rounded-2xl text-red-800 bg-red-800 text-md p-4\n\nbuttonBuilder({ color: 'blue', size: 'large' })\n// -\u003e font-serif rounded-2xl text-blue-800 bg-blue-800 text-lg p-6\n```\n\n### A Little More Fancy Pants\n\n```js\nconst clb = require('clb')\n\nconst buttonBuilder = clb({\n  base: 'font-serif rounded-2xl',\n  defaultVariants: {\n    color: 'gray',\n    size: 'small',\n  },\n  variants: {\n    size: {\n      small: 'text-sm p-2',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n  },\n  compoundVariants: [\n    { color: 'gray', disabled: true, classes: 'text-gray-200 bg-gray-50' },\n    { color: 'gray', disabled: false, classes: 'text-gray-800 bg-gray-200' },\n    { color: 'red', disabled: true, classes: 'text-red-200 bg-red-50' },\n    { color: 'red', disabled: false, classes: 'text-red-800 bg-red-200' },\n    { color: 'blue', disabled: true, classes: 'text-blue-200 bg-blue-50' },\n    { color: 'blue', disabled: false, classes: 'text-blue-800 bg-blue-200' },\n  ],\n})\n\nbuttonBuilder()\n// -\u003e font-serif rounded-2xl text-sm p-2 text-gray-800 bg-gray-800\n\nbuttonBuilder({ disabled: true })\n// -\u003e font-serif rounded-2xl text-sm p-2 text-gray-200 bg-gray-50 cursor-not-allowed\n\nbuttonBuilder({ color: 'red', disabled: true })\n// -\u003e font-serif rounded-2xl text-sm p-2 text-red-200 bg-red-50 cursor-not-allowed\n```\n\n### Usage With Vue / React / Others\n\nNone of this code is actually tested but should be *pretty* close.\n\n**buttonClasses.js**\n```js\nimport clb from 'clb'\n\nconst buttonBuilder = clb({\n  base: 'font-serif rounded-2xl',\n  defaultVariants: {\n    color: 'gray',\n    size: 'small',\n  },\n  variants: {\n    size: {\n      small: 'text-sm p-2',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n  },\n  compoundVariants: [\n    { color: 'gray', disabled: true, classes: 'text-gray-200 bg-gray-50' },\n    { color: 'gray', disabled: false, classes: 'text-gray-800 bg-gray-200' },\n    { color: 'red', disabled: true, classes: 'text-red-200 bg-red-50' },\n    { color: 'red', disabled: false, classes: 'text-red-800 bg-red-200' },\n    { color: 'blue', disabled: true, classes: 'text-blue-200 bg-blue-50' },\n    { color: 'blue', disabled: false, classes: 'text-blue-800 bg-blue-200' },\n  ],\n})\n\nexport default buttonClasses\n```\n\n**Button.jsx**\n```jsx\nimport buttonClasses from \"./buttonClasses\"\n\nconst Button = ({ color, disabled }) =\u003e (\n  \u003cbutton className={buttonClasses({ color, disabled })}\u003e\n    Whoa Cool Button\n  \u003c/button\u003e\n)\n```\n\n**Button.vue**\n```vue\n\u003cscript\u003e\n  import buttonClasses from \"./buttonClasses\"\n\n  export default {\n    props: ['color', 'disabled'],\n    methods: { buttonClasses }\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton :class=\"buttonClasses({ color, disabled })\"\u003e\n    Whoa Cool Button\n  \u003c/button\u003e\n\u003c/template\u003e\n```\n\n**Button.svelte** (thanks [JakeNavith](https://github.com/JakeNavith))\n```svelte\n\u003cscript\u003e\n  import buttonClasses from \"./buttonClasses\"\n  export let color\n  export let disabled\n\u003c/script\u003e\n\n\u003cbutton class={buttonClasses({ color, disabled })}\u003e\n  Whoa Cool Button\n\u003c/button\u003e\n```\n\n### Use as clsx\nWhen `clb` doesn't have a `variant` or `compountVariant` key it passes everthing to `clsx`, which is like `classnames` if you're familiar with that.\n\n```js\nclb('foo', { bar: true })\n// -\u003e foo bar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrswll%2Fclb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrswll%2Fclb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrswll%2Fclb/lists"}