@particle-network/ui-react 0.0.1

package/dist/components/typography/Text.type.d.ts

@@ -0,0 +1,103 @@
+import type React from 'react';
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
+type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+type TextLineHeight = '1' | '1.4';
+type TextAlign = 'left' | 'center' | 'right';
+export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * | variant      | font-size | font-weight |
+     * | :----------- | :-------- | :---------- |
+     * | h1           | 24px      | 600         |
+     * | h2           | 20px      | 600         |
+     * | h3           | 16px      | 600         |
+     * | body1        | 14px      | 400         |
+     * | body1Bold    | 14px      | 500         |
+     * | body2        | 12px      | 400         |
+     * | body2Bold    | 12px      | 500         |
+     * | body3        | 10px      | 400         |
+     * | body3Bold    | 10px      | 500         |
+     * | caption1     | 8px       | 400         |
+     * | caption1Bold | 8px       | 500         |
+     */
+    variant?: TextVariant;
+    /**
+     * `24px 600`
+     */
+    h1?: boolean;
+    /**
+     * `20px 600`
+     */
+    h2?: boolean;
+    /**
+     * `16px 600`
+     */
+    h3?: boolean;
+    /**
+     * `14px 400`
+     */
+    body1?: boolean;
+    /**
+     * `14px 500`
+     */
+    body1Bold?: boolean;
+    /**
+     * `12px 400`
+     */
+    body2?: boolean;
+    /**
+     * `12px 500`
+     */
+    body2Bold?: boolean;
+    /**
+     * `10px 400`
+     */
+    body3?: boolean;
+    /**
+     * `10px 500`
+     */
+    body3Bold?: boolean;
+    /**
+     * `8px 400`
+     */
+    caption1?: boolean;
+    /**
+     * `8px 500`
+     */
+    caption1Bold?: boolean;
+    /**
+     * | weight    | font-weight |
+     * | :-------- | :---------: |
+     * | normal    | 400         |
+     * | medium    | 500         |
+     * | semibold  | 600         |
+     * | bold      | 700         |
+     * | extrabold | 800         |
+     */
+    fontWeight?: TextWeight;
+    /**
+     * | color      | dark      | light     |
+     * | :--------- | :-------- | :-------- |
+     * | default    | -         | -         |
+     * | foreground | #FFFFFF   | #000000   |
+     * | secondary  | #A1A1AA   | #767A80   |
+     * | tertiary   | #4E4E56   | #C0C0C9   |
+     * | primary    | #D745FF   | #000000   |
+     * | success    | #45B167   | #2E9F4A   |
+     * | danger     | #E84A5A   | #DE4A40   |
+     * | alert      | #F57733   | #E65E16   |
+     * | warning    | #FF9821   | #FF9821   |
+     * | gold       | #FFB800   | #F38300   |
+     */
+    color?: UXForegroundColor;
+    lineHeight?: TextLineHeight;
+    align?: TextAlign;
+}
+export declare const textClasses: {
+    variant: Record<TextVariant, string>;
+    color: Record<UXForegroundColor, string>;
+    fontWeight: Record<TextWeight, string>;
+    lineHeight: Record<TextLineHeight, string>;
+    align: Record<TextAlign, string>;
+};
+export {};

package/dist/components/typography/Text.type.js

@@ -0,0 +1,47 @@
+const textClasses = {
+    variant: {
+        h1: 'text-[1.5rem] leading-[1.75rem] font-semibold',
+        h2: 'text-[1.25rem] leading-[1.5rem] font-semibold',
+        h3: 'text-[1rem] leading-[1.25rem] font-semibold',
+        body1Bold: 'text-[0.875rem] leading-[1.125rem] font-medium',
+        body1: 'text-[0.875rem] leading-[1.125rem] font-normal',
+        body2Bold: 'text-[0.75rem] leading-[1rem] font-medium',
+        body2: 'text-[0.75rem] leading-[1rem] font-normal',
+        body3Bold: 'text-[0.6875rem] leading-[1rem] font-medium',
+        body3: 'text-[0.6875rem] leading-[1rem] font-normal',
+        caption1Bold: 'text-[0.625rem] leading-[0.875rem] font-medium',
+        caption1: 'text-[0.625rem] leading-[0.875rem] font-normal'
+    },
+    color: {
+        default: '',
+        foreground: 'text-foreground',
+        secondary: 'text-foreground-300',
+        white: 'text-white',
+        tertiary: 'text-foreground-100',
+        primary: 'text-primary',
+        success: 'text-success',
+        danger: 'text-danger',
+        alert: 'text-alert',
+        warning: 'text-warning',
+        gold: 'text-gold',
+        bullish: 'text-bullish',
+        bearish: 'text-bearish'
+    },
+    fontWeight: {
+        normal: 'font-normal',
+        medium: 'font-medium',
+        semibold: 'font-semibold',
+        bold: 'font-bold',
+        extrabold: 'font-extrabold'
+    },
+    lineHeight: {
+        1: 'leading-none',
+        '1.4': 'leading-[1.4]'
+    },
+    align: {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right'
+    }
+};
+export { textClasses };

package/dist/icons/index.d.ts

@@ -0,0 +1,6 @@
+import React, { type SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement>;
+export declare const CloseIcon: React.FC<IconProps>;
+export declare const QuestionIcon: React.FC<IconProps>;
+export declare const ChevronDownIcon: React.FC<IconProps>;
+export {};

package/dist/icons/index.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const CloseIcon = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        fill: "none",
+        style: {
+            color: 'var(--heroui-foreground)'
+        },
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "m8.002 8.941 3.77 3.772a.667.667 0 0 0 .944-.943L8.944 8l3.771-3.772a.667.667 0 0 0-.942-.942L8.002 7.056 4.23 3.285a.667.667 0 0 0-.942.942L7.058 8l-3.77 3.771a.667.667 0 1 0 .942.943L8.002 8.94Z",
+            clipRule: "evenodd"
+        })
+    });
+const QuestionIcon = (props)=>/*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 12,
+        height: 12,
+        fill: "none",
+        style: {
+            color: 'var(--heroui-foreground-300)'
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: 6,
+                cy: 6,
+                r: 5.611,
+                stroke: "currentColor",
+                strokeWidth: 0.778
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M7.9 4.766c-.025.468-.176.837-.929 1.554-.382.363-.622.637-.646.876a.375.375 0 0 1-.38.329c-.013 0-.025-.002-.038-.003a.37.37 0 0 1-.343-.397c.052-.504.44-.911.868-1.318.684-.652.695-.859.707-1.078a.906.906 0 0 0-.28-.697 1.22 1.22 0 0 0-.86-.35h-.003c-.626 0-1.138.488-1.138 1.085 0 .202-.17.364-.382.364a.373.373 0 0 1-.382-.365c0-.483.197-.938.556-1.28.358-.344.835-.532 1.344-.533a2.007 2.007 0 0 1 1.419.576c.34.342.513.781.488 1.237ZM6.228 8.195a.457.457 0 1 0-.458.792.457.457 0 0 0 .458-.792Z"
+            })
+        ]
+    });
+const ChevronDownIcon = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 20,
+        height: 20,
+        fill: "none",
+        style: {
+            color: 'var(--heroui-foreground-300)'
+        },
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M12.706 15.702a1 1 0 0 1-1.414 0l-5.657-5.657A1 1 0 1 1 7.05 8.631l4.95 4.95 4.95-4.95a1 1 0 0 1 1.414 1.414l-5.657 5.657Z",
+            clipRule: "evenodd"
+        })
+    });
+export { ChevronDownIcon, CloseIcon, QuestionIcon };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./utils/index.js";

package/dist/utils/classes.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This is the base classNames for all elements.
+ * Is meant to be used with the `addBase` method from tailwindcss.
+ */
+export declare const baseStyles: (prefix: string) => {
+    color: string;
+    backgroundColor: string;
+};
+/**
+ * focus classNames when the element is focused by keyboard.
+ */
+export declare const focusVisibleClasses: string[];
+export declare const dataFocusVisibleClasses: string[];
+export declare const groupDataFocusVisibleClasses: string[];
+export declare const ringClasses: string[];
+/**
+ * This classes centers the element by using absolute positioning.
+ */
+export declare const translateCenterClasses: string[];
+export declare const absoluteFullClasses: string[];
+/**
+ * This object defines CSS classes for collapsing adjacent variant borders.
+ * It includes classes for different variants like default, primary, secondary, etc.
+ */
+export declare const collapseAdjacentVariantBorders: {
+    default: string[];
+    primary: string[];
+    secondary: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+    bullish: string[];
+    bearish: string[];
+};
+export declare const hiddenInputClasses: string[];

package/dist/utils/classes.js

@@ -0,0 +1,87 @@
+const baseStyles = (prefix)=>({
+        color: `hsl(var(--${prefix}-foreground))`,
+        backgroundColor: `hsl(var(--${prefix}-background))`
+    });
+const focusVisibleClasses = [
+    'focus-visible:z-10',
+    'focus-visible:outline-2',
+    'focus-visible:outline-focus',
+    'focus-visible:outline-offset-2'
+];
+const dataFocusVisibleClasses = [
+    'outline-none',
+    'data-[focus-visible=true]:z-10',
+    'data-[focus-visible=true]:outline-2',
+    'data-[focus-visible=true]:outline-focus',
+    'data-[focus-visible=true]:outline-offset-2'
+];
+const groupDataFocusVisibleClasses = [
+    'outline-none',
+    'group-data-[focus-visible=true]:z-10',
+    'group-data-[focus-visible=true]:ring-2',
+    'group-data-[focus-visible=true]:ring-focus',
+    'group-data-[focus-visible=true]:ring-offset-2',
+    'group-data-[focus-visible=true]:ring-offset-background'
+];
+const ringClasses = [
+    'outline-none',
+    'ring-2',
+    'ring-focus',
+    'ring-offset-2',
+    'ring-offset-background'
+];
+const translateCenterClasses = [
+    'absolute',
+    'top-1/2',
+    'left-1/2',
+    '-translate-x-1/2',
+    '-translate-y-1/2'
+];
+const absoluteFullClasses = [
+    'absolute',
+    'inset-0'
+];
+const collapseAdjacentVariantBorders = {
+    default: [
+        '[&+.border-medium.border-default]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    primary: [
+        '[&+.border-medium.border-primary]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    secondary: [
+        '[&+.border-medium.border-secondary]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    success: [
+        '[&+.border-medium.border-success]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    warning: [
+        '[&+.border-medium.border-warning]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    danger: [
+        '[&+.border-medium.border-danger]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    bullish: [
+        '[&+.border-medium.border-bullish]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ],
+    bearish: [
+        '[&+.border-medium.border-bearish]:ms-[calc(theme(borderWidth.medium)*-1)]'
+    ]
+};
+const hiddenInputClasses = [
+    'font-inherit',
+    'text-[100%]',
+    'leading-[1.15]',
+    'm-0',
+    'p-0',
+    'overflow-visible',
+    'box-border',
+    'absolute',
+    'top-0',
+    'w-full',
+    'h-full',
+    'opacity-[0.0001]',
+    'z-[1]',
+    'cursor-pointer',
+    'disabled:cursor-default'
+];
+export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses, } from './classes';
+export * from './input-classes';
+export { colorVariants } from './variants';

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+import { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses } from "./classes.js";
+import { colorVariants } from "./variants.js";
+export * from "./input-classes.js";
+export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, hiddenInputClasses, ringClasses, translateCenterClasses };