@apple-pie/slice 0.0.0

package/README.md

@@ -0,0 +1,80 @@
+# Maya UIKit
+
+A comprehensive React component library and theming system for building modern applications.
+
+## Overview
+
+Maya UIKit provides a complete set of UI components and a flexible theming system to accelerate application development. The library includes 30+ production-ready components ranging from basic inputs to complex interactive elements, all built with TypeScript for type safety and developer experience.
+
+### Components
+
+The UIKit includes a wide range of components for common UI patterns:
+
+**Form Elements:**
+- TextField, TextArea, DivInput - Text input components with validation support
+- CheckBox, RadioButton, RadioButtonList - Selection controls
+- Switch, Slider - Toggle and range inputs
+- DropDown - Customizable dropdown menus
+
+**Buttons & Navigation:**
+- UIButton, IconButton - Primary action components
+- TabBar - Tab navigation with customizable options
+- Pager - Pagination controls
+
+**Feedback & Status:**
+- Badge - Status indicators and labels
+- Dot - Simple status dots
+- ProgressIndicator, DoneCheck - Loading and completion states
+- ProgressBar - Multi-step progress visualization
+- ErrorSummary - Error message display
+
+**Content Display:**
+- Avatar, AvatarGroup - User avatars with grouping
+- UIChip - Dismissible tags and labels
+- UILabel - Styled text labels
+- Overlay - Modal overlays
+
+**Icons & Media:**
+- Icon - Comprehensive icon set with IconNames
+- UIFileIcon - File type icons
+- DocIcons - Document type indicators
+- Logos - Brand logos
+
+**Layout & Organization:**
+- FlexDiv - Flexible layout container
+- Spacer - Spacing utility
+- Grouper - Content grouping
+- DraggablePanel - Draggable UI panels
+
+**Advanced Components:**
+- MessageInput - Rich message input with document upload
+- EditorButtonBar - Text editor toolbar
+- ToolTip - Contextual tooltips
+
+### Theming System
+
+The library includes a powerful theming system with:
+
+- **Pre-built Themes:** Light and dark themes out of the box
+- **Theme Hook:** `useMayaTheme` for easy theme switching
+- **Type-safe Theme Objects:** Full TypeScript support for theme customization
+- **Comprehensive Styling:** Colors, typography, corners, and legacy style support
+
+Theme exports include:
+- `lightTheme` / `darkTheme` - Complete theme objects
+- `light` / `dark` - Theme configurations
+- `GiaTheme`, `LyraColors`, `LyraTypeStyles` - Type definitions
+
+## Installation
+
+```bash
+npm install maya-uikit
+```
+
+### Peer Dependencies
+You will need to manage your own version of react, react-dom,
+styled-components and motion. Your project must have
+the following dependencies installed:
+
+```bash
+npm install react react-dom styled-components motion

package/dist/colors.css

@@ -0,0 +1,237 @@
+/* Core brand colors - theme independent */
+:root {
+	--brand-grey-50: #f4f7fa;
+	--brand-grey-100: #e5ecf3;
+	--brand-grey-200: #d5e0ea;
+	--brand-grey-300: #98acbf;
+	--brand-grey-400: #7f96a9;
+	--brand-grey-500: #657d91;
+	--brand-grey-600: #4c6273;
+	--brand-grey-700: #405261;
+	--brand-grey-800: #37434e;
+	--brand-grey-900: #2d353d;
+	--brand-grey-950: #1f262d;
+	--brand-sea-50: #e8f1ff;
+	--brand-sea-100: #c7defe;
+	--brand-sea-200: #a5c9ff;
+	--brand-sea-300: #7ab3ff;
+	--brand-sea-400: #4084ff;
+	--brand-sea-500: #2f45ff;
+	--brand-sea-600: #2d2fff;
+	--brand-sea-700: #0000ff;
+	--brand-sea-800: #0609cd;
+	--brand-sea-900: #001699;
+	--brand-sea-950: #0a0b5c;
+	--brand-sky-50: #eafffe;
+	--brand-sky-100: #cdfffb;
+	--brand-sky-200: #a3f8ff;
+	--brand-sky-300: #6af5ff;
+	--brand-sky-400: #00edff;
+	--brand-sky-500: #00c8e0;
+	--brand-sky-600: #00a6c0;
+	--brand-sky-700: #03839b;
+	--brand-sky-800: #0d697d;
+	--brand-sky-900: #105669;
+	--brand-sky-950: #033949;
+	--brand-land-50: #f4ffe5;
+	--brand-land-100: #e0ffb7;
+	--brand-land-200: #caff95;
+	--brand-land-300: #b7fe59;
+	--brand-land-400: #9cf820;
+	--brand-land-500: #71e618;
+	--brand-land-600: #56c900;
+	--brand-land-700: #2d8c00;
+	--brand-land-800: #31690b;
+	--brand-land-900: #2a580f;
+	--brand-land-950: #123201;
+	--brand-orange-50: #fff8ec;
+	--brand-orange-100: #ffebd7;
+	--brand-orange-200: #ffe3c6;
+	--brand-orange-300: #ffc182;
+	--brand-orange-400: #ff972e;
+	--brand-orange-500: #ff800a;
+	--brand-orange-600: #ff6700;
+	--brand-orange-700: #ff3700;
+	--brand-orange-800: #a02b0b;
+	--brand-orange-900: #80250b;
+	--brand-orange-950: #461604;
+	--brand-yellow-50: #ffffea;
+	--brand-yellow-100: #fffdca;
+	--brand-yellow-200: #fff2a0;
+	--brand-yellow-300: #ffeb72;
+	--brand-yellow-400: #ffd333;
+	--brand-yellow-500: #ffc200;
+	--brand-yellow-600: #ffad00;
+	--brand-yellow-700: #c68601;
+	--brand-yellow-800: #8f6307;
+	--brand-yellow-900: #5f430a;
+	--brand-yellow-950: #442e00;
+	--brand-purple-50: #faf0ff;
+	--brand-purple-100: #f4ddff;
+	--brand-purple-200: #e5cdff;
+	--brand-purple-300: #ccafff;
+	--brand-purple-400: #b891ff;
+	--brand-purple-500: #7d48ff;
+	--brand-purple-600: #6a14ff;
+	--brand-purple-700: #5600f1;
+	--brand-purple-800: #4d01d6;
+	--brand-purple-900: #4003af;
+	--brand-purple-950: #1e007c;
+	--brand-magenta-50: #fef1fc;
+	--brand-magenta-100: #ffdcef;
+	--brand-magenta-200: #ffcae6;
+	--brand-magenta-300: #ff90cb;
+	--brand-magenta-400: #ff61ca;
+	--brand-magenta-500: #ff3ac2;
+	--brand-magenta-600: #f012aa;
+	--brand-magenta-700: #df059b;
+	--brand-magenta-800: #9b0069;
+	--brand-magenta-900: #790a55;
+	--brand-magenta-950: #58003a;
+	--brand-white-0: #ffffff;
+	--product-red-400: #ff474a;
+	--product-red-500: #df0529;
+}
+
+/* Light theme colors */
+:root,
+[data-theme="lightMode"] {
+	--array-land: #e0ffb7;
+	--array-land-label: #56c900;
+	--array-magenta: #ffdcef;
+	--array-magenta-label: #f012aa;
+	--array-orange: #ffebd7;
+	--array-orange-label: #ff6700;
+	--array-purple: #f4ddff;
+	--array-purple-label: #6a14ff;
+	--array-sea: #c7defe;
+	--array-sea-label: #2d2fff;
+	--array-sky: #cdfffb;
+	--array-sky-label: #00a6c0;
+	--array-yellow: #fffdca;
+	--array-yellow-label: #ffad00;
+	--core-badge-primary: #2f45ff;
+	--core-badge-secondary: #e5ecf3;
+	--core-button-disabled: #f4f7fa;
+	--core-button-primary: #2f45ff;
+	--core-drop-shadow: #0339491a;
+	--core-gp-logo-primary: #0000ff;
+	--core-gp-logo-secondary: #1f262d;
+	--core-icon-dark: #1f262d;
+	--core-icon-disabled: #98acbf;
+	--core-icon-error: #df0529;
+	--core-icon-light: #ffffff;
+	--core-icon-primary: #1f262d;
+	--core-icon-secondary: #405261;
+	--core-icon-tertiary: #2f45ff;
+	--core-outline-secondary: #405261;
+	--core-outline-primary: #e5ecf3;
+	--core-outline-special: #c7defe;
+	--core-outline-tertiary: #2f45ff;
+	--core-surface-coverup-translucent: #1f262d52;
+	--core-surface-overlay-translucent: #ffffffcc;
+	--core-surface-primary: #ffffff;
+	--core-surface-secondary: #f4f7fa;
+	--core-surface-special: #e8f1ff;
+	--core-text-dark: #1f262d;
+	--core-text-disabled: #98acbf;
+	--core-text-error: #df0529;
+	--core-text-light: #ffffff;
+	--core-text-primary: #1f262d;
+	--core-text-secondary: #405261;
+	--core-text-tertiary: #4c6273;
+	--core-text-special: #2f45ff;
+	--core-link-primary: #0000ff;
+	--eor-tag-employee: #03839b;
+	--eor-tag-overdue: #df0529;
+	--eor-tag-paid: #2d8c00;
+	--eor-tag-pending: #ff800a;
+	--eor-tag-professional: #2f45ff;
+	--feedback-attention: #ffc200;
+	--feedback-informative: #03839b;
+	--feedback-positive: #2d8c00;
+	--feedback-urgency: #ff800a;
+	--feedback-warning: #df0529;
+	--gia-tag-risk-high: #df0529;
+	--gia-tag-risk-low: #03839b;
+	--gia-tag-risk-moderate: #ff800a;
+	--gia-text-excerpt-highlight: #ffebd7;
+	--gia-text-selection: #c7defe;
+	--scroll-bar: #e3e8ef;
+	--scroll-bar-hover: #cdd5df;
+	--surface-shadow-soft: 0px 4px 24px #0339491a;
+	--surface-shadow-strong: 0px 4px 64px #0339491a;
+}
+
+/* Dark theme colors */
+[data-theme="darkMode"] {
+	--array-land: #e0ffb7;
+	--array-land-label: #56c900;
+	--array-magenta: #ffdcef;
+	--array-magenta-label: #f012aa;
+	--array-orange: #ffebd7;
+	--array-orange-label: #ff6700;
+	--array-purple: #f4ddff;
+	--array-purple-label: #6a14ff;
+	--array-sea: #c7defe;
+	--array-sea-label: #2d2fff;
+	--array-sky: #cdfffb;
+	--array-sky-label: #00a6c0;
+	--array-yellow: #fffdca;
+	--array-yellow-label: #ffad00;
+	--core-badge-primary: #2f45ff;
+	--core-badge-secondary: #405261;
+	--core-button-disabled: #2d353d;
+	--core-button-primary: #2f45ff;
+	--core-drop-shadow: #0000007a;
+	--core-gp-logo-primary: #2f45ff;
+	--core-gp-logo-secondary: #ffffff;
+	--core-icon-dark: #1f262d;
+	--core-icon-disabled: #657d91;
+	--core-icon-error: #ff474a;
+	--core-icon-light: #ffffff;
+	--core-icon-primary: #ffffff;
+	--core-icon-secondary: #d5e0ea;
+	--core-icon-tertiary: #6af5ff;
+	--core-outline-secondary: #e5ecf3;
+	--core-outline-primary: #405261;
+	--core-outline-special: #105669;
+	--core-outline-tertiary: #6af5ff;
+	--core-surface-coverup-translucent: #0000007a;
+	--core-surface-overlay-translucent: #1f262dcc;
+	--core-surface-primary: #1f262d;
+	--core-surface-secondary: #2d353d;
+	--core-surface-special: #033949;
+	--core-text-dark: #1f262d;
+	--core-text-disabled: #657d91;
+	--core-text-error: #ff474a;
+	--core-text-light: #ffffff;
+	--core-text-primary: #ffffff;
+	--core-text-secondary: #d5e0ea;
+	--core-text-tertiary: #7f96a9;
+	--core-text-special: #6af5ff;
+	--core-link-primary: #6af5ff;
+	--eor-tag-employee: #03839b;
+	--eor-tag-overdue: #ff474a;
+	--eor-tag-paid: #2d8c00;
+	--eor-tag-pending: #ff800a;
+	--eor-tag-professional: #2f45ff;
+	--feedback-attention: #ffd333;
+	--feedback-informative: #00a6c0;
+	--feedback-positive: #2d8c00;
+	--feedback-urgency: #ff800a;
+	--feedback-warning: #ff474a;
+	--gia-tag-risk-high: #ff474a;
+	--gia-tag-risk-low: #00a6c0;
+	--gia-tag-risk-moderate: #ff800a;
+	--gia-text-excerpt-highlight: #ffebd7;
+	--gia-text-selection: #001699;
+	--scroll-bar: rgba(255, 255, 255, 0.1);
+	--scroll-bar-hover: rgba(255, 255, 255, 0.15);
+	--surface-shadow-soft: 0px 4px 24px #0000007a;
+	--surface-shadow-strong: 0px 4px 64px #0000007a;
+}
+
+body {
+	background: var(--core-surface-primary);
+}

package/dist/flexBox.module.css

@@ -0,0 +1,85 @@
+.row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.rowBetween {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.rowStart {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.rowEnd {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.columnStart {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.columnStartCenter {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.columnBetween {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.columnEnd {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-end;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}