shadcnui-hono-jsx 0.1.0

package/LICENSE

@@ -0,0 +1,367 @@
+shadcnui-hono-jsx - https://github.com/supermomonga/shadcnui-hono-jsx
+
+This package contains the shadcnui-hono-jsx CLI, component templates and
+stylesheets derived from shadcn/ui (https://github.com/shadcn-ui/ui), files
+vendored from the shadcn package (generated/tailwind.css and
+generated/shadcn-preset.js), and SVG icons inlined from the icon libraries
+below (generated/templates/ for Lucide, generated/icons/ for the others). The
+supermomonga notice applies only to original additions and modifications made
+by shadcnui-hono-jsx. The CLI installs LICENSE-shadcnui-hono-jsx.txt
+(generated/notices/) with the sources it installs, with the license of the
+icon library they use.
+
+shadcnui-hono-jsx is an unofficial community project and is not affiliated
+with, maintained by, or endorsed by shadcn or shadcn/ui.
+
+MIT License
+
+Copyright (c) 2023 shadcn
+Copyright (c) 2026 supermomonga
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+Icons
+
+The icons are licensed as follows.
+
+-------------------------------------------------------------------------------
+
+Lucide (https://lucide.dev). Lucide is licensed as follows (reproduced from the
+lucide package, including the notice for icons derived from Feather):
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+Tabler Icons (https://tabler.io/icons). Tabler Icons is licensed as follows
+(reproduced from the @tabler/icons package):
+
+MIT License
+
+Copyright (c) 2020-2026 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+Hugeicons (https://hugeicons.com). Hugeicons is licensed as follows (reproduced
+from the @hugeicons/core-free-icons package):
+
+MIT License
+
+Copyright (c) 2025 Hugeicons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+Phosphor Icons (https://phosphoricons.com). Phosphor Icons is licensed as
+follows (reproduced from the @phosphor-icons/core package):
+
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+Remix Icon (https://remixicon.com). Remix Icon is licensed as follows
+(reproduced from the remixicon package, which is not an open source license: it
+forbids selling the icons on their own, building a competing icon library from
+them and using them as a logo or brand identity):
+
+Remix Icon License v1.0
+Version 1.0 – January 2026
+Copyright (c) 2017–2026 Remix Design
+
+   This License governs the use of the Remix Icon library, including all icons,
+   SVG files, font files, and related assets (collectively, the "Icons").
+
+1. Grant of License
+
+   Subject to the terms and conditions of this License, Remix Design grants you
+   a worldwide, royalty-free, non-exclusive license to use, copy, modify,
+   merge, and distribute the Icons, as permitted below.
+
+2. Permitted Uses
+
+   You are permitted to:
+
+   2.1 Commercial and Non-Commercial Use
+       Use the Icons in personal, commercial, and client projects, including
+       but not limited to:
+       - Websites, web applications, and mobile applications
+       - Software products and SaaS platforms
+       - User interface designs, design systems, and UI kits
+       - Presentations, documentation, and marketing materials
+       - Physical or digital products where the Icons are decorative or
+       functional elements
+
+   2.2 Modification and Derivative Works
+       - Modify, adapt, or customize the Icons
+       - Change colors, sizes, stroke styles, or other visual attributes
+       to fit your project needs
+
+   2.3 Distribution as Part of a Larger Work
+       Include the Icons (modified or unmodified) as part of a larger product,
+       provided that:
+       - The Icons are functional or decorative components of the product, and
+       - The Icons are not marketed or sold as the primary value of the product
+
+   2.4 Attribution (Optional)
+       Attribution to Remix Icon is appreciated but not required.
+       Suggested attribution:
+       "Icons by Remix Icon (https://remixicon.com)"
+
+3. Restrictions
+
+   3.1 Prohibited: Standalone Icon Sales
+       You may NOT:
+       - Sell, sublicense, or distribute the Icons as a standalone product
+       - Package the Icons as an independent icon pack, icon library, or
+       icon font for sale
+       - Offer the Icons as a downloadable asset collection where the Icons
+       themselves constitute the primary product value
+
+       Clarification:
+       A product is considered a prohibited standalone icon sale if:
+       - The Icons are the primary advertised feature, or
+       - Removing the Icons would eliminate the core value of the product
+
+       Examples:
+       - Prohibited: "Premium Icon Pack – 2,000+ Icons for $29"
+       - Prohibited: "Extended Remix Icon Library (Paid)"
+       - Permitted: Website or app templates that include Icons as UI elements
+       - Permitted: Design systems or UI kits where Icons are a minor component
+
+   3.2 Prohibited: Competing Icon Libraries
+       You may NOT use the Icons to create, distribute, or sell a competing
+       icon library or icon set, even if the Icons are modified with only
+       minor or superficial changes (such as color, size, stroke width,
+       corner radius, or layout).
+
+   3.3 Prohibited: Logo, Trademark, and Brand Identity Use
+       You may NOT use the Icons, whether modified or unmodified, as:
+       - A logo, trademark, or brand identifier
+       - The primary visual identity of a company, product, or service
+
+       This includes, but is not limited to:
+       - Creating a logo by applying simple modifications such as color changes,
+       rotation, combination, or layout
+       - Using an Icon as a brand mark, app icon, or identity symbol where the
+       Icon itself represents the brand
+
+       Rationale:
+       Remix Icon is designed for functional and informational use. Using the
+       Icons as brand identifiers may impair their recognizability and neutrality
+       in other functional contexts.
+
+4. Brand Icons and Trademarks
+
+   Some Icons represent third-party brands or services.
+
+   4.1 Permitted Use of Brand Icons
+       You may use brand icons solely to represent or link to the corresponding
+       brand, product, or service.
+       Examples:
+       - Using a GitHub icon to link to a GitHub repository
+       - Displaying social media icons in a website footer
+
+   4.2 Prohibited Use of Brand Icons
+       You may NOT:
+       - Use brand icons as your own logo or trademark
+       - Modify brand icons to create a new brand identity
+       - Use brand icons in a way that implies endorsement or affiliation
+       by the brand owner
+       - Use brand icons for purposes unrelated to the represented brand
+
+   4.3 Trademark Responsibility
+       All brand icons are subject to the trademark rights of their respective
+       owners. This License does not grant any trademark rights.
+       Users are responsible for ensuring that their use of brand icons complies
+       with applicable trademark laws.
+
+5. Copyright and License Notice
+
+   When distributing the complete Icon library or substantial portions thereof:
+
+   - You must retain existing copyright notices in source files
+   - You should include a copy of this License or a link to it
+
+   For individual use of Icons within projects (e.g., compiled apps, websites,
+   presentations), no copyright notice is required.
+
+6. No Trademark Rights
+
+   This License does not grant permission to use:
+
+   - The "Remix Icon" name, logo, or trademarks
+   - Any trademarks represented by brand icons
+
+   You may refer to Remix Icon by name solely for attribution purposes.
+
+7. Disclaimer of Warranty
+
+   THE ICONS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+8. Limitation of Liability
+
+   IN NO EVENT SHALL REMIX DESIGN BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING
+   FROM, OUT OF, OR IN CONNECTION WITH THE ICONS OR THEIR USE.
+
+9. License Compatibility
+
+   You may integrate the Icons into projects under permissive licenses
+   (such as MIT, BSD, or Apache 2.0), provided that:
+
+   - The Icons themselves remain governed by this License
+   - The restrictions in Section 3 continue to apply
+
+   This License may be incompatible with licenses that require unrestricted
+   redistribution of assets as standalone products or mandatory application
+   of strong copyleft or share-alike terms.
+
+10. Termination
+
+   Your rights under this License terminate automatically if you breach its
+   terms.
+
+   Upon termination:
+
+   - You must cease any distribution that violates this License
+   - You may continue to use the Icons in projects already distributed
+   prior to termination
+   - End users who received such projects are not affected
+
+11. License Versioning
+
+   Remix Design may publish revised versions of this License.
+
+   You may choose to use the Icons under:
+
+   - The version of this License under which you received them, or
+   - Any later version published by Remix Design
+
+   Once chosen, that version may be used indefinitely.
+
+How to Apply This License
+
+   Include the following notice in your documentation when appropriate:
+
+   "This project uses icons from Remix Icon (https://remixicon.com),
+   licensed under the Remix Icon License v1.0."
+
+   When distributing the complete Icon library or substantial portions of it,
+   include a copy of this License.

package/README.md

@@ -0,0 +1,28 @@
+# shadcnui-hono-jsx
+
+Installs [shadcn/ui](https://ui.shadcn.com) components ported to
+[Hono JSX](https://hono.dev/docs/guides/jsx), without React, styled by a
+preset from [ui.shadcn.com/create](https://ui.shadcn.com/create).
+
+> [!WARNING]
+> **Experimental.** This is an unofficial community project. It is not
+> affiliated with, maintained by, or endorsed by shadcn or the shadcn/ui
+> project.
+
+In the root of a Hono project with Tailwind CSS v4:
+
+```sh
+npx shadcnui-hono-jsx init --preset <code>   # or bunx; without --preset, nova
+npx shadcnui-hono-jsx add button card
+npx shadcnui-hono-jsx apply --preset <code>  # change the preset later
+```
+
+`init` writes `shadcnui-hono-jsx.json`, the theme (`styles/shadcn/`) and
+`LICENSE-shadcnui-hono-jsx.txt`; `add` writes components to
+`components/ui/`. See the
+[repository](https://github.com/supermomonga/shadcnui-hono-jsx#readme) for the
+setup, the supported components and their differences from shadcn/ui.
+
+The package contains sources derived from shadcn/ui and icons of the preset's
+icon library; see [LICENSE](./LICENSE). Remix Icon is under the Remix Icon
+License v1.0, which is not an open source license.

package/client/avatar.js

@@ -0,0 +1,41 @@
+// @ts-check
+/**
+ * Avatars: the image covers the fallback once it loads. This script hides an
+ * image that fails to load, so the fallback shows, and hides the fallback of
+ * a loaded image from assistive technology and layout, like Base UI.
+ */
+
+const IMAGE = "img[data-avatar-image]"
+
+/** @param {HTMLImageElement} image */
+function settle(image) {
+  const root = image.closest("[data-avatar]")
+  const loaded = image.complete && image.naturalWidth > 0
+  image.hidden = !loaded
+  for (const fallback of root?.querySelectorAll("[data-avatar-fallback]") ??
+    []) {
+    if (fallback instanceof HTMLElement) fallback.hidden = loaded
+  }
+}
+
+// `load` and `error` do not bubble, so they are captured.
+for (const type of ["load", "error"]) {
+  document.addEventListener(
+    type,
+    (event) => {
+      const target = event.target
+      if (target instanceof HTMLImageElement && target.matches(IMAGE)) {
+        settle(target)
+      }
+    },
+    true
+  )
+}
+
+// Images that finished before the script ran.
+for (const image of document.querySelectorAll(IMAGE)) {
+  if (image instanceof HTMLImageElement && image.complete) settle(image)
+}
+
+// A module: its declarations stay local.
+export {}

package/client/collapsible.js

@@ -0,0 +1,47 @@
+// @ts-check
+/**
+ * Collapsibles whose trigger is not the first child: the trigger button
+ * toggles the panel (hidden while closed), like Base UI. Collapsibles with the trigger first are native
+ * `<details>` and need no script.
+ */
+import { delegate } from "./core.js"
+
+const ROOT = "[data-collapsible]"
+
+/** @param {HTMLElement} root */
+const partsOf = (root) => {
+  /** @param {string} selector */
+  const own = (selector) =>
+    /** @type {HTMLElement[]} */ ([...root.querySelectorAll(selector)]).filter(
+      (element) => element.closest(ROOT) === root
+    )
+  return {
+    triggers: own("[data-collapsible-trigger]"),
+    panel: own("[data-collapsible-panel]")[0] ?? null,
+  }
+}
+
+/**
+ * @param {HTMLElement} root
+ * @param {boolean} open
+ */
+function setOpen(root, open) {
+  const { triggers, panel } = partsOf(root)
+  if (panel) panel.hidden = !open
+  for (const element of [root, panel]) {
+    element?.toggleAttribute("data-open", open)
+    element?.toggleAttribute("data-closed", !open)
+  }
+  for (const trigger of triggers) {
+    trigger.setAttribute("aria-expanded", String(open))
+    if (open && panel) trigger.setAttribute("aria-controls", panel.id)
+    else trigger.removeAttribute("aria-controls")
+    trigger.toggleAttribute("data-panel-open", open)
+  }
+}
+
+delegate("click", "[data-collapsible-trigger]", (_event, trigger) => {
+  const root = trigger.closest(ROOT)
+  if (!(root instanceof HTMLElement) || trigger.hasAttribute("disabled")) return
+  setOpen(root, !root.hasAttribute("data-open"))
+})