@imperosoft/cris-webui-components 0.1.0-beta.2 → 0.1.0-beta.3

package/README.md

@@ -96,6 +96,162 @@ The component automatically adds these classes based on state:
 - `pressed` - When locally pressed
 - `disabled` - When disabled
 
+---
+
+### CrisText
+
+A text display component with CIP pattern decoding.
+
+```tsx
+import { CrisText } from '@imperosoft/cris-webui-components';
+
+// Static text
+<CrisText text="Hello World" />
+
+// Text from serial join
+<CrisText joinIndirectText={10} />
+
+// Text with CIP patterns (decoded automatically)
+<CrisText text="Volume: <A$5?%65535.0p>%" />
+
+// With visibility/enable joins
+<CrisText
+  joinIndirectText={10}
+  joinVisible={100}
+  joinEnable={101}
+/>
+```
+
+#### CrisText Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `joinIndirectText` | `number` | - | Serial join for indirect text |
+| `joinEnable` | `number` | - | Digital join to enable/disable |
+| `joinVisible` | `number` | - | Digital join to show/hide |
+| `text` | `string` | - | Static text (with CIP patterns) |
+| `className` | `string` | - | Container CSS class |
+| `textClassName` | `string` | - | Text element CSS class |
+| `classDisabled` | `string` | - | CSS class when disabled |
+
+---
+
+### CrisSlider
+
+An analog slider/fader component.
+
+```tsx
+import { CrisSlider } from '@imperosoft/cris-webui-components';
+
+// Vertical slider
+<CrisSlider
+  join={10}
+  className="w-16 h-64"
+  barClassName="bg-gray-700 rounded"
+  fillClassName="bg-blue-500 rounded"
+  thumbClassName="bg-white rounded"
+/>
+
+// Horizontal slider
+<CrisSlider
+  join={10}
+  horizontal
+  className="w-64 h-16"
+  barClassName="bg-gray-700 rounded"
+  fillClassName="bg-green-500 rounded"
+  thumbClassName="bg-white rounded"
+/>
+
+// With custom range
+<CrisSlider
+  join={10}
+  minValue={0}
+  maxValue={100}
+/>
+
+// Separate digital/analog joins
+<CrisSlider
+  joinDigital={10}
+  joinAnalog={11}
+/>
+```
+
+#### CrisSlider Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `join` | `number` | - | Shared analog/digital join |
+| `joinDigital` | `number` | - | Digital join for press/release |
+| `joinAnalog` | `number` | - | Analog join for value |
+| `joinEnable` | `number` | - | Digital join to enable/disable |
+| `joinVisible` | `number` | - | Digital join to show/hide |
+| `minValue` | `number` | `0` | Minimum analog value |
+| `maxValue` | `number` | `65535` | Maximum analog value |
+| `horizontal` | `boolean` | `false` | Horizontal orientation |
+| `fillHidden` | `boolean` | `false` | Hide fill bar |
+| `trackSizePercent` | `number` | `20` | Track size as % of container |
+| `thumbSizePercent` | `number` | `4` | Thumb size as % of container |
+| `delayMsAfterDragUpdateFeedback` | `number` | `1000` | Delay before feedback updates |
+| `className` | `string` | - | Container CSS class |
+| `barClassName` | `string` | - | Track/bar CSS class |
+| `fillClassName` | `string` | - | Fill CSS class |
+| `thumbClassName` | `string` | - | Thumb CSS class |
+| `classDisabled` | `string` | - | CSS class when disabled |
+
+---
+
+### CrisGauge
+
+An analog gauge/level meter component.
+
+```tsx
+import { CrisGauge } from '@imperosoft/cris-webui-components';
+
+// Vertical gauge
+<CrisGauge
+  join={10}
+  segments={20}
+  className="h-48"
+  inactiveSegmentClassName="bg-gray-700"
+  lowSegmentClassName="bg-green-500"
+  mediumSegmentClassName="bg-yellow-500"
+  highSegmentClassName="bg-red-500"
+/>
+
+// Horizontal gauge
+<CrisGauge
+  join={10}
+  orientation="horizontal"
+  segments={10}
+/>
+
+// Static value (no join)
+<CrisGauge value={32768} />
+```
+
+#### CrisGauge Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | - | Static value (if no join) |
+| `join` | `number` | - | Analog join for value |
+| `joinEnable` | `number` | - | Digital join to enable/disable |
+| `joinVisible` | `number` | - | Digital join to show/hide |
+| `minValue` | `number` | `0` | Minimum value |
+| `maxValue` | `number` | `65535` | Maximum value |
+| `segments` | `number` | `20` | Number of segments |
+| `inverted` | `boolean` | `false` | Invert direction |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Orientation |
+| `className` | `string` | - | Container CSS class |
+| `inactiveSegmentClassName` | `string` | - | Inactive segment class |
+| `segmentClassName` | `string` | - | Active segment class (all) |
+| `lowSegmentClassName` | `string` | - | Low level segment class (0-60%) |
+| `mediumSegmentClassName` | `string` | - | Medium level segment class (60-80%) |
+| `highSegmentClassName` | `string` | - | High level segment class (80-100%) |
+| `classDisabled` | `string` | - | CSS class when disabled |
+
+---
+
 ## Peer Dependencies
 
 - `react` >= 18.0.0

package/dist/index.d.mts

@@ -45,4 +45,122 @@ interface CrisButtonProps {
 }
 declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
-export { CrisButton, type CrisButtonProps };
+interface CrisTextProps {
+    /** Serial join for indirect text */
+    joinIndirectText?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Static text (used if no joinIndirectText) */
+    text?: string;
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Text element CSS class */
+    textClassName?: string;
+    /** Text element inline style */
+    textStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+    /** Children content */
+    children?: ReactNode;
+}
+declare function CrisText({ joinIndirectText, joinEnable, joinVisible, text, className, style, textClassName, textStyle, classDisabled, children, }: CrisTextProps): react_jsx_runtime.JSX.Element | null;
+
+interface CrisSliderProps {
+    /** Analog join for value (shared with digital if joinDigital not set) */
+    join?: number;
+    /** Digital join for press/release feedback */
+    joinDigital?: number;
+    /** Analog join for value (overrides join) */
+    joinAnalog?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Minimum value (default 0) */
+    minValue?: number;
+    /** Maximum value (default 65535) */
+    maxValue?: number;
+    /** Horizontal orientation (default false = vertical) */
+    horizontal?: boolean;
+    /** Hide fill bar */
+    fillHidden?: boolean;
+    /** Track size as percentage of container (default 20) */
+    trackSizePercent?: number;
+    /** Thumb size as percentage of container (default 4) */
+    thumbSizePercent?: number;
+    /** Delay in ms after drag before updating from feedback (default 1000) */
+    delayMsAfterDragUpdateFeedback?: number;
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Bar/track CSS class */
+    barClassName?: string;
+    /** Bar/track inline style */
+    barStyle?: React.CSSProperties;
+    /** Fill CSS class */
+    fillClassName?: string;
+    /** Fill inline style */
+    fillStyle?: React.CSSProperties;
+    /** Thumb CSS class */
+    thumbClassName?: string;
+    /** Thumb inline style */
+    thumbStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+}
+declare function CrisSlider({ join, joinDigital, joinAnalog, joinEnable, joinVisible, minValue, maxValue, horizontal, fillHidden, trackSizePercent, thumbSizePercent, delayMsAfterDragUpdateFeedback, className, style, barClassName, barStyle, fillClassName, fillStyle, thumbClassName, thumbStyle, classDisabled, }: CrisSliderProps): react_jsx_runtime.JSX.Element | null;
+
+interface CrisGaugeProps {
+    /** Static value (used if no join) */
+    value?: number;
+    /** Analog join for value */
+    join?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Minimum value (default 0) */
+    minValue?: number;
+    /** Maximum value (default 65535) */
+    maxValue?: number;
+    /** Number of segments (default 20) */
+    segments?: number;
+    /** Invert direction (default false) */
+    inverted?: boolean;
+    /** Orientation (default vertical) */
+    orientation?: 'vertical' | 'horizontal';
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Inactive segment CSS class */
+    inactiveSegmentClassName?: string;
+    /** Inactive segment inline style */
+    inactiveSegmentStyle?: React.CSSProperties;
+    /** Active segment CSS class (all levels) */
+    segmentClassName?: string;
+    /** Active segment inline style (all levels) */
+    segmentStyle?: React.CSSProperties;
+    /** Low level segment CSS class (0-60%) */
+    lowSegmentClassName?: string;
+    /** Low level segment inline style */
+    lowSegmentStyle?: React.CSSProperties;
+    /** Medium level segment CSS class (60-80%) */
+    mediumSegmentClassName?: string;
+    /** Medium level segment inline style */
+    mediumSegmentStyle?: React.CSSProperties;
+    /** High level segment CSS class (80-100%) */
+    highSegmentClassName?: string;
+    /** High level segment inline style */
+    highSegmentStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+}
+declare function CrisGauge({ value, join, joinEnable, joinVisible, minValue, maxValue, segments, inverted, orientation, className, style, inactiveSegmentClassName, inactiveSegmentStyle, segmentClassName, segmentStyle, lowSegmentClassName, lowSegmentStyle, mediumSegmentClassName, mediumSegmentStyle, highSegmentClassName, highSegmentStyle, classDisabled, }: CrisGaugeProps): react_jsx_runtime.JSX.Element | null;
+
+export { CrisButton, type CrisButtonProps, CrisGauge, type CrisGaugeProps, CrisSlider, type CrisSliderProps, CrisText, type CrisTextProps };

package/dist/index.d.ts

@@ -45,4 +45,122 @@ interface CrisButtonProps {
 }
 declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
-export { CrisButton, type CrisButtonProps };
+interface CrisTextProps {
+    /** Serial join for indirect text */
+    joinIndirectText?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Static text (used if no joinIndirectText) */
+    text?: string;
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Text element CSS class */
+    textClassName?: string;
+    /** Text element inline style */
+    textStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+    /** Children content */
+    children?: ReactNode;
+}
+declare function CrisText({ joinIndirectText, joinEnable, joinVisible, text, className, style, textClassName, textStyle, classDisabled, children, }: CrisTextProps): react_jsx_runtime.JSX.Element | null;
+
+interface CrisSliderProps {
+    /** Analog join for value (shared with digital if joinDigital not set) */
+    join?: number;
+    /** Digital join for press/release feedback */
+    joinDigital?: number;
+    /** Analog join for value (overrides join) */
+    joinAnalog?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Minimum value (default 0) */
+    minValue?: number;
+    /** Maximum value (default 65535) */
+    maxValue?: number;
+    /** Horizontal orientation (default false = vertical) */
+    horizontal?: boolean;
+    /** Hide fill bar */
+    fillHidden?: boolean;
+    /** Track size as percentage of container (default 20) */
+    trackSizePercent?: number;
+    /** Thumb size as percentage of container (default 4) */
+    thumbSizePercent?: number;
+    /** Delay in ms after drag before updating from feedback (default 1000) */
+    delayMsAfterDragUpdateFeedback?: number;
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Bar/track CSS class */
+    barClassName?: string;
+    /** Bar/track inline style */
+    barStyle?: React.CSSProperties;
+    /** Fill CSS class */
+    fillClassName?: string;
+    /** Fill inline style */
+    fillStyle?: React.CSSProperties;
+    /** Thumb CSS class */
+    thumbClassName?: string;
+    /** Thumb inline style */
+    thumbStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+}
+declare function CrisSlider({ join, joinDigital, joinAnalog, joinEnable, joinVisible, minValue, maxValue, horizontal, fillHidden, trackSizePercent, thumbSizePercent, delayMsAfterDragUpdateFeedback, className, style, barClassName, barStyle, fillClassName, fillStyle, thumbClassName, thumbStyle, classDisabled, }: CrisSliderProps): react_jsx_runtime.JSX.Element | null;
+
+interface CrisGaugeProps {
+    /** Static value (used if no join) */
+    value?: number;
+    /** Analog join for value */
+    join?: number;
+    /** Digital join for enable state */
+    joinEnable?: number;
+    /** Digital join for visibility */
+    joinVisible?: number;
+    /** Minimum value (default 0) */
+    minValue?: number;
+    /** Maximum value (default 65535) */
+    maxValue?: number;
+    /** Number of segments (default 20) */
+    segments?: number;
+    /** Invert direction (default false) */
+    inverted?: boolean;
+    /** Orientation (default vertical) */
+    orientation?: 'vertical' | 'horizontal';
+    /** Container CSS class */
+    className?: string;
+    /** Container inline style */
+    style?: React.CSSProperties;
+    /** Inactive segment CSS class */
+    inactiveSegmentClassName?: string;
+    /** Inactive segment inline style */
+    inactiveSegmentStyle?: React.CSSProperties;
+    /** Active segment CSS class (all levels) */
+    segmentClassName?: string;
+    /** Active segment inline style (all levels) */
+    segmentStyle?: React.CSSProperties;
+    /** Low level segment CSS class (0-60%) */
+    lowSegmentClassName?: string;
+    /** Low level segment inline style */
+    lowSegmentStyle?: React.CSSProperties;
+    /** Medium level segment CSS class (60-80%) */
+    mediumSegmentClassName?: string;
+    /** Medium level segment inline style */
+    mediumSegmentStyle?: React.CSSProperties;
+    /** High level segment CSS class (80-100%) */
+    highSegmentClassName?: string;
+    /** High level segment inline style */
+    highSegmentStyle?: React.CSSProperties;
+    /** Class when disabled */
+    classDisabled?: string;
+}
+declare function CrisGauge({ value, join, joinEnable, joinVisible, minValue, maxValue, segments, inverted, orientation, className, style, inactiveSegmentClassName, inactiveSegmentStyle, segmentClassName, segmentStyle, lowSegmentClassName, lowSegmentStyle, mediumSegmentClassName, mediumSegmentStyle, highSegmentClassName, highSegmentStyle, classDisabled, }: CrisGaugeProps): react_jsx_runtime.JSX.Element | null;
+
+export { CrisButton, type CrisButtonProps, CrisGauge, type CrisGaugeProps, CrisSlider, type CrisSliderProps, CrisText, type CrisTextProps };