@dragunio/fe-libs 0.1.8 → 0.1.10

package/README.md

@@ -56,6 +56,8 @@ Available review routes:
 - `http://127.0.0.1:3000/#/datetime` — DateTimePicker
 - `http://127.0.0.1:3000/#/currency` — CurrencyInput
 - `http://127.0.0.1:3000/#/number` — NumberInput
+- `http://127.0.0.1:3000/#/file-upload` — FileUpload
+- `http://127.0.0.1:3000/#/file-preview` — FilePreview
 - `http://127.0.0.1:3000/#/tooltip` — Tooltip
 - `http://127.0.0.1:3000/#/expandable` — ExpandableSection
 - `http://127.0.0.1:3000/#/loading` — Loading
@@ -65,6 +67,7 @@ Available review routes:
 - `http://127.0.0.1:3000/#/chip` — Chip
 - `http://127.0.0.1:3000/#/avatar` — Avatar
 - `http://127.0.0.1:3000/#/text-input` — TextInput & TextArea
+- `http://127.0.0.1:3000/#/validated-inputs` — EmailInput, PasswordInput & PhoneNumberInput
 - `http://127.0.0.1:3000/#/pagination` — Pagination
 - `http://127.0.0.1:3000/#/message` — Message
 - `http://127.0.0.1:3000/#/snackbar` — Snackbar
@@ -191,14 +194,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
 
 ### New form and overlay primitives
 
-- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
+- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `DrawerWidths.small`, `.medium`, or `.large` (360px, 400px, 480px) with `width`, or provide any custom CSS width. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body. It automatically adapts to smaller screens: side drawers use the available viewport width, while top and bottom drawers become sheet-style panels.
 - `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
 - `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
 - `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Both include accessible up/down controls (and arrow-key support); use `step` or `showStepper` to configure them. `NumberInput` also accepts `prefix`/`suffix` adornments. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. Both support `error` and `errorMessage` with the same red border/message treatment as `TextInput`. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
+- `FileUpload` accepts browser `File` objects from selecting or dropping files. Choose its preset `accept` groups—such as `image`, `pdf`, `document`, `audio`, and `video`—instead of manually assembling MIME patterns; it validates them with `maxSize`, `maxFiles`, and duplicate checks locally, then emits `onChange`, `onAccept`, `onReject`, and `onRemove` synchronously. It deliberately contains no endpoint, request, `async`, or upload-progress behavior.
+- `FilePreview` is a local, portal-based File viewer. It displays the current file count in its backdrop header, supports buttons and ArrowLeft/ArrowRight navigation, calls `onEscape` then `onClose('escape')`, and reports `onDelete`/`onDownload` with the active `File`. Its Download action starts a direct local browser download—there is no endpoint or transport behavior.
 - `Tooltip` shows accessible content on hover and focus.
 - `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.
 - `TextInput` and `TextArea` support `error`/`errorMessage`, `helperText`, `clearable`, `onClear`, and `onValueChange`. `TextArea` also accepts `autosize` (default `false`) to grow with its content. `TextInput` also accepts `label`, `isRequired`, and `prefix`/`suffix` adornments. Passing a string to `error` shows it below the field and applies the error border.
-- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances.
+- `EmailInput`, `PasswordInput`, and `PhoneNumberInput` add their standard mailbox, show/hide password, and phone adornments. They validate their formats on blur by default; use `validateOn="change"` for immediate feedback and `validate={(value) => ...}` for an additional rule. Passwords require at least eight characters including uppercase, lowercase, and a number; phone numbers accept digits, spaces, parentheses, and plus signs, and require 7–15 digits.
+- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances. Modal and Drawer trap keyboard focus, lock background scrolling, return focus to their opener, and respect reduced-motion preferences. Use `initialFocusRef`, `restoreFocus`, `closeOnEscape`, and `closeOnBackdropClick` to customize that behavior.
 - `Loading` provides `small`, `medium`, and `large` circular indicators (or a custom pixel `size`); use `Skeleton.Circle` and `Skeleton.Square` with `size`, or `Skeleton.Box` and `Skeleton.Line` with `width` and `height`.
 - `ProgressBar` is determinate when `value` is supplied and renders an indeterminate back-and-forth animation when it is omitted.
 - `Chip` supports the standard `default`, `success`, `error`, `info`, and `warning` palettes, plus `color` for any CSS color and `subtle`, `solid`, or `outline` variants.
@@ -219,6 +225,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
   clearable
 />
 
+<EmailInput
+  label="Work email"
+  value={email}
+  onValueChange={setEmail}
+  validate={(value) =>
+    value.endsWith('@dragunio.com') || 'Use your work email.'
+  }
+/>
+<PasswordInput label="Password" />
+<PhoneNumberInput label="Phone number" placeholder="+84 (123) 456 789" />
+
 <ProgressBar label="Upload" value={72} />
 <ProgressBar label="Synchronising" />
 <Chip status="success" dot>Complete</Chip>
@@ -230,3 +247,47 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
   <Avatar content="Phạm Quốc Bảo" />
 </AvatarGroup>
 ```
+
+## 404 / NotFound
+
+```tsx
+import { NotFound, NotFoundCaveman, NotFoundYeti, NotFoundLost } from '@dragunio/fe-libs';
+import '@dragunio/fe-libs/styles.css';
+
+// Randomly selects one of the three designs once per mount.
+<NotFound homeHref="/" homeLabel="Về trang chủ" />
+
+// Choose a design, customize copy, or connect your router.
+<NotFound
+  variant="bad_dream"
+  title="Không tìm thấy trang"
+  description="Trang bạn cần có thể đã được chuyển đi."
+  onHomeClick={() => navigate('/')}
+/>
+
+// Each design is also available independently.
+<NotFoundCaveman />
+<NotFoundYeti animated={false} />
+<NotFoundLost action={null} />
+```
+
+`variant` accepts `random` (default), `caveman`, `bad_dream`, or `electric_shock`. Random selection
+stays stable when props change; remount with a new React `key` to draw again (the
+same variant may be picked). Server rendering and the first client render use
+`caveman`; the random choice runs after mounting to avoid hydration mismatches.
+
+All four components accept `title` and `description` (`ReactNode`), `homeLabel`
+(default `Go to Home`), `homeHref` (default `/`), `onHomeClick`, `action`, `animated`
+(default `true`), and section HTML attributes. `onHomeClick` replaces default
+navigation. `action` replaces the public home `Button`; `null` hides actions.
+`NotFoundCaveman`, `NotFoundYeti`, and `NotFoundLost` use `NotFoundSceneProps`, which
+omits `variant`.
+
+Artwork scales to its container and honors `prefers-reduced-motion`. Disabling
+animation uses a still frame for Lost. The original 1.31 MiB GIF and still PNG
+are bundled beside `styles.css`, with no external image, font, Bootstrap, jQuery,
+or GSAP requests. Yeti preserves the original SVG with a CSS adaptation of its
+flashlight and shivering animation; it does not reproduce GSAP mouth morphing.
+
+Try the interactive story at `#/not-found`. Source credits and illustration
+provenance are in [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,36 @@
+# 404 artwork and source credits
+
+The NotFound components adapt these user-selected designs:
+
+- **Caveman** — SofiaSergio, “code for fun (day02): 404 error page, Caveman mode - pure CSS”, https://codepen.io/SofiaSergio/pen/RMjyRL. Original HTML and SCSS were converted to React and scoped CSS.
+- **Yeti** — Darin Senneff (dsenneff), “Yeti 404 Page”, https://codepen.io/dsenneff/pen/mjZgmN. Original SVG geometry is retained; IDs are instance-specific and the timeline is adapted to CSS. Original GSAP scripts and plugins are not included.
+- **Lost** — Naved khan (Navedkhan012), “404 page”, https://codepen.io/Navedkhan012/pen/vrWQMY. Source recovered from the attributed export at https://gist.github.com/MbarkT3STO/0c13e9f8d771a22bb1ee69583aa7113e.
+
+The Lost design references the illustration at
+https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif.
+That original GIF is bundled as `packages/not-found/src/assets/lost.gif`;
+`lost-still.png` is its first frame for reduced-motion rendering. Illustration
+credit belongs to its original creator; the library does not claim authorship
+of this asset or the designs above.
+
+## Adapted CodePen code
+
+Copyright (c) SofiaSergio, Darin Senneff, and Naved khan for their respective code.
+
+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/dist/{chunk-HM3V3DVO.mjs → chunk-BAZJ5UJ5.mjs}

@@ -169,6 +169,82 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ jsx4("svg", { ...iconProps4(props), children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 
 export {
   plus,
@@ -194,5 +270,9 @@ export {
   CloseIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
-  SearchIcon
+  SearchIcon,
+  MailboxIcon,
+  PhoneIcon,
+  EyeIcon,
+  EyeOffIcon
 };

package/dist/icons.d.mts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.d.ts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.js

@@ -23,8 +23,12 @@ __export(icons_exports, {
   ChevronDownIcon: () => ChevronDownIcon,
   ChevronUpIcon: () => ChevronUpIcon,
   CloseIcon: () => CloseIcon,
+  EyeIcon: () => EyeIcon,
+  EyeOffIcon: () => EyeOffIcon,
+  MailboxIcon: () => MailboxIcon,
   MoreHorizontalIcon: () => MoreHorizontalIcon,
   MoreVerticalIcon: () => MoreVerticalIcon,
+  PhoneIcon: () => PhoneIcon,
   PlusIcon: () => PlusIcon,
   SearchIcon: () => SearchIcon,
   arrow_left: () => arrow_left,
@@ -218,13 +222,93 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,

package/dist/icons.mjs

@@ -2,8 +2,12 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,
@@ -23,13 +27,17 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-HM3V3DVO.mjs";
+} from "./chunk-BAZJ5UJ5.mjs";
 export {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,