@trackany-device/components 1.0.0 → 1.2.0

package/src/platform/adapters/default.tsx

@@ -11,7 +11,7 @@ import type {
 
 // ─── Link ────────────────────────────────────────────────────────────────────
 
-function DefaultLink({ href, children, preserveScroll: _ps, replace: _r, ...props }: PlatformLinkProps) {
+function DefaultLink({ href, children, prefetch: _pf, preserveScroll: _ps, replace: _r, ...props }: PlatformLinkProps) {
     return <a href={href} {...props}>{children}</a>;
 }
 

package/src/platform/types.ts

@@ -9,6 +9,8 @@ export interface PlatformLinkProps {
     onClick?: (e?: React.MouseEvent) => void;
     target?: string;
     rel?: string;
+    /** Prefetch the linked page (Next.js option, ignored elsewhere) */
+    prefetch?: boolean;
     /** Preserve scroll position after navigation (Inertia option, ignored elsewhere) */
     preserveScroll?: boolean;
     /** Replace history entry instead of pushing (SPA routers) */

package/src/styles/components/apexcharts.css

@@ -0,0 +1,101 @@
+@layer components {
+  .apexcharts-text,
+  .apexcharts-title-text,
+  .apexcharts-legend-text {
+    font-family: inherit !important;
+  }
+
+  .apexcharts-title-text {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .apexcharts-pie-label {
+    @apply text-xs;
+  }
+
+  .apexcharts-toolbar {
+    text-align: start !important;
+  }
+
+  .apexcharts-menu {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    padding: 0.5rem 0 !important;
+    overflow: hidden;
+    min-width: 10rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item {
+    padding: 0.5rem 0.5rem !important;
+  }
+
+  .apexcharts-menu .apexcharts-menu-item:hover {
+    background-color: var(--gray-100) !important;
+  }
+
+  .apexcharts-tooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem !important;
+    color: var(--color-secondary-foreground) !important;
+  }
+
+  .apexcharts-tooltip .apexcharts-tooltip-title {
+    @apply text-foreground text-sm font-medium;
+    padding: 0.25rem 0.5rem !important;
+    background-color: transparent !important;
+    border-bottom: 1px solid var(--color-border) !important;
+  }
+
+  .apexcharts-xaxistooltip {
+    border: 1px solid var(--color-border) !important;
+    box-shadow: var(--box-shadow-sm) !important;
+    background-color: var(--color-background) !important;
+    border-radius: 0.625rem;
+    color: var(--color-mono);
+  }
+
+  .apexcharts-xaxistooltip:before {
+    border-bottom: 0 !important;
+  }
+
+  .apexcharts-legend {
+    display: flex;
+    flex-direction: column;
+    @apply gap-2;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series {
+    @apply gap-1;
+    display: flex;
+    align-items: center;
+  }
+
+  .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
+    @apply text-muted-foreground text-sm font-medium;
+  }
+
+  .apexcharts-card-rounded .apexcharts-canvas svg {
+    border-bottom-left-radius: var(--radius-xl);
+    border-bottom-right-radius: var(--radius-xl);
+  }
+
+  .apexcharts-rounded-sm .apexcharts-canvas svg {
+    border-radius: var(--radius-sm);
+  }
+
+  .apexcharts-rounded .apexcharts-canvas svg {
+    border-radius: var(--radius-md);
+  }
+
+  .apexcharts-rounded-lg .apexcharts-canvas svg {
+    border-radius: var(--radius-lg);
+  }
+
+  .apexcharts-rounded-xl .apexcharts-canvas svg {
+    border-radius: var(--radius-xl);
+  }
+}

package/src/styles/components/image-input.css

@@ -0,0 +1,51 @@
+@layer components {
+  .kt-image-input {
+    @apply relative inline-flex size-20 cursor-pointer items-center justify-center;
+
+    input[type='file'] {
+      @apply absolute size-0 appearance-none opacity-0;
+    }
+  }
+
+  .kt-image-input-remove {
+    @apply bg-background border-border absolute end-0.25 top-0.25 z-[1] flex size-5 cursor-pointer items-center justify-center rounded-full border shadow-sm;
+
+    i {
+      @apply text-muted-foreground text-[11px];
+    }
+
+    svg {
+      @apply text-muted-foreground size-3.25;
+    }
+
+    &:hover {
+      i {
+        @apply text-foreground;
+      }
+
+      svg {
+        @apply text-foreground;
+      }
+    }
+  }
+
+  .kt-image-input-placeholder {
+    @apply border-border kt-image-input-empty:border-border relative size-full overflow-hidden rounded-full border bg-cover bg-no-repeat;
+  }
+
+  .kt-image-input-preview {
+    @apply relative size-full overflow-hidden rounded-full bg-cover bg-no-repeat;
+  }
+}
+
+@custom-variant kt-image-input-empty {
+  [data-kt-image-input-initialized].empty & {
+    @slot;
+  }
+}
+
+@custom-variant image-input-changed {
+  [data-kt-image-input-initialized].changed & {
+    @slot;
+  }
+}

package/src/styles/components/leaflet.css

@@ -0,0 +1,25 @@
+@layer components {
+  /* Base Leaflet container styles */
+  .leaflet-container {
+    /* Leaflet pane and control styles */
+    & .leaflet-pane,
+    & .leaflet-top,
+    & .leaflet-bottom,
+    & .leaflet-control {
+      z-index: 1 !important;
+    }
+
+    /* Leaflet popup content wrapper styles */
+    & .leaflet-popup-content-wrapper {
+      border-radius: var(--radius-md);
+      text-align: center;
+      background-color: var(--color-popover);
+
+      /* Leaflet popup content styles */
+      & .leaflet-popup-content {
+        font-family: inherit;
+        @apply text-xs;
+      }
+    }
+  }
+}

package/src/styles/components/rating.css

@@ -0,0 +1,89 @@
+@layer components {
+  /* Base kt-rating styles */
+  .kt-rating {
+    display: inline-flex;
+    align-items: stretch;
+
+    & input {
+      appearance: none;
+      position: absolute;
+      inset-inline-start: 9999px;
+
+      &[disabled] {
+        display: none;
+      }
+    }
+  }
+
+  /* kt-rating on state */
+  .kt-rating-on {
+    @apply text-yellow-400;
+  }
+
+  /* kt-rating off state */
+  .kt-rating-off {
+    @apply text-muted-foreground;
+  }
+
+  /* kt-rating label base styles */
+  .kt-rating-label {
+    display: inline-flex !important;
+    align-items: center;
+
+    & .kt-rating-on {
+      display: none !important;
+    }
+
+    & .kt-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Hover and checked states for kt-rating label */
+  .kt-rating:hover label.kt-rating-label,
+  label.kt-rating-label,
+  label.kt-rating-label.checked,
+  div.kt-rating-label.checked {
+    & .kt-rating-on {
+      display: inline-flex !important;
+    }
+
+    & .kt-rating-off {
+      display: none !important;
+    }
+  }
+
+  /* Sibling hover and checked states */
+  label.kt-rating-label:hover ~ label.kt-rating-label,
+  .kt-rating-input:checked ~ .kt-rating-label {
+    & .kt-rating-on {
+      display: none !important;
+    }
+
+    & .kt-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Indeterminate kt-rating label state */
+  .kt-rating-label.indeterminate {
+    position: relative;
+
+    & .kt-rating-on {
+      display: inline-flex !important;
+      position: absolute;
+      z-index: 1;
+      overflow: hidden;
+      inset-inline-start: 0;
+    }
+
+    & .kt-rating-off {
+      display: inline-flex !important;
+    }
+  }
+
+  /* Cursor for label */
+  label.kt-rating-label {
+    cursor: pointer;
+  }
+}

package/src/styles/components/scrollable.css

@@ -0,0 +1,119 @@
+@layer components {
+  /* Base scrollable styles */
+  .kt-scrollable,
+  .kt-scrollable-y,
+  .kt-scrollable-x,
+  .kt-scrollable-hover,
+  .kt-scrollable-y-hover,
+  .kt-scrollable-x-hover,
+  .kt-scrollable-auto,
+  .kt-scrollable-y-auto,
+  .kt-scrollable-x-auto {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    position: relative;
+
+    &::-webkit-scrollbar {
+      width: 0.35rem;
+      height: 0.35rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 1.25rem;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
+
+  /* Overflow styles for scrollable variants */
+  .kt-scrollable,
+  .kt-scrollable-hover {
+    overflow: scroll;
+  }
+
+  .kt-scrollable-y,
+  .kt-scrollable-y-hover {
+    overflow-y: scroll;
+  }
+
+  .kt-scrollable-x,
+  .kt-scrollable-x-hover {
+    overflow-x: scroll;
+  }
+
+  .kt-scrollable-auto {
+    overflow: auto;
+  }
+
+  .kt-scrollable-y-auto {
+    overflow-y: auto;
+  }
+
+  .kt-scrollable-x-auto {
+    overflow-x: auto;
+  }
+
+  /* Scrollbar visibility and color */
+  .kt-scrollable,
+  .kt-scrollable-y,
+  .kt-scrollable-x,
+  .kt-scrollable-auto,
+  .kt-scrollable-y-auto,
+  .kt-scrollable-x-auto,
+  .kt-scrollable-hover:hover,
+  .kt-scrollable-y-hover:hover,
+  .kt-scrollable-x-hover:hover {
+    scrollbar-color: var(--scrollbar-thumb-color, var(--color-input))
+      transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb-color, var(--color-input));
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
+
+  /* Target safari browser only */
+  @supports (-webkit-hyphens: none) {
+    .kt-scrollable,
+    .kt-scrollable-hover {
+      overflow: auto;
+    }
+
+    .kt-scrollable-y,
+    .kt-scrollable-y-hover {
+      overflow-y: auto;
+    }
+
+    .kt-scrollable-x,
+    .kt-scrollable-x-hover {
+      overflow-x: auto;
+    }
+  }
+
+  /* Responsive adjustments for smaller screens */
+  @media (max-width: 64rem) {
+    .kt-scrollable,
+    .kt-scrollable-hover {
+      overflow: auto;
+    }
+
+    .kt-scrollable-y,
+    .kt-scrollable-y-hover {
+      overflow-y: auto;
+    }
+
+    .kt-scrollable-x,
+    .kt-scrollable-x-hover {
+      overflow-x: auto;
+    }
+  }
+}

package/src/styles/layout.css

@@ -0,0 +1,24 @@
+/* ── Layout variables ────────────────────────────────────────────────────── */
+:root {
+    --sidebar-width: 16rem;           /* 256px */
+    --sidebar-collapsed-width: 4rem;  /* 64px  */
+    --header-height: 4rem;            /* 64px  */
+    --content-padding: 1.25rem;       /* 20px  */
+}
+
+@media (max-width: 768px) {
+    :root {
+        --sidebar-width: 100vw;
+        --sidebar-collapsed-width: 0;
+    }
+}
+
+/* ── Layout state utility classes ───────────────────────────────────────── */
+.sidebar-expanded  { width: var(--sidebar-width); }
+.sidebar-collapsed { width: var(--sidebar-collapsed-width); }
+
+.header-full-width           { width: calc(100vw - var(--sidebar-width)); }
+.header-full-width-collapsed { width: calc(100vw - var(--sidebar-collapsed-width)); }
+
+.content-full-width           { width: calc(100vw - var(--sidebar-width)); }
+.content-full-width-collapsed { width: calc(100vw - var(--sidebar-collapsed-width)); }

package/src/styles/layouts/sidebar-fixed.css

@@ -1,161 +1,116 @@
 /**
- * SidebarFixedLayout (Metronic demo1) — structural CSS.
- *
- * Applied via body class ".sidebar-fixed-layout" set by the layout component
- * on mount and removed on unmount.
- *
- * Variables:
- *   --sidebar-width            current sidebar width (collapses to --sidebar-width-collapse)
- *   --sidebar-width-collapse   icon-only width when sidebar is collapsed
- *   --sidebar-default-width    full expanded width (used on hover to re-expand)
- *   --header-height            height of the fixed header
- *   --sidebar-transition-*     animation timing
+ * SidebarFixedLayout structural CSS — plain CSS, no Tailwind directives.
+ * Imported directly by SidebarFixedLayout.tsx so consuming apps get it automatically.
  */
 
-@layer components {
+.sidebar-fixed-layout {
+  --sidebar-transition-duration: 0.3s;
+  --sidebar-transition-timing: ease;
+  --sidebar-width: 280px;
+  --sidebar-width-collapse: 80px;
+  --sidebar-default-width: 280px;
+  --header-height: 70px;
+}
+
+@media (max-width: 1023px) {
   .sidebar-fixed-layout {
-    --sidebar-transition-duration: 0.3s;
-    --sidebar-transition-timing: ease;
     --sidebar-width: 280px;
-    --sidebar-width-collapse: 80px;
-    --sidebar-default-width: 280px;
-    --header-height: 70px;
+    --header-height: 60px;
   }
+}
 
-  @media (max-width: theme(--breakpoint-lg)) {
-    .sidebar-fixed-layout {
-      --sidebar-width: 280px;
-      --header-height: 60px;
-    }
-  }
+/* Header + sidebar-header height */
+.sidebar-fixed-layout .layout-header {
+  height: var(--header-height);
+}
 
-  /* Base chrome */
-  .sidebar-fixed-layout .layout-header {
-    height: var(--header-height);
-  }
+.sidebar-fixed-layout .layout-sidebar .sidebar-header {
+  height: var(--header-height);
+}
 
+/* Fixed header pushes wrapper down */
+.sidebar-fixed-layout.header-fixed .layout-wrapper {
+  padding-top: var(--header-height);
+}
+
+/* Desktop: sidebar width + wrapper offset */
+@media (min-width: 1024px) {
   .sidebar-fixed-layout .layout-sidebar {
     width: var(--sidebar-width);
+    transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+  }
+
+  .sidebar-fixed-layout .layout-sidebar .sidebar-wrapper {
+    width: var(--sidebar-default-width);
+  }
+
+  .sidebar-fixed-layout .layout-wrapper {
+    padding-inline-start: var(--sidebar-width);
+    transition: padding-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+  }
+
+  .sidebar-fixed-layout.header-fixed .layout-header {
+    inset-inline-start: var(--sidebar-width);
+    transition: inset-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
   }
 
-  /* Fixed header pushes wrapper down */
   .sidebar-fixed-layout.header-fixed .layout-wrapper {
     padding-top: var(--header-height);
   }
 
-  /* Desktop: fixed sidebar offsets the wrapper */
-  @media (min-width: theme(--breakpoint-lg)) {
-    .sidebar-fixed-layout .layout-sidebar {
-      width: var(--sidebar-width);
-      transition: width var(--sidebar-transition-duration)
-        var(--sidebar-transition-timing);
-    }
-
-    .sidebar-fixed-layout .layout-sidebar .sidebar-header {
-      height: var(--header-height);
-    }
-
-    .sidebar-fixed-layout .layout-sidebar .sidebar-wrapper {
-      width: var(--sidebar-default-width);
-    }
-
-    .sidebar-fixed-layout .layout-sidebar .sidebar-logo {
-      width: var(--sidebar-default-width);
-    }
-
-    .sidebar-fixed-layout .layout-sidebar .small-logo {
-      display: none;
-    }
-
-    .sidebar-fixed-layout .layout-wrapper {
-      padding-inline-start: var(--sidebar-width);
-    }
-
-    .sidebar-fixed-layout.header-fixed .layout-header {
-      inset-inline-start: var(--sidebar-width);
-    }
-
-    .sidebar-fixed-layout.header-fixed .layout-wrapper {
-      padding-top: var(--header-height);
-    }
-
-    /* Collapsed state */
-    .sidebar-fixed-layout.sidebar-collapse {
-      --sidebar-width: var(--sidebar-width-collapse);
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar {
-      transition: width var(--sidebar-transition-duration)
-        var(--sidebar-transition-timing);
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:hover {
-      width: var(--sidebar-default-width);
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) .default-logo {
-      display: none;
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) .small-logo {
-      display: flex;
-    }
-
-    /* Hide accordion labels/badges when collapsed and not hovered */
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='accordion-menu-title'],
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='badge'],
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='accordion-menu-sub-indicator'] {
-      display: none !important;
-      transition: none !important;
-      animation: none !important;
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='accordion-menu-sub-content'] {
-      visibility: hidden;
-      position: absolute;
-      height: 0;
-      width: 0;
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='accordion-menu-label'] {
-      visibility: hidden;
-      position: relative;
-    }
-
-    .sidebar-fixed-layout.sidebar-collapse
-      .layout-sidebar:not(:hover)
-      [data-slot='accordion-menu-label']::before {
-      content: '...';
-      color: currentColor;
-      font-size: inherit;
-      position: absolute;
-      visibility: visible;
-      display: inline-block;
-      inset-inline-start: 0;
-      top: 0.25rem;
-      margin-inline-start: -0.15rem;
-      transform: translateX(100%);
-    }
+  /* Collapsed state — redefine sidebar-width via custom prop */
+  .sidebar-fixed-layout.sidebar-collapse {
+    --sidebar-width: var(--sidebar-width-collapse);
+  }
+
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:hover {
+    width: var(--sidebar-default-width);
+  }
+
+  /* When collapsed and not hovered, hide app name (logo icon stays visible) */
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) .sidebar-app-name {
+    display: none;
+  }
+
+  /* Hide accordion text labels when collapsed and not hovered */
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='accordion-menu-title'],
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='badge'],
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='accordion-menu-sub-indicator'] {
+    display: none !important;
+    transition: none !important;
+    animation: none !important;
   }
 
-  /* Smooth transitions after layout initialises (avoids flash on mount) */
-  .sidebar-fixed-layout.layout-initialized .layout-wrapper {
-    transition: padding-inline-start var(--sidebar-transition-duration)
-      var(--sidebar-transition-timing);
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='accordion-menu-sub-content'] {
+    visibility: hidden;
+    position: absolute;
+    height: 0;
+    width: 0;
   }
 
-  .sidebar-fixed-layout.layout-initialized .layout-header {
-    transition: inset-inline-start var(--sidebar-transition-duration)
-      var(--sidebar-transition-timing);
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='accordion-menu-label'] {
+    visibility: hidden;
+    position: relative;
   }
+
+  .sidebar-fixed-layout.sidebar-collapse .layout-sidebar:not(:hover) [data-slot='accordion-menu-label']::before {
+    content: '•••';
+    color: currentColor;
+    font-size: 0.5rem;
+    letter-spacing: 0.1em;
+    position: absolute;
+    visibility: visible;
+    display: inline-block;
+    inset-inline-start: 0;
+    top: 0.15rem;
+  }
+}
+
+/* Smooth transitions after mount (prevents flash on init) */
+.sidebar-fixed-layout.layout-initialized .layout-wrapper {
+  transition: padding-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+}
+
+.sidebar-fixed-layout.layout-initialized .layout-header {
+  transition: inset-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
 }