florixui 1.6.1 → 1.7.0

package/README.md

@@ -423,6 +423,16 @@ A control that lets the user toggle a single option on or off, or select multipl
 </div>
 ```
 
+### Color Picker
+
+A simple color picker: predefined swatches over a color-code input (with a native color field). Controlled via value/onChange; shown as a swatch box or a hex input field.
+
+```tsx
+const [color, setColor] = useState('#9fff5b')
+
+<ColorPicker value={color} onChange={setColor} />
+```
+
 ### Colors
 
 Global semantic accent colors — red, orange, blue, green — each with a foreground pairing and distinct light/dark shades. Independent of the active theme.
@@ -1289,6 +1299,24 @@ A label/value definition row for detail cards. Stack several in a divide-y conta
 </div>
 ```
 
+### MapMarkerPin
+
+A reusable map-marker visual: a colored pin with an icon, an optional pulsing halo + scale when active, and an optional label. Pass icon, color, and active state. Drop inside a MapMarker.
+
+```tsx
+// Inside a <MapMarker longitude={...} latitude={...}>:
+<MapMarkerPin icon={<NavigationIcon />} color="bg-green" />
+
+// Active = pulsing halo + scale-up + label, with a rotated icon:
+<MapMarkerPin
+  icon={<NavigationIcon />}
+  color="bg-primary"
+  rotate={45}
+  active
+  label="LH-105 · A. Singh"
+/>
+```
+
 ### QuickStat
 
 A compact inline stat — icon, value, and an optional muted label. Line several up with vertical separators.

package/dist/components/custom/color-picker.d.ts

@@ -0,0 +1,24 @@
+export interface ColorPickerProps {
+    /** Current color (hex). Controlled. */
+    value: string;
+    /** Called with the new color. */
+    onChange: (value: string) => void;
+    /** Preset color swatches shown above the input. */
+    swatches?: string[];
+    /**
+     * Trigger appearance:
+     * - `swatch` (default): a rounded color box.
+     * - `input`: a field showing the hex code with a leading swatch.
+     */
+    trigger?: "swatch" | "input";
+    /** Placeholder for the `input` trigger when no value. */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A simple color picker: predefined swatches over a color-code input (with a
+ * native color field). Controlled via `value`/`onChange`. Show it as a `swatch`
+ * box or an `input` field via the `trigger` prop.
+ */
+export declare function ColorPicker({ value, onChange, swatches, trigger, placeholder, disabled, className, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/map-marker-pin.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface MapMarkerPinProps extends React.ComponentProps<"span"> {
+    /** Icon rendered inside the pin. */
+    icon?: React.ReactNode;
+    /**
+     * Background color of the pin — a Tailwind bg utility (e.g. `bg-primary`,
+     * `bg-green`, `bg-red`) or a CSS color via `style`. Defaults to `bg-primary`.
+     */
+    color?: string;
+    /** Pin diameter in px. Default `28`. */
+    size?: number;
+    /** Rotate the icon (e.g. a vehicle heading), in degrees. */
+    rotate?: number;
+    /** Active/selected — adds a pulsing halo, scales up, and shows the label. */
+    active?: boolean;
+    /** Optional label shown beneath the pin (always when set, or only when active). */
+    label?: React.ReactNode;
+    /** Only show the label while `active`. Default `true`. */
+    labelOnActive?: boolean;
+}
+/**
+ * A reusable map-marker visual: a colored circular pin with an icon, an optional
+ * pulsing halo + scale-up when `active`, and an optional `label` tooltip beneath
+ * it. Drop it inside a `MapMarker` (or any positioned container). `color` is a
+ * Tailwind bg utility so it tracks theme tokens.
+ */
+export declare function MapMarkerPin({ icon, color, size, rotate, active, label, labelOnActive, className, ...props }: MapMarkerPinProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/custom/advanced-select';
 export * from './components/custom/data-table';
 export * from './components/custom/form-dialog';
 export * from './components/custom/card-radio-group';
+export * from './components/custom/color-picker';
 export * from './components/custom/confirm-prompt';
 export * from './components/custom/custom-tabs';
 export * from './components/custom/data-cell';
@@ -15,6 +16,7 @@ export * from './components/custom/def-row';
 export * from './components/custom/empty-state';
 export * from './components/custom/faceted-filter';
 export * from './components/custom/list-card';
+export * from './components/custom/map-marker-pin';
 export * from './components/custom/not-found';
 export * from './components/custom/quick-stat';
 export * from './components/custom/sensor-card';