@still-forest/canopy 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Still Forest LLC
+
+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

@@ -0,0 +1,43 @@
+# Canopy
+
+_React components, built with Tailwind CSS, Shadcn, and VisX_
+
+[![codecov](https://codecov.io/gh/still-forest/canopy/branch/main/graph/badge.svg)](https://codecov.io/gh/v/canopy)
+
+**Resources**
+
+- [Github repo](https://github.com/still-forest/canopy)
+- Distribution
+  - [npm registry](https://www.npmjs.com/package/@still-forest/canopy)
+- Building blocks
+  - [TailwindCSS](https://tailwindcss.com/docs)
+  - [shadcn-ui](https://ui.shadcn.com/docs/)
+    - [color themes](https://ui.shadcn.com/colors)
+  - [Vite](https://vite.dev/guide/)
+  - [Vitest](https://vitest.dev/guide/)
+- Documentation via Storybook
+  - [Github Pages](https://still-forest.github.io/canopy/) - docs only
+- Development
+  - [CodeCov](https://app.codecov.io/gh/still-forest/canopy)
+  - [Renovate](https://developer.mend.io/github/still-forest/canopy)
+- Other documentation, documents
+  - [Changelog](./CHANGELOG.md)
+
+---
+
+## Usage
+
+### Installation
+
+When using Vite, Canopy must be included in your primary `.css` file in order to ensure the necessary CSS classes are included in the build. For more details, read the Tailwind CSS documentation on [explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources).
+
+Example `index.css`:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@still-forest/canopy/dist";
+
+@layer base {
+  /* your usual CSS definitions */
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,378 @@
+import { Bounds } from '@visx/brush/lib/types';
+import { ComponentProps } from 'react';
+import { default as default_2 } from 'react';
+import { default as default_3 } from '@jszymanowski/proper-date.js';
+import { JSX } from 'react/jsx-runtime';
+
+export declare const AreaChart: ({ data, opacity, margin, children, }: AreaChartProps) => JSX.Element;
+
+export declare interface AreaChartProps {
+    data: DataPoint[];
+    opacity?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    children?: default_2.ReactNode;
+}
+
+export declare const Box: default_2.ForwardRefExoticComponent<BoxProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const BOX_SIZINGS: readonly ["content", "border"];
+
+export declare interface BoxProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    as?: default_2.ElementType;
+    variant?: LayoutVariant;
+    size?: Size;
+    width?: Width;
+    height?: Height;
+    display?: Display;
+    sizing?: BoxSizing;
+    position?: Position;
+    overflow?: Overflow;
+    overflowX?: Overflow;
+    overflowY?: Overflow;
+    rounded?: RoundedSize;
+}
+
+declare type BoxSizing = (typeof BOX_SIZINGS)[number];
+
+export declare const Brush: ({ data, width, height, margin, onChange, }: BrushProps) => JSX.Element | null;
+
+export declare interface BrushProps {
+    data: DataPoint[];
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    onChange: (domain: Bounds | null) => void;
+}
+
+export declare const Button: ({ children, onClick, variant, size, icon, disabled, className, type, asChild, ...rest }: ButtonProps) => JSX.Element;
+
+export declare const ButtonGroup: {
+    ({ children, className }: ButtonGroupProps): JSX.Element;
+    Button({ children, className, ...props }: ButtonProps): JSX.Element;
+};
+
+export declare interface ButtonGroupProps {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface ButtonProps extends default_2.ComponentProps<"button"> {
+    children?: default_2.ReactNode;
+    onClick?: () => void;
+    variant?: "default" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "subtle";
+    size?: "default" | "xs" | "sm" | "md" | "lg";
+    icon?: default_2.ReactElement;
+    disabled?: boolean;
+    className?: string;
+    type?: "button" | "submit" | "reset";
+    asChild?: boolean;
+}
+
+declare interface DataPoint {
+    x: Date;
+    y: number;
+}
+
+declare type DataPoint_2 = {
+    date: default_3;
+    value: number;
+};
+
+declare interface DataPoint_3 {
+    x: Date;
+    yTotal: number;
+    ySeries: Serie[];
+}
+
+export declare const DeleteButton: ({ disabled, handleDelete, ...rest }: Props) => JSX.Element;
+
+declare type Display = (typeof DISPLAYS)[number];
+
+declare const DISPLAYS: readonly ["block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "inline-table", "list-item", "flow-root", "contents", "table", "table-header-group", "table-footer-group", "table-column-group", "table-column", "table-row-group", "table-row", "table-cell", "table-caption", "hidden", "sr-only", "not-sr-only"];
+
+export declare const Flex: default_2.ForwardRefExoticComponent<FlexProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const FLEX_ALIGNS: readonly ["start", "center", "end", "stretch", "baseline"];
+
+declare const FLEX_DIRECTIONS: readonly ["row", "col", "row-reverse", "col-reverse"];
+
+declare const FLEX_GROWS: readonly [null, true, false, "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+
+declare const FLEX_JUSTIFIES: readonly ["start", "center", "end", "between", "around", "evenly", "stretch", "baseline", "normal"];
+
+declare const FLEX_WRAPS: readonly ["nowrap", "wrap", "wrap-reverse"];
+
+declare type FlexAlign = (typeof FLEX_ALIGNS)[number];
+
+declare type FlexDirection = (typeof FLEX_DIRECTIONS)[number];
+
+declare type FlexGrow = (typeof FLEX_GROWS)[number];
+
+declare type FlexJustify = (typeof FLEX_JUSTIFIES)[number];
+
+export declare interface FlexProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    as?: default_2.ElementType;
+    direction?: FlexDirection;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    grow?: FlexGrow;
+    wrap?: FlexWrap;
+    gap?: Gap;
+    gapX?: Gap;
+    gapY?: Gap;
+}
+
+declare type FlexWrap = (typeof FLEX_WRAPS)[number];
+
+declare const FONT_FAMILIES: readonly ["display", "serif", "sans", "mono"];
+
+declare const FONT_SIZES: readonly ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"];
+
+declare const FONT_WEIGHTS: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];
+
+declare type FontFamily = (typeof FONT_FAMILIES)[number];
+
+declare type FontSize = (typeof FONT_SIZES)[number];
+
+declare type FontWeight = (typeof FONT_WEIGHTS)[number];
+
+declare type Gap = (typeof GAPS)[number];
+
+declare const GAPS: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"];
+
+export declare const Grid: default_2.ForwardRefExoticComponent<GridProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare const GRID_COLS: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
+
+declare const GRID_FLOWS: readonly ["row", "col", "dense", "row-dense", "col-dense"];
+
+declare const GRID_ROWS: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "none"];
+
+declare type GridCols = (typeof GRID_COLS)[number];
+
+declare type GridFlow = (typeof GRID_FLOWS)[number];
+
+export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    as?: default_2.ElementType;
+    cols?: GridCols;
+    rows?: GridRows;
+    flow?: GridFlow;
+    gap?: Gap;
+    gapX?: Gap;
+    gapY?: Gap;
+}
+
+declare type GridRows = (typeof GRID_ROWS)[number];
+
+export declare const Heading: default_2.ForwardRefExoticComponent<HeadingProps & default_2.RefAttributes<HTMLHeadingElement>>;
+
+declare const HEADING_LEVELS: readonly ["1", "2", "3", "4", "5", "6"];
+
+export declare interface HeadingProps extends default_2.HTMLAttributes<HTMLHeadingElement> {
+    level?: HeadingSize;
+    size?: FontSize;
+    weight?: FontWeight;
+    variant?: TypographyVariant;
+    align?: TextAlign;
+    leading?: TextLeading;
+    tracking?: TextTracking;
+    family?: FontFamily;
+    /**
+     * When true, apply *-foreground color classes for variants instead of regular color classes.
+     */
+    asForeground?: boolean;
+    truncate?: boolean;
+    numeric?: boolean;
+    className?: string;
+}
+
+declare type HeadingSize = (typeof HEADING_LEVELS)[number];
+
+declare type Height = (typeof HEIGHTS)[number];
+
+declare const HEIGHTS: readonly [...string[], "auto", "full", "min", "max", "fit", "px", "screen"];
+
+export declare const Label: ({ htmlFor, value, children, className, ...props }: LabelProps) => JSX.Element;
+
+export declare interface LabelProps extends ComponentProps<"label"> {
+    htmlFor?: string;
+    value?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+declare const LAYOUT_VARIANTS: readonly ["default", "primary", "secondary", "muted", "accent", "info", "success", "warning", "destructive"];
+
+declare type LayoutVariant = (typeof LAYOUT_VARIANTS)[number];
+
+export declare const LineChart: ({ data, label, margin }: LineChartProps) => JSX.Element;
+
+export declare type LineChartProps = {
+    data: DataPoint_2[];
+    label?: string;
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};
+
+/**
+ + * A specialized input component for numeric values.
+ + * Extends TextInput with number-specific functionality.
+ + */
+export declare const NumberInput: ({ name, label, placeholder, note, step, className, ...props }: NumberInputProps) => JSX.Element;
+
+export declare interface NumberInputProps extends Omit<TextInputProps, "type"> {
+    step?: string;
+}
+
+declare type Overflow = (typeof OVERFLOWS)[number];
+
+declare const OVERFLOWS: readonly ["auto", "scroll", "hidden", "clip", "visible"];
+
+declare type Position = (typeof POSITIONS)[number];
+
+declare const POSITIONS: readonly ["static", "fixed", "absolute", "relative", "sticky"];
+
+declare interface Props extends ButtonProps {
+    disabled?: boolean;
+    handleDelete: () => void;
+}
+
+declare interface Props_2 extends ButtonProps {
+    submitting?: boolean;
+    disabled?: boolean;
+    submittingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+declare const ROUNDED_SIZES: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "full", true, false];
+
+declare type RoundedSize = (typeof ROUNDED_SIZES)[number];
+
+export declare const SaveButton: ({ submitting, disabled, submittingIcon, ...rest }: Props_2) => JSX.Element;
+
+export declare const SelectPicker: ({ options, value, placeholder, className, onSelect, renderSelected, }: SelectPickerProps) => JSX.Element;
+
+export declare interface SelectPickerOption {
+    icon?: string;
+    value: string;
+    label: string;
+}
+
+export declare interface SelectPickerProps {
+    options: SelectPickerOption[];
+    onSelect: (selected: string) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    renderSelected?: (selected: SelectPickerOption) => React.ReactNode;
+}
+
+declare interface Serie {
+    key: string;
+    label: string;
+    y: number;
+}
+
+declare type Size = (typeof SIZES)[number];
+
+declare const SIZES: readonly [...string[], "auto", "full", "min", "max", "fit", "px"];
+
+export declare const StackedAreaChart: ({ margin, data, }: StackedAreaChartProps) => JSX.Element;
+
+export declare type StackedAreaChartProps = {
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    data: DataPoint_3[];
+};
+
+declare const Text_2: default_2.ForwardRefExoticComponent<Omit<any, "ref"> & default_2.RefAttributes<Element>>;
+export { Text_2 as Text }
+
+declare const TEXT_ALIGNS: readonly ["left", "center", "right", "justify", "start", "end"];
+
+declare const TEXT_LEADINGS: readonly ["none", "tight", "snug", "normal", "relaxed", "loose"];
+
+declare const TEXT_TRACKINGS: readonly ["tighter", "tight", "normal", "wide", "wider", "widest"];
+
+declare type TextAlign = (typeof TEXT_ALIGNS)[number];
+
+export declare function Textarea({ label, name, note, placeholder, className, ...props }: TextareaProps): JSX.Element;
+
+export declare interface TextareaProps extends React.ComponentProps<"textarea"> {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    note?: string;
+    className?: string;
+}
+
+declare interface TextBaseProps {
+    size?: FontSize;
+    weight?: FontWeight;
+    variant?: TypographyVariant;
+    align?: TextAlign;
+    leading?: TextLeading;
+    tracking?: TextTracking;
+    family?: FontFamily;
+    /**
+     * When true, apply *-foreground color classes for variants instead of regular color classes.
+     */
+    asForeground?: boolean;
+    truncate?: boolean;
+    numeric?: boolean;
+    className?: string;
+    as?: TypographyElement;
+}
+
+export declare const TextInput: ({ name, type, placeholder, label, labelOrientation, note, className, ...props }: TextInputProps) => JSX.Element;
+
+export declare interface TextInputProps extends React.ComponentProps<"input"> {
+    name: string;
+    type?: string;
+    placeholder?: string;
+    label?: string;
+    labelOrientation?: "top" | "left";
+    note?: string;
+    className?: string;
+}
+
+declare type TextLeading = (typeof TEXT_LEADINGS)[number];
+
+export declare type TextProps<E extends default_2.ElementType = "p"> = TextBaseProps & {
+    as?: E;
+} & default_2.ComponentPropsWithRef<E>;
+
+declare type TextTracking = (typeof TEXT_TRACKINGS)[number];
+
+declare const TYPOGRAPHY_ELEMENTS: readonly ["p", "span", "label", "div", "h1", "h2", "h3", "h4", "h5", "h6"];
+
+declare const TYPOGRAPHY_VARIANTS: readonly ["default", "inherit", "primary", "secondary", "muted", "accent", "info", "success", "warning", "destructive"];
+
+declare type TypographyElement = (typeof TYPOGRAPHY_ELEMENTS)[number];
+
+declare type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
+
+declare type Width = (typeof WIDTHS)[number];
+
+declare const WIDTHS: readonly [...string[], "auto", "full", "min", "max", "fit", "px", "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "screen"];
+
+export { }