@xjur-ui/react 1.0.2 → 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/table.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Table({ className, ...props }: React.ComponentProps<'table'>): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, isSelected, ...props }: React.ComponentProps<'tr'> & {
+    isSelected?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): react_jsx_runtime.JSX.Element;
+declare function TableHeadContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function TableSort({ className, sortedDirection, ...props }: React.ComponentProps<'button'> & {
+    sortedDirection?: 'asc' | 'desc';
+}): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
+
+export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeadContent, TableHeader, TableRow, TableSort };

package/dist/components/table.js

@@ -0,0 +1,196 @@
+// src/components/table.tsx
+import { cx as cx2 } from "@xjur-ui/util";
+
+// src/components/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: cx(
+        "material-symbols-outlined",
+        "text-size-body-lg",
+        className
+      ),
+      style: {
+        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
+        ...props.style
+      },
+      children: name
+    }
+  );
+}
+
+// src/components/table.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto",
+      "data-slot": "table-container",
+      children: /* @__PURE__ */ jsx2(
+        "table",
+        {
+          className: cx2("w-full caption-bottom", className),
+          "data-slot": "table",
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "thead",
+    {
+      className: cx2(
+        "group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b",
+        className
+      ),
+      "data-slot": "table-header",
+      ...props
+    }
+  );
+}
+function TableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tbody",
+    {
+      className: cx2(
+        "[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0",
+        className
+      ),
+      "data-slot": "table-body",
+      ...props
+    }
+  );
+}
+function TableFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tfoot",
+    {
+      className: cx2(
+        "border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      "data-slot": "table-footer",
+      ...props
+    }
+  );
+}
+function TableRow({
+  className,
+  isSelected = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tr",
+    {
+      className: cx2(
+        "bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100",
+        "active:bg-layer-2-pressed",
+        "data-[selected=true]:bg-primary-alt-active",
+        className
+      ),
+      "data-selected": isSelected,
+      "data-slot": "table-row",
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "th",
+    {
+      className: cx2(
+        "group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap",
+        "pr-large-2x relative",
+        "animate-in fade-in duration-200 ease-in",
+        className
+      ),
+      "data-slot": "table-head",
+      ...props
+    }
+  );
+}
+function TableHeadContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cx2(
+        "gap-small pr-large-3x relative flex w-fit items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableSort({
+  className,
+  sortedDirection,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: cx2(
+        "size-large-1x rounded-small-1x",
+        "flex cursor-pointer items-center justify-center",
+        "hidden group-hover/th:flex",
+        "data-[sorted=true]:flex",
+        "transition-all duration-200 ease-out",
+        "data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active",
+        "absolute top-1/2 right-0 -translate-y-1/2",
+        className
+      ),
+      "data-sorted": sortedDirection !== void 0,
+      type: "button",
+      ...props,
+      children: sortedDirection !== void 0 ? /* @__PURE__ */ jsx2(
+        Icon,
+        {
+          name: sortedDirection === "asc" ? "arrow_downward" : "arrow_upward"
+        }
+      ) : /* @__PURE__ */ jsx2(Icon, { name: "swap_vert" })
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "td",
+    {
+      className: cx2(
+        "px-small py-none h-large-8x text-left align-middle whitespace-nowrap",
+        className
+      ),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeadContent,
+  TableHeader,
+  TableRow,
+  TableSort
+};

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/components/typography.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { ClassVariantProps } from '@xjur-ui/util';
 
 declare const typographyVariants: (props?: ({
-    variant?: "body" | "label" | "title" | "headline" | null | undefined;
+    variant?: "label" | "body" | "title" | "headline" | null | undefined;
     size?: "sm" | "md" | "lg" | "sm-2x" | "sm-1x" | null | undefined;
     weight?: "bold" | "thin" | "extraLight" | "light" | "normal" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;