@xjur-ui/react 1.0.3 → 1.0.4

package/dist/components/search-input.js

@@ -201,7 +201,7 @@ function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined: "rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary",
+          outlined: "rounded-circle focus-within:border-primary-idle ",
           line: "rounded-none border-t-0 border-b-1 border-x-0",
           action: "rounded-tr-none rounded-br-none border-r-0"
         }

package/dist/components/select.js

@@ -285,7 +285,7 @@ function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined: "rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary",
+          outlined: "rounded-circle focus-within:border-primary-idle ",
           line: "rounded-none border-t-0 border-b-1 border-x-0",
           action: "rounded-tr-none rounded-br-none border-r-0"
         }
@@ -349,7 +349,7 @@ function SelectTrigger({
         className,
         "group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center",
         "bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border",
-        "data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary",
+        "data-[state=open]:border-primary-idle",
         "has-[input:not(:placeholder-shown)]:text-primary-idle",
         "has-[input:not(:placeholder-shown)]:border-primary-idle"
       ),

package/dist/components/skeleton.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+declare function Skeleton({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,16 @@
+// src/components/skeleton.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("bg-layer-skeleton animate-pulse", className),
+      "data-slot": "skeleton",
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};

package/dist/components/tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, variant, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    variant?: 'simple' | 'rich';
+}): react_jsx_runtime.JSX.Element;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -0,0 +1,58 @@
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 1,
+  variant = "simple",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      className: cx(
+        "text-size-body-sm text-balance",
+        "data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x",
+        "data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)",
+        className
+      ),
+      "data-slot": "tooltip-content",
+      "data-variant": variant,
+      sideOffset,
+      ...props,
+      children
+    }
+  ) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/index.css

@@ -37,6 +37,7 @@
     --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);
@@ -88,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;
@@ -490,12 +493,18 @@
   .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%);
   }
@@ -523,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);
   }
@@ -538,6 +544,9 @@
   .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);
@@ -545,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;
   }
@@ -590,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;
   }
@@ -729,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);
   }
@@ -798,6 +834,9 @@
   .pr-large-3x {
     padding-right: var(--spacing-large-3x);
   }
+  .pl-large-1x {
+    padding-left: var(--spacing-large-1x);
+  }
   .text-center {
     text-align: center;
   }
@@ -906,6 +945,9 @@
     --tw-font-weight: var(--font-weight-thin);
     font-weight: var(--font-weight-thin);
   }
+  .text-balance {
+    text-wrap: balance;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -942,6 +984,12 @@
   .text-white {
     color: var(--color-white);
   }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -1074,13 +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);
@@ -1409,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);
@@ -1420,17 +1548,6 @@
       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) {
@@ -1438,6 +1555,13 @@
       }
     }
   }
+  .hover\:border-border-layer-2 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-layer-2);
+      }
+    }
+  }
   .hover\:border-border-layer-3 {
     &:hover {
       @media (hover: hover) {
@@ -1696,6 +1820,26 @@
       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);
@@ -1842,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%;
@@ -1877,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;
@@ -1938,11 +2077,77 @@
       }
     }
   }
+  .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);
@@ -1960,6 +2165,16 @@
       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 {
@@ -2015,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);
@@ -2074,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.3",
+  "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",
@@ -32,7 +33,10 @@
     "./sheet": "./dist/components/sheet.js",
     "./badge": "./dist/components/badge.js",
     "./table": "./dist/components/table.js",
-    "./avatar-group": "./dist/components/avatar-group.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",
@@ -48,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",

package/src/components/date-picker.tsx

@@ -19,7 +19,7 @@ export function DatePickerTrigger({
         className,
         'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
         'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary',
+        'data-[state=open]:border-primary-idle',
         'has-[input:not(:placeholder-shown)]:text-primary-idle',
         'has-[input:not(:placeholder-shown)]:border-primary-idle'
       )}

package/src/components/divider.tsx

@@ -11,7 +11,8 @@ export function Divider({
   return (
     <SeparatorPrimitive.Root
       className={cx(
-        'bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className
       )}
       data-slot="separator"

package/src/components/dropdown-menu.tsx

@@ -49,7 +49,7 @@ export function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         align={align}
         className={cx(
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[240px]',
+          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]',
           className
         )}
         data-slot="dropdown-menu-content"

package/src/components/input.tsx

@@ -43,7 +43,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
   const variants = cva(
     [
       'relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'focus-within:border-primary-idle focus-within:shadow-focus-primary focus-within:border',
+      'focus-within:border-primary-idle focus-within:border',
       'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',
       'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none'
     ],

package/src/components/otp-input.tsx

@@ -25,7 +25,7 @@ function Input({
       className={cx(
         className,
         'text-neutral-dark h-large-6x bg-layer-2-hover rounded-small-1x w-full text-center outline-0',
-        'focus-within:border-primary-idle focus-within:shadow-focus-primary focus-within:border'
+        'focus-within:border-primary-idle focus-within:border'
       )}
       {...props}
     />