@moloodev/ui 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,142 @@
 {
   "name": "@moloodev/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./moloo.css": "./src/moloo.css",
+    "./typeset.css": "./src/typeset.css",
+    "./fonts.css": "./registry/fonts.css",
+    "./use-clipboard": "./src/hooks/use-clipboard.ts",
+    "./use-mobile": "./src/hooks/use-mobile.ts",
+    "./format-relative-time": "./src/lib/format-relative-time.ts",
+    "./registry": "./registry/components.ts",
+    "./accordion": "./src/components/ui/accordion.tsx",
+    "./alert": "./src/components/ui/alert.tsx",
+    "./alert-dialog": "./src/components/ui/alert-dialog.tsx",
+    "./aspect-ratio": "./src/components/ui/aspect-ratio.tsx",
+    "./attachment": "./src/components/ui/attachment.tsx",
+    "./avatar": "./src/components/ui/avatar.tsx",
+    "./badge": "./src/components/ui/badge.tsx",
+    "./breadcrumb": "./src/components/ui/breadcrumb.tsx",
+    "./bubble": "./src/components/ui/bubble.tsx",
+    "./button": "./src/components/ui/button.tsx",
+    "./button-group": "./src/components/ui/button-group.tsx",
+    "./calendar": "./src/components/ui/calendar.tsx",
+    "./card": "./src/components/ui/card.tsx",
+    "./carousel": "./src/components/ui/carousel.tsx",
+    "./chart": "./src/components/ui/chart.tsx",
+    "./checkbox": "./src/components/ui/checkbox.tsx",
+    "./collapsible": "./src/components/ui/collapsible.tsx",
+    "./combobox": "./src/components/ui/combobox.tsx",
+    "./command": "./src/components/ui/command.tsx",
+    "./context-menu": "./src/components/ui/context-menu.tsx",
+    "./data-table": "./src/components/ui/data-table.tsx",
+    "./date-picker": "./src/components/ui/date-picker.tsx",
+    "./dialog": "./src/components/ui/dialog.tsx",
+    "./drawer": "./src/components/ui/drawer.tsx",
+    "./dropdown-menu": "./src/components/ui/dropdown-menu.tsx",
+    "./dropzone": "./src/components/ui/dropzone.tsx",
+    "./empty": "./src/components/ui/empty.tsx",
+    "./field": "./src/components/ui/field.tsx",
+    "./form": "./src/components/ui/form.tsx",
+    "./highlighted-source": "./src/components/ui/highlighted-source.tsx",
+    "./hover-card": "./src/components/ui/hover-card.tsx",
+    "./image-field": "./src/components/ui/image-field.tsx",
+    "./input": "./src/components/ui/input.tsx",
+    "./input-group": "./src/components/ui/input-group.tsx",
+    "./input-otp": "./src/components/ui/input-otp.tsx",
+    "./item": "./src/components/ui/item.tsx",
+    "./kbd": "./src/components/ui/kbd.tsx",
+    "./kind-icon": "./src/kind-icon.ts",
+    "./label": "./src/components/ui/label.tsx",
+    "./marker": "./src/components/ui/marker.tsx",
+    "./menubar": "./src/components/ui/menubar.tsx",
+    "./message": "./src/components/ui/message.tsx",
+    "./message-scroller": "./src/components/ui/message-scroller.tsx",
+    "./moloo-logo": "./src/components/ui/moloo-logo.tsx",
+    "./native-select": "./src/components/ui/native-select.tsx",
+    "./navigation-menu": "./src/components/ui/navigation-menu.tsx",
+    "./outline-list": "./src/components/ui/outline-list.tsx",
+    "./pagination": "./src/components/ui/pagination.tsx",
+    "./panel": "./src/components/ui/panel.tsx",
+    "./popover": "./src/components/ui/popover.tsx",
+    "./progress": "./src/components/ui/progress.tsx",
+    "./radio-group": "./src/components/ui/radio-group.tsx",
+    "./resizable": "./src/components/ui/resizable.tsx",
+    "./scroll-area": "./src/components/ui/scroll-area.tsx",
+    "./select": "./src/components/ui/select.tsx",
+    "./separator": "./src/components/ui/separator.tsx",
+    "./sheet": "./src/components/ui/sheet.tsx",
+    "./sidebar": "./src/components/ui/sidebar.tsx",
+    "./skeleton": "./src/components/ui/skeleton.tsx",
+    "./slider": "./src/components/ui/slider.tsx",
+    "./spinner": "./src/components/ui/spinner.tsx",
+    "./switch": "./src/components/ui/switch.tsx",
+    "./table": "./src/components/ui/table.tsx",
+    "./tabs": "./src/components/ui/tabs.tsx",
+    "./tag-list-input": "./src/components/ui/tag-list-input.tsx",
+    "./textarea": "./src/components/ui/textarea.tsx",
+    "./timeline": "./src/components/ui/timeline.tsx",
+    "./toast": "./src/components/ui/toast.tsx",
+    "./toggle": "./src/components/ui/toggle.tsx",
+    "./toggle-group": "./src/components/ui/toggle-group.tsx",
+    "./tooltip": "./src/components/ui/tooltip.tsx",
+    "./list-selection": "./src/lib/list-selection.ts",
+    "./kind-icon-static": "./src/components/ui/kind-icon-static.ts"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@shadcn/react": "^0.2.1",
+    "@tabler/icons-react": "^3.46.0",
+    "@tanstack/react-table": "^9.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.12.4",
+    "recharts": "3.8.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/node": "^4.3.3",
+    "@types/jsdom": "30.0.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "jsdom": "30.1.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "shadcn": "^4.21.0",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.13",
+    "typescript": "^7.0.2",
+    "@moloodev/platform": "0.2.0",
+    "@moloodev/typescript-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "registry",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "tsx --test 'src/**/*.test.ts' 'src/**/*.test.tsx'",
+    "registry:build": "tsx scripts/build-registry.ts"
+  }
 }

package/registry/components.ts

@@ -0,0 +1,135 @@
+export const CATEGORIES = [
+  "Forms & Inputs",
+  "Layout & Structure",
+  "Navigation",
+  "Overlays",
+  "Feedback & Status",
+  "Data Display",
+] as const
+
+export type ComponentCategory = (typeof CATEGORIES)[number]
+
+export type ComponentMeta = {
+  slug: string
+  title: string
+  description: string
+  category: ComponentCategory
+  /** Style-only docs page (utility classes, no installable component). */
+  styleOnly?: boolean
+  /** Intro note shown on a style-only page in place of installation. */
+  styleNote?: string
+}
+
+export const components: ComponentMeta[] = [
+  // Forms & Inputs
+  { slug: "button", title: "Button", description: "Displays a button or a component that looks like a button.", category: "Forms & Inputs" },
+  { slug: "button-group", title: "Button Group", description: "Groups related buttons together with consistent styling.", category: "Forms & Inputs" },
+  { slug: "input", title: "Input", description: "A text input for forms and user data entry.", category: "Forms & Inputs" },
+  { slug: "input-group", title: "Input Group", description: "Add addons, buttons, and helper content to inputs.", category: "Forms & Inputs" },
+  { slug: "input-otp", title: "Input OTP", description: "Accessible one-time password component with copy-paste.", category: "Forms & Inputs" },
+  { slug: "textarea", title: "Textarea", description: "A form textarea or a component that looks like one.", category: "Forms & Inputs" },
+  { slug: "highlighted-source", title: "Highlighted Source", description: "An editable source field with a syntax-highlighted overlay.", category: "Forms & Inputs" },
+  { slug: "tag-list-input", title: "Tag List Input", description: "An input that edits a list of strings.", category: "Forms & Inputs" },
+  { slug: "label", title: "Label", description: "An accessible label associated with controls.", category: "Forms & Inputs" },
+  { slug: "checkbox", title: "Checkbox", description: "A control that toggles between checked and not checked.", category: "Forms & Inputs" },
+  { slug: "radio-group", title: "Radio Group", description: "A set of checkable buttons where only one can be checked.", category: "Forms & Inputs" },
+  { slug: "switch", title: "Switch", description: "A control that toggles between checked and not checked.", category: "Forms & Inputs" },
+  { slug: "slider", title: "Slider", description: "An input where the user selects a value from a range.", category: "Forms & Inputs" },
+  { slug: "select", title: "Select", description: "Displays a list of options for the user to pick from.", category: "Forms & Inputs" },
+  { slug: "native-select", title: "Native Select", description: "A styled native HTML select element.", category: "Forms & Inputs" },
+  { slug: "combobox", title: "Combobox", description: "Autocomplete input with a list of suggestions.", category: "Forms & Inputs" },
+  { slug: "toggle", title: "Toggle", description: "A two-state button that can be either on or off.", category: "Forms & Inputs" },
+  { slug: "toggle-group", title: "Toggle Group", description: "A set of two-state buttons that can be toggled on or off.", category: "Forms & Inputs" },
+  { slug: "field", title: "Field", description: "Compose accessible form fields and grouped inputs.", category: "Forms & Inputs" },
+  { slug: "form", title: "Form", description: "Compose accessible forms from Form, Field, Input, and control primitives.", category: "Forms & Inputs" },
+  { slug: "calendar", title: "Calendar", description: "A date field component that allows selecting dates.", category: "Forms & Inputs" },
+  { slug: "date-picker", title: "Date Picker", description: "A date picker built from a popover and calendar.", category: "Forms & Inputs" },
+  { slug: "dropzone", title: "Dropzone", description: "A file drop area with drag-and-drop and click-to-select.", category: "Forms & Inputs" },
+  { slug: "image-field", title: "Image Field", description: "Pick, crop, and apply one image.", category: "Forms & Inputs" },
+
+  // Layout & Structure
+  { slug: "card", title: "Card", description: "Displays a card with header, content, and footer.", category: "Layout & Structure" },
+  { slug: "panel", title: "Panel", description: "A labeled region with a fixed header and a scrolling body.", category: "Layout & Structure" },
+  { slug: "aspect-ratio", title: "Aspect Ratio", description: "Displays content within a desired ratio.", category: "Layout & Structure" },
+  { slug: "separator", title: "Separator", description: "Visually or semantically separates content.", category: "Layout & Structure" },
+  { slug: "scroll-area", title: "Scroll Area", description: "Augments native scroll for custom, cross-browser styling.", category: "Layout & Structure" },
+  { slug: "table", title: "Table", description: "A responsive table component.", category: "Layout & Structure" },
+  { slug: "item", title: "Item", description: "Display content with media, title, description, and actions.", category: "Layout & Structure" },
+  { slug: "carousel", title: "Carousel", description: "A carousel with motion and swipe built using Embla.", category: "Layout & Structure" },
+  { slug: "resizable", title: "Resizable", description: "Accessible resizable panel groups and layouts.", category: "Layout & Structure" },
+
+  // Navigation
+  { slug: "breadcrumb", title: "Breadcrumb", description: "Displays the path to the current resource.", category: "Navigation" },
+  { slug: "navigation-menu", title: "Navigation Menu", description: "A collection of links for navigating websites.", category: "Navigation" },
+  { slug: "menubar", title: "Menubar", description: "A persistent menu providing quick access to commands.", category: "Navigation" },
+  { slug: "pagination", title: "Pagination", description: "Pagination with page navigation, next and previous links.", category: "Navigation" },
+  { slug: "tabs", title: "Tabs", description: "Layered sections of content displayed one at a time.", category: "Navigation" },
+  { slug: "sidebar", title: "Sidebar", description: "A composable, themeable and customizable sidebar.", category: "Navigation" },
+
+  // Overlays
+  { slug: "dialog", title: "Dialog", description: "A window overlaid on the primary window.", category: "Overlays" },
+  { slug: "alert-dialog", title: "Alert Dialog", description: "A modal dialog that interrupts with important content.", category: "Overlays" },
+  { slug: "sheet", title: "Sheet", description: "Extends Dialog to display complementary content.", category: "Overlays" },
+  { slug: "drawer", title: "Drawer", description: "A drawer component for React.", category: "Overlays" },
+  { slug: "popover", title: "Popover", description: "Displays rich content in a portal, triggered by a button.", category: "Overlays" },
+  { slug: "hover-card", title: "Hover Card", description: "Preview content available behind a link.", category: "Overlays" },
+  { slug: "tooltip", title: "Tooltip", description: "A popup that displays information related to an element.", category: "Overlays" },
+  { slug: "dropdown-menu", title: "Dropdown Menu", description: "Displays a menu triggered by a button.", category: "Overlays" },
+  { slug: "context-menu", title: "Context Menu", description: "Displays a menu of actions triggered by a right click.", category: "Overlays" },
+  { slug: "command", title: "Command", description: "Command menu for search and quick actions.", category: "Overlays" },
+
+  // Feedback & Status
+  { slug: "alert", title: "Alert", description: "Displays a callout for user attention.", category: "Feedback & Status" },
+  { slug: "badge", title: "Badge", description: "Displays a badge or a component that looks like one.", category: "Feedback & Status" },
+  { slug: "progress", title: "Progress", description: "An indicator showing the completion progress of a task.", category: "Feedback & Status" },
+  { slug: "skeleton", title: "Skeleton", description: "Show a placeholder while content is loading.", category: "Feedback & Status" },
+  { slug: "spinner", title: "Spinner", description: "An indicator that shows a loading state.", category: "Feedback & Status" },
+  { slug: "toast", title: "Toast", description: "Toast notifications built on Base UI Toast.", category: "Feedback & Status" },
+  { slug: "empty", title: "Empty", description: "Display an empty state.", category: "Feedback & Status" },
+
+  // Data Display
+  { slug: "avatar", title: "Avatar", description: "An image element with a fallback for representing a user.", category: "Data Display" },
+  { slug: "accordion", title: "Accordion", description: "A stacked set of headings that reveal a section of content.", category: "Data Display" },
+  { slug: "collapsible", title: "Collapsible", description: "An interactive component that expands and collapses a panel.", category: "Data Display" },
+  { slug: "kbd", title: "Kbd", description: "Display textual user input from a keyboard.", category: "Data Display" },
+  { slug: "kind-icon", title: "Kind Icon", description: "Lazily loads any Tabler icon by kebab-case name for asset kinds.", category: "Data Display" },
+  { slug: "kind-mark", title: "Kind Mark", description: "Coloured kind tile with a Tabler glyph. Props match platform kind values.", category: "Data Display" },
+  { slug: "chart", title: "Chart", description: "Charts built with Recharts in the moloo palette.", category: "Data Display" },
+  { slug: "data-table", title: "Data Table", description: "Headless table from TanStack Table createTableHook, with sorting, row selection, and pagination.", category: "Data Display" },
+  { slug: "bubble", title: "Bubble", description: "Chat bubble content with variants for messages.", category: "Data Display" },
+  { slug: "message", title: "Message", description: "Compose chat messages with alignment and metadata.", category: "Data Display" },
+  { slug: "message-scroller", title: "Message Scroller", description: "Scroll container helpers for chat threads.", category: "Data Display" },
+  { slug: "attachment", title: "Attachment", description: "File and media attachment chips for chat inputs.", category: "Data Display" },
+  { slug: "marker", title: "Marker", description: "Inline marker / highlight for composed content.", category: "Data Display" },
+  { slug: "outline-list", title: "Outline List", description: "A flat list of labeled rows, indented by level.", category: "Data Display" },
+  { slug: "timeline", title: "Timeline", description: "A vertical list of events along a rail.", category: "Data Display" },
+  { slug: "moloo-logo", title: "Moloo Logo", description: "The moloo mark. Three primary tiles and one tilted accent tile.", category: "Data Display" },
+]
+
+export const componentsBySlug: Record<string, ComponentMeta> = Object.fromEntries(
+  components.map((c) => [c.slug, c])
+)
+
+export type ComponentGroup = {
+  category: ComponentCategory
+  items: readonly ComponentMeta[]
+}
+
+export function componentsByCategory(): readonly ComponentGroup[] {
+  return CATEGORIES.flatMap((category) => {
+    const items = components
+      .filter((component) => component.category === category)
+      .sort((a, b) => a.title.localeCompare(b.title, "en"))
+    return items.length === 0 ? [] : [{ category, items }]
+  })
+}
+
+export function categoryAnchorId(category: ComponentCategory): string {
+  return category
+    .toLowerCase()
+    .replaceAll("&", "")
+    .replaceAll(/[^a-z0-9]+/g, "-")
+    .replaceAll(/^-|-$/g, "")
+}
+
+export const REGISTRY_BASE_URL = "https://ui.moloo.dev"

package/registry/fonts.css

@@ -0,0 +1,81 @@
+/* Wanted Sans + SUIT (SIL OFL 1.1).
+ * Faces are served from the moloo registry host. For offline use, copy
+ * public/fonts/{wanted,suit}/*.woff2 into your app and point these URLs at
+ * /fonts/... instead. License texts: /fonts/wanted/OFL.txt, /fonts/suit/OFL.txt
+ */
+@font-face {
+  font-family: "WantedSans";
+  src: url("https://ui.moloo.dev/fonts/wanted/WantedSans-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "WantedSans";
+  src: url("https://ui.moloo.dev/fonts/wanted/WantedSans-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "WantedSans";
+  src: url("https://ui.moloo.dev/fonts/wanted/WantedSans-SemiBold.woff2")
+    format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "WantedSans";
+  src: url("https://ui.moloo.dev/fonts/wanted/WantedSans-Bold.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "WantedSans";
+  src: url("https://ui.moloo.dev/fonts/wanted/WantedSans-ExtraBold.woff2")
+    format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SUIT";
+  src: url("https://ui.moloo.dev/fonts/suit/SUIT-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SUIT";
+  src: url("https://ui.moloo.dev/fonts/suit/SUIT-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SUIT";
+  src: url("https://ui.moloo.dev/fonts/suit/SUIT-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SUIT";
+  src: url("https://ui.moloo.dev/fonts/suit/SUIT-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SUIT";
+  src: url("https://ui.moloo.dev/fonts/suit/SUIT-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}

package/registry/suit-OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2022, SUNN (http://sun.fo/suit),
+with Reserved Font Name SUIT.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/registry/wanted-sans-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Wanted Sans Project Authors (https://github.com/wanteddev/wanted-sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/components/ui/accordion.tsx

@@ -0,0 +1,74 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "../../lib/utils"
+import { IconChevronDown } from "@tabler/icons-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "moloo-focus group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border-2 border-transparent py-2.5 text-left font-display text-sm font-bold tracking-[-0.02em] transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <IconChevronDown
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }