@xjur-ui/react 1.0.2 → 1.0.4

package/src/components/tooltip.tsx

@@ -0,0 +1,63 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cx } from '@xjur-ui/util'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 1,
+  variant = 'simple',
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  variant?: 'simple' | 'rich'
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <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={sideOffset}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useOS } from './use-os'

package/src/hooks/use-os.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+
+export type OS = 'ios' | 'macos' | 'windows' | 'android' | 'linux' | 'unknown'
+
+export function useOS() {
+  const [os, setOs] = useState<OS>('unknown')
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const userAgent = window.navigator.userAgent
+
+    if (/iPad|iPhone|iPod/.test(userAgent)) {
+      setOs('ios')
+    } else if (/Mac/.test(userAgent)) {
+      setOs('macos')
+    } else if (/Win/.test(userAgent)) {
+      setOs('windows')
+    } else if (/Android/.test(userAgent)) {
+      setOs('android')
+    } else if (/Linux/.test(userAgent)) {
+      setOs('linux')
+    } else {
+      setOs('unknown')
+    }
+  }, [])
+
+  return {
+    os,
+    shortcut: ['macos', 'ios'].includes(os) ? '⌘' : 'Ctrl'
+  }
+}

package/src/resources/icons.ts

@@ -140,7 +140,11 @@ export const icons = [
   'history',
   'security',
   'bar_chart',
-  'category'
+  'category',
+  'format_underlined',
+  'format_list_bulleted',
+  'format_list_numbered',
+  'redo'
 ] as const
 
 export type IconType = (typeof icons)[number]