native-document 1.0.14 → 1.0.16-8.1

package/src/ui/index.js

@@ -0,0 +1,47 @@
+export { default as SpinnerRender } from './components/spinner/SpinnerRender';
+export { default as AvatarRender } from './components/avatar/avatar/AvatarRender';
+export { default as AvatarGroupRender } from './components/avatar/avata-group/AvatarGroupRender';
+export { default as BadgeRender } from './components/badge/BadgeRender';
+export { default as DividerRender } from './components/divider/DividerRender';
+export { default as SkeletonRender } from './components/skeleton/SkeletonRender';
+export { default as ProgressRender } from './components/progress/ProgressRender';
+export { default as ButtonRender } from './components/button/ButtonRender';
+export { default as AlertRender } from './components/alert/AlertRender';
+export { default as ToastRender } from './components/toast/ToastRender';
+export { default as PopoverRender } from './components/popover/PopoverRender';
+export { default as TooltipRender } from './components/tooltip/TooltipRender';
+export { default as DropdownRender } from './components/dropdown/DropdownRender';
+export { default as ModalRender } from './components/modal/ModalRender';
+export { default as DropdownItemRender } from './components/dropdown/item/DropdownItemRender';
+export { default as DropdownGroupRender } from './components/dropdown/group/DropdownGroupRender';
+export { default as DropdownDividerRender } from './components/dropdown/divider/DropdownDividerRender';
+export { default as BreadcrumbRender } from './components/breadcrumb/BreadcrumbRender';
+export { default as TabsRender } from './components/tabs/TabsRender';
+export { default as PaginationRender } from './components/pagination/PaginationRender';
+export { default as StepperRender } from './components/stepper/StepperRender';
+export { default as StepperStepRender } from './components/stepper/StepperStepRender';
+export { default as MenuRender } from './components/menu/MenuRender';
+export { default as MenuItemRender } from './components/menu/MenuItemRender';
+export { default as MenuGroupRender } from './components/menu/MenuGroupRender';
+export { default as MenuLinkRender } from './components/menu/MenuLinkRender';
+export { default as MenuDividerRender } from './components/menu/MenuDividerRender';
+export { default as ContextMenuRender, contextMenuHandler } from './components/contextmenu/ContextMenuRender';
+export { default as SplitterRender } from './components/splitter/SplitterRender';
+export { default as SplitterGutterRender } from './components/splitter/SplitterGutterRender';
+export { default as SplitterPanelRender } from './components/splitter/SplitterPanelRender';
+export { default as AccordionItemRender } from './components/accordion/AccordionItemRender';
+export { default as AccordionRender } from './components/accordion/AccordionRender';
+export { default as SimpleTableRender } from './components/table/simple-table/SimpleTableRender';
+export { default as DataTableRender } from './components/table/data-table/DataTableRender';
+export { default as SwitchRender } from './components/switch/SwitchRender';
+export { default as SpacerRender } from './components/spacer/SpacerRender';
+
+export { default as ListRender } from './components/list/ListRender';
+export { default as ListGroupRender } from './components/list/group/ListGroupRender';
+export { default as ListItemRender } from './components/list/item/ListItemRender';
+export { default as ListDividerRender } from './components/list/divider/ListDividerRender';
+
+export { default as CardRender } from './components/card/CardRender';
+
+export * from './components/stacks';
+export * from './components/form';

package/src/ui/theme.scss

@@ -0,0 +1 @@
+@use 'tokens/index';

package/src/ui/tokens/animation.scss

@@ -0,0 +1,36 @@
+:root {
+  --fast: .2s;
+  --natural: .3s;
+  --medium: .5s;
+  --slow: 1s;
+  --very-slow: 5s;
+
+  --animate-very-fast: .2s;
+  --animate-fast: .5s;
+  --animate-relax: 1s;
+  --animate-slow: 2s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(15px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+
+@keyframes pulse-shadow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); /* Initial shadow (subtle or none) */
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); /* Shadow expands and fades */
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); /* Returns to initial state */
+  }
+}

package/src/ui/tokens/colors-dark.scss

@@ -0,0 +1,58 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --transparent: transparent;
+    --background: white;
+    //--background: #242426;
+    --background-color: #242426;
+    --text-color: black;
+
+    --red: #ff4245;
+    --orange: #ff9230;
+    --yellow: #ffd600;
+    --green: #30d158;
+    --mint: #00dac3;
+    --teal: #00d2e0;
+    --cyan: #3cd3fe;
+    --blue: #0091ff;
+    --indigo: #6b5dff;
+    --purple: #db34f2;
+    --pink: #ff375f;
+    --brown: #b78a66;
+    --gray: #8e8e93;
+    --gray-lite-1: #636366;
+    --gray-lite-2: #48484a;
+    --gray-lite-3: #3a3a3c;
+    --gray-lite-4: #2c2c2e;
+    --gray-lite-5: #1c1c1e;
+    --white: #FFFFFF;
+    --black: #000000;
+    --sidereal-black: #0a0a0a;
+
+    --contrasted-red: #ff6165;
+    --contrasted-orange: #ffa056;
+    --contrasted-yellow: #fedf43;
+    --contrasted-green: #4ad968;
+    --contrasted-mint: #54dfcb;
+    --contrasted-teal: #3bddec;
+    --contrasted-cyan: #6dd9ff;
+    --contrasted-blue: #5cb8ff;
+    --contrasted-indigo: #a7aaff;
+    --contrasted-purple: #ea8dff;
+    --contrasted-pink: #ff8ac4;
+    --contrasted-brown: #dba679;
+    --contrasted-gray: #aeaeb2;
+    --contrasted-gray-lite-1: #7c7c80;
+    --contrasted-gray-lite-2: #545456;
+    --contrasted-gray-lite-3: #444446;
+    --contrasted-gray-lite-4: #363638;
+    --contrasted-gray-lite-5: #242426;
+  }
+}
+
+.light-mode {
+  color-scheme: light;
+}
+
+.dark-mode {
+  color-scheme: dark;
+}

package/src/ui/tokens/colors.scss

@@ -0,0 +1,54 @@
+:root {
+  --transparent: transparent;
+  --background: white;
+  --background-color: white;
+  --text-color: black;
+
+  --red: #ff383c;
+  --dark-red: #721c24;
+  --orange: #ff8d28;
+  --dark-orange: #ff8d28;
+  --yellow: #ffcc00;
+  --dark-yellow: #7e6c15;
+  --green: #34c759;
+  --dark-green: #155724;
+  --mint: #00c8b3;
+  --teal: #00c3d0;
+  --cyan: #00c0e8;
+  --blue: #0088ff;
+  --dark-lite-blue: #0c5460;
+  --dark-blue: #004085;
+  --indigo: #6155f5;
+  --purple: #cb30e0;
+  --pink: #ff2d55;
+  --brown: #ac7f5e;
+  --dark-brown: #856404;
+  --gray: #8e8e93;
+  --gray-lite-1: #aeaeb2;
+  --gray-lite-2: #c7c7cc;
+  --gray-lite-3: #d1d1d6;
+  --gray-lite-4: #e5e5ea;
+  --gray-lite-5: #f2f2f7;
+  --white: #ffffff;
+  --black: #000000;
+  --sidereal-black: #0a0a0a;
+
+  --contrasted-red: #e9152d;
+  --contrasted-orange: #c55300;
+  --contrasted-yellow: #a16a00;
+  --contrasted-green: #008932;
+  --contrasted-mint: #008575;
+  --contrasted-teal: #008198;
+  --contrasted-cyan: #007eae;
+  --contrasted-blue: #1e6ef4;
+  --contrasted-indigo: #564ade;
+  --contrasted-purple: #b02fc2;
+  --contrasted-pink: #e7124d;
+  --contrasted-brown: #956d51;
+  --contrasted-gray: #6c6c70;
+  --contrasted-gray-lite-1: #8e8e93;
+  --contrasted-gray-lite-2: #aeaeb2;
+  --contrasted-gray-lite-3: #bcbcc0;
+  --contrasted-gray-lite-4: #d8d8dc;
+  --contrasted-gray-lite-5: #ebebf0;
+}

package/src/ui/tokens/components.scss

@@ -0,0 +1,32 @@
+.tag {
+  display: inline-block;
+  background: var(--gray-lite-3);
+  color: var(--white);
+  padding: var(--space-tiny) var(--space-comfortable);
+  border-radius: var(--radius-pill);
+}
+.spacer {
+  flex: 1;
+}
+.hidden {
+  display: none;
+}
+.note {
+  font-size: var(--note-size);
+}
+.hint {
+  font-size: var(--hint-size);
+}
+.right-footer-options {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: var(--space-cozy);
+  align-items: center;
+  align-content: center;
+}
+.no-margin {
+  margin: 0 !important;
+}
+.no-padding {
+  padding: 0 !important;
+}

package/src/ui/tokens/fonts.scss

@@ -0,0 +1,57 @@
+:root {
+  --font: Inter, Arial, sans-serif;
+  --diablo-detail-size: .5rem;
+  --diablo-size: .6rem;
+  --hint-size: .7rem;
+  --note-size: .8rem;
+  --description-size: 0.9rem;
+  --text-size: 1rem;
+  --field-size: .9rem;
+  --important-size: 1.25rem;
+
+  --main-title: 2.5rem;
+  --h1-font-size: 2.5rem;
+  --section-title: 1.6rem;
+  --h2-font-size: 1.6rem;
+  --sub-section-title: 1.4rem;
+  --h3-font-size:  1.4rem;
+  --content-title: 1.5rem;
+  --h4-font-size: 1.5rem;
+  --legend-title: 1.25rem;
+  --h5-font-size: 1.25rem;
+  --h6-font-size: 1.15rem;
+  --field-title: .9rem;
+  --text: 1rem;
+  --paragraph: 1rem;
+}
+
+* {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+H1, .main-title {
+  font-size: var(--main-title);
+  font-weight: 600;
+}
+H2, .section-title {
+  font-size: var(--section-title);
+  font-weight: 600;
+}
+H3, .sub-section-title, .card-title {
+  font-size: var(--block-title-size);
+  font-weight: 600;
+}
+H4, .content-title, .paragraph-title {
+  font-size: var(--sub-block-title-size);
+  font-weight: 600;
+}
+H5, .legend-title {
+  font-size: var(--sub-block-title-size);
+  font-weight: 600;
+}
+H6, .field-title, .hint-title {
+
+}
+p, .paragraph {
+}

package/src/ui/tokens/glass.scss

@@ -0,0 +1,10 @@
+
+.glass-container {
+  background: radial-gradient(circle, var(--transparent) 70%, var(--glass-color) 100%);
+  border-radius: 15px;
+  backdrop-filter: var(--glass-blur);
+  --webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  padding: 1rem;
+  overflow: hidden;
+}

package/src/ui/tokens/index.scss

@@ -0,0 +1,38 @@
+@use "reset";
+@use "opacity";
+@use "viewports";
+@use "fonts";
+@use "spacings";
+@use "colors" as colors;
+@use "colors-dark";
+@use "shadows";
+@use "layouts";
+@use "glass";
+@use "others";
+@use "animation";
+@use "radius";
+@use "components";
+
+@use "vars";
+
+
+body {
+  padding: 0;
+  margin: 0;
+  word-break: break-word;
+  font-family: var(--font);
+  color-scheme: light dark;
+  color: var(--text-color);
+}
+
+* {
+  box-sizing: border-box;
+  //transition: all .3s ease-in-out;
+}
+
+.titles-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  margin-top: 2rem;
+}

package/src/ui/tokens/layouts.scss

@@ -0,0 +1,228 @@
+:root {
+  --z-stack-z-index: 10_000;
+  --glass-color: rgba(255, 255, 255, 0.4);
+  --glass-blur: blur(1px);
+  --glass-shadow:  0px 4px 30px rgba(0, 0, 0, 0.2);
+  --glass-border: rgba(255, 255, 255, .5);
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+  column-gap: var(--space-tight);
+  &.started, &.leading {
+    justify-content: flex-start;
+  }
+  &.centered {
+    justify-content: center;
+  }
+  &.ended, &.trailing {
+    justify-content: flex-end;
+  }
+}
+.flex-fill, .flex-spacer {
+  flex: 1;
+}
+.grid {
+  display: grid;
+  grid-gap: var(--space-tight);
+}
+.custom-grid {
+  display: grid;
+  grid-template-columns: attr(data-columns, 1fr);
+  grid-template-rows: attr(data-rows, 0fr);
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.h-stack, .h-stack-multiline {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: center;
+  align-content: center;
+}
+.h-stack-responsive {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+.h-stack-multiline {
+  flex-wrap: wrap;
+}
+.v-stack {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+body.z-stack-open {
+  overflow: hidden;
+}
+.z-stack, .z-stack-relative {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--z-stack-z-index);
+  backdrop-filter: var(--glass-blur);
+  &.fill-parent {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .top-right {
+    top: 0;
+    right: 0;
+  }
+  .top-left {
+    top: 0;
+    left: 0;
+  }
+
+  .bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .left,
+  .left-center {
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .right,
+  .right-center {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+}
+
+.z-stack {
+  position: fixed;
+}
+.z-stack-relative {
+  position: absolute;
+}
+
+/** Alignment */
+.align-start, .align-top {
+  justify-content: flex-start;
+}
+.align-center, .align-middle {
+  justify-content: center;
+}
+.align-end, .align-bottom {
+  justify-content: flex-end;
+}
+.align-stretch {
+  justify-content: stretch;
+}
+.align-between {
+  justify-content: space-between;
+}
+.align-around {
+  justify-content: space-around;
+}
+.align-evenly {
+  justify-content: space-evenly;
+}
+
+/** Content Alignment */
+.content-stretch {
+  align-items: stretch;
+}
+.content-center, .content-middle {
+  align-items: center;
+}
+.content-start, .content-top {
+  align-items: flex-start;
+}
+.content-end, .content-bottom {
+  align-items: flex-end;
+}
+
+/** Spacing */
+.space-tiny {
+  column-gap: var(--space-tiny);
+  row-gap: var(--space-tiny);
+}
+.space-tight {
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.space-cozy {
+  column-gap: var(--space-cozy);
+  row-gap: var(--space-cozy);
+}
+.space-cozy-comfortable {
+  column-gap: var(--space-cozy-comfortable);
+  row-gap: var(--space-cozy-comfortable);
+}
+.space-comfortable {
+  column-gap: var(--space-comfortable);
+  row-gap: var(--space-comfortable);
+}
+.space-relaxed {
+  column-gap: var(--space-relaxed);
+  row-gap: var(--space-relaxed);
+}
+.space-loose {
+  column-gap: var(--space-loose);
+  row-gap: var(--space-loose);
+}
+.space-spacious {
+  column-gap: var(--space-spacious);
+  row-gap: var(--space-spacious);
+}
+
+/** Text Alignment */
+.text-center {
+  text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  .h-stack-responsive {
+    flex-direction: row;
+  }
+}

package/src/ui/tokens/opacity.scss

@@ -0,0 +1,21 @@
+:root {
+  --opacity-hidden: 0;
+  --opacity-disabled: .5;
+  --opacity-middle: .5;
+  --opacity-backdrop: .7;
+  --opacity-unfocused: .8;
+  --opacity-visible: 1;
+
+  --opacity-ghost: .1;
+  --opacity-faint: .2;
+  --opacity-subtle: .3;
+  --opacity-light: .4;
+  --opacity-medium: .5;
+  --opacity-moderate: .6;
+  --opacity-strong: .7;
+  --opacity-bold: .8;
+  --opacity-intense: .9;
+  --opacity-full: 1;
+
+  --background-opacity: .35;
+}

package/src/ui/tokens/others.scss

@@ -0,0 +1,11 @@
+:root {
+  --radius-small: 0.25rem;
+  --radius-medium: 0.5rem;
+  --radius-large: 1rem;
+  --radius-round: 50%;
+  --radius-pill: 35px;
+  --radius-none: 0;
+
+
+  --radius-modal: 12px;
+}

package/src/ui/tokens/radius.scss

@@ -0,0 +1,6 @@
+:root {
+  --radius-button: 5px;
+  --radius-card: 5px;
+  --radius-pill: 35px;
+  --radius-x: 10px;
+}

package/src/ui/tokens/reset.scss

@@ -0,0 +1,51 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+th, td {
+  vertical-align: middle;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/ui/tokens/shadows.scss

@@ -0,0 +1,29 @@
+:root {
+  --shadow-focus-color: rgba(59, 130, 246, 0.5);
+  --shadow-inner-color: rgba(0, 0, 0, 0.06);
+  --shadow-outline-color: rgba(59, 130, 246, 0.5);
+  --shadow-glow-color: rgba(59, 130, 246, 0.3);
+
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1),
+               0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07),
+               0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
+               0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
+               0 10px 10px rgba(0, 0, 0, 0.04);
+  --shadow-double-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-modal: 0 20px 25px rgba(0, 0, 0, 0.15);
+  --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.12);
+
+  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --shadow-inner: inset 0 2px 4px var(--shadow-inner-color);
+  --shadow-outline: 0 0 0 3px var(--shadow-outline-color);
+  --shadow-glow: 0 0 20px var(--shadow-glow-color);
+}