@nurihaus/web-design-system 0.0.29 → 1.1.0

package/dist/components/avatar/avatar-type.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface AvatarProps {
+    size: "xl" | "l" | "m" | "s";
+    src?: string;
+    alt?: string;
+    badgeOption?: ReactNode | string;
+}

package/dist/components/avatar/avatar.d.ts

@@ -1,10 +1,4 @@
-import { ReactNode } from "react";
 import "./avatar-style.css";
-interface AvatarProps {
-    size: "xl" | "l" | "m" | "s";
-    src?: string;
-    alt?: string;
-    badgeOption?: ReactNode | string;
-}
+import { AvatarProps } from "./avatar-type";
 declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/components/badge/badge-type.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { colors } from "../../styles/token/colors";
+export interface BaseBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    borderColor?: keyof typeof colors;
+    textColor?: keyof typeof colors;
+    backgroundColor?: keyof typeof colors;
+    size?: "l" | "m" | "r" | "s" | "sm";
+    asChild?: boolean;
+    children?: ReactNode;
+}

package/dist/components/badge/base-badge.d.ts

@@ -0,0 +1,2 @@
+import { BaseBadgeProps } from "./badge-type";
+export declare const BaseBadge: (props: BaseBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/icon-text-badge.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { BaseBadgeProps } from "./badge-type";
+declare const IconTextBadge: (props: Omit<BaseBadgeProps, "asChild" | "children"> & {
+    icon: ReactNode;
+    text: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default IconTextBadge;

package/dist/components/badge/icon-text-option-badge.d.ts

@@ -0,0 +1,9 @@
+import "./badge-style.css";
+import { ReactNode } from "react";
+import { BaseBadgeProps } from "./badge-type";
+declare const IconTextOptionBadge: (props: Omit<BaseBadgeProps, "asChild" | "children"> & {
+    icon: ReactNode;
+    text: ReactNode;
+    option: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default IconTextOptionBadge;

package/dist/components/badge/option-badge.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { BaseBadgeProps } from "./badge-type";
+declare const OptionBadge: (props: Omit<BaseBadgeProps, "asChild" | "children"> & {
+    option: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default OptionBadge;

package/dist/components/button/base-button.d.ts

@@ -1,9 +1,7 @@
-import "./button.css";
+import React from "react";
+import "./button-style.css";
 import "../../styles/token/color.css";
 import "../../styles/token/font.css";
-interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    children?: React.ReactNode;
-    asChild?: boolean;
-}
-declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { BaseButtonProps } from "./button-type";
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default BaseButton;

package/dist/components/button/button-type.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    asChild?: boolean;
+}
+export interface CTAButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost" | "white";
+    size?: "xl" | "l" | "m" | "r" | "s";
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+    text: string;
+}

package/dist/components/button/button.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from "@storybook/react/*";
+import { CTAButtonProps } from "./button-type";
+declare const meta: {
+    title: string;
+    component: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Primary: StoryObj<CTAButtonProps>;

package/dist/components/button/cta-button.d.ts

@@ -1,11 +1,3 @@
-import { ReactNode } from "react";
-interface CTAButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost" | "white";
-    size?: "xl" | "l" | "m" | "r" | "s";
-    disabled?: boolean;
-    loading?: boolean;
-    icon?: ReactNode;
-    text: string;
-}
+import { CTAButtonProps } from "./button-type";
 declare const CTAButton: (props: CTAButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CTAButton;

package/dist/components/loading/{Loading.d.ts → loading.d.ts}

@@ -1,3 +1,3 @@
-import "./loading.css";
+import "./loading-style.css";
 declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 export default Loading;

package/dist/components/table/base-table.d.ts

@@ -0,0 +1,11 @@
+import "./table-style.css";
+import { PropsWithChildren } from "react";
+import { TableCellProps, TableHeaderProps, TableRowProps } from "./table-type";
+declare const TableRoot: {
+    (props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Header: (props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+    Row: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: (props: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default TableRoot;

package/dist/components/table/data-table.d.ts

@@ -0,0 +1,13 @@
+export interface RowItem {
+    id: string;
+    value: string;
+}
+type ColumnsType<T extends readonly RowItem[]> = Array<{
+    [K in T[number]["id"]]: any;
+}>;
+export interface DataTableProps<T extends readonly RowItem[]> {
+    rows: T;
+    columns: ColumnsType<T>;
+}
+declare const DataTable: <T extends readonly RowItem[]>(props: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/components/table/table-type.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+export interface TableProps {
+    children: React.ReactNode;
+}
+export interface TableRootProps extends Omit<TableProps, "children">, ComponentPropsWithRef<"table"> {
+}
+export interface TableHeaderProps extends Omit<TableProps, "children">, ComponentPropsWithRef<"thead"> {
+    justify?: "center" | "start" | "end";
+}
+export interface TableRowProps extends Omit<TableProps, "children">, ComponentPropsWithRef<"tr"> {
+}
+export interface TableBodyProps extends Omit<TableProps, "children">, ComponentPropsWithRef<"tbody"> {
+}
+export interface TableCellProps extends Omit<TableProps, "children">, ComponentPropsWithRef<"td"> {
+}

package/dist/components/table/table.stories.d.ts

@@ -0,0 +1,57 @@
+import type { StoryObj } from "@storybook/react";
+import { DataTableProps, RowItem } from "./data-table";
+declare const meta: {
+    title: string;
+    component: <T extends readonly RowItem[]>(props: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+declare const rows: readonly [{
+    readonly id: "row1";
+    readonly value: "row1";
+}, {
+    readonly id: "row2";
+    readonly value: "row2";
+}, {
+    readonly id: "row3";
+    readonly value: "row3";
+}, {
+    readonly id: "row4";
+    readonly value: "row4";
+}, {
+    readonly id: "row5";
+    readonly value: "row5";
+}, {
+    readonly id: "row6";
+    readonly value: "row6";
+}, {
+    readonly id: "row7";
+    readonly value: "row7";
+}, {
+    readonly id: "row8";
+    readonly value: "row8";
+}, {
+    readonly id: "row9";
+    readonly value: "row9";
+}, {
+    readonly id: "row10";
+    readonly value: "row10";
+}, {
+    readonly id: "row11";
+    readonly value: "row11";
+}, {
+    readonly id: "row12";
+    readonly value: "row12";
+}, {
+    readonly id: "row13";
+    readonly value: "row13";
+}, {
+    readonly id: "row14";
+    readonly value: "row14";
+}, {
+    readonly id: "row15";
+    readonly value: "row15";
+}, {
+    readonly id: "row16";
+    readonly value: "row16";
+}];
+export declare const Default: StoryObj<DataTableProps<typeof rows>>;

package/dist/components/text-field/base-text-field.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import "./text-field-style.css";
+import "../../styles/token/font.css";
+import { TextFieldHelperTextProps, TextFieldInputProps, TextFieldLabelProps } from "./text-field-type";
+declare const TextFieldRoot: {
+    ({ children, validations, width, }: PropsWithChildren<{
+        validations?: RegExp[];
+        width?: number;
+    }>): import("react/jsx-runtime").JSX.Element;
+    TextLabel: (props: TextFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+    InputField: (props: TextFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    HelperText: (props: TextFieldHelperTextProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default TextFieldRoot;

package/dist/components/text-field/text-field-type.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+export interface TextFieldLabelProps extends ComponentPropsWithRef<"div"> {
+    text: string;
+}
+export interface TextFieldInputProps extends ComponentPropsWithRef<"input"> {
+}
+export interface TextFieldHelperTextProps extends ComponentPropsWithRef<"div"> {
+    text: string;
+    isError?: boolean;
+}

package/dist/components/text-field/text-field-with-error.d.ts

@@ -0,0 +1,10 @@
+import "./text-field-style.css";
+import "../../styles/token/font.css";
+declare const TextFieldWithError: ({ width, placeholder, name, helperText, labelText, }: {
+    width?: number;
+    placeholder?: string;
+    name?: string;
+    helperText?: string;
+    labelText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TextFieldWithError;

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,10 @@
+import "./text-field-style.css";
+import "../../styles/token/font.css";
+declare const TextField: ({ width, placeholder, name, helperText, labelText, }: {
+    width?: number;
+    placeholder?: string;
+    name?: string;
+    helperText?: string;
+    labelText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/components/text-field/text-filed.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from "@storybook/react/*";
+declare const meta: {
+    title: string;
+    component: ({ width, placeholder, name, helperText, labelText, }: {
+        width?: number;
+        placeholder?: string;
+        name?: string;
+        helperText?: string;
+        labelText?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/index.d.ts

@@ -1,2 +1,6 @@
 export { default as Avatar } from "./components/avatar/avatar";
 export { default as CTAButton } from "./components/button/cta-button";
+export { default as OptionBadge } from "./components/badge/option-badge";
+export { default as IconTextBadge } from "./components/badge/icon-text-badge";
+export { default as IconTextOptionBadge } from "./components/badge/icon-text-option-badge";
+export { default as DataTable } from "./components/table/data-table";