Merge branch 'v5'

# Conflicts: # CHANGELOG.md # package.json # packages/docs/src/lib/data/store.js # packages/docs/src/lib/data/youtube.js # packages/docs/src/translation/ro.json # src/components/styled/typography.css # src/docs/.env # src/docs/src/components/TopBanner.svelte # src/docs/src/routes/(docs)/+layout.svelte # src/docs/src/routes/(docs)/+page.svelte # src/docs/src/routes/(docs)/docs/install/+page.svx closes #3558, closes #3556, closes #3551, closes #3547, closes #3544, closes #3542, closes #3531, closes #3530, closes #3529, closes #3527, closes #3524, closes #3520, closes #3519, closes #3518, closes #3517, closes #3508, closes #3482, closes #3473, closes #3472, closes #3468, closes #3453, closes #3451, closes #3443, closes #3440, closes #3433, closes #3432, closes #3430, closes #3427, closes #3421, closes #3418, closes #3417, closes #3394, closes #3391, closes #3389, closes #3383, closes #3382, closes #3381, closes #3375, closes #3360, closes #3348, closes #3346, closes #3332, closes #3328, closes #3325, closes #3322, closes #3320, closes #3318, closes #3316, closes #3315, closes #3313, closes #3312, closes #3308, closes #3294, closes #3287, closes #3285, closes #3281, closes #3280, closes #3276, closes #3272, closes #3250, closes #3245, closes #3242, closes #3232, closes #3231, closes #3224, closes #3222, closes #3218, closes #3216, closes #3215, closes #3203, closes #3202, closes #3188, closes #3176, closes #3170, closes #3169, closes #3267, closes #3166, closes #3160, closes #3157, closes #3155, closes #3153, closes #3148, closes #3141, closes #3128, closes #3117, closes #3116, closes #3078, closes #3071, closes #3060, closes #3053, closes #3040, closes #3027, closes #2988, closes #2987, closes #2979, closes #2975, closes #2965, closes #2950, closes #2867, closes #2865, closes #2862, closes #2850, closes #2833, closes #2802, closes #2800, closes #2796, closes #2735, closes #2734, closes #2725, closes #2689, closes #2684, closes #2678, closes #2669, closes #2667, closes #2653, closes #2643, closes #2637, closes #2626, closes #2619, closes #2615, closes #2605, closes #2597, closes #2571, closes #2570, closes #2564, closes #2502, closes #2442, closes #2415, closes #2413, closes #2410, closes #2375, closes #2296, closes #2223, closes #2172, closes #2137, closes #2115, closes #1929, closes #1922, closes #1831, closes #1744, closes #1732, closes #1672, closes #865, closes #694
saadeghi · Feb 28, 2025 · 819c4d6 · 819c4d6
2 parents 1c40db4 + 162804e
commit 819c4d6
Show file tree

Hide file tree

Showing 747 changed files with 49,935 additions and 55,605 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -39,113 +39,62 @@ daisyUI welcomes contributions from anyone willing to help 🤝
 ### To build the daisyUI node package on local:
 
 1. [[Fork](https://github.com/saadeghi/daisyui/fork) and] clone the repo on local
-1. Install package dependencies:
-   ```
-   npm install
-   ```
-1. Build the package:
-   ```
-   npm run build
-   ```
-1. Now you can import daisyUI to your `tailwind.config.js`:
-   ```js
-   module.exports = {
-     plugins: [require("/path/to/src/directory")],
-   }
-   ```
-
-> [!NOTE]
-> If you are on Windows, you have to use a Unix shell like [Git Bash](https://gitforwindows.org/). Unfortunately, the Windows command prompt and PowerShell do not support the `cat` command, which is used in the build script.
+1. [Install Bun](https://bun.sh/) if you don't have it:
+1. Install dependencies:
+  ```
+  bun install
+  ```
+1. Build daisyUI package:
+  ```
+  bun run build
+  ```
+1. Now you can use your local build of daisyUI in another local project by installing it as a dependency using Bun (or NPM, etc):  
+  In your own local project where you want to use daisyUI:
+  ```
+  bun install /path/to/daisyui/packages/daisyui
+  ```
 
 ### To run the [documentation site](https://daisyui.com/) on local:
 
 1. [[Fork](https://github.com/saadeghi/daisyui/fork) and] clone the repo on local
-1. Install all dependencies and build the package and documentation site using this command:
-   ```
-   npm run init
-   ```
+1. [Install Bun](https://bun.sh/) if you don't have it:
+1. Install dependencies:
+  ```
+  bun install
+  ```
+1. Build daisyUI package:
+  ```
+  bun run build
+  ```
 1. Run the document site:
-   ```
-   npm run dev
-   ```
-
-## Adding a new component
-
-Before adding a new component, please make sure it's [start a discussion about it on GitHub](https://github.com/saadeghi/daisyui/discussions) so we can talk about how the structure and style should be.  
-There is a `List of components` at the end of [/README.md](https://github.com/saadeghi/daisyui/blob/master/README.md) that I think would be a good to complete.
+  ```
+  bun run dev
+  ```
 
 ### File structure
 
-All component styles are in [`/src`](https://github.com/saadeghi/daisyui/tree/master/src) but it's important to separate the style to 4 files:
-
-- `/src/components/unstyled`: Styles that define the layout and placement of a component  
-  (for example: [layout of `tab` and `tabs`](https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/tab.css))
-- `/src/components/styled`: Styles that define the visual appearance of a component  
-  (for example: [colors and spacing of `alert`](https://github.com/saadeghi/daisyui/blob/master/src/components/styled/alert.css))
-- `/src/utilities/unstyled`: Styles that define the layout and placement of a variant of a component that must be responsive  
-  (for example: [sizes of a `.btn`](https://github.com/saadeghi/daisyui/blob/master/src/utilities/unstyled/button.css))
-- `/src/utilities/styled`: Styles that define the visual appearance of a variant of a component that must be responsive  
-  (for example: [colors of `alert`](https://github.com/saadeghi/daisyui/blob/master/src/utilities/styled/alert.css))
-
-> Separating styles to these 4 files, allows us to use daisyUI components with/without _design decision_ styles ([See `styled` config](styled)) and allows us to define some styles as responsive utilities (to work with `lg:`, `md:`, `sm:`, etc... prefixes)
-
-### Code samples with dynamic prefix
-
-If your component documentation page contains `pre` blocks for code samples, be sure to follow the example below so that the code will be displayed with the correct prefix dynamically set by user:
-
-```svelte
-<Component title="Buttons with brand colors">
-  <button class="btn">Button</button>
-  <button class="btn btn-primary">Primary</button>
-  <button class="btn btn-secondary">Secondary</button>
-  <button class="btn btn-accent">Accent</button>
-  <button class="btn btn-ghost">Ghost</button>
-  <button class="btn btn-link">Link</button>
-
-  <!-- add $$ to each daisyUI class name in pre block-->
-  <pre slot="html" use:replace="{{ to: $prefix }}">{`<button class="$$btn">Button</button>
-<button class="$$btn $$btn-primary">Button</button>
-<button class="$$btn $$btn-secondary">Button</button>
-<button class="$$btn $$btn-accent">Button</button>
-<button class="$$btn $$btn-ghost">Button</button>
-<button class="$$btn $$btn-link">Button</button>`}</pre>
-</Component>
+```js
+packages
+├── daisyui //daisyUI package
+│   ├── index.js //entry point
+│   ├── functions
+│   ├── src
+│   │   ├── base
+│   │   ├── components
+│   │   ├── themes
+│   │   ╰── utilities
+│   ╰── // generated files
+├── docs //documentation site
+│   ╰── src
+│       ├── routes
+│       │   ╰── (routes)
+│       │       ├── blog
+│       │       ├── components //component docs
+│       │       ├── docs //docs
+│       │       ╰── ...
+│       ╰── translations
+╰── playground //playground site
+    ╰── src
+        ╰── components
+            ╰── Component.astro // Where you can test things without committing
 ```
-
-### An example
-
-Let's say we want to add a new component named `.coolbutton` (don't add that actually 😅 )
-
-1. Add these files:
-   ```
-   /src/components/unstyled/coolbutton.css
-   /src/components/styled/coolbutton.css
-   ```
-1. Add your CSS there (you can use `@apply`)
-   - `/unstyled/coolbutton.css` is for the structure of the component without any design decision
-   - `/styled/coolbutton.css` is for the visual appearance of the component with colors, spacing, etc.
-1. Add a page to documentation site:
-   ```
-   /src/docs/src/routes/components/coolbutton/+page.svx
-   ```
-1. Add page info and some HTML to your [Svelte](https://svelte.dev/) markdown ([mdsvex](https://mdsvex.pngwn.io/)) file that uses your class name
-
-   ```mdx
-   ---
-   title: Coolbutton
-   desc: It's a button but it's cool!
-   published: true
-   layout: components
-   ---
-
-   <button class="coolbutton">Cool!</button>
-   ```
-
-1. Build the documentation site:
-   ```
-   npm run dev
-   ```
-1. Now when you open the site on localhost, you can see your new page, showing the new component with your style:
-   ```
-   http://localhost:3000/components/coolbutton
-   ```
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -2,42 +2,22 @@ name: "📘 Deploy docs"
 
 on:
   workflow_dispatch:
-    inputs:
-      runtime:
-        type: choice
-        description: JS runtime
-        default: "bun"
-        options:
-          - "bun"
-          - "npm"
-      daisyuiversion:
-        type: choice
-        description: DaisyUI release tag
-        default: "latest"
-        options:
-          - "latest"
-          - "alpha"
   workflow_call:
-    inputs:
-      daisyuiversion:
-        type: string
   push:
     branches:
       - master
     paths:
-      - "src/docs/**"
+      - "packages/docs/**"
       - "CHANGELOG.md"
 
 jobs:
   deploy-docs:
     timeout-minutes: 10
     runs-on: ubuntu-latest
     env:
-      runtime: ${{ inputs.runtime || 'bun'}}
       LEMONSQUEEZY_API_KEY: ${{ secrets.LEMONSQUEEZY_API_KEY }}
       YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
       GH_API_KEY: ${{ secrets.GH_API_KEY }}
-      daisyuiversion: ${{ inputs.daisyuiversion || 'latest' }}
     if: |
       github.event_name == 'workflow_dispatch' ||
       github.event_name == 'workflow_call' ||
@@ -50,63 +30,27 @@ jobs:
           fetch-depth: 2
           clean: false
 
-      - name: Setup Node
-        if: env.runtime == 'npm'
-        uses: actions/setup-node@v4
-        with:
-          node-version: "21.1.0"
-          registry-url: https://registry.npmjs.org
-
-      - name: Setup bun
-        if: env.runtime == 'bun'
+      - name: Setup Bun
         uses: oven-sh/[email protected]
 
-      - name: Install package dependencies
-        run: ${{ env.runtime }} install
+      - name: Install dependencies
+        run: bun i
 
       - name: Build package
-        run: ${{ env.runtime }} run build:skipfullcss
-
-      - name: Install docs dependencies
-        run: cd src/docs && ${{ env.runtime }} install
-
-      - name: Install daisyUI ${{env.daisyuiversion}} version if production
-        if: github.repository == 'saadeghi/daisyui'
-        run: cd src/docs && ${{ env.runtime }} i daisyui@${{env.daisyuiversion}}
-
-      - name: Install daisyUI newest tag if staging
-        if: github.repository == 'daisyui/daisyui.github.io'
-        run: |
-          cd src/docs
-          if [ "${{env.daisyuiversion}}" = "latest" ]; then
-            ${{ env.runtime }} i daisyui@${{env.daisyuiversion}}
-          else
-            ${{ env.runtime }} i daisyui@$([[ $(npm view daisyui version) > $(npm view daisyui dist-tags.alpha) ]] && echo "latest" || echo "alpha")
-          fi
-
-      - name: Set daisyUI version in env file if staging
-        if: github.repository == 'daisyui/daisyui.github.io'
-        run: |
-          echo 'VITE_DAISYUI_VERSION=ALPHA' > src/docs/.env
+        run: bun run build
 
       - name: Add robots.txt if not main repo
         if: github.repository != 'saadeghi/daisyui'
         run: |
           echo 'User-agent: *
-          Disallow: /' > src/docs/static/robots.txt
+          Disallow: /' > packages/docs/static/robots.txt
 
       - name: Build docs
-        run: |
-          cd src/docs
-          if [ -z "${{inputs.daisyuiversion}}" ]; then
-            ${{ env.runtime }} run build
-          else
-            VITE_DAISYUI_VERSION=${{inputs.daisyuiversion}} ${{ env.runtime }} run build
-          fi
+        run: bun run build:docs
 
       - name: Deploy docs to github pages
         uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./src/docs/build
+          publish_dir: ./packages/docs/build
           cname: ${{ secrets.CNAME }}
diff --git a/.github/workflows/release-new-version.yml b/.github/workflows/release-new-version.yml
@@ -3,13 +3,6 @@ name: "🎉 Release new version"
 on:
   workflow_dispatch:
     inputs:
-      runtime:
-        type: choice
-        description: JS runtime
-        default: "bun"
-        options:
-          - "bun"
-          - "npm"
       release-type:
         type: choice
         description: Release type
@@ -20,18 +13,13 @@ on:
     branches:
       - master
     paths:
-      - "src/**"
-      - "!src/docs/**"
-      - "!src/tests/**"
-      - "!src/experiments/**"
+      - "packages/daisyui/**"
 
 jobs:
   build-publish:
     name: 🔨 Build + 🚀 Publish
     timeout-minutes: 10
     runs-on: ubuntu-latest
-    env:
-      runtime: ${{ inputs.runtime || 'bun'}}
     outputs:
       daisyuiversion: ${{ steps.package-version.outputs.version }}
     steps:
@@ -41,68 +29,37 @@ jobs:
           fetch-depth: 1
           clean: false
 
-      - name: Setup Node
-        if: env.runtime == 'npm'
-        uses: actions/setup-node@v4
-        with:
-          node-version: "latest"
-          registry-url: https://registry.npmjs.org
-
       - name: Setup Bun
-        if: env.runtime == 'bun'
         uses: oven-sh/setup-bun@v1
 
-      - name: Install package dependencies
-        run: ${{ env.runtime }} install
+      - name: Install dependencies
+        run: bun i
 
-      - name: build package
-        run: ${{ env.runtime }} run build
+      - name: Build package
+        run: bun run build
 
       - name: Run release command
         if: github.repository == 'saadeghi/daisyui'
         run: |
           git config --local user.email "[email protected]"
           git config --local user.name "Pouya Saadeghi"
-          ${{ env.runtime }} run release${{ inputs.release-type }}
+          bun run release${{ inputs.release-type }}
 
       - name: Read package version from package.json
         id: package-version
         run: |
-          version=$(grep -o '"version": *"[^"]*"' package.json | cut -d'"' -f4)
+          version=$(grep -o '"version": *"[^"]*"' packages/daisyui/package.json | cut -d'"' -f4)
           echo version=$version >> $GITHUB_OUTPUT
 
-      - name: Update package version in src/docs/.env and commit
-        if: github.repository == 'saadeghi/daisyui'
-        id: commit
-        run: |
-          echo "VITE_DAISYUI_VERSION=${{ steps.package-version.outputs.version }}" > src/docs/.env
-          git config --local user.email "[email protected]"
-          git config --local user.name "Pouya Saadeghi"
-          git add --all
-          if [ -z "$(git status --porcelain)" ]; then
-            echo push=false >> $GITHUB_OUTPUT
-          else
-            git commit -m "Update src/docs/.env" -a
-            echo push=true >> $GITHUB_OUTPUT
-          fi
-        shell: bash
-
       - name: Push changes
         if: steps.commit.outputs.push == 'true'
         uses: ad-m/github-push-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Setup Node
-        if: env.runtime != 'npm'
-        uses: actions/setup-node@v4
-        with:
-          node-version: "latest"
-          registry-url: https://registry.npmjs.org
-
       - name: Publish package to NPM
         if: github.repository == 'saadeghi/daisyui'
-        run: npm publish
+        run: bun publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
 
@@ -120,7 +77,7 @@ jobs:
     uses: ./.github/workflows/run-tests.yml
     secrets: inherit
     with:
-      filter: " "
+      filter: ""
 
   write-release-notes:
     name: 📝 Release notes