@minimalstuff/ui 0.0.31 → 1.0.0-4

package/README.md

@@ -0,0 +1,70 @@
+# @minimalstuff/ui
+
+React UI component library.
+
+## Installation
+
+```bash
+pnpm add @minimalstuff/ui react react-dom
+```
+
+Peer dependencies: React 18 or 19.
+
+## Usage
+
+```tsx
+import { Button } from '@minimalstuff/ui';
+import '@minimalstuff/ui/style.css';
+
+export function App() {
+	return <Button variant="primary">Click me</Button>;
+}
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm run dev        # Storybook on :6006
+pnpm run lint
+pnpm run test
+pnpm run build      # Library build → dist/
+```
+
+## Releasing
+
+CI (lint, test, build) and npm publish run together when a GitHub Release is published.
+
+### Prerequisites
+
+1. **NPM token**
+   Create an automation token at [npmjs.com/access-tokens](https://www.npmjs.com/access-tokens) (scope: package publish for `@minimalstuff/ui`).
+
+2. **Repository secret**
+   In the repo: **Settings → Secrets and variables → Actions**. Add a secret named `NPM_TOKEN` with the token value.
+
+### Procedure
+
+1. **Bump version** (optional if using tag-based versioning):
+
+   ```bash
+   pnpm version 1.2.0   # or 1.2.0-alpha.0 for prerelease
+   git push && git push --tags
+   ```
+
+2. **Create a GitHub Release**
+   **Releases → Draft a new release**:
+   - Choose or create a tag (e.g. `v1.2.0`). Use the same version as in `package.json` if you bumped it; otherwise the workflow sets the package version from the tag (e.g. `v1.2.0` → `1.2.0`).
+   - Add release notes and publish.
+
+3. **Workflow**
+   The **CI & Publish** workflow runs on **release published**. It sets the package version from the tag, runs lint, test, build, then `pnpm publish --no-git-checks`. The package is published under the tag `latest` (or the tag you set for prereleases).
+
+### Prereleases
+
+Semver prereleases (e.g. `1.0.0-0`, `1.0.0-alpha.1`) are supported. To avoid making them the default install:
+
+- Publish with a dist-tag, e.g. `pnpm publish --tag next`, or
+- Rely on consumers installing an explicit version: `pnpm add @minimalstuff/ui@1.0.0-alpha.1`.
+
+If you want CI to publish prereleases automatically (e.g. on tag `v1.0.0-alpha.1`), add a separate workflow or extend the existing one to run on prerelease tags and use `--tag next`.

package/dist/index.d.ts

@@ -1,358 +1,125 @@
-/// <reference types="react" />
-
-import { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
-import { ClassAttributes } from 'react';
-import { Context } from 'react';
-import { CSSProperties } from 'react';
-import { DetailedHTMLProps } from 'react';
-import { ElementType } from 'react';
-import { FormatOptionLabelMeta } from 'react-select';
-import { FormHTMLAttributes } from 'react';
-import { HTMLAttributes } from 'react';
-import { IconType } from 'react-icons/lib';
-import { ImgHTMLAttributes } from 'react';
+import { FragmentProps } from 'react';
+import { FunctionComponentElement } from 'react';
 import { InputHTMLAttributes } from 'react';
-import { JSX as JSX_2 } from 'react';
-import { JSX as JSX_3 } from '@emotion/react/jsx-runtime';
-import { LiHTMLAttributes } from 'react';
-import { MutableRefObject } from 'react';
-import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { JSXElementConstructor } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { RefObject } from 'react';
-import { RefType } from 'react-hotkeys-hook/dist/types';
-import { StyledComponent } from '@emotion/styled';
-import { Theme } from '@emotion/react';
-
-declare type Borders = {
-    radius: {
-        [key in SizeType]: string;
-    };
-};
-
-export declare const Button: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & ButtonProps, DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-
-declare type ButtonProps = {
-    danger?: boolean;
-    secondary?: boolean;
-};
-
-export declare function Checkbox({ name, label, checked, errors, onChange, required, reverse, inline, ...props }: InputProps): JSX.Element;
-
-export declare type Colors = {
-    font: string;
-    background: string;
-    secondary: string;
-    black: string;
-    white: string;
-    grey: FadedColor;
-    blue: FadedColor;
-    green: FadedColor;
-    red: FadedColor;
-    yellow: FadedColor;
-    boxShadow: string;
-};
+import { ReactPortal } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 
-export declare function Dropdown({ children, label, className, svgSize, }: DropdownProps): JSX_3.Element;
+export declare function applyTheme(newTheme: Theme_2): void;
 
-export declare const DropdownContainer: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-theme?: Theme | undefined;
-} & {
-show: boolean;
-}, {}, {}>;
+export declare const BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
 
-export declare const DropdownItemButton: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & {
-danger?: boolean | undefined;
-} & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-theme?: Theme | undefined;
-}, {}, {}>;
+export declare const Button: ({ variant, size, children, className, fullWidth, disabled, ...props }: ButtonProps) => JSX.Element;
 
-export declare const DropdownItemLink: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & {
-danger?: boolean | undefined;
-} & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & {
-theme?: Theme | undefined;
-}, {}, {}>;
-
-export declare const DropdownLabel: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-declare interface DropdownProps {
+declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     children: ReactNode;
-    label: ReactNode | string;
     className?: string;
-    svgSize?: number;
+    fullWidth?: boolean;
 }
 
-export declare function ExternalLink({ children, title, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & PropsWithChildren & {
-    style?: CSSProperties;
-    title?: string;
-    className?: string;
-}): JSX_3.Element;
+declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 
-export declare type FadedColor = {
-    lightest: string;
-    light: string;
-    default: string;
-    dark: string;
-    darkest: string;
-};
+declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'subtle' | 'danger';
 
-declare type FadedColor_2 = {
-    lightest: string;
-    light: string;
-    default: string;
-    dark: string;
-    darkest: string;
-};
+export declare function CharacterCount({ current, min, max, showMin, showMax, }: CharacterCountProps): JSX.Element;
 
-declare interface FadedColorGenerator {
-    color: string;
-    fadeStep?: number;
+declare interface CharacterCountProps {
+    current: number;
+    min?: number;
+    max?: number;
+    showMin?: boolean;
+    showMax?: boolean;
 }
 
-declare type FontSizes = {
-    [key in SizeType]: string;
-};
-
-export declare const Form: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
-
-declare type FormFieldProps = {
-    required?: boolean;
-    inline?: boolean;
-    reverse?: boolean;
-};
-
-export declare function generateFadedColors(props: FadedColorGenerator): FadedColor_2;
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | FunctionComponentElement<FragmentProps> | null;
 
-declare type GlobalHotkeysContext = {
-    globalHotkeysEnabled: boolean;
-    setGlobalHotkeysEnabled: (value: boolean) => void;
-};
+declare interface ClientOnlyProps extends React.PropsWithChildren {
+    fallback?: React.ReactNode;
+}
 
-declare const GlobalHotkeysContext = createContext<GlobalHotkeysContext>(
-iGlobalHotkeysContextState
-);
+export declare const IconButton: ({ icon, "aria-label": ariaLabel, variant, size, className, children, ref, ...props }: IconButtonProps) => JSX.Element;
 
-declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement> & FormFieldProps, 'onChange'> {
-    name: string;
-    checked: boolean;
-    label?: string;
-    errors?: string[];
-    onChange?: (name: string, checked: boolean) => void;
+declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    'aria-label': string;
+    variant?: 'default' | 'ghost' | 'danger' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
-declare interface InputProps_2 extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    name: string;
+export declare function Input({ label, error, showCharCount, minLength, maxLength, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: InputProps): JSX.Element;
+
+declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
-    value?: string;
-    errors?: string[];
-    onChange?: (name: string, value: string) => void;
-    formFieldClassname?: string;
+    error?: string;
+    showCharCount?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    className?: string;
+    wrapperClassName?: string;
 }
 
-declare const KEYS = {
-    ARROW_DOWN,
-    ARROW_UP,
-    ESCAPE_KEY,
-};
-
-declare type Medias = {
-    [key in ScreenType]: string;
-};
-
-export declare function Modal({ title, children, opened, hideCloseBtn, className, close, }: ModalProps): false | JSX_3.Element;
-
-export declare const ModalBody: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-export declare const ModalCloseBtn: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-
-export declare const ModalContainer: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-theme?: Theme | undefined;
-}, {}, {}>;
-
-export declare const ModalHeader: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare function Modal({ isOpen, onClose, title, children, size, className, }: ModalProps): ReactPortal | null;
 
 declare interface ModalProps {
-    title?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
     children: ReactNode;
-    opened: boolean;
-    hideCloseBtn?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     className?: string;
-    close: () => void;
 }
 
-export declare const ModalWrapper: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-declare type Option_2<T> = {
-    label: string | number;
-    value: T;
-};
-
-export declare const rgba: (hex: string, alpha: number) => string;
-
-export declare const RoundedImage: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & RoundedImageProps, DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-
-declare interface RoundedImageProps {
-    size?: number;
-}
-
-declare type ScreenType =
-| 'mobile'
-| 'tablet'
-| 'small_desktop'
-| 'medium_desktop'
-| 'large_desktop'
-| 'xlarge_desktop';
-
-export declare function Selector<T = string | number>({ name, label, value, options, onChangeCallback, formatOptionLabel, required, ...props }: SelectorProps<T>): JSX.Element;
-
-declare interface SelectorProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
-    label: string;
-    value: T;
-    name: string;
-    errors?: string[];
-    options: Option_2<T>[];
-    onChangeCallback?: (value: T) => void;
-    formatOptionLabel?: (data: Option_2<T>, formatOptionLabelMeta: FormatOptionLabelMeta<Option_2<T>>) => ReactNode;
-}
-
-declare type ShortcutOptions = {
-    enabled?: boolean;
-    disableGlobalCheck?: boolean;
-};
-
-declare type SizeType = 'xs' | 's' | 'm' | 'l' | 'xl';
-
-declare type SpeedType = 'fast' | 'normal' | 'slow';
-
-export declare function StyleReset(): JSX_3.Element;
-
-export declare interface Tab {
+export declare interface TabItem {
     title: string;
     content: ReactNode;
-    icon?: IconType;
-    danger?: boolean;
+    disabled?: boolean;
+    icon?: string;
 }
 
-export declare const TabItem: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & {
-active?: boolean | undefined;
-danger?: boolean | undefined;
-}, DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare function Tabs({ items, defaultIndex, className, tabListClassName, panelClassName, onChange, }: TabsProps): JSX.Element;
 
-export declare const TabList: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-
-export declare const TabPanel: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-export declare function Tabs({ tabs }: TabsProps): JSX_3.Element;
-
-export declare interface TabsProps {
-    tabs: Tab[];
+declare interface TabsProps {
+    items: TabItem[];
+    defaultIndex?: number;
+    className?: string;
+    tabListClassName?: string;
+    panelClassName?: string;
+    onChange?: (index: number) => void;
 }
 
-export declare function Textbox({ name, label, value, errors, onChange, required, formFieldClassname, ...props }: InputProps_2): JSX.Element;
-
-export declare const TextEllipsis: StyledComponent<    {
-theme?: Theme | undefined;
-as?: ElementType<any, keyof JSX_2.IntrinsicElements> | undefined;
-} & TextEllipsisProps, DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-
-declare type TextEllipsisProps = {
-    lines?: number;
-};
+export declare function Textarea({ label, error, showCharCount, minLength, maxLength, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: TextareaProps): JSX.Element;
 
-export declare const _ThemeContext: Context<    {
-isDarkTheme: boolean;
-toggleDarkTheme: (_value: boolean) => void;
-}>;
-
-export declare function ThemeContextProvider({ children, onPreferenceChange, }: {
-    onPreferenceChange?: (isDarkTheme: boolean) => void;
-} & PropsWithChildren): JSX_3.Element;
+declare interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    showCharCount?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    className?: string;
+    wrapperClassName?: string;
+}
 
-declare type Transitions = {
-    delay: {
-        [key in SpeedType]: string;
-    };
-};
+export declare type Theme = 'light' | 'dark' | 'system';
 
-export declare interface UITheme {
-    colors: Colors;
-    borders: Borders;
-    medias: Medias;
-    transitions: Transitions;
-    fontSizes: FontSizes;
-}
+declare type Theme_2 = 'light' | 'dark' | 'system';
 
-/**
- * This Hook can be used for detecting clicks outside the Opened Menu
- */
-export declare function useClickOutside(ref: RefObject<HTMLElement>, onClickOutside: () => void): void;
+export declare function ThemeToggle(): JSX.Element;
 
-export declare const useGlobalHotkeys: () => GlobalHotkeysContext;
+/** React hook that returns true if the component has mounted client-side */
+export declare const useClientOnly: () => boolean;
 
-export declare function useShortcut(key: keyof typeof KEYS, cb: () => void, { enabled, disableGlobalCheck }?: ShortcutOptions): MutableRefObject<RefType<HTMLElement>>;
+export declare const useIsClient: () => boolean;
 
-export declare const useThemeSwitcher: () => {
-    isDarkTheme: boolean;
-    toggleDarkTheme: (_value: boolean) => void;
-};
+export declare function useRunAfterAnimation(durationMs: number): (callback: () => void) => () => void;
 
-export declare const useToggle: (defaultValue?: boolean) => {
-    isShowing: boolean;
-    toggle: () => void;
-    open: () => void;
-    close: () => void;
-};
+export declare const withClientOnly: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;
 
 export { }
-
-
-declare module 'vitest' {
-    interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
-    }
-}
-

package/dist/minimalstuff-ui.css

@@ -0,0 +1,2 @@
+@keyframes tabs-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tabs-panel-inner{animation:.25s ease-out tabs-panel-in}
+/*$vite$:1*/