@risalabs_frontend_org/oasis-ui-kit 0.18.0 → 0.22.0

package/README.md

@@ -1,6 +1,6 @@
 # RISA Oasis UI Kit
 
-A comprehensive React UI component library built with TypeScript and SCSS, featuring 25+ production-ready components for building modern web applications.
+A comprehensive React UI component library built with TypeScript and SCSS, featuring 35+ production-ready components for building modern web applications.
 
 ## Installation
 
@@ -163,6 +163,89 @@ import { Toggle, ToggleSwitch } from '@risalabs_frontend_org/oasis-ui-kit';
 />
 ```
 
+#### `RadioButton`
+A radio button group supporting vertical/horizontal layout with customizable selected color.
+
+```tsx
+import { RadioButton } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<RadioButton
+  name="plan"
+  options={[
+    { label: 'Basic', value: 'basic' },
+    { label: 'Premium', value: 'premium' },
+    { label: 'Enterprise', value: 'enterprise', disabled: true }
+  ]}
+  value="basic"
+  onChange={(value) => console.log(value)}
+  direction="vertical"    // "vertical" | "horizontal"
+  gap="0.75rem"           // Custom gap between options
+  selectedColor="#1e69da"  // Custom selection color
+/>
+```
+
+#### `SelectInput`
+A lightweight select component using the native `<select>` element with custom styling.
+
+```tsx
+import { SelectInput } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<SelectInput
+  label="Organization"
+  options={[
+    { label: 'Acme Corp', value: 'acme' },
+    { label: 'Globex Inc', value: 'globex' }
+  ]}
+  defaultValue="acme"
+  placeholder="Select..."
+  onChange={(value, option) => console.log(value, option)}
+  focusBorderWidth="2px"
+/>
+```
+
+#### `CustomDropdown`
+A fully custom dropdown with viewport-aware positioning, portal support, validation, and keyboard navigation.
+
+```tsx
+import { CustomDropdown } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<CustomDropdown
+  label="Organization"
+  options={[
+    { label: 'Acme Corp', value: 'acme' },
+    { label: 'Globex Inc', value: 'globex' }
+  ]}
+  defaultValue="acme"
+  placeholder="Select..."
+  onChange={(value, option) => console.log(value, option)}
+  required={true}
+  error="This field is required" // Shows red border and error message
+  hint="Choose your organization"
+  shouldUsePortal={false}        // Render via React portal to escape overflow:hidden
+  focusBorderWidth="1px"
+/>
+```
+
+#### `ActionInput`
+A text input with an adjacent action button and dirty-state detection. The icon color changes when the value differs from the initial value.
+
+```tsx
+import { ActionInput } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<ActionInput
+  value="BMKYUTS8"
+  onChange={(value) => console.log(value)}
+  onAction={(value) => console.log('Submitted:', value)}
+  placeholder="Enter code..."
+  readOnly={false}
+  disabled={false}
+  iconColor="#6B6B6B"   // Default icon color
+  iconSize={16}         // Icon size in px
+  height="2rem"         // Container height
+  dirtyColor="#0056D6"  // Icon color when value is modified
+/>
+```
+
 ### Date & Time Components
 
 #### `DateInput`
@@ -270,6 +353,27 @@ import { SideNavigation } from '@risalabs_frontend_org/oasis-ui-kit';
 />
 ```
 
+#### `HorizontalNavigationTab`
+A horizontal tab navigation bar with active indicator, custom colors, and keyboard navigation.
+
+```tsx
+import { HorizontalNavigationTab } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<HorizontalNavigationTab
+  tabs={[
+    { label: 'Overview', value: 'overview' },
+    { label: 'Details', value: 'details' },
+    { label: 'History', value: 'history', disabled: true }
+  ]}
+  value="overview"
+  onChange={(value) => console.log(value)}
+  activeColor="#1E69DA"          // Active tab text & border color
+  backgroundColor="#F5F5F5"     // Tab background
+  activeBackgroundColor="#FFF"  // Active tab background
+  rounded={true}                // Rounded top corners
+/>
+```
+
 #### `TabContainer` & `SingleTab`
 Horizontal tab navigation components.
 
@@ -422,6 +526,132 @@ import { StatusText } from '@risalabs_frontend_org/oasis-ui-kit';
 <StatusText {...props} />
 ```
 
+#### `Tags`
+A styled tag component with optional dropdown selection. Options are displayed as styled tags. Supports portal rendering for overflow-hidden containers.
+
+```tsx
+import { Tags } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<Tags
+  label="Financial"
+  backgroundColor="#FFFCD6"
+  textColor="#665D00"
+  showBorder={false}
+  shouldUsePortal={false}
+  options={[
+    { label: 'Financial', value: 'financial', backgroundColor: '#FFFCD6', textColor: '#665D00' },
+    { label: 'Medical', value: 'medical', backgroundColor: '#eefcf4', textColor: '#007028' },
+    { label: 'Clinical', value: 'clinical', backgroundColor: '#eaf2ff', textColor: '#002152' }
+  ]}
+  onSelect={(option) => console.log(option)}
+/>
+```
+
+#### `Badge`
+A styled badge with optional left/right icons, tooltip, and customizable colors.
+
+```tsx
+import { Badge } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<Badge
+  text="Active"
+  backgroundColor="#eefcf4"
+  textColor="#007028"
+  size="medium"         // "small" | "medium" | "large"
+  maxWidth="200px"
+  borderColor="#007028"
+  showTooltip={true}
+  leftIcon={<SomeIcon />}
+  onLeftIconClick={(e) => {}}
+/>
+```
+
+#### `BadgeGroup`
+Displays a collection of badges with overflow handling, showing a "+N more" indicator for hidden items.
+
+```tsx
+import { BadgeGroup } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<BadgeGroup
+  badges={[
+    { text: 'React', backgroundColor: '#e0f2fe', textColor: '#0369a1' },
+    { text: 'TypeScript', backgroundColor: '#ede9fe', textColor: '#6d28d9' },
+    { text: 'SCSS', backgroundColor: '#fce7f3', textColor: '#be185d' }
+  ]}
+  maxVisible={2}
+  size="medium"
+  showBadgeTooltips={true}
+  showOverflowTooltip={true}
+  onOverflowClick={(hiddenBadges) => console.log(hiddenBadges)}
+/>
+```
+
+#### `RuleCard`
+A card for displaying text rules with optional numbered index and edit/delete action buttons.
+
+```tsx
+import { RuleCard } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<RuleCard
+  content="Patient must have a valid prescription before dispensing."
+  index={1}                      // Optional numbered badge
+  onEdit={() => console.log('edit')}
+  onDelete={() => console.log('delete')}
+  editIconColor="#0056D6"
+  deleteIconColor="#F50400"
+  iconSize={12}
+  contentClassName="custom-text"
+/>
+```
+
+#### `MultiLineTextWithCopy`
+Displays primary and secondary text with a copy-to-clipboard button for the secondary value.
+
+```tsx
+import { MultiLineTextWithCopy } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<MultiLineTextWithCopy
+  primaryText="John Doe"
+  secondaryText="NPI-1234567890"
+  copyValue="1234567890"      // Optional: overrides secondaryText for clipboard
+  onCopy={(value) => console.log('Copied:', value)}
+  copyIconColor="#0056D6"
+  copyIconSize={16}
+  shouldTruncate={false}      // Truncate primary text with ellipsis
+/>
+```
+
+#### `ThreeDotButton`
+A three-dot (kebab) menu button with a dropdown options list and viewport-aware positioning.
+
+```tsx
+import { ThreeDotButton } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<ThreeDotButton
+  options={[
+    { id: 'edit', text: 'Edit' },
+    { id: 'delete', text: 'Delete' },
+    { id: 'archive', text: 'Archive' }
+  ]}
+  onOptionClick={(optionId) => console.log(optionId)}
+/>
+```
+
+#### `PopOverWithClickableOptions`
+A popover menu displaying a list of clickable options with optional icons.
+
+```tsx
+import { PopOverWithClickableOptions } from '@risalabs_frontend_org/oasis-ui-kit';
+
+<PopOverWithClickableOptions
+  options={[
+    { id: 'view', text: 'View Details', icon: <ViewIcon /> },
+    { id: 'download', text: 'Download' }
+  ]}
+  onClick={(id) => console.log(id)}
+/>
+```
+
 #### `ProfileButton`
 A user profile button with avatar and dropdown indicator.
 

package/dist/index.d.ts

@@ -32,4 +32,12 @@ export * from "./src/components/badge/badge";
 export * from "./src/components/badge-group/BadgeGroup";
 export * from "./src/components/three-dot-button/three-dot-button";
 export * from "./src/components/pop-over-with-clickable-options/pop-over-with-clickable-options";
+export * from "./src/components/tags/tags";
+export * from "./src/components/radio-button/radio-button";
+export * from "./src/components/multi-line-text-with-copy/multi-line-text-with-copy";
+export * from "./src/components/horizontal-navigation-tab/horizontal-navigation-tab";
+export * from "./src/components/rule-card/rule-card";
+export * from "./src/components/select-input/select-input";
+export * from "./src/components/custom-dropdown/custom-dropdown";
+export * from "./src/components/action-input/action-input";
 export * from "./src/shared/types";