@want-foundation/allure-react 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrey Krasheninnikov
+
+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.

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# @want-foundation/allure-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React 19 components built on Radix. Install @want-foundation/allure at the same release version and import its stylesheet once. React and React DOM are peer dependencies.
+
+Public exports include the UI primitives, BrandLogo, BrandLockup, MediaCard, ContactCard, ThemeToggle, CommentFeed, DateField, UrlField, OpenUrl and Window. Product data, labels, URLs and action callbacks belong to the consumer.
+
+DateField uses controlled local date strings and consumer-provided locale and labels. UrlField validates its open link as HTTP(S). Window provides a page heading and content slots without application data.
+
+See the repository README for usage, compatibility and release instructions.
+
+CommentItem.createdAt accepts { dateTime, label }. Supply an ISO timestamp and a localized display label from the consumer. The component preserves that text during SSR and hydration.
+
+Additional exports are Checkbox, DropdownMenu, Toast, Tooltip, Combobox, Popover, Table, Pagination, FileUpload and Progress. Menu, toast, tooltip, popover and table families expose their composition parts. Import the foundation stylesheet once for all component styles and motion.
+
+Combobox accepts options with value, label and optional disabled, plus a controlled value and onValueChange. Supply label and emptyLabel. Typing filters options; arrows navigate enabled options, Enter selects, and Escape restores the current value. An optional name adds the selected value to native form data.
+
+Pagination receives page, pageSize and totalItems. Its onChange(page, pageSize) callback reports navigation; changing page size resets the page to 1. Supply navigation, previous, next, pageSize, page(page) and results(from, to, total) labels. Empty results show page 1 with disabled navigation.
+
+FileUpload receives files and onFilesChange, with optional accept, multiple, maxSize in bytes, maxFiles and disabled. Supply label and choose, drop, remove(name), invalidType(name), tooLarge(name, maxSize) and tooMany(maxFiles) labels. Invalid batches leave the current selection intact. Image previews release their object URLs when removed. Use the selected File objects for uploads in the consumer; the component does not submit a native file input or send network requests.
+
+Progress requires a label and accepts value and max. A null value shows indeterminate progress. Table preserves native table semantics, caption and aria-busy; compose loading and empty rows with TableCell colSpan. ToastProvider and ToastViewport accept localized accessibility labels; ToastAction requires descriptive altText.
+
+Typography exposes display, h1 through h6, lead, body, small, caption, label, overline, mono, code, code-block and quote variants. Its default HTML element follows the variant; as may override the element while keeping its visual style. tone and align use semantic colors and logical alignment. Prose styles native headings, paragraphs, lists, links, emphasis, quotes and code within a readable measure. Foundation tokens contain the responsive sizes, weights, leading and tracking. Sizes use rem and fluid viewport interpolation; locale fonts remain active.
+
+Loader variants are spinner, dots, bars and orbit; sizes are sm, md and lg. Shimmer variants are block, text, avatar and card. Supply a localized label to each status component. Their paused prop stops repeated motion.
+
+AnimatedText takes text and an optional fade, slide or blur effect. It animates a new value without timers or retained outgoing text. Set aria-live explicitly when the change needs an announcement.
+
+Glow is a decorative, non-interactive background layer. Place it directly inside an element with className="glow-host"; the layer inherits the host radius. Use the normal style color or a text-color utility to change its hue. Two expanding waves run over a broad ambient halo, with a 3.6-second cycle and a 1.8-second offset. paused stops both waves. Expose a pause control for persistent decorative motion, and pause inactive surfaces. Reduced transparency preserves the waves. Reduced motion keeps a static glow; forced colors hide it.
+
+Snackbar composes the existing Toast primitives. Supply variant (error, warning, info or success), a localized variantLabel, title and closeLabel; description and an action with label, altText and onClick are optional. Error messages remain until dismissed by default; other variants last 5 seconds. duration may override this. SnackbarProvider supplies the notification label; SnackbarViewport supplies the viewport label and supports placement through --snackbar-bottom. Pointer hover and keyboard focus pause timed messages. The surface follows the current theme, while the status icon plate uses the same accent in both themes. Desktop actions sit beside the content and move below it on narrow screens. The consumer owns open, onOpenChange and action effects. Importing the foundation stylesheet includes all visual styles and reduced-motion fallbacks. Use status-text tokens for inline colored text; status-foreground tokens are ink for the bright status surfaces.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,5 @@
+# Third-party notices
+
+UI component sources derive from Want Wallpapers under the MIT license. Copyright (c) 2026 Andrey Krasheninnikov. Radix and the shadcn component patterns retain their upstream licenses through their packages.
+
+Manrope, Days One, Noto Sans JP and Noto Sans Arabic are distributed under their original font licenses. The foundation package includes the complete font license texts in dist/licenses. Imported fonts and logos keep their own notices; the repository MIT license does not replace those notices.

package/dist/animated-text.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+export type AnimatedTextProps = Omit<ComponentProps<'span'>, 'children'> & {
+    text: string;
+    effect?: 'fade' | 'slide' | 'blur';
+};
+export declare function AnimatedText({ text, effect, className, ...props }: AnimatedTextProps): import("react").JSX.Element;

package/dist/brand.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+export type BrandLogoProps = ComponentProps<'img'> & {
+    src: string;
+    alt: string;
+};
+export declare function BrandLogo({ className, width, height, ...props }: BrandLogoProps): import("react").JSX.Element;
+export type BrandLockupProps = Omit<ComponentProps<'a'>, 'children'> & {
+    name: string;
+    logoSrc: string;
+    subtitle?: string;
+};
+export declare function BrandLockup({ name, logoSrc, subtitle, className, ...props }: BrandLockupProps): import("react").JSX.Element;

package/dist/carousel-scroll.d.ts

@@ -0,0 +1,6 @@
+export declare function carouselScroll(element: HTMLElement): {
+    sign: number;
+    max: number;
+    offset: number;
+};
+export declare function scrollCarousel(element: HTMLElement, offset: number): void;

package/dist/combobox.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = {
+    label: ReactNode;
+    options: ComboboxOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    emptyLabel: string;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function Combobox({ label, options, value, onValueChange, emptyLabel, placeholder, id, name, disabled, required, className }: ComboboxProps): import("react").JSX.Element;

package/dist/comment-feed.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType, type SVGProps } from 'react';
+export type CommentAction = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+};
+export type CommentItem = {
+    id: string;
+    author: string;
+    text: string;
+    own?: boolean;
+    createdAt?: {
+        dateTime: string;
+        label: string;
+    };
+    actions?: CommentAction[];
+};
+export type CommentFeedProps = {
+    comments: CommentItem[];
+    busy?: boolean;
+    labels: {
+        title: string;
+        empty: string;
+        previous: string;
+        next: string;
+        readMore: string;
+        collapse: string;
+    };
+    onAction: (commentId: string, actionId: string) => void;
+};
+export declare function CommentFeed({ comments, labels, busy, onAction }: CommentFeedProps): import("react").JSX.Element;

package/dist/contact-card.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentType, SVGProps } from 'react';
+export type ContactAction = {
+    title: string;
+    detail?: string;
+    href: string;
+    label?: string;
+    external?: boolean;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+};
+export type ContactCardProps = ComponentProps<'div'> & {
+    name: string;
+    subtitle?: string;
+    actions: ContactAction[];
+};
+export declare function ContactCard({ name, subtitle, actions, className, ...props }: ContactCardProps): import("react").JSX.Element;

package/dist/date-field.d.ts

@@ -0,0 +1,28 @@
+export type DateFieldLabels = {
+    date: string;
+    datetime: string;
+    calendar: string;
+    year: string;
+    previousYear: string;
+    previousMonth: string;
+    nextMonth: string;
+    nextYear: string;
+    hours: string;
+    minutes: string;
+    today: string;
+    clear: string;
+    apply: string;
+};
+export type DateFieldProps = {
+    mode: 'date' | 'datetime';
+    value: string;
+    onChange: (value: string) => void;
+    onCommit?: (value: string) => void;
+    labels: DateFieldLabels;
+    locale: string;
+    today?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function DateField({ mode, value, onChange, onCommit, labels, locale, today, ariaLabel, disabled, className }: DateFieldProps): import("react").JSX.Element;

package/dist/direction-provider.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+export type DirectionProviderProps = PropsWithChildren<{
+    dir: 'ltr' | 'rtl';
+}>;
+export declare const DirectionProvider: ComponentType<DirectionProviderProps>;

package/dist/file-upload.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export type FileUploadProps = {
+    label: ReactNode;
+    files: File[];
+    onFilesChange: (files: File[]) => void;
+    labels: {
+        choose: string;
+        drop: string;
+        remove: (name: string) => string;
+        invalidType: (name: string) => string;
+        tooLarge: (name: string, maxSize: number) => string;
+        tooMany: (maxFiles: number) => string;
+    };
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+};
+export declare function FileUpload({ label, files, onFilesChange, labels, accept, multiple, maxSize, maxFiles, disabled, id, className }: FileUploadProps): import("react").JSX.Element;

package/dist/glow.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+export type GlowProps = Omit<ComponentProps<'span'>, 'children'> & {
+    paused?: boolean;
+};
+export declare function Glow({ paused, className, ...props }: GlowProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+export * from './ui/accordion.js';
+export * from './ui/alert.js';
+export * from './ui/badge.js';
+export * from './ui/breadcrumb.js';
+export * from './ui/button.js';
+export * from './ui/card.js';
+export * from './ui/dialog.js';
+export * from './ui/field.js';
+export * from './ui/input.js';
+export * from './ui/label.js';
+export * from './ui/navigation-menu.js';
+export * from './ui/radio-group.js';
+export * from './ui/select.js';
+export * from './ui/separator.js';
+export * from './ui/sheet.js';
+export * from './ui/skeleton.js';
+export * from './ui/switch.js';
+export * from './ui/tabs.js';
+export * from './ui/textarea.js';
+export * from './brand.js';
+export * from './media-card.js';
+export * from './contact-card.js';
+export * from './theme-toggle.js';
+export * from './comment-feed.js';
+export * from './direction-provider.js';
+export * from './date-field.js';
+export * from './url-field.js';
+export * from './window.js';
+export * from './ui/checkbox.js';
+export * from './ui/dropdown-menu.js';
+export * from './ui/tooltip.js';
+export * from './ui/popover.js';
+export * from './ui/toast.js';
+export * from './ui/progress.js';
+export * from './ui/table.js';
+export * from './combobox.js';
+export * from './pagination.js';
+export * from './file-upload.js';
+export * from './typography.js';
+export * from './loader.js';
+export * from './shimmer.js';
+export * from './animated-text.js';
+export * from './glow.js';
+export * from './snackbar.js';