@xjur-ui/react 1.0.6 → 2.1.0

package/dist/components/search-input.js

@@ -1,274 +0,0 @@
-// src/components/search-input.tsx
-import { cva as cva3, cx as cx2 } from "@xjur-ui/util";
-import { createContext } from "react";
-
-// src/components/typography.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "@xjur-ui/util";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-var typographyVariants = cva("", {
-  variants: {
-    variant: {
-      body: "",
-      label: "",
-      title: "",
-      headline: ""
-    },
-    size: {
-      "sm-2x": "",
-      "sm-1x": "",
-      sm: "",
-      md: "",
-      lg: ""
-    },
-    weight: {
-      thin: "font-thin",
-      extraLight: "font-extralight",
-      light: "font-light",
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
-      extraBold: "font-extrabold",
-      black: "font-black"
-    }
-  },
-  compoundVariants: [
-    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
-    { variant: "body", size: "sm", class: "text-size-body-sm" },
-    { variant: "body", size: "md", class: "text-size-body-md" },
-    { variant: "body", size: "lg", class: "text-size-body-lg" },
-    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
-    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
-    { variant: "label", size: "sm", class: "text-size-label-sm" },
-    { variant: "label", size: "md", class: "text-size-label-md" },
-    { variant: "label", size: "lg", class: "text-size-label-lg" },
-    { variant: "title", size: "sm", class: "text-size-title-sm" },
-    { variant: "title", size: "md", class: "text-size-title-md" },
-    { variant: "title", size: "lg", class: "text-size-title-lg" },
-    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
-    { variant: "headline", size: "md", class: "text-size-headline-md" },
-    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
-  ],
-  defaultVariants: {
-    variant: "body",
-    size: "md",
-    weight: "normal"
-  }
-});
-var Typography = memo(
-  ({
-    variant,
-    size,
-    weight,
-    asChild,
-    className,
-    ...props
-  }) => {
-    const Component = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        className: typographyVariants({ variant, size, weight, className }),
-        ...props
-      }
-    );
-  }
-);
-Typography.displayName = "Typography";
-
-// src/components/button.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva2, cx } from "@xjur-ui/util";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var buttonVariants = cva2(
-  [
-    "outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
-  ],
-  {
-    variants: {
-      size: {
-        md: "py-small_1x-alt px-medium text-size-body-md",
-        sm: "py-small-1x px-small text-size-label-sm",
-        icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
-        icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
-      },
-      variant: {
-        primary: "",
-        secondary: "",
-        tertiary: "",
-        destructive: "",
-        outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
-      },
-      appearance: {
-        solid: "",
-        ghost: "bg-transparent"
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "primary",
-        appearance: "solid",
-        class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
-      },
-      {
-        variant: "primary",
-        appearance: "ghost",
-        class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
-      },
-      {
-        variant: "secondary",
-        appearance: "solid",
-        class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
-      },
-      {
-        variant: "secondary",
-        appearance: "ghost",
-        class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
-      },
-      {
-        variant: "tertiary",
-        appearance: "solid",
-        class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
-      },
-      {
-        variant: "tertiary",
-        appearance: "ghost",
-        class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
-      },
-      {
-        variant: "destructive",
-        appearance: "solid",
-        class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
-      },
-      {
-        variant: "destructive",
-        appearance: "ghost",
-        class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
-      }
-    ],
-    defaultVariants: {
-      size: "md",
-      variant: "primary",
-      appearance: "solid"
-    }
-  }
-);
-function Button({
-  asChild,
-  className,
-  variant = "primary",
-  size = "md",
-  appearance = "solid",
-  ...props
-}) {
-  const Component = asChild ? Slot2 : "button";
-  return /* @__PURE__ */ jsx2(
-    Component,
-    {
-      className: cx(buttonVariants({ variant, appearance, size }), className),
-      ...props
-    }
-  );
-}
-
-// src/components/search-input.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SearchInputRootContext = createContext({
-  variant: "outlined"
-});
-function SearchInputRoot({
-  className,
-  variant = "outlined",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(SearchInputRootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx3("div", { className: cx2(className, "relative flex w-full"), ...props }) });
-}
-function SearchInputContent({
-  className,
-  ...props
-}) {
-  const contentVarians = cva3(
-    [
-      "gap-small py-small_1x-alt px-small flex items-center w-full",
-      "h-large-4x rounded-circle",
-      "border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal",
-      "group-hover:border-border-layer-3 transition-colors duration-200",
-      "disabled:opacity-60",
-      "focus-within:border-primary-idle"
-    ],
-    {
-      variants: {
-        variant: {
-          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"
-        }
-      }
-    }
-  );
-  return /* @__PURE__ */ jsx3(SearchInputRootContext.Consumer, { children: ({ variant }) => /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: cx2(className, contentVarians({ variant })),
-      "data-variant": variant,
-      ...props
-    }
-  ) });
-}
-function SearchInputLabel({
-  htmlFor,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    Typography,
-    {
-      asChild: true,
-      className: cx2("absolute -top-[22px] left-0"),
-      size: "sm",
-      variant: "label",
-      weight: "medium",
-      children: /* @__PURE__ */ jsx3("label", { htmlFor, ...props })
-    }
-  );
-}
-function SearchInputText({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3("input", { className: cx2(className, "flex-1 outline-none"), ...props });
-}
-function SearchInputSlot(props) {
-  return /* @__PURE__ */ jsx3("div", { ...props, "data-slot": "search-input-slot" });
-}
-function SearchInputAction({
-  className,
-  appearance = "ghost",
-  variant = "outlined",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    Button,
-    {
-      ...props,
-      appearance,
-      className: cx2(
-        className,
-        "cursor-pointer",
-        "h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none",
-        "text-size-body-md text-neutral-dark gap-small-1x"
-      ),
-      "data-slot": "search-input-action",
-      variant
-    }
-  );
-}
-export {
-  SearchInputAction,
-  SearchInputContent,
-  SearchInputLabel,
-  SearchInputRoot,
-  SearchInputSlot,
-  SearchInputText
-};

package/dist/components/select.d.ts

@@ -1,33 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps } from 'react';
-import * as RadixPopover from '@radix-ui/react-popover';
-import { ListContent, ListItem, ListHeader, ListHeaderTitle } from './list.js';
-import { SearchInputText } from './search-input.js';
-import { TypographyProps, Typography } from './typography.js';
-import 'class-variance-authority/types';
-import '@xjur-ui/util';
-import './button.js';
-
-declare function SelectRoot(props: ComponentProps<typeof RadixPopover.Root>): react_jsx_runtime.JSX.Element;
-declare function SelectTrigger({ className, ...props }: ComponentProps<typeof RadixPopover.Trigger>): react_jsx_runtime.JSX.Element;
-declare function SelectContent({ className, children, sideOffset, side, align, ...props }: ComponentProps<typeof RadixPopover.Content>): react_jsx_runtime.JSX.Element;
-declare function SelectValue({ className, displayValue, ...props }: ComponentProps<'input'> & {
-    displayValue?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function SelectMultiValue({ className, values, children, ...props }: ComponentProps<'div'> & {
-    values: string[];
-}): react_jsx_runtime.JSX.Element;
-declare function SelectLabel({ className, htmlFor, children, ...props }: TypographyProps & {
-    htmlFor?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function SelectOptions(props: ComponentProps<typeof ListContent>): react_jsx_runtime.JSX.Element;
-declare function SelectOption({ className, ...props }: ComponentProps<typeof ListItem>): react_jsx_runtime.JSX.Element;
-declare function SelectOptionText(props: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
-declare function SelectHeader(props: ComponentProps<typeof ListHeader>): react_jsx_runtime.JSX.Element;
-declare function SelectHeaderTitle(props: ComponentProps<typeof ListHeaderTitle>): react_jsx_runtime.JSX.Element;
-declare function SelectDropdown(props: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function SelectRightSlot({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function SelectSearch(props: ComponentProps<typeof SearchInputText>): react_jsx_runtime.JSX.Element;
-
-export { SelectContent, SelectDropdown, SelectHeader, SelectHeaderTitle, SelectLabel, SelectLeftSlot, SelectMultiValue, SelectOption, SelectOptionText, SelectOptions, SelectRightSlot, SelectRoot, SelectSearch, SelectTrigger, SelectValue };