@dinofront/design_system 1.0.0 → 1.2.0

package/dist/components/Upload/Upload.types.d.ts

@@ -1,15 +1,42 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BaseProps } from '../../types';
-export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled'>, BaseProps {
+export type UploadMode = 'dropzone' | 'button' | 'icon';
+export type UploadRejectionReason = 'size' | 'type' | 'maxFiles' | 'duplicate';
+export interface UploadRejection {
+    file: File;
+    reason: UploadRejectionReason;
+}
+export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled'>, BaseProps {
     /** Forwarded to the hidden native `<input type="file">`, e.g. `"image/png,image/jpeg"`. */
     accept?: string;
     multiple?: boolean;
-    /** Shown in the default hint text (e.g. "PNG, up to 10 MB"); purely informational, not enforced. */
+    /** Shown in the default hint text (e.g. "PNG, up to 10 MB"). Enforced only when `validateFiles` is set. */
     maxSizeMB?: number;
     /** Overrides the auto-generated hint derived from `accept`/`maxSizeMB`. */
     hint?: ReactNode;
+    /** Called with the files that passed validation (or every selected/dropped file, when `validateFiles` is `false`). */
     onFiles?: (files: File[]) => void;
     disabled?: boolean;
+    /** Enforces `accept`, `maxSizeMB`, `maxFiles`, and de-duplication against `currentFiles`, routing rejected files to `onReject` instead of `onFiles`. Defaults to `false` — existing consumers keep receiving every file the user picked. */
+    validateFiles?: boolean;
+    /** Max total files, counted against `currentFiles.length` plus the new selection. Only enforced when `validateFiles` is set. */
+    maxFiles?: number;
+    /** Drops files already present in `currentFiles` (matched by name + size). Defaults to `validateFiles`'s value. */
+    dedupe?: boolean;
+    /** Files the consumer is already holding — enables `maxFiles`/`dedupe` enforcement without `Upload` owning any file state itself. */
+    currentFiles?: File[];
+    /** Files that failed validation, with the reason. Only called when `validateFiles` is set. */
+    onReject?: (rejections: UploadRejection[]) => void;
+    /** `'dropzone'` (default) is the drag-and-drop area. `'button'` renders a secondary Button trigger. `'icon'` renders a compact icon-only trigger. */
+    mode?: UploadMode;
+    /** Label for the `'button'`-mode trigger. Ignored in other modes. */
+    triggerLabel?: ReactNode;
+    /** Overrides the default trigger icon (a paperclip for `'button'` mode, a pencil for `'icon'` mode). */
+    triggerIcon?: ReactNode;
+    label?: ReactNode;
+    required?: boolean;
+    /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. */
+    labelAddons?: ReactNode;
 }
 export type UploadItemStatus = 'processing' | 'completed' | 'error';
 export interface UploadItemProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
@@ -21,4 +48,6 @@ export interface UploadItemProps extends HTMLAttributes<HTMLDivElement>, BasePro
     errorText?: ReactNode;
     onRetry?: () => void;
     onRemove?: () => void;
+    /** Image thumbnail URL, rendered in place of the file-type icon. The consumer owns the URL's lifetime (e.g. call `URL.revokeObjectURL` on unmount). Falls back to the file icon on load failure. */
+    previewSrc?: string;
 }

package/dist/components/Upload/index.d.ts

@@ -1,2 +1,2 @@
 export { Upload, UploadItem } from './Upload';
-export type { UploadItemProps, UploadItemStatus, UploadProps } from './Upload.types';
+export type { UploadItemProps, UploadItemStatus, UploadMode, UploadProps, UploadRejection, UploadRejectionReason, } from './Upload.types';

package/dist/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export { useStepper } from './useStepper';
+export type { UseStepperOptions, UseStepperResult } from './useStepper';
+export { useOnOutsideClick } from './useOnOutsideClick';
+export { useEscapeKey } from './useEscapeKey';
+export { useHideBodyScroll } from './useHideBodyScroll';
+export { useIsMobile } from './useIsMobile';
+export { useFormContext } from './useFormContext';
+export { useFormProps } from './useFormProps';
+export type { FormContextValue } from '../lib/FormContext';

package/dist/hooks/useEscapeKey.d.ts

@@ -0,0 +1,4 @@
+/** Fires `onEscape` when the user presses `Escape`, anywhere in the
+ *  document — not scoped to a container, matching how dismissible
+ *  overlays (menus, drawers, popovers) listen for it today. */
+export declare function useEscapeKey(onEscape: () => void, enabled?: boolean): void;

package/dist/hooks/useFormContext.d.ts

@@ -0,0 +1,6 @@
+import { FormContextValue } from '../lib/FormContext';
+/** Reads the ambient form state provided by the nearest `FormContainer`.
+ *  Throws outside one, matching `FormField`'s existing null-check — the
+ *  same failure whether a consumer uses `FormField` or this hook
+ *  directly. */
+export declare function useFormContext(): FormContextValue;

package/dist/hooks/useFormProps.d.ts

@@ -0,0 +1,9 @@
+import { FormContextValue } from '../lib/FormContext';
+/** Reads the ambient form state provided by the nearest `FormContainer` —
+ *  the same context `useFormContext` reads — but never throws outside
+ *  one. Returns an inert default context instead, so call sites migrated
+ *  from an existing `useFormProps()` (e.g. an app's own hrm_ui_lib-shaped
+ *  shim) keep working without adding a null check. Prefer
+ *  `useFormContext` in new code, where a missing `FormContainer` is
+ *  usually a programmer error you want to surface immediately. */
+export declare function useFormProps(): FormContextValue;

package/dist/hooks/useHideBodyScroll.d.ts

@@ -0,0 +1,6 @@
+/** Locks `document.body` scrolling while `active`, restoring whatever
+ *  `overflow` value was set before the first lock once the last active
+ *  caller deactivates. Reference-counted across concurrent callers (e.g.
+ *  a drawer opened from within a modal) so one overlay closing early
+ *  never clobbers another's lock. */
+export declare function useHideBodyScroll(active: boolean): void;

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1,9 @@
+/** True when the viewport is at or below `breakpoint` (default 768px).
+ *  Returns `false` during SSR and during the very first client render —
+ *  the effect computes and syncs the real value right after mount, so
+ *  the server-rendered markup and the client's first render always
+ *  agree (no hydration mismatch), at the cost of one extra render after
+ *  mount when the viewport actually is narrow. Subscribes to the media
+ *  query's `change` event rather than `window.resize`, so it only
+ *  re-renders when the mobile/desktop boundary is actually crossed. */
+export declare function useIsMobile(breakpoint?: number): boolean;

package/dist/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+/** Fires `handler` on any `mousedown`/`touchstart` outside `ref.current`.
+ *  No effect while `ref.current` is null or `enabled` is false — callers
+ *  don't need to guard call sites where the ref isn't attached yet (e.g.
+ *  before a portal mounts). */
+export declare function useOnOutsideClick(ref: RefObject<HTMLElement | null> | null | undefined, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;

package/dist/hooks/useStepper.d.ts

@@ -0,0 +1,27 @@
+export interface UseStepperOptions {
+    /** Total number of steps. */
+    count: number;
+    /** Uncontrolled initial step index. Default `0`. */
+    initialStep?: number;
+    /** Controlled step index. Pass alongside `onStepChange` to fully control the step. */
+    step?: number;
+    onStepChange?: (step: number) => void;
+    /** Wraps `next`/`prev` past the last/first step instead of clamping. Default `false`. */
+    loop?: boolean;
+}
+export interface UseStepperResult {
+    step: number;
+    count: number;
+    isFirst: boolean;
+    isLast: boolean;
+    next: () => void;
+    prev: () => void;
+    goTo: (step: number) => void;
+    reset: () => void;
+}
+/** Drives a multi-step flow's current index — the logic half of a wizard,
+ *  with no rendering of its own; render `list[step]` (or similar) yourself.
+ *  Supports both controlled (`step` + `onStepChange`) and uncontrolled
+ *  (`initialStep`) usage, the same shape as a controlled/uncontrolled form
+ *  input. */
+export declare function useStepper({ count, initialStep, step: controlledStep, onStepChange, loop, }: UseStepperOptions): UseStepperResult;

package/dist/icons/brands/AppleIcon.d.ts

@@ -0,0 +1 @@
+export declare const AppleIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/FacebookIcon.d.ts

@@ -0,0 +1 @@
+export declare const FacebookIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/GoogleIcon.d.ts

@@ -0,0 +1 @@
+export declare const GoogleIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/InstagramIcon.d.ts

@@ -0,0 +1 @@
+export declare const InstagramIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/LinkedinIcon.d.ts

@@ -0,0 +1 @@
+export declare const LinkedinIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/MediumIcon.d.ts

@@ -0,0 +1 @@
+export declare const MediumIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/TelegramIcon.d.ts

@@ -0,0 +1 @@
+export declare const TelegramIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/TwitterIcon.d.ts

@@ -0,0 +1 @@
+export declare const TwitterIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/YoutubeIcon.d.ts

@@ -0,0 +1 @@
+export declare const YoutubeIcon: import('lucide-react').LucideIcon;

package/dist/icons/brands/index.d.ts

@@ -0,0 +1,9 @@
+export { GoogleIcon } from './GoogleIcon';
+export { AppleIcon } from './AppleIcon';
+export { FacebookIcon } from './FacebookIcon';
+export { InstagramIcon } from './InstagramIcon';
+export { TelegramIcon } from './TelegramIcon';
+export { TwitterIcon } from './TwitterIcon';
+export { LinkedinIcon } from './LinkedinIcon';
+export { MediumIcon } from './MediumIcon';
+export { YoutubeIcon } from './YoutubeIcon';

package/dist/icons/createIcon.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+type IconRenderer = (uid: string) => ReactNode;
+/** Builds a solid-fill glyph icon (currency, brand logos, HR-domain marks)
+ *  typed as lucide's own `LucideIcon`, so it drops straight into any
+ *  `icon: LucideIcon` prop (`IconTile`, `InfoField`, ...) with no widening
+ *  of the existing type. `fill` is set on the root `<svg>` from `color`
+ *  (default `currentColor`) and inherited by every child `<path>` that
+ *  doesn't set its own `fill` — the same mechanism the source icon set
+ *  relied on via a `path:not([fill]) { fill: currentColor }` CSS rule,
+ *  reproduced here without needing any external CSS. `strokeWidth` is
+ *  accepted (for prop-shape compatibility with `LucideIcon`) but has no
+ *  effect — these are solid fills, not stroke-based glyphs.
+ *
+ *  `content` is either static markup, or — for the handful of icons whose
+ *  source used a `<clipPath>` — a function receiving a mask/clip id
+ *  generated fresh per instance via `useId()`. The source hardcoded these
+ *  ids (e.g. `clip0_697_1766`), which collide (`url(#...)` resolves to
+ *  whichever instance rendered first) the moment the same icon renders
+ *  twice on one page. */
+export declare function createIcon(name: string, content: ReactNode | IconRenderer, viewBox?: string): LucideIcon;
+/** Builds a fixed multi-color icon (flags) — same `LucideIcon` shape as
+ *  `createIcon`, but `color`/`strokeWidth` have no effect: every shape
+ *  already carries its own literal `fill`, since a flag's colors aren't
+ *  theme-able. `renderShapes` receives a fresh-per-instance mask id, same
+ *  rationale as `createIcon`'s clip id. */
+export declare function createFlagIcon(name: string, renderShapes: IconRenderer, viewBox?: string): LucideIcon;
+export {};

package/dist/icons/currency/AmdIcon.d.ts

@@ -0,0 +1 @@
+export declare const AmdIcon: import('lucide-react').LucideIcon;

package/dist/icons/currency/EurIcon.d.ts

@@ -0,0 +1 @@
+export declare const EurIcon: import('lucide-react').LucideIcon;

package/dist/icons/currency/RubIcon.d.ts

@@ -0,0 +1 @@
+export declare const RubIcon: import('lucide-react').LucideIcon;

package/dist/icons/currency/UsdIcon.d.ts

@@ -0,0 +1 @@
+export declare const UsdIcon: import('lucide-react').LucideIcon;

package/dist/icons/currency/index.d.ts

@@ -0,0 +1,4 @@
+export { AmdIcon } from './AmdIcon';
+export { EurIcon } from './EurIcon';
+export { UsdIcon } from './UsdIcon';
+export { RubIcon } from './RubIcon';

package/dist/icons/domain/BudgetTransferIcon.d.ts

@@ -0,0 +1 @@
+export declare const BudgetTransferIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/ContractCardIcon.d.ts

@@ -0,0 +1 @@
+export declare const ContractCardIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/HandOpenHeartIcon.d.ts

@@ -0,0 +1 @@
+export declare const HandOpenHeartIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/OnlyEmployeeIcon.d.ts

@@ -0,0 +1 @@
+export declare const OnlyEmployeeIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/ProjectProductIcon.d.ts

@@ -0,0 +1 @@
+export declare const ProjectProductIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/UnitsEmployeeIcon.d.ts

@@ -0,0 +1 @@
+export declare const UnitsEmployeeIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/VacationIcon.d.ts

@@ -0,0 +1 @@
+export declare const VacationIcon: import('lucide-react').LucideIcon;

package/dist/icons/domain/index.d.ts

@@ -0,0 +1,7 @@
+export { OnlyEmployeeIcon } from './OnlyEmployeeIcon';
+export { UnitsEmployeeIcon } from './UnitsEmployeeIcon';
+export { ProjectProductIcon } from './ProjectProductIcon';
+export { BudgetTransferIcon } from './BudgetTransferIcon';
+export { HandOpenHeartIcon } from './HandOpenHeartIcon';
+export { VacationIcon } from './VacationIcon';
+export { ContractCardIcon } from './ContractCardIcon';

package/dist/icons/flags/FlagAmIcon.d.ts

@@ -0,0 +1 @@
+export declare const FlagAmIcon: import('lucide-react').LucideIcon;

package/dist/icons/flags/FlagGbIcon.d.ts

@@ -0,0 +1 @@
+export declare const FlagGbIcon: import('lucide-react').LucideIcon;

package/dist/icons/flags/FlagRuIcon.d.ts

@@ -0,0 +1 @@
+export declare const FlagRuIcon: import('lucide-react').LucideIcon;

package/dist/icons/flags/FlagUsIcon.d.ts

@@ -0,0 +1 @@
+export declare const FlagUsIcon: import('lucide-react').LucideIcon;

package/dist/icons/flags/index.d.ts

@@ -0,0 +1,4 @@
+export { FlagAmIcon } from './FlagAmIcon';
+export { FlagUsIcon } from './FlagUsIcon';
+export { FlagGbIcon } from './FlagGbIcon';
+export { FlagRuIcon } from './FlagRuIcon';

package/dist/icons/index.d.ts

@@ -0,0 +1,4 @@
+export * from './currency';
+export * from './flags';
+export * from './brands';
+export * from './domain';

package/dist/icons.d.ts

@@ -0,0 +1,2 @@
+export * from './icons/index.js'
+export {}