@ramme-io/ui 1.1.0 → 1.1.2

package/dist/components/data-display/StatusBadge.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+
+export type StatusType = 'online' | 'offline' | 'error' | 'warning' | 'active';
+export interface StatusBadgeProps {
+    status: StatusType;
+    /**
+     * Optional custom label. If not provided, uses the default status name.
+     * Pass explicit `null` to show only the dot.
+     */
+    label?: string | null;
+    className?: string;
+    showDot?: boolean;
+}
+/**
+ * @wizard
+ * @name StatusBadge
+ * @description A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.
+ * @tags status, badge, iot, indicator, dot
+ * @category data-display
+ * @props
+ * - name: status
+ * type: 'online' | 'offline' | 'error' | 'warning' | 'active'
+ * description: The state to represent. Determines the color of the dot.
+ * - name: label
+ * type: string
+ * description: Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").
+ * - name: showDot
+ * type: boolean
+ * description: Whether to show the colored indicator dot.
+ * default: true
+ * - name: className
+ * type: string
+ * description: Additional CSS classes.
+ */
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/forms/SegmentedControl.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+
+export interface SegmentedControlOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value: string | number;
+    onChange: (value: any) => void;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * @wizard
+ * @name SegmentedControl
+ * @description A linear toggle component that functions like a radio group. Ideal for switching between discrete modes (e.g., "Off / Auto / On").
+ * @tags input, toggle, switch, radio, control
+ * @category input
+ * @props
+ * - name: options
+ * type: Array<{ label: string, value: string | number }>
+ * description: The list of segments to display.
+ * - name: value
+ * type: string | number
+ * description: The currently selected value.
+ * - name: onChange
+ * type: function
+ * description: Callback fired when a segment is selected.
+ * - name: size
+ * type: 'sm' | 'md'
+ * description: The size of the control.
+ * default: 'md'
+ * - name: className
+ * type: string
+ * description: Additional CSS classes.
+ */
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/data-display/LineChart';
 export * from './components/data-display/PieChart';
 export * from './components/data-display/CodeBlock';
 export * from './components/data-display/StatCard';
+export * from './components/data-display/StatusBadge';
 export * from './components/feedback/Alert';
 export * from './components/feedback/EmptyState';
 export * from './components/feedback/TippyTooltip';
@@ -35,6 +36,7 @@ export * from './components/forms/Input';
 export * from './components/forms/MultiSelect';
 export * from './components/forms/Radio';
 export * from './components/forms/SearchInput';
+export * from './components/forms/SegmentedControl';
 export * from './components/forms/Select';
 export * from './components/forms/Textarea';
 export * from './components/forms/ToggleSwitch';