@icomponents/react 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+> ⚠️ **Ядро шаблона.** В продукте этот пакет **перезаписывается целиком** (`scripts/sync-core.sh`):
+> локальная правка здесь будет затёрта следующим синком. Расширяй через **швы** (каталог прав, список
+> шрифтов, резолвер), а полезное — портируй в шаблон, чтобы это получили все продукты. Политика и
+> процедура: [`docs/engineering/core-modules.md`](../../docs/engineering/core-modules.md).
+
+# @stack/ui
+
+The design system: shared shadcn-based primitives plus the admin ("Evoca") theme components and the app shell, consumed by every UI slice and `apps/web`.
+
+## What it is / responsibility
+
+An infra/presentation package. It holds the shadcn/Radix UI primitives, the higher-level admin components (status pill / detail card / KPI tile) built on semantic theme tokens, the layout shell (sidebar / header / nav), React context providers (theme/font/layout/direction/search), hooks, and low-level utils. No feature domain and no server code — pure client building blocks. Shape: `exports: "./*"` maps directly onto `src/*`, so there is no barrel; each module is imported by its subpath.
+
+## Public surface (`package.json` `exports` = `./*` → `src/*`)
+
+Imported by path, e.g.:
+
+- `@stack/ui/lib/utils` — `cn`, `sleep`, `getPageNumbers`, `getDisplayNameInitials`.
+- `@stack/ui/components/status-badge` — `StatusBadge` + `StatusTone` (semantic tones: success/info/neutral/warning/danger/muted).
+- `@stack/ui/components/detail-card` — `DetailCard`, `DetailRow`.
+- `@stack/ui/components/stat-tile` — `StatTile`.
+- `@stack/ui/components/ui/*` — shadcn primitives (`button`, `dialog`, `table`, `form`, `select`, `sidebar`, `sonner`, …).
+- `@stack/ui/components/layout/*` — `header`, `main`, `app-sidebar`, `nav-*`.
+- `@stack/ui/context/*` — `theme-provider`, `font-provider`, `layout-provider`, `direction-provider`, `search-provider`.
+- `@stack/ui/components/data-table/*`, `@stack/ui/hooks/*`.
+
+## Structure (`src/`)
+
+- `components/ui/` — shadcn/Radix primitives.
+- `components/` — admin composites (`status-badge`, `detail-card`, `stat-tile`, `data-table/`, `command-menu`, `confirm-dialog`, `password-input`, …).
+- `components/layout/` — the app shell (sidebar/header/nav).
+- `context/`, `hooks/`, `config/fonts`, `assets/custom/` (layout/theme icons), `lib/` (`utils`, `cookies`, `format-cell`, `handle-server-error`).
+
+## Depends on
+
+`@radix-ui/*`, `class-variance-authority`, `clsx`, `tailwind-merge`, `cmdk`, `lucide-react`, `date-fns`, `sonner`, `react-hook-form`, `input-otp`, `react-day-picker`, `react-top-loading-bar`, `tw-animate-css`; peer: `react`, `react-dom`, `@tanstack/react-router`, `@tanstack/react-table`.
+
+## Consumed by / how to use
+
+Imported as `@stack/ui/<path>` by every UI-bearing slice (`account`, `audit`, `roles-matrix`, `tenants`, `tenant-users`, `token-inspector`) and by `apps/web`. Tailwind theme tokens (success/warning/destructive/primary/…) are defined by the consuming app; these components only reference them.

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "@icomponents/react",
+  "version": "0.1.0",
+  "description": "Кит компонентов для веба: shadcn по форме на Base UI, оболочка, темизация, контракт testid",
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./assets/custom/icon-dir": "./src/assets/custom/icon-dir.tsx",
+    "./assets/custom/icon-layout-compact": "./src/assets/custom/icon-layout-compact.tsx",
+    "./assets/custom/icon-layout-default": "./src/assets/custom/icon-layout-default.tsx",
+    "./assets/custom/icon-layout-full": "./src/assets/custom/icon-layout-full.tsx",
+    "./assets/custom/icon-sidebar-floating": "./src/assets/custom/icon-sidebar-floating.tsx",
+    "./assets/custom/icon-sidebar-inset": "./src/assets/custom/icon-sidebar-inset.tsx",
+    "./assets/custom/icon-sidebar-sidebar": "./src/assets/custom/icon-sidebar-sidebar.tsx",
+    "./assets/custom/icon-theme-dark": "./src/assets/custom/icon-theme-dark.tsx",
+    "./assets/custom/icon-theme-light": "./src/assets/custom/icon-theme-light.tsx",
+    "./assets/custom/icon-theme-system": "./src/assets/custom/icon-theme-system.tsx",
+    "./components/admin-page-header": "./src/components/admin-page-header.tsx",
+    "./components/color-theme-switch": "./src/components/color-theme-switch.tsx",
+    "./components/coming-soon": "./src/components/coming-soon.tsx",
+    "./components/command-menu": "./src/components/command-menu.tsx",
+    "./components/config-drawer": "./src/components/config-drawer.tsx",
+    "./components/confirm-dialog": "./src/components/confirm-dialog.tsx",
+    "./components/data-table/bulk-actions": "./src/components/data-table/bulk-actions.tsx",
+    "./components/data-table/column-header": "./src/components/data-table/column-header.tsx",
+    "./components/data-table/data-table": "./src/components/data-table/data-table.tsx",
+    "./components/data-table/faceted-filter": "./src/components/data-table/faceted-filter.tsx",
+    "./components/data-table/index": "./src/components/data-table/index.ts",
+    "./components/data-table/pagination": "./src/components/data-table/pagination.tsx",
+    "./components/data-table/tanstack-table.d": "./src/components/data-table/tanstack-table.d.ts",
+    "./components/data-table/toolbar": "./src/components/data-table/toolbar.tsx",
+    "./components/data-table/view-options": "./src/components/data-table/view-options.tsx",
+    "./components/date-picker": "./src/components/date-picker.tsx",
+    "./components/detail-card": "./src/components/detail-card.tsx",
+    "./components/language-switch": "./src/components/language-switch.tsx",
+    "./components/layout/app-sidebar": "./src/components/layout/app-sidebar.tsx",
+    "./components/layout/app-title": "./src/components/layout/app-title.tsx",
+    "./components/layout/header": "./src/components/layout/header.tsx",
+    "./components/layout/main": "./src/components/layout/main.tsx",
+    "./components/layout/nav-group": "./src/components/layout/nav-group.tsx",
+    "./components/layout/nav-user": "./src/components/layout/nav-user.tsx",
+    "./components/layout/screen-header": "./src/components/layout/screen-header.tsx",
+    "./components/layout/team-switcher": "./src/components/layout/team-switcher.tsx",
+    "./components/layout/top-nav": "./src/components/layout/top-nav.tsx",
+    "./components/layout/types": "./src/components/layout/types.ts",
+    "./components/learn-more": "./src/components/learn-more.tsx",
+    "./components/long-text": "./src/components/long-text.tsx",
+    "./components/navigation-progress": "./src/components/navigation-progress.tsx",
+    "./components/password-input": "./src/components/password-input.tsx",
+    "./components/profile-dropdown": "./src/components/profile-dropdown.tsx",
+    "./components/search": "./src/components/search.tsx",
+    "./components/select-dropdown": "./src/components/select-dropdown.tsx",
+    "./components/sign-out-dialog": "./src/components/sign-out-dialog.tsx",
+    "./components/skip-to-main": "./src/components/skip-to-main.tsx",
+    "./components/stat-tile": "./src/components/stat-tile.tsx",
+    "./components/status-badge": "./src/components/status-badge.tsx",
+    "./components/theme-switch": "./src/components/theme-switch.tsx",
+    "./components/ui/alert-dialog": "./src/components/ui/alert-dialog.tsx",
+    "./components/ui/alert": "./src/components/ui/alert.tsx",
+    "./components/ui/avatar": "./src/components/ui/avatar.tsx",
+    "./components/ui/badge": "./src/components/ui/badge.tsx",
+    "./components/ui/button": "./src/components/ui/button.tsx",
+    "./components/ui/calendar": "./src/components/ui/calendar.tsx",
+    "./components/ui/card": "./src/components/ui/card.tsx",
+    "./components/ui/checkbox": "./src/components/ui/checkbox.tsx",
+    "./components/ui/collapsible": "./src/components/ui/collapsible.tsx",
+    "./components/ui/command": "./src/components/ui/command.tsx",
+    "./components/ui/dialog": "./src/components/ui/dialog.tsx",
+    "./components/ui/dropdown-menu": "./src/components/ui/dropdown-menu.tsx",
+    "./components/ui/form": "./src/components/ui/form.tsx",
+    "./components/ui/input-otp": "./src/components/ui/input-otp.tsx",
+    "./components/ui/input": "./src/components/ui/input.tsx",
+    "./components/ui/label": "./src/components/ui/label.tsx",
+    "./components/ui/popover": "./src/components/ui/popover.tsx",
+    "./components/ui/radio-group": "./src/components/ui/radio-group.tsx",
+    "./components/ui/scroll-area": "./src/components/ui/scroll-area.tsx",
+    "./components/ui/select": "./src/components/ui/select.tsx",
+    "./components/ui/separator": "./src/components/ui/separator.tsx",
+    "./components/ui/sheet": "./src/components/ui/sheet.tsx",
+    "./components/ui/sidebar": "./src/components/ui/sidebar.tsx",
+    "./components/ui/skeleton": "./src/components/ui/skeleton.tsx",
+    "./components/ui/sonner": "./src/components/ui/sonner.tsx",
+    "./components/ui/switch": "./src/components/ui/switch.tsx",
+    "./components/ui/table": "./src/components/ui/table.tsx",
+    "./components/ui/tabs": "./src/components/ui/tabs.tsx",
+    "./components/ui/textarea": "./src/components/ui/textarea.tsx",
+    "./components/ui/tooltip": "./src/components/ui/tooltip.tsx",
+    "./config/fonts": "./src/config/fonts.ts",
+    "./context/direction-provider": "./src/context/direction-provider.tsx",
+    "./context/font-provider": "./src/context/font-provider.tsx",
+    "./context/language-provider": "./src/context/language-provider.tsx",
+    "./context/layout-provider": "./src/context/layout-provider.tsx",
+    "./context/search-provider": "./src/context/search-provider.tsx",
+    "./context/theme-provider": "./src/context/theme-provider.tsx",
+    "./hooks/use-dialog-state": "./src/hooks/use-dialog-state.tsx",
+    "./hooks/use-mobile": "./src/hooks/use-mobile.tsx",
+    "./hooks/use-table-url-state": "./src/hooks/use-table-url-state.ts",
+    "./i18n/common": "./src/i18n/common.ts",
+    "./i18n/create-i18n": "./src/i18n/create-i18n.ts",
+    "./i18n/types": "./src/i18n/types.ts",
+    "./i18n/use-translation": "./src/i18n/use-translation.ts",
+    "./lib/clipboard": "./src/lib/clipboard.ts",
+    "./lib/cookies": "./src/lib/cookies.ts",
+    "./lib/format-cell": "./src/lib/format-cell.ts",
+    "./lib/handle-server-error": "./src/lib/handle-server-error.ts",
+    "./lib/random-id": "./src/lib/random-id.ts",
+    "./lib/show-submitted-data": "./src/lib/show-submitted-data.tsx",
+    "./lib/utils": "./src/lib/utils.ts",
+    "./testids": "./src/testids.ts",
+    "./assets/*": "./src/assets/*"
+  },
+  "scripts": {
+    "type-check": "bunx tsc --noEmit",
+    "test": "bun test",
+    "prepack": "bun scripts/gen-exports.mjs"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@icomponents/tokens": "workspace:*",
+    "@radix-ui/react-icons": "^1.3.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "i18next": "^26.3.6",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.28.0",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.83.0",
+    "react-i18next": "^17.0.10",
+    "react-top-loading-bar": "^3.0.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": ">=1.170.0",
+    "@tanstack/react-table": ">=8.21.0",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.6",
+    "@icomponents/typescript-config": "workspace:*",
+    "@tanstack/react-router": "^1.170.18",
+    "@tanstack/react-table": "^8.21.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/bun": "latest",
+    "@types/node": "latest",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "happy-dom": "^20.10.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "latest"
+  }
+}

package/src/assets/custom/icon-dir.tsx

@@ -0,0 +1,105 @@
+import { type Direction } from "@icomponents/react/context/direction-provider";
+import { cn } from "@icomponents/react/lib/utils";
+import { type SVGProps } from "react";
+
+type IconDirProps = SVGProps<SVGSVGElement> & {
+  dir: Direction;
+};
+
+export function IconDir({ dir, className, ...props }: IconDirProps) {
+  return (
+    <svg
+      data-name={`icon-dir-${dir}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      className={cn(dir === "rtl" && "rotate-y-180", className)}
+      {...props}
+    >
+      <path
+        d="M23.42.51h51.92c2.21 0 4 1.79 4 4v42.18c0 2.21-1.79 4-4 4H23.42s-.04-.02-.04-.04V.55s.02-.04.04-.04z"
+        opacity={0.15}
+      />
+      <path
+        fill="none"
+        opacity={0.72}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 14.88L17.78 14.88"
+      />
+      <path
+        fill="none"
+        opacity={0.48}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 22.09L16.08 22.09"
+      />
+      <path
+        fill="none"
+        opacity={0.55}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.56 18.38L14.93 18.38"
+      />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <circle cx={7.51} cy={7.4} r={2.54} opacity={0.8} />
+        <path fill="none" opacity={0.8} strokeWidth="2px" d="M12.06 6.14L17.78 6.14" />
+        <path fill="none" opacity={0.6} d="M11.85 8.79L16.91 8.79" />
+      </g>
+      <path
+        fill="none"
+        opacity={0.62}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="3px"
+        d="M29.41 7.4L34.67 7.4"
+      />
+      <rect
+        x={28.76}
+        y={11.21}
+        width={26.03}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.44}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={28.76}
+        y={17.01}
+        width={44.25}
+        height={13.48}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.3}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={28.76}
+        y={33.57}
+        width={44.25}
+        height={4.67}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.21}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={28.76}
+        y={41.32}
+        width={36.21}
+        height={4.67}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.3}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+    </svg>
+  );
+}

package/src/assets/custom/icon-layout-compact.tsx

@@ -0,0 +1,84 @@
+import { type SVGProps } from "react";
+
+export function IconLayoutCompact(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-layout-compact"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <rect
+        x={5.84}
+        y={5.2}
+        width={4}
+        height={40}
+        rx={2}
+        ry={2}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <g stroke="#fff" strokeLinecap="round" strokeMiterlimit={10}>
+        <path fill="none" opacity={0.66} strokeWidth="2px" d="M7.26 11.56L8.37 11.56" />
+        <path fill="none" opacity={0.51} strokeWidth="2px" d="M7.26 14.49L8.37 14.49" />
+        <path fill="none" opacity={0.52} strokeWidth="2px" d="M7.26 17.39L8.37 17.39" />
+        <circle cx={7.81} cy={7.25} r={1.16} fill="#fff" opacity={0.8} />
+      </g>
+      <path
+        fill="none"
+        opacity={0.75}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="3px"
+        d="M15.81 14.49L22.89 14.49"
+      />
+      <rect
+        x={14.93}
+        y={18.39}
+        width={22.19}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.5}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={14.93}
+        y={5.89}
+        width={59.16}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.9}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={14.93}
+        y={24.22}
+        width={32.68}
+        height={19.95}
+        rx={2.11}
+        ry={2.11}
+        opacity={0.4}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <rect x={59.05} y={38.15} width={2.01} height={3.42} rx={0.33} ry={0.33} opacity={0.32} />
+        <rect x={54.78} y={34.99} width={2.01} height={6.58} rx={0.33} ry={0.33} opacity={0.44} />
+        <rect x={63.17} y={32.86} width={2.01} height={8.7} rx={0.33} ry={0.33} opacity={0.53} />
+        <rect x={67.54} y={29.17} width={2.01} height={12.4} rx={0.33} ry={0.33} opacity={0.66} />
+      </g>
+      <g opacity={0.5}>
+        <circle cx={62.16} cy={18.63} r={7.5} />
+        <path d="M62.16 11.63c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-1c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z" />
+      </g>
+      <g opacity={0.74}>
+        <path d="M63.04 18.13l3.38-5.67c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z" />
+        <path d="M66.57 13.19a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95a8.007 8.007 0 00-2.86-2.92z" />
+      </g>
+    </svg>
+  );
+}

package/src/assets/custom/icon-layout-default.tsx

@@ -0,0 +1,48 @@
+import { type SVGProps } from "react";
+
+export function IconLayoutDefault(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="con-layout-default"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <path
+        d="M39.22 15.99h-8.16c-.79 0-1.43-.67-1.43-1.5s.64-1.5 1.43-1.5h8.16c.79 0 1.43.67 1.43 1.5s-.64 1.5-1.43 1.5z"
+        opacity={0.75}
+      />
+      <rect x={29.63} y={18.39} width={16.72} height={2.73} rx={1.36} ry={1.36} opacity={0.5} />
+      <path
+        d="M75.1 6.68v1.45c0 .63-.49 1.14-1.09 1.14H30.72c-.6 0-1.09-.51-1.09-1.14V6.68c0-.62.49-1.14 1.09-1.14h43.29c.6 0 1.09.52 1.09 1.14z"
+        opacity={0.9}
+      />
+      <rect x={29.63} y={24.22} width={21.8} height={19.95} rx={2.11} ry={2.11} opacity={0.4} />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <rect x={61.06} y={38.15} width={2.01} height={3.42} rx={0.33} ry={0.33} opacity={0.32} />
+        <rect x={56.78} y={34.99} width={2.01} height={6.58} rx={0.33} ry={0.33} opacity={0.44} />
+        <rect x={65.17} y={32.86} width={2.01} height={8.7} rx={0.33} ry={0.33} opacity={0.53} />
+        <rect x={69.55} y={29.17} width={2.01} height={12.4} rx={0.33} ry={0.33} opacity={0.66} />
+      </g>
+      <g opacity={0.5}>
+        <circle cx={63.17} cy={18.63} r={7.5} />
+        <path d="M63.17 11.63c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-1c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z" />
+      </g>
+      <g opacity={0.74}>
+        <path d="M64.05 18.13l3.38-5.67c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z" />
+        <path d="M67.57 13.19a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95a8.007 8.007 0 00-2.86-2.92z" />
+      </g>
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <rect x={5.84} y={5.02} width={19.14} height={40} rx={2} ry={2} opacity={0.8} />
+        <g stroke="#fff">
+          <path fill="none" opacity={0.72} strokeWidth="2px" d="M9.02 17.39L21.25 17.39" />
+          <path fill="none" opacity={0.48} strokeWidth="2px" d="M9.02 24.6L19.54 24.6" />
+          <path fill="none" opacity={0.55} strokeWidth="2px" d="M9.02 20.88L18.4 20.88" />
+          <circle cx={10.98} cy={9.91} r={2.54} fill="#fff" opacity={0.8} />
+          <path fill="none" opacity={0.8} strokeWidth="2px" d="M15.53 8.65L21.25 8.65" />
+          <path fill="none" opacity={0.6} d="M15.32 11.3L20.38 11.3" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/assets/custom/icon-layout-full.tsx

@@ -0,0 +1,68 @@
+import { type SVGProps } from "react";
+
+export function IconLayoutFull(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-layout-full"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <path
+        fill="none"
+        opacity={0.75}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="3px"
+        d="M6.85 14.49L15.02 14.49"
+      />
+      <rect
+        x={5.84}
+        y={18.39}
+        width={25.6}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.5}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={5.84}
+        y={5.89}
+        width={68.26}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.9}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={5.84}
+        y={24.22}
+        width={37.71}
+        height={19.95}
+        rx={2.11}
+        ry={2.11}
+        opacity={0.4}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <rect x={59.05} y={38.15} width={2.01} height={3.42} rx={0.33} ry={0.33} opacity={0.32} />
+        <rect x={54.78} y={34.99} width={2.01} height={6.58} rx={0.33} ry={0.33} opacity={0.44} />
+        <rect x={63.17} y={32.86} width={2.01} height={8.7} rx={0.33} ry={0.33} opacity={0.53} />
+        <rect x={67.54} y={29.17} width={2.01} height={12.4} rx={0.33} ry={0.33} opacity={0.66} />
+      </g>
+      <g opacity={0.5}>
+        <circle cx={62.16} cy={18.63} r={7.5} />
+        <path d="M62.16 11.63c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-1c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z" />
+      </g>
+      <g opacity={0.74}>
+        <path d="M63.04 18.13l3.38-5.67c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z" />
+        <path d="M66.57 13.19a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95a8.007 8.007 0 00-2.86-2.92z" />
+      </g>
+    </svg>
+  );
+}

package/src/assets/custom/icon-sidebar-floating.tsx

@@ -0,0 +1,62 @@
+import { type SVGProps } from "react";
+
+export function IconSidebarFloating(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-sidebar-floating"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <rect
+        x={5.89}
+        y={5.15}
+        width={19.74}
+        height={40}
+        rx={2}
+        ry={2}
+        opacity={0.8}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <g stroke="#fff" strokeLinecap="round" strokeMiterlimit={10}>
+        <path fill="none" opacity={0.72} strokeWidth="2px" d="M9.81 18.36L22.04 18.36" />
+        <path fill="none" opacity={0.48} strokeWidth="2px" d="M9.81 25.57L20.33 25.57" />
+        <path fill="none" opacity={0.55} strokeWidth="2px" d="M9.81 21.85L19.18 21.85" />
+        <circle cx={11.76} cy={10.88} r={2.54} fill="#fff" opacity={0.8} />
+        <path fill="none" opacity={0.8} strokeWidth="2px" d="M16.31 9.62L22.04 9.62" />
+        <path fill="none" opacity={0.6} d="M16.1 12.27L21.16 12.27" />
+      </g>
+      <path
+        fill="none"
+        opacity={0.62}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="3px"
+        d="M30.59 9.62L35.85 9.62"
+      />
+      <rect
+        x={29.94}
+        y={13.42}
+        width={26.03}
+        height={2.73}
+        rx={0.64}
+        ry={0.64}
+        opacity={0.44}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <rect
+        x={29.94}
+        y={19.28}
+        width={43.11}
+        height={25.87}
+        rx={2}
+        ry={2}
+        opacity={0.3}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+    </svg>
+  );
+}

package/src/assets/custom/icon-sidebar-inset.tsx

@@ -0,0 +1,53 @@
+import { type SVGProps } from "react";
+
+export function IconSidebarInset(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      data-name="icon-sidebar-inset"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 79.86 51.14"
+      {...props}
+    >
+      <rect
+        x={23.39}
+        y={5.57}
+        width={50.22}
+        height={40}
+        rx={2}
+        ry={2}
+        opacity={0.2}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+      />
+      <path
+        fill="none"
+        opacity={0.72}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.08 17.05L17.31 17.05"
+      />
+      <path
+        fill="none"
+        opacity={0.48}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.08 24.25L15.6 24.25"
+      />
+      <path
+        fill="none"
+        opacity={0.55}
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth="2px"
+        d="M5.08 20.54L14.46 20.54"
+      />
+      <g strokeLinecap="round" strokeMiterlimit={10}>
+        <circle cx={7.04} cy={9.57} r={2.54} opacity={0.8} />
+        <path fill="none" opacity={0.8} strokeWidth="2px" d="M11.59 8.3L17.31 8.3" />
+        <path fill="none" opacity={0.6} d="M11.38 10.95L16.44 10.95" />
+      </g>
+    </svg>
+  );
+}