@orcestr/ui 0.1.0 → 0.1.1

package/dist/example/styles.css

@@ -29,6 +29,8 @@ body.oui-ui-document-lock {
 
 .oui-ui-section {
   container-type: inline-size;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 560px;
   overflow: hidden;
   padding: 18px;
 }
@@ -53,15 +55,6 @@ body.oui-ui-document-lock {
   min-height: 0;
 }
 
-.oui-ui-workspace-main > .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .oui-ui-workspace-main > .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
-    scroll-behavior: auto;
-  }
-}
 .oui-ui-brand {
   display: inline-flex;
   min-width: 0;
@@ -120,6 +113,10 @@ body.oui-ui-document-lock {
   flex: 1 1 auto;
 }
 
+.oui-app-shell-header > .oui-ui-brand {
+  flex: 1 1 auto;
+}
+
 .oui-ui-header-title {
   display: flex;
   min-width: 0;
@@ -179,52 +176,8 @@ body.oui-ui-document-lock {
   padding: 0 9px;
 }
 
-.oui-ui-language-switch {
-  display: inline-flex;
-  min-height: 30px;
-  align-items: center;
-  gap: 3px;
-  border: 0;
-  border-radius: var(--oui-radius-sm);
-  background: var(--oui-pad-bg);
-  padding: 2px;
-}
-
-.oui-ui-language-label {
-  padding: 0 6px;
-  color: var(--oui-muted);
-  font-size: 12px;
-  font-weight: 720;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.oui-ui-language-option {
-  display: inline-flex;
-  min-width: 32px;
-  min-height: 24px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--oui-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.oui-ui-language-option:hover,
-.oui-ui-language-option:focus-visible {
-  color: var(--oui-text);
-  outline: none;
-}
-
-.oui-ui-language-option[data-active=true] {
-  background: var(--oui-primary-surface);
-  color: var(--oui-primary-text);
+.oui-ui-language-button {
+  flex: 0 0 auto;
 }
 
 .oui-ui-header-link:hover {
@@ -424,7 +377,7 @@ body.oui-ui-document-lock {
 .oui-ui-app-shell-preview-stage[data-mode=phone] {
   width: min(100%, 410px);
   min-height: 0;
-  border-radius: 24px;
+  border-radius: 14px;
 }
 
 .oui-ui-app-shell-preview-stage .oui-app-shell {
@@ -436,11 +389,20 @@ body.oui-ui-document-lock {
 }
 
 .oui-ui-app-shell-preview-stage .oui-app-shell-frame {
-  height: calc(100% - 56px);
+  height: 100%;
   max-width: 100%;
   margin: 0;
 }
 
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-has-header=true] .oui-app-shell-frame {
+  height: 100%;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-frame,
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-sidebar-mode=mobile][data-has-header=true] .oui-app-shell-frame {
+  height: 100%;
+}
+
 .oui-ui-app-shell-preview-stage[data-mode=phone] .oui-app-shell-frame {
   grid-template-columns: minmax(0, 1fr);
 }
@@ -450,6 +412,10 @@ body.oui-ui-document-lock {
   padding: 8px 12px;
 }
 
+.oui-ui-app-shell-preview-stage[data-mode=phone] .oui-app-shell-header {
+  padding: 8px 18px 8px 10px;
+}
+
 .oui-ui-app-shell-header-main {
   min-width: 0;
   flex: 1 1 auto;
@@ -495,33 +461,6 @@ body.oui-ui-document-lock {
   box-shadow: var(--oui-section-shadow, none);
 }
 
-.oui-ui-sidebar-footer-action {
-  display: inline-flex;
-  width: 100%;
-  min-height: 30px;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  border: 0;
-  border-radius: var(--oui-radius-sm);
-  background: transparent;
-  color: var(--oui-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 720;
-  line-height: 1;
-  padding: 0 8px;
-  text-align: left;
-}
-
-.oui-ui-sidebar-footer-action:hover,
-.oui-ui-sidebar-footer-action:focus-visible {
-  background: var(--oui-pad-hover-bg);
-  color: var(--oui-text);
-  outline: none;
-}
-
 .oui-ui-demo-logo {
   display: inline-flex;
   width: 28px;
@@ -995,29 +934,6 @@ body.oui-ui-document-lock {
   padding: 10px;
 }
 
-.oui-ui-state-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
-  align-items: start;
-  gap: 8px;
-}
-
-.oui-ui-badge-demo {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.oui-ui-icon-text-list {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px 16px;
-}
-
 :root[data-oui-theme=dark] .oui-ui-light-only,
 .oui-root[data-oui-theme=dark] .oui-ui-light-only {
   display: none;
@@ -1031,13 +947,17 @@ body.oui-ui-document-lock {
 
 .oui-code-inline-panel {
   position: relative;
+  --oui-code-collapsed-height: 180px;
+  --oui-code-expanded-height: calc((var(--oui-code-lines, 9) * 20.15px) + 66px);
   width: min(52%, 760px);
   min-width: 0;
   flex: 1 1 420px;
   align-self: flex-start;
+  height: var(--oui-code-collapsed-height);
+  contain: layout paint style;
   overflow: hidden;
   border-radius: var(--oui-radius);
-  transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: height 460ms cubic-bezier(0.2, 0, 0.2, 1), padding-bottom 320ms ease;
 }
 
 .oui-code-inline-content {
@@ -1048,18 +968,18 @@ body.oui-ui-document-lock {
   max-height: none;
 }
 
-.oui-code-inline-panel .oui-code-preview-scroll .oui-scroll-area-viewport {
-  max-height: none;
-  overflow-x: auto;
-  overflow-y: hidden;
+.oui-code-inline-panel[data-expanded=true] {
+  height: var(--oui-code-expanded-height);
+  padding-bottom: 38px;
 }
 
-.oui-code-inline-panel[data-expanded=false][data-collapsible=true] .oui-code-preview-scroll .oui-scroll-area-viewport {
-  overflow: hidden;
+.oui-code-inline-panel[data-collapsible=false] {
+  height: auto;
 }
 
-.oui-code-inline-panel[data-expanded=true] {
-  padding-bottom: 38px;
+.oui-code-inline-panel[data-collapsible=false] .oui-code-inline-toggle,
+.oui-code-inline-panel[data-collapsible=false] .oui-code-inline-fade {
+  display: none;
 }
 
 .oui-code-inline-fade {
@@ -1069,8 +989,14 @@ body.oui-ui-document-lock {
   left: 0;
   z-index: 2;
   height: 92px;
+  opacity: 1;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent, var(--oui-bg) 72%);
+  transition: opacity 180ms ease;
+}
+
+.oui-code-inline-panel[data-expanded=true] .oui-code-inline-fade {
+  opacity: 0;
 }
 
 .oui-code-inline-toggle {
@@ -1108,11 +1034,44 @@ body.oui-ui-document-lock {
   overflow: hidden;
 }
 
+.oui-code-preview-wrap {
+  position: relative;
+  min-width: 0;
+}
+
+.oui-code-preview-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 4;
+  opacity: 0;
+  transform: translateY(-2px);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.oui-code-preview-wrap:hover .oui-code-preview-copy,
+.oui-code-preview-wrap:focus-within .oui-code-preview-copy {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.oui-code-preview-scroll-inline {
+  overflow: hidden;
+}
+
 .oui-code-preview-scroll .oui-scroll-area-viewport {
   max-height: min(62vh, 620px);
   overflow: auto;
 }
 
+.oui-code-preview-scroll-inline .oui-scroll-area-viewport {
+  max-height: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+}
+
 .oui-code-preview {
   min-width: max-content;
   margin: 0;
@@ -1128,6 +1087,10 @@ body.oui-ui-document-lock {
   white-space: pre;
 }
 
+.oui-code-inline-panel .oui-code-preview {
+  padding-bottom: 42px;
+}
+
 .oui-code-line {
   display: block;
   min-height: 1.55em;
@@ -1262,9 +1225,6 @@ body.oui-ui-document-lock {
     flex-direction: column;
     gap: 8px;
   }
-  .oui-ui-state-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
   .oui-ui-language-label {
     display: none;
   }

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/Combobox/Combobox';
 export * from './components/CommandPalette/CommandPalette';
 export * from './components/ConfirmDialog/ConfirmDialog';
 export * from './components/ContextMenu/ContextMenu';
+export * from './components/CopyButton/CopyButton';
 export * from './components/DataTable/DataTable';
 export * from './components/DataTable/DataTableStateAdapters';
 export * from './components/DatePicker/DatePicker';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oCAAoC,CAAC;AACnD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC;AACzE,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oCAAoC,CAAC;AACnD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC;AACzE,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -15,6 +15,7 @@ export * from './components/Combobox/Combobox';
 export * from './components/CommandPalette/CommandPalette';
 export * from './components/ConfirmDialog/ConfirmDialog';
 export * from './components/ContextMenu/ContextMenu';
+export * from './components/CopyButton/CopyButton';
 export * from './components/DataTable/DataTable';
 export * from './components/DataTable/DataTableStateAdapters';
 export * from './components/DatePicker/DatePicker';