@xjur-ui/react 1.0.2 → 1.0.4

package/dist/index.css

@@ -34,8 +34,10 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -78,6 +80,7 @@
     --color-neutral-placeholder: #9C9CAD;
     --color-neutral-label: #FFFFFF;
     --color-icon-neutral-3: #69697A;
+    --color-icon-neutral-5: #FFFFFF;
     --color-layer-1-idle: #F7F7FA;
     --color-layer-1-hover: #F0F0F2;
     --color-layer-1-pressed: #E7E7EB;
@@ -86,7 +89,9 @@
     --color-layer-2-hover: #F8F8FA;
     --color-layer-2-pressed: #F0F0F2;
     --color-layer-2-active: #E7E7EB;
+    --color-layer-skeleton: #E5E7EB;
     --color-alt-1: #17171A;
+    --color-alt-2: #3D3D47;
     --color-alt-4: #9C9CAD;
     --color-border-layer-1: #D6D6DC;
     --color-border-layer-2: #DEDEE3;
@@ -392,6 +397,27 @@
   .ml-small-1x {
     margin-left: var(--spacing-small-1x);
   }
+  .scrollbar-thin {
+    &::-webkit-scrollbar-track {
+      background-color: var(--scrollbar-track);
+      border-radius: var(--scrollbar-track-radius);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-thumb-radius);
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: var(--scrollbar-corner);
+      border-radius: var(--scrollbar-corner-radius);
+    }
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+    &::-webkit-scrollbar {
+      display: block;
+      width: 8px;
+      height: 8px;
+    }
+  }
   .scrollbar-hide {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -411,6 +437,15 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -422,6 +457,10 @@
     width: var(--spacing-large);
     height: var(--spacing-large);
   }
+  .size-large-1x {
+    width: var(--spacing-large-1x);
+    height: var(--spacing-large-1x);
+  }
   .size-large-alt {
     width: var(--spacing-large-alt);
     height: var(--spacing-large-alt);
@@ -451,12 +490,21 @@
   .h-large-7x {
     height: var(--spacing-large-7x);
   }
+  .h-large-8x {
+    height: var(--spacing-large-8x);
+  }
+  .max-h-\[116px\] {
+    max-height: 116px;
+  }
   .max-h-\[400px\] {
     max-height: 400px;
   }
   .max-h-\[var\(--radix-popover-content-available-height\)\] {
     max-height: var(--radix-popover-content-available-height);
   }
+  .min-h-\[116px\] {
+    min-height: 116px;
+  }
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
@@ -484,9 +532,6 @@
   .max-w-full {
     max-width: 100%;
   }
-  .min-w-\[240px\] {
-    min-width: 240px;
-  }
   .min-w-\[var\(--radix-popover-trigger-width\)\] {
     min-width: var(--radix-popover-trigger-width);
   }
@@ -496,6 +541,12 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .caption-bottom {
+    caption-side: bottom;
+  }
+  .origin-\(--radix-tooltip-content-transform-origin\) {
+    transform-origin: var(--radix-tooltip-content-transform-origin);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -503,15 +554,30 @@
   .animate-in {
     animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
+  .list-outside {
+    list-style-position: outside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
   .list-none {
     list-style-type: none;
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .items-center {
     align-items: center;
   }
@@ -533,6 +599,13 @@
   .gap-small_1x-alt {
     gap: var(--spacing-small_1x-alt);
   }
+  .-space-x-small-1x {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing-small-1x) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing-small-1x) * -1) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -541,9 +614,18 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -632,6 +714,9 @@
   .border-border-layer-2 {
     border-color: var(--color-border-layer-2);
   }
+  .border-icon-neutral-5 {
+    border-color: var(--color-icon-neutral-5);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -677,6 +762,9 @@
   .bg-layer-2-idle {
     background-color: var(--color-layer-2-idle);
   }
+  .bg-layer-skeleton {
+    background-color: var(--color-layer-skeleton);
+  }
   .bg-primary-alt-active {
     background-color: var(--color-primary-alt-active);
   }
@@ -740,12 +828,24 @@
   .pt-small-1x {
     padding-top: var(--spacing-small-1x);
   }
+  .pr-large-2x {
+    padding-right: var(--spacing-large-2x);
+  }
+  .pr-large-3x {
+    padding-right: var(--spacing-large-3x);
+  }
+  .pl-large-1x {
+    padding-left: var(--spacing-large-1x);
+  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-inter {
     font-family: var(--font-inter);
   }
@@ -845,6 +945,12 @@
     --tw-font-weight: var(--font-weight-thin);
     font-weight: var(--font-weight-thin);
   }
+  .text-balance {
+    text-wrap: balance;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .\!text-primary-label-active {
     color: var(--color-primary-label-active) !important;
   }
@@ -878,6 +984,12 @@
   .text-white {
     color: var(--color-white);
   }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -998,6 +1110,10 @@
     --tw-duration: 250ms;
     transition-duration: 250ms;
   }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1006,10 +1122,37 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .fade-in-0 {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
   }
+  .zoom-in-95 {
+    --tw-enter-scale: calc(95*1%);
+    --tw-enter-scale: .95;
+  }
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
+  .\*\:h-full {
+    :is(& > *) {
+      height: 100%;
+    }
+  }
+  .\*\:w-full {
+    :is(& > *) {
+      width: 100%;
+    }
+  }
+  .\*\:outline-0 {
+    :is(& > *) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 0px;
+    }
+  }
   .group-focus-within\:-top-\[3px\] {
     &:is(:where(.group):focus-within *) {
       top: calc(3px * -1);
@@ -1073,6 +1216,13 @@
       }
     }
   }
+  .group-hover\/th\:flex {
+    &:is(:where(.group\/th):hover *) {
+      @media (hover: hover) {
+        display: flex;
+      }
+    }
+  }
   .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:left-large-4x {
     &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
       left: var(--spacing-large-4x);
@@ -1331,6 +1481,62 @@
       }
     }
   }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:text-neutral-placeholder {
+    &::before {
+      content: var(--tw-content);
+      color: var(--color-neutral-placeholder);
+    }
+  }
+  .before\:content-\[attr\(data-placeholder\)\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: attr(data-placeholder);
+      content: var(--tw-content);
+    }
+  }
+  .first\:before\:pointer-events-none {
+    &:first-child {
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .first\:before\:float-left {
+    &:first-child {
+      &::before {
+        content: var(--tw-content);
+        float: left;
+      }
+    }
+  }
+  .first\:before\:content-\[attr\(data-placeholder\)\] {
+    &:first-child {
+      &::before {
+        content: var(--tw-content);
+        --tw-content: attr(data-placeholder);
+        content: var(--tw-content);
+      }
+    }
+  }
   .focus-within\:border {
     &:focus-within {
       border-style: var(--tw-border-style);
@@ -1342,15 +1548,18 @@
       border-color: var(--color-primary-idle);
     }
   }
-  .focus-within\:shadow-focus-primary {
-    &:focus-within {
-      --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
-      box-shadow:
-        var(--tw-inset-shadow),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
+  .hover\:overflow-x-auto {
+    &:hover {
+      @media (hover: hover) {
+        overflow-x: auto;
+      }
+    }
+  }
+  .hover\:border-border-layer-2 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-layer-2);
+      }
     }
   }
   .hover\:border-border-layer-3 {
@@ -1606,30 +1815,94 @@
       flex-direction: column;
     }
   }
+  .data-\[selected\=true\]\:bg-primary-alt-active {
+    &[data-selected=true] {
+      background-color: var(--color-primary-alt-active);
+    }
+  }
+  .data-\[side\=bottom\]\:slide-in-from-top-2 {
+    &[data-side=bottom] {
+      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+    }
+  }
+  .data-\[side\=left\]\:slide-in-from-right-2 {
+    &[data-side=left] {
+      --tw-enter-translate-x: calc(2*var(--spacing));
+    }
+  }
+  .data-\[side\=right\]\:slide-in-from-left-2 {
+    &[data-side=right] {
+      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+    }
+  }
+  .data-\[side\=top\]\:slide-in-from-bottom-2 {
+    &[data-side=top] {
+      --tw-enter-translate-y: calc(2*var(--spacing));
+    }
+  }
   .data-\[size\=lg\]\:size-large-8x {
     &[data-size=lg] {
       width: var(--spacing-large-8x);
       height: var(--spacing-large-8x);
     }
   }
+  .data-\[size\=lg\]\:text-size-headline-md {
+    &[data-size=lg] {
+      font-size: var(--text-size-headline-md);
+      line-height: var(--tw-leading, var(--text-size-headline-md--line-height));
+    }
+  }
   .data-\[size\=md\]\:size-large-4x {
     &[data-size=md] {
       width: var(--spacing-large-4x);
       height: var(--spacing-large-4x);
     }
   }
+  .data-\[size\=md\]\:text-size-label-lg {
+    &[data-size=md] {
+      font-size: var(--text-size-label-lg);
+      line-height: var(--tw-leading, var(--text-size-label-lg--line-height));
+    }
+  }
   .data-\[size\=sm\]\:size-large-2x {
     &[data-size=sm] {
       width: var(--spacing-large-2x);
       height: var(--spacing-large-2x);
     }
   }
+  .data-\[size\=sm\]\:text-size-label-sm {
+    &[data-size=sm] {
+      font-size: var(--text-size-label-sm);
+      line-height: var(--tw-leading, var(--text-size-label-sm--line-height));
+    }
+  }
   .data-\[size\=xs\]\:size-large-1x {
     &[data-size=xs] {
       width: var(--spacing-large-1x);
       height: var(--spacing-large-1x);
     }
   }
+  .data-\[size\=xs\]\:text-size-label-sm {
+    &[data-size=xs] {
+      font-size: var(--text-size-label-sm);
+      line-height: var(--tw-leading, var(--text-size-label-sm--line-height));
+    }
+  }
+  .data-\[sorted\=true\]\:flex {
+    &[data-sorted=true] {
+      display: flex;
+    }
+  }
+  .data-\[sorted\=true\]\:bg-primary-alt-active {
+    &[data-sorted=true] {
+      background-color: var(--color-primary-alt-active);
+    }
+  }
+  .data-\[sorted\=true\]\:text-primary-label-active {
+    &[data-sorted=true] {
+      color: var(--color-primary-label-active);
+    }
+  }
   .data-\[state\=active\]\:rounded-none {
     &[data-state=active] {
       border-radius: 0;
@@ -1713,6 +1986,12 @@
       --tw-exit-opacity: 0;
     }
   }
+  .data-\[state\=closed\]\:zoom-out-95 {
+    &[data-state=closed] {
+      --tw-exit-scale: calc(95*1%);
+      --tw-exit-scale: .95;
+    }
+  }
   .data-\[state\=closed\]\:slide-out-to-bottom {
     &[data-state=closed] {
       --tw-exit-translate-y: 100%;
@@ -1748,17 +2027,6 @@
       border-color: var(--color-primary-idle);
     }
   }
-  .data-\[state\=open\]\:shadow-focus-primary {
-    &[data-state=open] {
-      --tw-shadow: 0 0 0 var(--tw-shadow-color, var(--shadow-medium, 4px)) rgba(232, 125, 48, 0.16);
-      box-shadow:
-        var(--tw-inset-shadow),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
-    }
-  }
   .data-\[state\=open\]\:duration-500 {
     &[data-state=open] {
       --tw-duration: 500ms;
@@ -1809,11 +2077,112 @@
       }
     }
   }
+  .data-\[variant\=rich\]\:rounded-small {
+    &[data-variant=rich] {
+      border-radius: var(--radius-small);
+    }
+  }
+  .data-\[variant\=rich\]\:border {
+    &[data-variant=rich] {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .data-\[variant\=rich\]\:border-border-layer-2 {
+    &[data-variant=rich] {
+      border-color: var(--color-border-layer-2);
+    }
+  }
+  .data-\[variant\=rich\]\:bg-layer-2-idle {
+    &[data-variant=rich] {
+      background-color: var(--color-layer-2-idle);
+    }
+  }
+  .data-\[variant\=rich\]\:p-large {
+    &[data-variant=rich] {
+      padding: var(--spacing-large);
+    }
+  }
+  .data-\[variant\=rich\]\:text-neutral-dark {
+    &[data-variant=rich] {
+      color: var(--color-neutral-dark);
+    }
+  }
+  .data-\[variant\=simple\]\:rounded-small-1x {
+    &[data-variant=simple] {
+      border-radius: var(--radius-small-1x);
+    }
+  }
+  .data-\[variant\=simple\]\:bg-alt-2 {
+    &[data-variant=simple] {
+      background-color: var(--color-alt-2);
+    }
+  }
+  .data-\[variant\=simple\]\:px-small {
+    &[data-variant=simple] {
+      padding-inline: var(--spacing-small);
+    }
+  }
+  .data-\[variant\=simple\]\:py-small-1x {
+    &[data-variant=simple] {
+      padding-block: var(--spacing-small-1x);
+    }
+  }
+  .data-\[variant\=simple\]\:text-neutral-label {
+    &[data-variant=simple] {
+      color: var(--color-neutral-label);
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
     }
   }
+  .\[\&_ol_ol\]\:list-\[lower-alpha\] {
+    & ol ol {
+      list-style-type: lower-alpha;
+    }
+  }
+  .\[\&_ol_ol_ol\]\:list-\[lower-roman\] {
+    & ol ol ol {
+      list-style-type: lower-roman;
+    }
+  }
+  .\[\&_tr\]\:border-b {
+    & tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&_tr\]\:border-border-layer-2 {
+    & tr {
+      border-color: var(--color-border-layer-2);
+    }
+  }
+  .\[\&_tr\:last-child\]\:border-0 {
+    & tr:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .\[\&_ul_ul\]\:list-\[circle\] {
+    & ul ul {
+      list-style-type: circle;
+    }
+  }
+  .\[\&_ul_ul_ul\]\:list-\[square\] {
+    & ul ul ul {
+      list-style-type: square;
+    }
+  }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    & > tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
 }
 @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
 @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
@@ -1841,6 +2210,7 @@
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@@ -1860,6 +2230,12 @@
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
+@property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity,1);
@@ -1899,6 +2275,7 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
@@ -1918,6 +2295,7 @@
       --tw-outline-style: solid;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -8,6 +8,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     "./index.css": "./dist/index.css",
+    "./hooks": "./dist/hooks/index.js",
     "./button": "./dist/components/button.js",
     "./icon": "./dist/components/icon.js",
     "./typography": "./dist/components/typography.js",
@@ -30,7 +31,12 @@
     "./dropdown-menu": "./dist/components/dropdown-menu.js",
     "./divider": "./dist/components/divider.js",
     "./sheet": "./dist/components/sheet.js",
-    "./badge": "./dist/components/badge.js"
+    "./badge": "./dist/components/badge.js",
+    "./table": "./dist/components/table.js",
+    "./avatar-group": "./dist/components/avatar-group.js",
+    "./skeleton": "./dist/components/skeleton.js",
+    "./rich-editor": "./dist/components/rich-editor.js",
+    "./tooltip": "./dist/components/tooltip.js"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
@@ -46,8 +52,14 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-input/mask": "^2.0.4",
     "@react-input/number-format": "^2.0.3",
+    "@tiptap/extension-heading": "^3.3.0",
+    "@tiptap/extensions": "^3.3.0",
+    "@tiptap/pm": "^3.3.0",
+    "@tiptap/react": "^3.3.0",
+    "@tiptap/starter-kit": "^3.3.0",
     "@xjur-ui/styles": "*",
     "@xjur-ui/util": "*",
     "react-day-picker": "^9.9.0",