florixui 1.6.1 → 1.8.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.
@@ -516,6 +526,16 @@ const columns: DataTableColumn<Section>[] = [
 />
 ```
 
+### Date Time Picker
+
+A single date-and-time selector — a trigger that opens a calendar with an H:M:S time row. Controlled via an ISO string. This is the same field the Date Time Range Picker uses for its custom from/to inputs.
+
+```tsx
+const [value, setValue] = useState(new Date().toISOString())
+
+<DateTimePicker value={value} onChange={setValue} label="Starts at" />
+```
+
 ### Date Time Range Picker
 
 A time-range picker with quick presets (hour/day/week/month) and a custom From/To selector — each a calendar plus a precise hour:minute:second time row. Timezone-aware, controlled via ISO strings.
@@ -1289,6 +1309,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/date-time-picker.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface DateTimePickerProps {
+    /** Selected value as an ISO 8601 string (empty for none). Controlled. */
+    value: string;
+    /** Called with the new ISO string when the date or time changes. */
+    onChange: (iso: string) => void;
+    /** Optional label rendered above the trigger. */
+    label?: React.ReactNode;
+    /** Trigger text when no value is selected. */
+    placeholder?: string;
+    /** Hide the time row to pick a date only. */
+    showTime?: boolean;
+    /** IANA timezone for display + emitted ISO. Defaults to `UTC`. */
+    timezone?: string;
+    /** Disable days before this date (ISO/date string). */
+    minDate?: string;
+    /** Disable days after this date (ISO/date string). */
+    maxDate?: string;
+    /** Disable the field. */
+    disabled?: boolean;
+    /** Class for the wrapper. */
+    className?: string;
+}
+/**
+ * A single date-and-time selector: a trigger that opens a calendar with an
+ * H:M:S time row in a popover. Controlled via `value` (ISO string) /`onChange`.
+ * Set `showTime={false}` for date-only. This is the same field the
+ * `DateTimeRangePicker` uses for its custom from/to inputs.
+ */
+export declare function DateTimePicker({ value, onChange, label, placeholder, showTime, timezone, minDate, maxDate, disabled, className, }: DateTimePickerProps): 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,12 +16,14 @@ 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';
 export * from './components/custom/side-sheet';
 export * from './components/custom/stat-card';
 export * from './components/custom/status-list';
+export * from './components/custom/date-time-picker';
 export * from './components/custom/date-time-range-picker';
 export { presetToRange, navigateRange, } from './components/custom/date-time-range-picker-utils';
 export * from './components/ui/alert';