@apipass/design-system 1.0.0

package/dist/types/ui/primitives/Navigation/Navigation.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { AnchorOrButtonProps } from "utils";
+import "./navigation.css";
+export type NavigationProps = ComponentPropsWithoutRef<"nav"> & {
+    direction?: "column" | "row";
+};
+export declare function Navigation({ className, direction, ...props }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationPillProps = AnchorOrButtonProps & {
+    isSelected?: boolean;
+};
+export declare function NavigationPill({ className, isSelected, ...props }: NavigationPillProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationButtonProps = AnchorOrButtonProps & {
+    isSelected?: boolean;
+    icon?: ReactNode;
+    size?: "small" | "medium";
+    direction?: "column" | "row";
+};
+export declare function NavigationButton({ children, className, isSelected, icon, direction, size, ...props }: NavigationButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import "./notification.css";
+type NotificationVariant = "message" | "alert";
+export type NotificationProps = React.ComponentPropsWithoutRef<"div"> & {
+    isDismissible?: boolean;
+    icon?: ReactNode;
+    variant?: NotificationVariant;
+};
+export declare function Notification({ children, className, isDismissible, icon, variant, ...props }: NotificationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/ui/primitives/Pagination/Pagination.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import "./pagination.css";
+export type PaginationProps = React.ComponentPropsWithoutRef<"nav">;
+export declare function Pagination({ "aria-label": ariaLabel, className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationPrevious({ href, children, }: {
+    href?: string | null;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationNext({ href, children, }: {
+    href?: string | null;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationList({ children }: {
+    children: React.ReactNode;
+}): false | import("react/jsx-runtime").JSX.Element;
+export declare function PaginationPage({ href, children, current, }: {
+    href: string;
+    children: string;
+    current?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationGap(): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { SharedFieldProps } from "primitives";
+import { type RadioGroupProps as RACRadioGroupProps, type RadioProps as RACRadioProps } from "react-aria-components";
+import "./radio.css";
+export interface RadioGroupProps extends Omit<RACRadioGroupProps, "children">, SharedFieldProps {
+    children?: React.ReactNode;
+}
+export declare function RadioGroup({ className, label, description, errorMessage, children, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export type RadioFieldProps = RACRadioProps & SharedFieldProps;
+export declare function RadioField({ children, className, label, description, errorMessage, ...props }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+export type RadioProps = React.ComponentPropsWithoutRef<"div">;
+export declare function Radio({ className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Search/Search.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { type InputProps as RACInputProps } from "react-aria-components";
+import "./search.css";
+export type SearchProps = Omit<RACInputProps, "results"> & {
+    results?: string[];
+    onSearch?: (search: string) => void;
+};
+export declare const Search: React.ForwardRefExoticComponent<Omit<RACInputProps, "results"> & {
+    results?: string[];
+    onSearch?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/types/ui/primitives/Select/Select.d.ts

@@ -0,0 +1,12 @@
+import { SharedFieldProps, type ListBoxItemProps } from "primitives";
+import { type SelectProps as RACSelectProps } from "react-aria-components";
+import "./select.css";
+export interface SelectFieldProps<T extends object> extends Omit<SelectProps<T>, "children">, SharedFieldProps {
+    items?: Iterable<T>;
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+export declare function SelectField<T extends object>({ className, label, description, errorMessage, children, items, ...props }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export type SelectProps<T extends object> = RACSelectProps<T>;
+export declare function Select<T extends object>({ ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export type SelectItemProps = ListBoxItemProps;
+export declare function SelectItem({ children, className, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import { type SliderOutputProps as RACSliderOutputProps, type SliderProps as RACSliderProps, type SliderThumbProps as RACSliderThumbProps, type SliderTrackProps as RACSliderTrackProps } from "react-aria-components";
+import "./slider.css";
+export type SliderFieldProps = SliderProps & {
+    name?: string;
+    label?: string;
+    description?: string;
+    thumbLabels?: string[];
+    showOutput?: boolean;
+};
+export declare function SliderField({ name, label, description, showOutput, thumbLabels, ...props }: SliderFieldProps): import("react/jsx-runtime").JSX.Element;
+export type SliderProps = Omit<RACSliderProps, "orientation">;
+export declare function Slider({ className, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export type SliderOutputProps = RACSliderOutputProps;
+export declare function SliderOutput({ className, ...props }: SliderOutputProps): import("react/jsx-runtime").JSX.Element;
+export type SliderThumbProps = RACSliderThumbProps;
+export declare function SliderThumb({ className, ...props }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+export type SliderTrackProps = RACSliderTrackProps;
+export declare function SliderTrack({ className, ...props }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { SharedFieldProps } from "primitives";
+import type React from "react";
+import { type SwitchProps as RACSwitchProps } from "react-aria-components";
+import "./switch.css";
+export type SwitchGroupProps = React.ComponentPropsWithoutRef<"div">;
+export declare function SwitchGroup({ className, ...props }: SwitchGroupProps): import("react/jsx-runtime").JSX.Element;
+export type SwitchFieldProps = RACSwitchProps & SharedFieldProps;
+export declare function SwitchField({ children, className, label, description, errorMessage, ...props }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;
+export type SwitchProps = React.ComponentPropsWithoutRef<"div">;
+export declare function Switch({ className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import { type TabListProps as RACTabListProps, type TabPanelProps as RACTabPanelProps, type TabProps as RACTabProps, type TabsProps as RACTabsProps } from "react-aria-components";
+import "./tab.css";
+export type TabProps = RACTabProps;
+export declare function Tab({ className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export type TabListProps<T> = RACTabListProps<T>;
+export declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TabPanelProps = RACTabPanelProps;
+export declare function TabPanel({ className, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+export type TabsProps = RACTabsProps;
+export declare function Tabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Table/Table.d.ts

@@ -0,0 +1,25 @@
+import { type CellProps as RACCellProps, type ColumnProps as RACColumnProps, type RowProps as RACRowProps, type TableBodyProps as RACTableBodyProps, type TableHeaderProps as RACTableHeaderProps, type TableProps as RACTableProps } from "react-aria-components";
+import "./table.css";
+type TableAlign = "start" | "center" | "right";
+export type TableProps = RACTableProps & {
+    bleed?: boolean;
+    dense?: boolean;
+    grid?: boolean;
+    striped?: boolean;
+};
+export declare function Table({ bleed, dense, grid, striped, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export type TableColumnProps = RACColumnProps & {
+    align?: TableAlign;
+};
+export declare function TableColumn({ align, className, ...props }: TableColumnProps): import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps<T> = RACTableBodyProps<T>;
+export declare function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableHeadProps<T> = RACTableHeaderProps<T>;
+export declare function TableHead<T extends object>({ className, columns, children, ...props }: TableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableRowProps<T> = RACRowProps<T>;
+export declare function TableRow<T extends object>({ id, columns, children, className, ...otherProps }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableCellProps = RACCellProps & {
+    align?: TableAlign;
+};
+export declare function TableCell({ align, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/ui/primitives/Tag/Tag.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+import { PressEvent as RACPressEvent, type TagGroupProps as RACTagGroupProps, type TagListProps as RACTagListProps, type TagProps as RACTagProps } from "react-aria-components";
+import { type AnchorOrButtonProps } from "utils";
+import "./tag.css";
+type TagScheme = "brand" | "danger" | "positive" | "warning" | "neutral";
+type TagVariant = "primary" | "secondary";
+type SharedTagProps = {
+    scheme?: TagScheme;
+    variant?: TagVariant;
+};
+type TagRemovableProps = {
+    onRemove?: (e: RACPressEvent) => void;
+};
+export type TagProps = SharedTagProps & TagRemovableProps & React.ComponentPropsWithoutRef<"span">;
+export declare function Tag({ children, scheme, variant, onRemove, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
+export type TagButtonProps = SharedTagProps & AnchorOrButtonProps;
+export declare const TagButton: React.ForwardRefExoticComponent<TagButtonProps & React.RefAttributes<HTMLElement>>;
+export type TagToggleProps = RACTagProps & {
+    iconStart?: ReactNode;
+};
+export declare function TagToggle({ children, className, iconStart, textValue, ...props }: TagToggleProps): import("react/jsx-runtime").JSX.Element;
+export type TagToggleGroupProps = RACTagGroupProps;
+export declare function TagToggleGroup({ className, ...props }: TagToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export type TagToggleListProps<T> = RACTagListProps<T>;
+export declare function TagToggleList<T extends object>({ className, ...props }: TagToggleListProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/ui/primitives/Text/Text.d.ts

@@ -0,0 +1,65 @@
+import { Link } from "primitives";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type TextProps as RACTextProps } from "react-aria-components";
+import "./text.css";
+type TextLineHeightProps = {
+    lineHeight?: "body" | "single";
+};
+type TextTruncateProps = {
+    lineClamp?: number;
+};
+export type TextProps = TextTruncateProps & RACTextProps & TextLineHeightProps;
+export declare function Text({ className, elementType, lineHeight, lineClamp, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export type TextSmallProps = TextTruncateProps & RACTextProps & TextLineHeightProps;
+export declare function TextSmall({ className, elementType, lineHeight, lineClamp, ...props }: TextSmallProps): import("react/jsx-runtime").JSX.Element;
+export type TextSmallStrongProps = TextTruncateProps & RACTextProps & TextLineHeightProps;
+export declare function TextSmallStrong({ className, elementType, lineClamp, lineHeight, ...props }: TextSmallProps): import("react/jsx-runtime").JSX.Element;
+export type TextStrongProps = TextTruncateProps & RACTextProps;
+export declare function TextStrong({ className, elementType, lineClamp, ...props }: TextStrongProps): import("react/jsx-runtime").JSX.Element;
+export type TextEmphasisProps = RACTextProps;
+export declare function TextEmphasis({ className, elementType, ...props }: TextEmphasisProps): import("react/jsx-runtime").JSX.Element;
+export type TextLinkProps = ComponentPropsWithoutRef<typeof Link>;
+export declare function TextLink({ className, ...props }: TextLinkProps): import("react/jsx-runtime").JSX.Element;
+export type TextCodeProps = RACTextProps;
+export declare function TextCode({ className, ...props }: TextCodeProps): import("react/jsx-runtime").JSX.Element;
+export type TextInputProps = RACTextProps;
+export declare function TextInput({ className, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export type TextTitleHeroProps = TextTruncateProps & RACTextProps;
+export declare function TextTitleHero({ className, elementType, lineClamp, ...props }: TextTitleHeroProps): import("react/jsx-runtime").JSX.Element;
+export type TextTitlePageProps = TextTruncateProps & RACTextProps;
+export declare function TextTitlePage({ className, elementType, lineClamp, ...props }: TextTitlePageProps): import("react/jsx-runtime").JSX.Element;
+export type TextSubtitleProps = TextTruncateProps & RACTextProps;
+export declare function TextSubtitle({ className, elementType, lineClamp, ...props }: TextSubtitleProps): import("react/jsx-runtime").JSX.Element;
+export type TextHeadingProps = TextTruncateProps & RACTextProps;
+export declare function TextHeading({ className, elementType, lineClamp, ...props }: TextHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type TextSubheadingProps = TextTruncateProps & RACTextProps;
+export declare function TextSubheading({ className, elementType, lineClamp, ...props }: TextSubheadingProps): import("react/jsx-runtime").JSX.Element;
+export type TextPriceProps = RACTextProps & {
+    currency: string;
+    price: string;
+    label?: string;
+    size?: "small" | "large";
+};
+export declare function TextPrice({ className, currency, size, price, label, ...props }: TextPriceProps): import("react/jsx-runtime").JSX.Element;
+export type TextListItemProps = ComponentPropsWithoutRef<"li">;
+export declare function TextListItem({ className, ...props }: TextListItemProps): import("react/jsx-runtime").JSX.Element;
+export type TextListProps = Omit<ComponentPropsWithoutRef<"ul">, "title"> & {
+    title?: ReactNode;
+    density?: "default" | "tight";
+};
+export declare function TextList({ children, className, density, title, ...props }: TextListProps): import("react/jsx-runtime").JSX.Element;
+export type TextLinkListProps = TextListProps;
+export declare function TextLinkList({ className, ...props }: TextLinkListProps): import("react/jsx-runtime").JSX.Element;
+export type TextContentHeadingProps = ComponentPropsWithoutRef<"div"> & {
+    align?: "start" | "center";
+    heading: string;
+    subheading?: string;
+};
+export declare function TextContentHeading({ align, className, heading, subheading, ...props }: TextContentHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type TextContentTitleProps = ComponentPropsWithoutRef<"div"> & {
+    align?: "start" | "center";
+    title: ReactNode;
+    subtitle?: ReactNode;
+};
+export declare function TextContentTitle({ align, className, title, subtitle, ...props }: TextContentTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/ui/primitives/Textarea/Textarea.d.ts

@@ -0,0 +1,10 @@
+import { SharedFieldProps } from "primitives";
+import { type TextAreaProps as RACTextAreaProps, type TextFieldProps as RACTextFieldProps } from "react-aria-components";
+import "./textarea.css";
+export type SharedTextareaProps = {
+    isResizable?: boolean;
+};
+export type TextareaFieldProps = SharedFieldProps & RACTextFieldProps & SharedTextareaProps;
+export declare function TextareaField({ className, placeholder, label, description, errorMessage, ...props }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
+export type TextareaProps = SharedTextareaProps & RACTextAreaProps;
+export declare const Textarea: import("react").ForwardRefExoticComponent<SharedTextareaProps & RACTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/types/ui/primitives/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type OverlayArrowProps as RACOverlayArrowProps, type PopoverProps as RACPopoverProps } from "react-aria-components";
+import "./tooltip.css";
+export interface TooltipProps extends Omit<RACPopoverProps, "children"> {
+    children: React.ReactNode;
+}
+export declare function Tooltip({ children, className, offset, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export type TooltipOverlayArrowProps = RACOverlayArrowProps;
+export declare function TooltipOverlayArrow({ className, ...props }: TooltipOverlayArrowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/index.d.ts

@@ -0,0 +1,28 @@
+export * from "./Accordion/Accordion";
+export * from "./Avatar/Avatar";
+export * from "./Button/Button";
+export * from "./Checkbox/Checkbox";
+export * from "./Dialog/Dialog";
+export * from "./Fieldset/Fieldset";
+export * from "./Icon/Icon";
+export * from "./IconButton/IconButton";
+export * from "./Image/Image";
+export * from "./Input/Input";
+export * from "./Link/Link";
+export * from "./ListBox/ListBox";
+export * from "./Logo/Logo";
+export * from "./Menu/Menu";
+export * from "./Navigation/Navigation";
+export * from "./Notification/Notification";
+export * from "./Pagination/Pagination";
+export * from "./Radio/Radio";
+export * from "./Search/Search";
+export * from "./Select/Select";
+export * from "./Slider/Slider";
+export * from "./Switch/Switch";
+export * from "./Tab/Tab";
+export * from "./Table/Table";
+export * from "./Tag/Tag";
+export * from "./Text/Text";
+export * from "./Textarea/Textarea";
+export * from "./Tooltip/Tooltip";

package/dist/types/ui/utils/AnchorOrButton.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentPropsWithoutRef } from "react";
+import { Link as RACLink, type ButtonProps as RACButtonProps } from "react-aria-components";
+export type AnchorOrButtonSharedProps = {
+    children?: React.ReactNode;
+    href?: string;
+};
+export type AnchorOrButtonProps = (RACButtonProps | ComponentPropsWithoutRef<typeof RACLink>) & AnchorOrButtonSharedProps;
+export declare const AnchorOrButton: React.ForwardRefExoticComponent<AnchorOrButtonProps & React.RefAttributes<HTMLElement>>;

package/dist/types/ui/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnchorOrButton";

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@apipass/design-system",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "APIPass React Design System",
+  "sideEffects": ["**/*.css"],
+  "files": [
+    "dist/lib",
+    "dist/types"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/lib.index.d.ts",
+      "import": "./dist/lib/index.js",
+      "require": "./dist/lib/index.cjs"
+    },
+    "./icons": {
+      "types": "./dist/types/ui/icons/index.d.ts",
+      "import": "./dist/lib/index.js",
+      "require": "./dist/lib/index.cjs"
+    },
+    "./style.css": "./dist/lib/style.css"
+  },
+  "main": "./dist/lib/index.cjs",
+  "module": "./dist/lib/index.js",
+  "types": "./dist/types/lib.index.d.ts",
+  "scripts": {
+    "build:lib": "tsc -p tsconfig.lib.json && vite build --config vite.lib.config.ts",
+    "app:dev": "vite",
+    "app:build": "tsc && vite build",
+    "app:lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "app:preview": "vite preview",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "storybook:build": "storybook build --output-dir dist/storybook",
+    "build": "npm run app:build; npm run storybook:build",
+    "script:dev-resources": "cd scripts/dev-resources; node --env-file=../../.env app.mjs; cd -;",
+    "script:icons": "cd scripts/icons; node --env-file=../../.env app.mjs --skip-rest-api; cd -;",
+    "script:icons:rest": "cd scripts/icons; node --env-file=../../.env app.mjs; cd -;",
+    "script:tokens": "cd scripts/tokens; node --env-file=../../.env app.mjs --skip-rest-api; cd -;",
+    "script:tokens:rest": "cd scripts/tokens; node --env-file=../../.env app.mjs; cd -;",
+    "iac:install": "npm install -d --prefix infra",
+    "iac:bootstrap": "npm run cdk:bootstrap --prefix infra",
+    "iac:synth": "npm run cdk:synth --prefix infra",
+    "iac:deploy": "npm run cdk:deploy --prefix infra"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-aria-components": ">=1.10.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.3.10",
+    "@react-types/shared": "^3.23.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "react": "^18.2.0",
+    "react-aria-components": "1.10.1",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.6.12",
+    "typescript": "^5.0.2",
+    "vite": "^6.3.5"
+  }
+}