@juxtui/ui 0.3.0 → 0.4.0

package/README.md

@@ -1,62 +1,63 @@
-# juxt
-
-**Thoughtfully crafted components for Nuxt & Vue.**
-
-Juxt is a small component library that cares about the details you feel but rarely notice: how far a menu travels when it opens, where focus goes when a dialog closes, whether a loading button changes width, what happens when you press Escape with a select open inside a dialog.
-
-It is Multiple components, one token system and one motion language. It's mostly grayscale, and the green `#079D6B` is kept for state.
-
-```vue
-<JButton>
-  Save changes
-</JButton>
-```
-
-## Installation
-
-```bash
-pnpm add @juxtui/ui
-```
-
-**Nuxt**: add the module. Components, composables and styles are wired up for you.
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@juxtui/ui/nuxt'],
-})
-```
-
-**Vue**: import the stylesheet once, then import what you use.
-
-```ts
-import '@juxtui/ui/style.css'
-import { JButton, toast } from '@juxtui/ui'
-```
-
-Using Tailwind CSS v4? `@import '@juxtui/ui/tailwind.css'` maps the tokens onto utilities (`bg-surface`, `text-fg-muted`, `rounded-md`, `duration-fast`, …). Juxt's styles live in a `juxt` cascade layer, so your own classes always win.
-
-## Components
-
-| | |
-| --- | --- |
-| **Actions** | Button |
-| **Forms** | Input · Textarea · Checkbox · Switch · Select |
-| **Overlays** | Dialog · Dropdown Menu · Tooltip · Command Palette |
-| **Feedback** | Toast · Badge |
-| **Display** | Avatar · Card |
-| **Navigation** | Tabs |
-
-Each one supports light and dark themes, full keyboard use, reduced motion and SSR. Its docs page lists the keys it handles and the ARIA it exposes.
-
-## Design philosophy
-
-- **Quiet until it matters.** The interface is grayscale, and green marks state: focus, checked, success, where you are. Primary buttons use ink, not green.
-- **Motion is feedback.** There are four durations (80–240ms) and three curves, and only `transform` and `opacity` animate. Entrances are slower than exits. With reduced motion, things still fade but don't move.
-- **Accessible by construction.** Overlays trap focus, restore it when they close, and stack correctly: Escape and outside clicks go to the top-most layer only.
-- **Small APIs.** Props are named after what they do, and anything that holds state has a `v-model`. If you know one component, you know the rest.
-- **Tokens all the way down.** Colour, type, space, radius, elevation, motion and layering are CSS custom properties. Change `--juxt-accent` and the whole system follows.
-
-## License
-
-MIT
+# juxt.ui
+
+**Thoughtfully crafted components for Nuxt & Vue.**
+
+juxt.ui is a small component library that cares about the details you feel but rarely notice: how far a menu travels when it opens, where focus goes when a dialog closes, whether a loading button changes width, what happens when you press Escape with a select open inside a dialog.
+
+It is Multiple components, one token system and one motion language. It's mostly grayscale, and the green `#079D6B` is kept for state.
+
+```vue
+<JButton>
+  Save changes
+</JButton>
+```
+
+## Installation
+
+```bash
+pnpm add @juxtui/ui
+```
+
+**Nuxt**: add the module. Components, composables and styles are wired up for you.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@juxtui/ui/nuxt'],
+})
+```
+
+**Vue**: import the stylesheet once, then import what you use.
+
+```ts
+import '@juxtui/ui/style.css'
+import { JButton, toast } from '@juxtui/ui'
+```
+
+Using Tailwind CSS v4? `@import '@juxtui/ui/tailwind.css'` maps the tokens onto utilities (`bg-surface`, `text-fg-muted`, `rounded-md`, `duration-fast`, …). juxt.ui's styles live in a `juxt` cascade layer, so your own classes always win.
+
+## Components
+
+| | |
+| --- | --- |
+| **Actions** | Button |
+| **Forms** | Input · Textarea · Checkbox · Switch · Select |
+| **Overlays** | Dialog · Dropdown Menu · Tooltip · Command Palette |
+| **Feedback** | Toast · Badge |
+| **Display** | Avatar · Card |
+| **Navigation** | Tabs |
+| **Layout** | Navbar · Burger · Footer · Sidebar |
+
+Each one supports light and dark themes, full keyboard use, reduced motion and SSR. Its docs page lists the keys it handles and the ARIA it exposes.
+
+## Design philosophy
+
+- **Quiet until it matters.** The interface is grayscale, and green marks state: focus, checked, success, where you are. Primary buttons use ink, not green.
+- **Motion is feedback.** There are four durations (80–240ms) and three curves, and only `transform` and `opacity` animate. Entrances are slower than exits. With reduced motion, things still fade but don't move.
+- **Accessible by construction.** Overlays trap focus, restore it when they close, and stack correctly: Escape and outside clicks go to the top-most layer only.
+- **Small APIs.** Props are named after what they do, and anything that holds state has a `v-model`. If you know one component, you know the rest.
+- **Tokens all the way down.** Colour, type, space, radius, elevation, motion and layering are CSS custom properties. Change `--juxt-accent` and the whole system follows.
+
+## License
+
+MIT

package/dist/components/burger/JBurger.vue.d.ts

@@ -0,0 +1,25 @@
+export interface BurgerProps {
+    /** Accessible name while closed. */
+    openLabel?: string;
+    /** Accessible name while open. */
+    closeLabel?: string;
+    size?: 'sm' | 'md';
+    /** Id of the element this button shows and hides. */
+    controls?: string;
+}
+type __VLS_Props = BurgerProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    openLabel: string;
+    closeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/footer/JFooter.vue.d.ts

@@ -0,0 +1,26 @@
+export interface FooterProps {
+    /** Maximum content width; any CSS length. `none` spans the full width. */
+    maxWidth?: string;
+    /** Hairline above the footer. */
+    bordered?: boolean;
+}
+type __VLS_Slots = {
+    /** Logo and a short line about the product. */
+    brand?: () => unknown;
+    /** Link columns, typically `JFooterColumn`s. */
+    default?: () => unknown;
+    /** The last line: copyright, legal links, social icons. */
+    bottom?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    maxWidth: string;
+    bordered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/footer/JFooterColumn.vue.d.ts

@@ -0,0 +1,15 @@
+export interface FooterColumnProps {
+    title: string;
+}
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<FooterColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterColumnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navbar/JNavbar.vue.d.ts

@@ -0,0 +1,47 @@
+export interface NavbarProps {
+    /** Stick to the top of the viewport while scrolling. */
+    sticky?: boolean;
+    /** Hairline under the bar. */
+    bordered?: boolean;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** Width below which links collapse behind the burger. `never` keeps them inline. */
+    collapse?: 'sm' | 'md' | 'lg' | 'never';
+    /** Maximum content width; any CSS length. `none` spans the full width. */
+    maxWidth?: string;
+}
+type __VLS_Props = NavbarProps;
+type __VLS_Slots = {
+    /** Logo or product name, usually a link home. */
+    brand?: () => unknown;
+    /** Navigation links, typically `JNavbarLink`s. Shown inline, or in the mobile menu. */
+    default?: () => unknown;
+    /** Always visible on the right: search, theme switch, avatar. */
+    actions?: () => unknown;
+    /** Extra content at the bottom of the mobile menu, e.g. sign-in buttons. */
+    'menu-footer'?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Mobile menu state. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    sticky: boolean;
+    maxWidth: string;
+    bordered: boolean;
+    collapse: "sm" | "md" | "lg" | "never";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navbar/JNavbarLink.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+export interface NavbarLinkProps {
+    /** Marks the current page: styled and announced with `aria-current="page"`. */
+    active?: boolean;
+    /** Render as another element or component, e.g. `NuxtLink` or `RouterLink`. */
+    as?: string | Component;
+}
+type __VLS_Slots = {
+    default?: () => unknown;
+    leading?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<NavbarLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarLinkProps> & Readonly<{}>, {
+    as: string | Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/sidebar/JSidebar.vue.d.ts

@@ -0,0 +1,23 @@
+export interface SidebarProps {
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+}
+type __VLS_Slots = {
+    /** Top of the sidebar: logo, workspace switcher. */
+    header?: () => unknown;
+    /** Items and groups. */
+    default?: () => unknown;
+    /** Pinned to the bottom: account, settings, help. */
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<SidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/sidebar/JSidebarGroup.vue.d.ts

@@ -0,0 +1,29 @@
+export interface SidebarGroupProps {
+    title?: string;
+    /** Let the title fold the group away. */
+    collapsible?: boolean;
+}
+type __VLS_Props = SidebarGroupProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the group is expanded. Open by default. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/sidebar/JSidebarItem.vue.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'vue';
+export interface SidebarItemProps {
+    /** Marks the current page: styled and announced with `aria-current="page"`. */
+    active?: boolean;
+    disabled?: boolean;
+    /** Render as another element or component, e.g. `NuxtLink`. */
+    as?: string | Component;
+}
+type __VLS_Slots = {
+    default?: () => unknown;
+    /** Icon before the label. */
+    leading?: () => unknown;
+    /** After the label: a count, badge or shortcut. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<SidebarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarItemProps> & Readonly<{}>, {
+    as: string | Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components.d.ts

@@ -7,6 +7,7 @@ export { default as JAvatarGroup } from './components/avatar-group/JAvatarGroup.
 export { default as JBadge } from './components/badge/JBadge.vue';
 export { default as JBanner } from './components/banner/JBanner.vue';
 export { default as JBreadcrumb } from './components/breadcrumb/JBreadcrumb.vue';
+export { default as JBurger } from './components/burger/JBurger.vue';
 export { default as JButton } from './components/button/JButton.vue';
 export { default as JCard } from './components/card/JCard.vue';
 export { default as JCheckbox } from './components/checkbox/JCheckbox.vue';
@@ -19,8 +20,12 @@ export { default as JDropdownMenuLabel } from './components/dropdown-menu/JDropd
 export { default as JDropdownMenuSeparator } from './components/dropdown-menu/JDropdownMenuSeparator.vue';
 export { default as JDropdownMenuSub } from './components/dropdown-menu/JDropdownMenuSub.vue';
 export { default as JEmptyState } from './components/empty-state/JEmptyState.vue';
+export { default as JFooter } from './components/footer/JFooter.vue';
+export { default as JFooterColumn } from './components/footer/JFooterColumn.vue';
 export { default as JInput } from './components/input/JInput.vue';
 export { default as JKbd } from './components/kbd/JKbd.vue';
+export { default as JNavbar } from './components/navbar/JNavbar.vue';
+export { default as JNavbarLink } from './components/navbar/JNavbarLink.vue';
 export { default as JPagination } from './components/pagination/JPagination.vue';
 export { default as JPopover } from './components/popover/JPopover.vue';
 export { default as JProgress } from './components/progress/JProgress.vue';
@@ -30,6 +35,9 @@ export { default as JRating } from './components/rating/JRating.vue';
 export { default as JSelect } from './components/select/JSelect.vue';
 export { default as JSeparator } from './components/separator/JSeparator.vue';
 export { default as JSheet } from './components/sheet/JSheet.vue';
+export { default as JSidebar } from './components/sidebar/JSidebar.vue';
+export { default as JSidebarGroup } from './components/sidebar/JSidebarGroup.vue';
+export { default as JSidebarItem } from './components/sidebar/JSidebarItem.vue';
 export { default as JSkeleton } from './components/skeleton/JSkeleton.vue';
 export { default as JSlider } from './components/slider/JSlider.vue';
 export { default as JSpinner } from './components/spinner/JSpinner.vue';

package/dist/index.d.ts

@@ -1,5 +1,13 @@
 import './styles/index.css';
 export * from './components';
+export type { BurgerProps } from './components/burger/JBurger.vue';
+export type { FooterProps } from './components/footer/JFooter.vue';
+export type { FooterColumnProps } from './components/footer/JFooterColumn.vue';
+export type { NavbarProps } from './components/navbar/JNavbar.vue';
+export type { NavbarLinkProps } from './components/navbar/JNavbarLink.vue';
+export type { SidebarProps } from './components/sidebar/JSidebar.vue';
+export type { SidebarGroupProps } from './components/sidebar/JSidebarGroup.vue';
+export type { SidebarItemProps } from './components/sidebar/JSidebarItem.vue';
 export type { AccordionProps } from './components/accordion/JAccordion.vue';
 export type { AccordionItemProps } from './components/accordion/JAccordionItem.vue';
 export type { AlertProps, AlertVariant } from './components/alert/JAlert.vue';