@nation-a/ui 0.2.1 → 0.4.0

package/dist/styled-system/types/system-types.d.ts

@@ -0,0 +1,193 @@
+/* eslint-disable */
+import type {  ConditionalValue, Nested  } from './conditions';
+import type {  AtRule, Globals, PropertiesFallback  } from './csstype';
+import type {  SystemProperties, CssVarProperties  } from './style-props';
+
+type String = string & {}
+type Number = number & {}
+
+export type Pretty<T> = { [K in keyof T]: T[K] } & {}
+
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
+
+export type DistributiveUnion<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]
+} & DistributiveOmit<U, keyof T>
+
+export type Assign<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] : T[K]
+} & U
+
+/* -----------------------------------------------------------------------------
+ * Native css properties
+ * -----------------------------------------------------------------------------*/
+
+type DashedIdent = `--${string}`
+
+type StringToMultiple<T extends string> = T | `${T}, ${T}`
+
+export type PositionAreaAxis =
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'x-start'
+  | 'x-end'
+  | 'span-x-start'
+  | 'span-x-end'
+  | 'x-self-start'
+  | 'x-self-end'
+  | 'span-x-self-start'
+  | 'span-x-self-end'
+  | 'span-all'
+  | 'top'
+  | 'bottom'
+  | 'span-top'
+  | 'span-bottom'
+  | 'y-start'
+  | 'y-end'
+  | 'span-y-start'
+  | 'span-y-end'
+  | 'y-self-start'
+  | 'y-self-end'
+  | 'span-y-self-start'
+  | 'span-y-self-end'
+  | 'block-start'
+  | 'block-end'
+  | 'span-block-start'
+  | 'span-block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | 'span-inline-start'
+  | 'span-inline-end'
+  | 'self-block-start'
+  | 'self-block-end'
+  | 'span-self-block-start'
+  | 'span-self-block-end'
+  | 'self-inline-start'
+  | 'self-inline-end'
+  | 'span-self-inline-start'
+  | 'span-self-inline-end'
+  | 'start'
+  | 'end'
+  | 'span-start'
+  | 'span-end'
+  | 'self-start'
+  | 'self-end'
+  | 'span-self-start'
+  | 'span-self-end'
+
+type PositionTry =
+  | 'normal'
+  | 'flip-block'
+  | 'flip-inline'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'block-start'
+  | 'block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | DashedIdent
+
+export interface ModernCssProperties {
+  anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
+  anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
+  fieldSizing?: Globals | 'fixed' | 'content'
+  interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
+  positionAnchor?: Globals | 'auto' | DashedIdent
+  positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
+  positionTry?: Globals | StringToMultiple<PositionTry> | String
+  positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
+  positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
+  positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
+  textWrapMode?: Globals | 'wrap' | 'nowrap'
+  textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
+  textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
+}
+
+export type CssProperty = keyof PropertiesFallback
+
+export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}
+
+export interface CssKeyframes {
+  [name: string]: {
+    [time: string]: CssProperties
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Conditional css properties
+ * -----------------------------------------------------------------------------*/
+
+interface GenericProperties {
+  [key: string]: ConditionalValue<String | Number | boolean>
+}
+
+/* -----------------------------------------------------------------------------
+ * Native css props
+ * -----------------------------------------------------------------------------*/
+
+export type NestedCssProperties = Nested<CssProperties>
+
+export type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>
+
+export interface GlobalStyleObject {
+  [selector: string]: SystemStyleObject
+}
+export interface ExtendableGlobalStyleObject {
+  [selector: string]: SystemStyleObject | undefined
+  extend?: GlobalStyleObject | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Composition (text styles, layer styles)
+ * -----------------------------------------------------------------------------*/
+
+type FilterStyleObject<P extends string> = {
+  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
+}
+
+export type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>
+
+/* -----------------------------------------------------------------------------
+ * Font face
+ * -----------------------------------------------------------------------------*/
+
+export type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>
+
+export type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>
+
+export interface GlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[]
+}
+
+export interface ExtendableGlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined
+  extend?: GlobalFontface | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Jsx style props
+ * -----------------------------------------------------------------------------*/
+interface WithCss {
+  css?: SystemStyleObject | SystemStyleObject[]
+}
+
+export type JsxStyleProps = SystemStyleObject & WithCss
+
+export interface PatchedHTMLProps {
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+  htmlContent?: string
+}
+
+export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
+
+type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps
+
+export type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
+  WithHTMLProps<T>,
+  P
+>

package/dist/types/components/Button/button.recipe.d.ts

@@ -0,0 +1,109 @@
+export type ButtonVariantProps = typeof buttonRecipe.__type;
+export declare const buttonRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    variant: {
+        solid: {
+            _disabled: {
+                background: "background.neutral.disabled";
+                color: "content.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+        };
+        outline: {
+            background: "transparent";
+            borderWidth: "1px";
+            borderStyle: "solid";
+            borderColor: "border.neutral.default";
+            _disabled: {
+                background: "transparent";
+                color: "content.neutral.disabled";
+                borderColor: "border.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+        };
+        light: {
+            background: "transparent";
+            _disabled: {
+                background: "transparent";
+                color: "content.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+        };
+    };
+    color: {
+        neuroid_primary: {};
+        neuroid_secondary: {};
+        zoltarina_primary: {};
+        zoltarina_secondary: {};
+        heyd_primary: {};
+        heyd_secondary: {};
+        heybee_primary: {};
+        neutral: {};
+        danger: {};
+        warning: {};
+        success: {};
+        informative: {};
+    };
+    size: {
+        xs: {
+            h: number;
+            textStyle: "label.sm";
+            px: "8px";
+            gap: number;
+            '& :where(svg)': {
+                width: "20px";
+                height: "20px";
+            };
+        };
+        sm: {
+            h: number;
+            textStyle: "label.sm";
+            px: "16px";
+            gap: number;
+            '& :where(svg)': {
+                width: "20px";
+                height: "20px";
+            };
+        };
+        md: {
+            h: number;
+            textStyle: "label.md";
+            px: "20px";
+            gap: number;
+            '& :where(svg)': {
+                width: "24px";
+                height: "24px";
+            };
+        };
+        lg: {
+            h: number;
+            textStyle: "body.lg";
+            px: "28px";
+            gap: number;
+            '& :where(svg)': {
+                width: "24px";
+                height: "24px";
+            };
+        };
+    };
+    radius: {
+        full: {
+            borderRadius: "full";
+        };
+        lg: {
+            borderRadius: "lg";
+        };
+        md: {
+            borderRadius: "md";
+        };
+    };
+    fullWidth: {
+        true: {
+            width: "full";
+            flexBasis: "auto";
+            flexGrow: number;
+        };
+    };
+}>;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonVariantProps } from './button.recipe';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps & {
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+};
+declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "outline" | "solid" | "light" | undefined;
+    color?: "neutral" | "neuroid_primary" | "neuroid_secondary" | "zoltarina_primary" | "zoltarina_secondary" | "heyd_primary" | "heyd_secondary" | "heybee_primary" | "danger" | "warning" | "success" | "informative" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    radius?: "md" | "lg" | "full" | undefined;
+    fullWidth?: boolean | undefined;
+} & {
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/types/components/Dialog/dialog.recipe.d.ts

@@ -0,0 +1,2 @@
+export type DialogVariantProps = keyof typeof dialogRecipe.variantMap;
+export declare const dialogRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "title" | "description" | "trigger" | "backdrop" | "positioner" | "closeTrigger", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "title" | "description" | "trigger" | "backdrop" | "positioner" | "closeTrigger">>;

package/dist/types/components/Dialog/index.d.ts

@@ -0,0 +1,15 @@
+import { Dialog as ArkDialog } from '@ark-ui/react/dialog';
+import { ComponentProps } from '../../../styled-system/types';
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+export type DialogProps = ComponentProps<typeof Root>;
+declare const Root: (props: ArkDialog.RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dialog: {
+    Root: (props: ArkDialog.RootProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "asChild"> & ArkDialog.BackdropBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "asChild"> & ArkDialog.TriggerBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "asChild"> & ArkDialog.ContentBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLHeadingElement>, "asChild"> & ArkDialog.TitleBaseProps & import('react').RefAttributes<HTMLHeadingElement>>;
+    Description: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "asChild"> & ArkDialog.DescriptionBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+    Positioner: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "asChild"> & ArkDialog.PositionerBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default Dialog;

package/dist/types/components/IconButton/icon-button.recipe.d.ts

@@ -0,0 +1,79 @@
+export type IconButtonVariantProps = typeof iconButtonRecipe.__type;
+export declare const iconButtonRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    variant: {
+        solid: {
+            _disabled: {
+                background: "background.neutral.disabled";
+                color: "content.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+        };
+        outline: {
+            background: "transparent";
+            borderWidth: "1px";
+            borderStyle: "solid";
+            borderColor: "border.neutral.default";
+            color: "content.neutral.bold";
+            _disabled: {
+                background: "transparent";
+                color: "content.neutral.disabled";
+                borderColor: "border.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+            _hover: {
+                background: "background.neutral.selected";
+            };
+        };
+        light: {
+            background: "transparent";
+            color: "content.neutral.bold";
+            _disabled: {
+                background: "transparent";
+                color: "content.neutral.disabled";
+                cursor: "not-allowed";
+                pointerEvents: "none";
+            };
+            _hover: {
+                background: "background.neutral.selected";
+            };
+        };
+    };
+    color: {
+        neuroid_primary: {};
+        zoltarina_primary: {};
+        heyd_primary: {};
+        heybee_primary: {};
+        neutral: {};
+    };
+    size: {
+        sm: {
+            h: number;
+            w: number;
+            p: "4px";
+            '& :where(svg)': {
+                width: "20px";
+                height: "20px";
+            };
+        };
+        md: {
+            h: number;
+            w: number;
+            p: "4px";
+            '& :where(svg)': {
+                width: "24px";
+                height: "24px";
+            };
+        };
+        lg: {
+            h: number;
+            w: number;
+            p: "8px";
+            '& :where(svg)': {
+                width: "24px";
+                height: "24px";
+            };
+        };
+    };
+}>;

package/dist/types/components/IconButton/index.d.ts

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconButtonVariantProps } from './icon-button.recipe';
+export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariantProps & {
+    loading?: boolean;
+};
+declare const IconButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "outline" | "solid" | "light" | undefined;
+    color?: "neutral" | "neuroid_primary" | "zoltarina_primary" | "heyd_primary" | "heybee_primary" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    loading?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/types/components/Spinner/index.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { SpinnerVariantProps } from './spinner.recipe';
+import { ColorToken } from '../../../styled-system/tokens';
+export type SpinnerProps = HTMLAttributes<HTMLDivElement> & SpinnerVariantProps & {
+    /**
+     * For accessibility, it is important to add a fallback loading text.
+     * This text will be visible to screen readers.
+     * @default "Loading..."
+     */
+    label?: string;
+    color?: ColorToken;
+};
+declare const Spinner: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    size?: "sm" | "md" | "lg" | "xl" | undefined;
+} & {
+    /**
+     * For accessibility, it is important to add a fallback loading text.
+     * This text will be visible to screen readers.
+     * @default "Loading..."
+     */
+    label?: string;
+    color?: ColorToken;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Spinner;

package/dist/types/components/Spinner/spinner.recipe.d.ts

@@ -0,0 +1,21 @@
+export type SpinnerVariantProps = typeof spinnerRecipe.__type;
+export declare const spinnerRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    size: {
+        sm: {
+            width: number;
+            height: number;
+        };
+        md: {
+            width: number;
+            height: number;
+        };
+        lg: {
+            width: number;
+            height: number;
+        };
+        xl: {
+            width: number;
+            height: number;
+        };
+    };
+}>;

package/dist/types/components/Text/index.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { TextVariantProps } from './text.recipe';
+export type TextProps = HTMLAttributes<HTMLParagraphElement> & TextVariantProps;
+declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    variant?: "label.sm" | "body.md" | "body.lg" | "body.sm" | "label.md" | "title.md" | "title.lg" | "headline.sm" | "headline.md" | "display.md" | "display.lg" | undefined;
+} & import('react').RefAttributes<HTMLParagraphElement>>;
+export default Text;

package/dist/types/components/Text/text.recipe.d.ts

@@ -0,0 +1,38 @@
+export type TextVariantProps = typeof textRecipe.__type;
+export declare const textRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    variant: {
+        'display.lg': {
+            textStyle: "display.lg";
+        };
+        'display.md': {
+            textStyle: "display.md";
+        };
+        'headline.md': {
+            textStyle: "headline.md";
+        };
+        'headline.sm': {
+            textStyle: "headline.sm";
+        };
+        'title.lg': {
+            textStyle: "title.lg";
+        };
+        'title.md': {
+            textStyle: "title.md";
+        };
+        'body.lg': {
+            textStyle: "body.lg";
+        };
+        'body.md': {
+            textStyle: "body.md";
+        };
+        'body.sm': {
+            textStyle: "body.sm";
+        };
+        'label.sm': {
+            textStyle: "label.sm";
+        };
+        'label.md': {
+            textStyle: "label.md";
+        };
+    };
+}>;

package/dist/types/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Button, type ButtonProps } from './Button';
+export { default as Text, type TextProps } from './Text';
+export { default as Dialog, type DialogProps } from './Dialog';
+export { default as Spinner, type SpinnerProps } from './Spinner';
+export { default as IconButton, type IconButtonProps } from './IconButton';
+export { Portal, type PortalProps } from '@ark-ui/react';