@dinofront/design_system 1.0.0 → 1.1.0

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+import { TextProps } from '../Text';
+export interface ReadMoreProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, BaseProps {
+    children: ReactNode;
+    /** Lines shown while collapsed. Default `3`. Ignored when `collapsedContent` supplies its own text. */
+    clamp?: number;
+    /** Escape hatch for collapsed copy that genuinely differs from `children`, rather than just clamping it. */
+    collapsedContent?: ReactNode;
+    expandLabel?: ReactNode;
+    collapseLabel?: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Typography passed through to the underlying `Text`. */
+    textProps?: Pick<TextProps, 'variant' | 'weight' | 'color'>;
+}

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

@@ -0,0 +1,2 @@
+export { ReadMore } from './ReadMore';
+export type { ReadMoreProps } from './ReadMore.types';

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

@@ -13,6 +13,8 @@ export interface SelectProps extends BaseProps {
     onChange?: (value: string) => void;
     placeholder?: string;
     label?: ReactNode;
+    /** Content rendered on the label row, right of the label text — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the trigger. */
+    labelAddons?: ReactNode;
     helperText?: ReactNode;
     errorText?: ReactNode;
     error?: boolean;

package/dist/components/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,2 @@
+import { StepIndicatorProps } from './StepIndicator.types';
+export declare const StepIndicator: import('react').ForwardRefExoticComponent<StepIndicatorProps & import('react').RefAttributes<HTMLOListElement>>;

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type StepIndicatorStatus = 'upcoming' | 'active' | 'completed' | 'rejected';
+export type StepIndicatorMarker = 'number' | 'dot' | 'icon';
+export type StepIndicatorOrientation = 'horizontal' | 'vertical';
+export type StepIndicatorSize = 'lg' | 'sm';
+export interface StepIndicatorItem {
+    value: string | number;
+    label: ReactNode;
+    description?: ReactNode;
+    status?: StepIndicatorStatus;
+    /** Halo ring around the marker — an orthogonal emphasis flag, independent of `status` (e.g. a completed step still awaiting review). */
+    highlighted?: boolean;
+}
+export interface StepIndicatorProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'>, BaseProps {
+    steps: StepIndicatorItem[];
+    /** Marks the matching step `aria-current="step"`. */
+    activeValue?: string | number;
+    /** Wraps each marker in a `<button>` when set. Omit to render a non-interactive indicator. */
+    onStepSelect?: (value: string | number) => void;
+    marker?: StepIndicatorMarker;
+    orientation?: StepIndicatorOrientation;
+    size?: StepIndicatorSize;
+}

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

@@ -0,0 +1,2 @@
+export { StepIndicator } from './StepIndicator';
+export type { StepIndicatorItem, StepIndicatorMarker, StepIndicatorOrientation, StepIndicatorProps, StepIndicatorSize, StepIndicatorStatus, } from './StepIndicator.types';

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

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps } from '../../types';
+import { BadgeProps } from '../Badge';
 export type TabsVariant = 'underline' | 'pills' | 'boxed';
 export type TabsSize = 'lg' | 'md' | 'sm';
 export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
@@ -10,8 +11,12 @@ export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
     onValueChange?: (value: string) => void;
     variant?: TabsVariant;
     size?: TabsSize;
+    /** Disables every tab in the bar at once. OR'd with each `Tab`'s own `disabled`. */
+    disabled?: boolean;
 }
 export interface TabListProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Horizontally scrolls the bar when tabs overflow, instead of wrapping. */
+    scrollable?: boolean;
 }
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
     /** Unique identifier matched against the parent `Tabs`'s active value. */
@@ -19,8 +24,18 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseP
     icon?: ReactNode;
     /** Count/indicator rendered after the label. Hidden when `undefined`, `null`, or `false`. */
     badge?: ReactNode;
+    /** Styles `badge` through `Badge` instead of the default fixed-style count pill. Omit to keep the default. */
+    badgeProps?: Pick<BadgeProps, 'variant' | 'appearance' | 'size'>;
+    /** Trailing icon rendered as its own button — e.g. a close-tab X. Rendered as a sibling of the tab button, not a nested one (nesting a button inside a button is invalid HTML). */
+    rightIcon?: ReactNode;
+    /** Called with this tab's `value` when `rightIcon` is clicked. Does not activate the tab. */
+    onRightIconClick?: (value: string) => void;
+    /** Accessible name for the `rightIcon` button. Required when `rightIcon` is set. */
+    rightIconLabel?: string;
 }
 export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-    /** Matched against the parent `Tabs`'s active value; renders nothing (unmounted) when not active. */
+    /** Matched against the parent `Tabs`'s active value; hidden (or unmounted, depending on `keepMounted`) when not active. */
     value: string;
+    /** Keeps the panel mounted (hidden via the `hidden` attribute) while inactive, instead of unmounting it — preserves scroll position and in-panel state across tab switches. */
+    keepMounted?: boolean;
 }

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

@@ -12,4 +12,6 @@ export interface TextProps extends HTMLAttributes<HTMLElement>, BaseProps {
     as?: ElementType;
     /** Truncate to a single line with ellipsis. */
     truncate?: boolean;
+    /** Truncate to this many lines with ellipsis (CSS line-clamp). Ignored when `truncate` is set. */
+    clamp?: number;
 }

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

@@ -2,6 +2,8 @@ import { TextareaHTMLAttributes, ReactNode } from 'react';
 import { BaseProps } from '../../types';
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, BaseProps {
     label?: ReactNode;
+    /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the field. */
+    labelAddons?: ReactNode;
     helperText?: ReactNode;
     errorText?: ReactNode;
     error?: boolean;

package/dist/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,2 @@
+import { ThemeSwitchProps } from './ThemeSwitch.types';
+export declare const ThemeSwitch: import('react').ForwardRefExoticComponent<ThemeSwitchProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export interface ThemeSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseProps {
+    /** `true` renders the "dark" thumb position. Purely presentational — `ThemeSwitch` owns no theme state; wire `onChange` to your own theme toggle. */
+    checked?: boolean;
+    label?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { ThemeSwitch } from './ThemeSwitch';
+export type { ThemeSwitchProps } from './ThemeSwitch.types';

package/dist/components/UnderConstruction/UnderConstruction.d.ts

@@ -0,0 +1,2 @@
+import { UnderConstructionProps } from './UnderConstruction.types';
+export declare const UnderConstruction: import('react').ForwardRefExoticComponent<UnderConstructionProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type UnderConstructionSize = 'lg' | 'sm';
+export interface UnderConstructionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+    size?: UnderConstructionSize;
+    /** Defaults to "We'll be back soon" — pass a translated string for other locales. */
+    title?: ReactNode;
+    /** Defaults to a generic maintenance message — pass a translated string for other locales. */
+    description?: ReactNode;
+    /** Defaults to a `Construction` icon in an `IconTile` circle — pass your own illustration node to override. */
+    illustration?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { UnderConstruction } from './UnderConstruction';
+export type { UnderConstructionProps, UnderConstructionSize } from './UnderConstruction.types';

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/form/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/FormContainer';
+export * from '../components/FormField';

package/dist/form.d.ts

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

package/dist/form.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./FormField-CwRAOtTN.js";
+export { e as FormContainer, t as FormField };

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useStepper } from './useStepper';
+export type { UseStepperOptions, UseStepperResult } from './useStepper';

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 {}