@leduchai/vmeta-ui-core 0.1.3

package/README.md

@@ -0,0 +1,3 @@
+# @leduchai/vmeta-ui-core
+
+Primitive React dung chung cho page header, button, card, form, table va system state. Package khong chua API, route, Redux hoac permission cua tung san pham.

package/dist/index.cjs

@@ -0,0 +1,211 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  VmetaButton: () => VmetaButton,
+  VmetaCard: () => VmetaCard,
+  VmetaDataTable: () => VmetaDataTable,
+  VmetaFormItem: () => VmetaFormItem,
+  VmetaFormPage: () => VmetaFormPage,
+  VmetaFormSection: () => VmetaFormSection,
+  VmetaInput: () => VmetaInput,
+  VmetaPageHeader: () => VmetaPageHeader,
+  VmetaSelect: () => VmetaSelect,
+  VmetaSystemState: () => VmetaSystemState,
+  VmetaTextArea: () => VmetaTextArea
+});
+module.exports = __toCommonJS(index_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function VmetaButton({
+  tone = "primary",
+  variant = "solid",
+  loading = false,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type,
+      className: joinClassNames("vmeta-button", `is-${tone}`, `is-${variant}`, className),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vmeta-button__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
+      ]
+    }
+  );
+}
+function VmetaCard({ as: Component = "section", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: joinClassNames("vmeta-card", className), ...props });
+}
+function VmetaPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  breadcrumb,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: joinClassNames("vmeta-page-header", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vmeta-page-header__copy", children: [
+      breadcrumb && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-page-header__breadcrumb", children: breadcrumb }),
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "vmeta-page-header__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-page-header__description", children: description })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-page-header__actions", children: actions })
+  ] });
+}
+function VmetaSystemState({
+  tone = "empty",
+  title,
+  description,
+  action,
+  icon,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      className: joinClassNames("vmeta-system-state", `is-${tone}`, className),
+      role: tone === "error" ? "alert" : "status",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-system-state__icon", "aria-hidden": "true", children: icon ?? (tone === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vmeta-system-state__spinner" }) : "V") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-system-state__action", children: action })
+      ]
+    }
+  );
+}
+function VmetaFormPage({ actions, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: joinClassNames("vmeta-form-page", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-form-page__body", children }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-form-actions", children: actions })
+  ] });
+}
+function VmetaFormSection({
+  title,
+  description,
+  columns = 2,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: joinClassNames("vmeta-form-section", className), ...props, children: [
+    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-form-grid", "data-columns": columns, children })
+  ] });
+}
+function VmetaFormItem({
+  label,
+  htmlFor,
+  required,
+  help,
+  error,
+  fullWidth,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: joinClassNames("vmeta-form-item", fullWidth && "is-full-width", Boolean(error) && "has-error", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor, children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: " *" })
+        ] }),
+        children,
+        (error || help) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { role: error ? "alert" : void 0, children: error ?? help })
+      ]
+    }
+  );
+}
+function VmetaInput({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { className: joinClassNames("vmeta-control", className), ...props });
+}
+function VmetaTextArea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { className: joinClassNames("vmeta-control", "vmeta-textarea", className), ...props });
+}
+function VmetaSelect({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { className: joinClassNames("vmeta-control", className), ...props, children });
+}
+function VmetaDataTable({
+  columns,
+  data,
+  rowKey,
+  loading,
+  error,
+  emptyText = "Chua co du lieu",
+  onRetry,
+  className,
+  ...props
+}) {
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaSystemState, { tone: "loading", title: "Dang tai du lieu..." });
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      VmetaSystemState,
+      {
+        tone: "error",
+        title: "Khong the tai du lieu",
+        description: error,
+        action: onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaButton, { onClick: onRetry, children: "Thu lai" })
+      }
+    );
+  }
+  if (data.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaSystemState, { tone: "empty", title: emptyText });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: joinClassNames("vmeta-data-table", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: { width: column.width, textAlign: column.align }, children: column.title }, column.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { textAlign: column.align }, children: column.render(row, rowIndex) }, column.key)) }, rowKey(row, rowIndex))) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VmetaButton,
+  VmetaCard,
+  VmetaDataTable,
+  VmetaFormItem,
+  VmetaFormPage,
+  VmetaFormSection,
+  VmetaInput,
+  VmetaPageHeader,
+  VmetaSelect,
+  VmetaSystemState,
+  VmetaTextArea
+});

package/dist/index.d.cts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+type VmetaTone = 'primary' | 'secondary' | 'neutral' | 'danger';
+type VmetaButtonVariant = 'solid' | 'outline' | 'ghost';
+interface VmetaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    tone?: VmetaTone;
+    variant?: VmetaButtonVariant;
+    loading?: boolean;
+}
+declare function VmetaButton({ tone, variant, loading, disabled, className, children, type, ...props }: VmetaButtonProps): react_jsx_runtime.JSX.Element;
+interface VmetaCardProps extends HTMLAttributes<HTMLElement> {
+    as?: 'article' | 'section' | 'div';
+}
+declare function VmetaCard({ as: Component, className, ...props }: VmetaCardProps): react_jsx_runtime.JSX.Element;
+interface VmetaPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    breadcrumb?: ReactNode;
+}
+declare function VmetaPageHeader({ eyebrow, title, description, actions, breadcrumb, className, ...props }: VmetaPageHeaderProps): react_jsx_runtime.JSX.Element;
+interface VmetaSystemStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    tone?: 'loading' | 'empty' | 'error' | 'forbidden' | 'not-found';
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+declare function VmetaSystemState({ tone, title, description, action, icon, className, ...props }: VmetaSystemStateProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormPageProps extends HTMLAttributes<HTMLFormElement> {
+    actions?: ReactNode;
+}
+declare function VmetaFormPage({ actions, className, children, ...props }: VmetaFormPageProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    columns?: 1 | 2 | 3;
+}
+declare function VmetaFormSection({ title, description, columns, className, children, ...props }: VmetaFormSectionProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormItemProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    htmlFor?: string;
+    required?: boolean;
+    help?: ReactNode;
+    error?: ReactNode;
+    fullWidth?: boolean;
+}
+declare function VmetaFormItem({ label, htmlFor, required, help, error, fullWidth, className, children, ...props }: VmetaFormItemProps): react_jsx_runtime.JSX.Element;
+declare function VmetaInput({ className, ...props }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function VmetaTextArea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>): react_jsx_runtime.JSX.Element;
+declare function VmetaSelect({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>): react_jsx_runtime.JSX.Element;
+interface VmetaDataTableColumn<T> {
+    key: string;
+    title: ReactNode;
+    render: (row: T, index: number) => ReactNode;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+}
+interface VmetaDataTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: Array<VmetaDataTableColumn<T>>;
+    data: T[];
+    rowKey: (row: T, index: number) => string | number;
+    loading?: boolean;
+    error?: ReactNode;
+    emptyText?: ReactNode;
+    onRetry?: () => void;
+}
+declare function VmetaDataTable<T>({ columns, data, rowKey, loading, error, emptyText, onRetry, className, ...props }: VmetaDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { VmetaButton, type VmetaButtonProps, type VmetaButtonVariant, VmetaCard, type VmetaCardProps, VmetaDataTable, type VmetaDataTableColumn, type VmetaDataTableProps, VmetaFormItem, type VmetaFormItemProps, VmetaFormPage, type VmetaFormPageProps, VmetaFormSection, type VmetaFormSectionProps, VmetaInput, VmetaPageHeader, type VmetaPageHeaderProps, VmetaSelect, VmetaSystemState, type VmetaSystemStateProps, VmetaTextArea, type VmetaTone };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+type VmetaTone = 'primary' | 'secondary' | 'neutral' | 'danger';
+type VmetaButtonVariant = 'solid' | 'outline' | 'ghost';
+interface VmetaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    tone?: VmetaTone;
+    variant?: VmetaButtonVariant;
+    loading?: boolean;
+}
+declare function VmetaButton({ tone, variant, loading, disabled, className, children, type, ...props }: VmetaButtonProps): react_jsx_runtime.JSX.Element;
+interface VmetaCardProps extends HTMLAttributes<HTMLElement> {
+    as?: 'article' | 'section' | 'div';
+}
+declare function VmetaCard({ as: Component, className, ...props }: VmetaCardProps): react_jsx_runtime.JSX.Element;
+interface VmetaPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    breadcrumb?: ReactNode;
+}
+declare function VmetaPageHeader({ eyebrow, title, description, actions, breadcrumb, className, ...props }: VmetaPageHeaderProps): react_jsx_runtime.JSX.Element;
+interface VmetaSystemStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    tone?: 'loading' | 'empty' | 'error' | 'forbidden' | 'not-found';
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+declare function VmetaSystemState({ tone, title, description, action, icon, className, ...props }: VmetaSystemStateProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormPageProps extends HTMLAttributes<HTMLFormElement> {
+    actions?: ReactNode;
+}
+declare function VmetaFormPage({ actions, className, children, ...props }: VmetaFormPageProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    columns?: 1 | 2 | 3;
+}
+declare function VmetaFormSection({ title, description, columns, className, children, ...props }: VmetaFormSectionProps): react_jsx_runtime.JSX.Element;
+interface VmetaFormItemProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    htmlFor?: string;
+    required?: boolean;
+    help?: ReactNode;
+    error?: ReactNode;
+    fullWidth?: boolean;
+}
+declare function VmetaFormItem({ label, htmlFor, required, help, error, fullWidth, className, children, ...props }: VmetaFormItemProps): react_jsx_runtime.JSX.Element;
+declare function VmetaInput({ className, ...props }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare function VmetaTextArea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>): react_jsx_runtime.JSX.Element;
+declare function VmetaSelect({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>): react_jsx_runtime.JSX.Element;
+interface VmetaDataTableColumn<T> {
+    key: string;
+    title: ReactNode;
+    render: (row: T, index: number) => ReactNode;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+}
+interface VmetaDataTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: Array<VmetaDataTableColumn<T>>;
+    data: T[];
+    rowKey: (row: T, index: number) => string | number;
+    loading?: boolean;
+    error?: ReactNode;
+    emptyText?: ReactNode;
+    onRetry?: () => void;
+}
+declare function VmetaDataTable<T>({ columns, data, rowKey, loading, error, emptyText, onRetry, className, ...props }: VmetaDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { VmetaButton, type VmetaButtonProps, type VmetaButtonVariant, VmetaCard, type VmetaCardProps, VmetaDataTable, type VmetaDataTableColumn, type VmetaDataTableProps, VmetaFormItem, type VmetaFormItemProps, VmetaFormPage, type VmetaFormPageProps, VmetaFormSection, type VmetaFormSectionProps, VmetaInput, VmetaPageHeader, type VmetaPageHeaderProps, VmetaSelect, VmetaSystemState, type VmetaSystemStateProps, VmetaTextArea, type VmetaTone };

package/dist/index.js

@@ -0,0 +1,176 @@
+// src/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function VmetaButton({
+  tone = "primary",
+  variant = "solid",
+  loading = false,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: joinClassNames("vmeta-button", `is-${tone}`, `is-${variant}`, className),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "vmeta-button__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+function VmetaCard({ as: Component = "section", className, ...props }) {
+  return /* @__PURE__ */ jsx(Component, { className: joinClassNames("vmeta-card", className), ...props });
+}
+function VmetaPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  breadcrumb,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: joinClassNames("vmeta-page-header", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "vmeta-page-header__copy", children: [
+      breadcrumb && /* @__PURE__ */ jsx("div", { className: "vmeta-page-header__breadcrumb", children: breadcrumb }),
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "vmeta-page-header__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx("h1", { children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: "vmeta-page-header__description", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "vmeta-page-header__actions", children: actions })
+  ] });
+}
+function VmetaSystemState({
+  tone = "empty",
+  title,
+  description,
+  action,
+  icon,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: joinClassNames("vmeta-system-state", `is-${tone}`, className),
+      role: tone === "error" ? "alert" : "status",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "vmeta-system-state__icon", "aria-hidden": "true", children: icon ?? (tone === "loading" ? /* @__PURE__ */ jsx("span", { className: "vmeta-system-state__spinner" }) : "V") }),
+        /* @__PURE__ */ jsx("h2", { children: title }),
+        description && /* @__PURE__ */ jsx("p", { children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "vmeta-system-state__action", children: action })
+      ]
+    }
+  );
+}
+function VmetaFormPage({ actions, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("form", { className: joinClassNames("vmeta-form-page", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "vmeta-form-page__body", children }),
+    actions && /* @__PURE__ */ jsx("div", { className: "vmeta-form-actions", children: actions })
+  ] });
+}
+function VmetaFormSection({
+  title,
+  description,
+  columns = 2,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: joinClassNames("vmeta-form-section", className), ...props, children: [
+    (title || description) && /* @__PURE__ */ jsxs("header", { children: [
+      title && /* @__PURE__ */ jsx("h2", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "vmeta-form-grid", "data-columns": columns, children })
+  ] });
+}
+function VmetaFormItem({
+  label,
+  htmlFor,
+  required,
+  help,
+  error,
+  fullWidth,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClassNames("vmeta-form-item", fullWidth && "is-full-width", Boolean(error) && "has-error", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+        ] }),
+        children,
+        (error || help) && /* @__PURE__ */ jsx("small", { role: error ? "alert" : void 0, children: error ?? help })
+      ]
+    }
+  );
+}
+function VmetaInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx("input", { className: joinClassNames("vmeta-control", className), ...props });
+}
+function VmetaTextArea({ className, ...props }) {
+  return /* @__PURE__ */ jsx("textarea", { className: joinClassNames("vmeta-control", "vmeta-textarea", className), ...props });
+}
+function VmetaSelect({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("select", { className: joinClassNames("vmeta-control", className), ...props, children });
+}
+function VmetaDataTable({
+  columns,
+  data,
+  rowKey,
+  loading,
+  error,
+  emptyText = "Chua co du lieu",
+  onRetry,
+  className,
+  ...props
+}) {
+  if (loading) return /* @__PURE__ */ jsx(VmetaSystemState, { tone: "loading", title: "Dang tai du lieu..." });
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      VmetaSystemState,
+      {
+        tone: "error",
+        title: "Khong the tai du lieu",
+        description: error,
+        action: onRetry && /* @__PURE__ */ jsx(VmetaButton, { onClick: onRetry, children: "Thu lai" })
+      }
+    );
+  }
+  if (data.length === 0) return /* @__PURE__ */ jsx(VmetaSystemState, { tone: "empty", title: emptyText });
+  return /* @__PURE__ */ jsx("div", { className: joinClassNames("vmeta-data-table", className), ...props, children: /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", { style: { width: column.width, textAlign: column.align }, children: column.title }, column.key)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { style: { textAlign: column.align }, children: column.render(row, rowIndex) }, column.key)) }, rowKey(row, rowIndex))) })
+  ] }) });
+}
+export {
+  VmetaButton,
+  VmetaCard,
+  VmetaDataTable,
+  VmetaFormItem,
+  VmetaFormPage,
+  VmetaFormSection,
+  VmetaInput,
+  VmetaPageHeader,
+  VmetaSelect,
+  VmetaSystemState,
+  VmetaTextArea
+};

package/dist/styles.css

@@ -0,0 +1,67 @@
+.vmeta-button {
+  min-height: var(--control-height, 40px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 12px);
+  font: 600 14px/1 var(--font-sans, sans-serif);
+  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
+}
+.vmeta-button:not(:disabled) { cursor: pointer; }
+.vmeta-button:not(:disabled):active { transform: translateY(1px); }
+.vmeta-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.vmeta-button:disabled { cursor: not-allowed; opacity: .58; }
+.vmeta-button.is-primary.is-solid { color: var(--color-surface); background: var(--color-primary); }
+.vmeta-button.is-secondary.is-solid { color: var(--color-surface); background: var(--color-secondary); }
+.vmeta-button.is-danger.is-solid { color: var(--color-surface); background: var(--color-error); }
+.vmeta-button.is-neutral.is-solid { color: var(--color-surface); background: var(--color-ink); }
+.vmeta-button.is-outline { color: var(--color-ink); border-color: var(--color-border); background: var(--color-surface); }
+.vmeta-button.is-outline.is-primary, .vmeta-button.is-ghost.is-primary { color: var(--color-primary); }
+.vmeta-button.is-ghost { color: var(--color-ink); background: transparent; }
+.vmeta-button:hover:not(:disabled) { filter: brightness(.96); }
+.vmeta-button__spinner, .vmeta-system-state__spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vmeta-spin .7s linear infinite; }
+.vmeta-card { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
+.vmeta-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 94%, transparent); box-shadow: var(--shadow-sm); }
+.vmeta-page-header__copy { min-width: 0; }
+.vmeta-page-header__breadcrumb { margin-bottom: 8px; color: var(--color-muted); font-size: 12px; }
+.vmeta-page-header__eyebrow { margin: 0; color: var(--color-primary); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.vmeta-page-header h1 { margin: 4px 0 0; color: var(--color-ink); font-size: clamp(21px, 3vw, 28px); line-height: 1.2; letter-spacing: -.035em; }
+.vmeta-page-header__description { max-width: 720px; margin-top: 6px; color: var(--color-muted); font-size: 13px; line-height: 1.55; }
+.vmeta-page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.vmeta-system-state { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-muted); text-align: center; background: var(--color-surface); }
+.vmeta-system-state__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--color-primary); background: var(--color-primary-soft); font-weight: 800; }
+.vmeta-system-state h2 { margin: 6px 0 0; color: var(--color-ink); font-size: 17px; }
+.vmeta-system-state p { max-width: 520px; margin: 0; font-size: 13px; line-height: 1.6; }
+.vmeta-system-state__action { margin-top: 8px; }
+.vmeta-form-page { display: grid; gap: 16px; }
+.vmeta-form-page__body { display: grid; gap: 16px; }
+.vmeta-form-section { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
+.vmeta-form-section > header { margin-bottom: 16px; }
+.vmeta-form-section h2 { margin: 0; color: var(--color-ink); font-size: 17px; }
+.vmeta-form-section header p { margin: 5px 0 0; color: var(--color-muted); font-size: 13px; }
+.vmeta-form-grid { display: grid; grid-template-columns: repeat(var(--vmeta-form-columns, 2), minmax(0, 1fr)); gap: 16px; }
+.vmeta-form-grid[data-columns='1'] { --vmeta-form-columns: 1; }
+.vmeta-form-grid[data-columns='2'] { --vmeta-form-columns: 2; }
+.vmeta-form-grid[data-columns='3'] { --vmeta-form-columns: 3; }
+.vmeta-form-item { min-width: 0; display: grid; align-content: start; gap: 7px; }
+.vmeta-form-item.is-full-width { grid-column: 1 / -1; }
+.vmeta-form-item label { color: var(--color-ink); font-size: 13px; font-weight: 600; }
+.vmeta-form-item label span, .vmeta-form-item.has-error small { color: var(--color-error); }
+.vmeta-form-item small { color: var(--color-muted); font-size: 12px; }
+.vmeta-control { width: 100%; min-height: var(--control-height, 40px); padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-surface); font: 14px var(--font-sans, sans-serif); outline: none; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
+.vmeta-control:hover { border-color: var(--color-primary-light); }
+.vmeta-control:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
+.vmeta-textarea { min-height: 112px; padding-block: 10px; resize: vertical; }
+.vmeta-form-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); }
+.vmeta-data-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
+.vmeta-data-table table { width: 100%; min-width: 680px; border-collapse: collapse; }
+.vmeta-data-table th, .vmeta-data-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; }
+.vmeta-data-table th { color: var(--color-ink); background: var(--color-primary-soft); font-size: 12px; font-weight: 700; }
+.vmeta-data-table td { color: var(--color-muted); font-size: 13px; }
+.vmeta-data-table tbody tr:hover { background: var(--color-muted-surface); }
+@keyframes vmeta-spin { to { transform: rotate(360deg); } }
+@media (max-width: 767px) { .vmeta-page-header { align-items: flex-start; flex-direction: column; padding: 16px; } .vmeta-page-header__actions { width: 100%; justify-content: flex-start; } .vmeta-form-grid[data-columns] { --vmeta-form-columns: 1; } .vmeta-form-section { padding: 16px; } }
+@media (prefers-reduced-motion: reduce) { .vmeta-button__spinner, .vmeta-system-state__spinner { animation-duration: 1.4s; } }

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@leduchai/vmeta-ui-core",
+  "version": "0.1.3",
+  "description": "React UI primitives khong phu thuoc nghiep vu cua VMETA.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": ["./dist/styles.css"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external react-dom && node ../../scripts/copy-file.mjs src/styles.css dist/styles.css"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}