@swiftcrab/crab 0.0.5 → 0.0.7

package/es/gantt/style/style.js

@@ -0,0 +1,372 @@
+import e from"styled-components";const t=e.div`
+  /* ==================== CSS 变量 ==================== */
+  --gantt-color-border: #f0f0f0;
+  --gantt-color-bg: #ffffff;
+  --gantt-color-fill-quaternary: #fafafa;
+  --gantt-color-text: rgba(0, 0, 0, 0.88);
+  --gantt-color-text-secondary: rgba(0, 0, 0, 0.45);
+  --gantt-color-primary: #1677ff;
+
+  --gantt-border-radius-lg: 8px;
+  --gantt-border-radius-sm: 4px;
+
+  --gantt-font-size: 14px;
+  --gantt-font-size-sm: 12px;
+  --gantt-line-height: 1.5714285714285714;
+
+  --gantt-padding-xxs: 4px;
+  --gantt-padding-xs: 8px;
+  --gantt-padding-sm: 12px;
+
+  --gantt-motion-duration-mid: 0.2s;
+
+  .gantt {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    max-width: 100%;
+    border: 1px solid var(--gantt-color-border);
+    border-radius: var(--gantt-border-radius-lg);
+    overflow: hidden;
+    background-color: var(--gantt-color-bg);
+    font-size: var(--gantt-font-size);
+    box-sizing: border-box;
+  }
+
+  .gantt *,
+  .gantt *::before,
+  .gantt *::after {
+    box-sizing: border-box;
+  }
+
+  /* ==================== 顶部工具栏 ==================== */
+  .gantt-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--gantt-padding-xs) var(--gantt-padding-sm);
+    border-bottom: 1px solid var(--gantt-color-border);
+    background-color: var(--gantt-color-bg);
+  }
+
+  /* ==================== 主内容区域 ==================== */
+  .gantt-content {
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  /* ==================== 左侧固定面板 ==================== */
+  .gantt-left {
+    flex-shrink: 0;
+    border-right: 1px solid var(--gantt-color-border);
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    background-color: var(--gantt-color-bg);
+  }
+
+  .gantt-left-header {
+    display: flex;
+    align-items: flex-end;
+    border-bottom: 1px solid var(--gantt-color-border);
+    min-height: 65px;
+    padding: var(--gantt-padding-xs) 0;
+  }
+
+  .gantt-left-header-cell {
+    padding: 0 var(--gantt-padding-sm);
+    color: var(--gantt-color-text-secondary);
+    font-weight: 500;
+    font-size: var(--gantt-font-size);
+    white-space: nowrap;
+  }
+
+  .gantt-left-header-cell.is-group {
+    width: 100px;
+    text-align: left;
+  }
+
+  .gantt-left-header-cell.is-name {
+    flex: 1;
+    width: 200px;
+    text-align: left;
+  }
+
+  /* 合并列：竖向分隔线与下方单元格保持贯通（负外边距抵消表头上下内边距） */
+  .gantt-left-header-cell.is-merged {
+    align-self: stretch;
+    display: flex;
+    align-items: flex-end;
+    margin: calc(-1 * var(--gantt-padding-xs)) 0;
+    padding-bottom: var(--gantt-padding-xs);
+    border-right: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-left-body {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  /* ==================== 左侧行 ==================== */
+  .gantt-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--gantt-color-border);
+    transition: background-color var(--gantt-motion-duration-mid);
+  }
+
+  .gantt-row:last-child {
+    border-bottom: none;
+  }
+
+  .gantt-row.is-clickable {
+    cursor: pointer;
+  }
+
+  .gantt-row.is-clickable:hover {
+    background-color: var(--gantt-color-fill-quaternary);
+  }
+
+  /* 存在合并列时，分隔线由单元格绘制，合并列可单独隐藏组内分隔线 */
+  .gantt-row.is-cell-border {
+    align-items: stretch;
+    border-bottom: none;
+  }
+
+  .gantt-row.is-cell-border .gantt-row-cell {
+    border-bottom: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-row.is-cell-border .gantt-row-cell-merged.is-merged-inner {
+    border-bottom: none;
+  }
+
+  .gantt-row.is-cell-border.is-last-row .gantt-row-cell {
+    border-bottom: none;
+  }
+
+  /* 左侧底部占位（高度等于右侧横向滚动条），仅用于让合并列竖线走到底 */
+  .gantt-row-filler {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .gantt-row-group {
+    width: 100px;
+    padding: 0 var(--gantt-padding-sm);
+    color: var(--gantt-color-text);
+    font-weight: 500;
+    text-align: left;
+    flex-shrink: 0;
+  }
+
+  .gantt-row-name {
+    flex: 1;
+    width: 200px;
+    padding: 0 var(--gantt-padding-sm);
+    color: var(--gantt-color-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ==================== 动态列通用单元格 ==================== */
+  .gantt-row-cell {
+    padding: 0 var(--gantt-padding-sm);
+    color: var(--gantt-color-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .gantt-row-cell a {
+    color: var(--gantt-color-primary);
+    text-decoration: none;
+  }
+
+  .gantt-row-cell a:hover {
+    text-decoration: underline;
+  }
+
+  /* ==================== 合并行单元格 ==================== */
+  .gantt-row-cell-merged {
+    position: relative;
+    overflow: visible;
+    /* 合并列与相邻列之间的竖向分隔线 */
+    border-right: 1px solid var(--gantt-color-border);
+  }
+
+  /* 合并行内容：纵向跨越整个分组高度并水平垂直居中 */
+  .gantt-row-cell-merged-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--gantt-padding-sm);
+    text-align: center;
+    line-height: var(--gantt-line-height);
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  /* ==================== 右侧时间轴面板 ==================== */
+  .gantt-right {
+    flex: 0 1 auto;
+    overflow: auto;
+    position: relative;
+    min-width: 0;
+  }
+
+  .gantt-timeline {
+    position: relative;
+  }
+
+  /* ==================== 时间轴表头 ==================== */
+  .gantt-timeline-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--gantt-color-bg);
+    border-bottom: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-month-row {
+    display: flex;
+  }
+
+  .gantt-month-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    color: var(--gantt-color-text);
+    font-weight: 500;
+    font-size: var(--gantt-font-size-sm);
+    border-right: 1px solid var(--gantt-color-border);
+    background-color: var(--gantt-color-fill-quaternary);
+    flex-shrink: 0;
+  }
+
+  .gantt-month-cell:last-child {
+    border-right: none;
+  }
+
+  .gantt-date-row {
+    display: flex;
+  }
+
+  .gantt-date-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    color: var(--gantt-color-text-secondary);
+    font-size: var(--gantt-font-size-sm);
+    flex-shrink: 0;
+    border-right: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-date-cell:last-child {
+    border-right: none;
+  }
+
+  .gantt-date-cell.is-today {
+    font-weight: 600;
+  }
+
+  .gantt-date-cell.is-weekend {
+    background-color: var(--gantt-color-fill-quaternary);
+  }
+
+  .gantt-date-day {
+    line-height: 1.2;
+  }
+
+  .gantt-date-week {
+    line-height: 1.2;
+    font-size: 11px;
+  }
+
+  /* ==================== 时间轴主体 ==================== */
+  .gantt-timeline-body {
+    position: relative;
+  }
+
+  .gantt-timeline-row {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-bottom: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-timeline-row:last-child {
+    border-bottom: none;
+  }
+
+  .gantt-timeline-cell {
+    flex-shrink: 0;
+    height: 100%;
+    border-right: 1px solid var(--gantt-color-border);
+  }
+
+  .gantt-timeline-cell:nth-last-child(2) {
+    border-right: none;
+  }
+
+  .gantt-timeline-cell.is-weekend {
+    background-color: var(--gantt-color-fill-quaternary);
+  }
+
+  .gantt-bars-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .gantt-bar {
+    position: absolute;
+    height: 20px;
+    border-radius: var(--gantt-border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    color: var(--gantt-color-text);
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 var(--gantt-padding-xxs);
+    pointer-events: auto;
+    transition: opacity var(--gantt-motion-duration-mid);
+  }
+
+  .gantt-bar.is-clickable {
+    cursor: pointer;
+  }
+
+  .gantt-bar.is-clickable:hover {
+    opacity: 0.8;
+  }
+
+  /* ==================== 今日线 ==================== */
+  .gantt-today-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    z-index: 1;
+    pointer-events: none;
+  }
+`;export{t as GanttWrapper};

package/es/gantt/type.d.ts

@@ -0,0 +1,140 @@
+import { RangePickerProps } from "../date-picker/index.js";
+import { ReactNode } from "react";
+//#region components/gantt/type.d.ts
+/** 甘特图任务条（阶段条） */
+export interface IGanttBar {
+  /** 开始日期，格式 YYYY-MM-DD */
+  startDate: string;
+  /** 结束日期，格式 YYYY-MM-DD */
+  endDate: string;
+  /** 阶段名称/标签 */
+  name?: ReactNode;
+  /** 条颜色 */
+  color?: string;
+}
+/** 甘特图任务行 */
+export interface IGanttTask {
+  /** 唯一标识 */
+  id?: string;
+  /** 任务名称 */
+  name: ReactNode;
+  /** 任务条数组（一个任务可能有多个阶段条） */
+  bars: IGanttBar[];
+  /** 自定义附加数据 */
+  meta?: Record<string, any>;
+}
+/** 甘特图分组 */
+export interface IGanttGroup {
+  /** 分组唯一标识 */
+  id?: string;
+  /** 分组名称（负责人） */
+  name: ReactNode;
+  /** 分组下的任务列表 */
+  tasks: IGanttTask[];
+}
+/** 点击行回调参数 */
+export interface IGanttRowClickInfo {
+  /** 当前行所属分组信息 */
+  group: IGanttGroup;
+  /** 当前行任务信息 */
+  task: IGanttTask;
+  /** 任务在分组中的索引 */
+  taskIndex: number;
+}
+/** 点击任务条回调参数 */
+export interface IGanttBarClickInfo {
+  /** 当前行所属分组信息 */
+  group: IGanttGroup;
+  /** 当前行任务信息 */
+  task: IGanttTask;
+  /** 当前点击的条信息 */
+  bar: IGanttBar;
+  /** 条在任务中的索引 */
+  barIndex: number;
+}
+/** 日期列信息 */
+export interface IGanttDateColumn {
+  /** 日期字符串 YYYY-MM-DD */
+  date: string;
+  /** 日 */
+  day: number;
+  /** 星期几（一, 二, 三...） */
+  weekDay: string;
+  /** 是否为今日线标记的日期 */
+  isToday: boolean;
+  /** 是否周末 */
+  isWeekend: boolean;
+}
+/** 月份分组信息 */
+export interface IGanttMonthGroup {
+  /** 月份文本，如 '7月' */
+  label: string;
+  /** 该月份包含的天数 */
+  days: number;
+}
+/** 甘特图左侧列配置 */
+export interface IGanttColumn {
+  /** 列唯一标识 */
+  key: string;
+  /** 列标题 */
+  title: ReactNode;
+  /** 列宽度，可为数字(px)或字符串，默认 auto */
+  width?: number | string;
+  /** 内容对齐方式，默认 left */
+  align?: 'left' | 'center' | 'right';
+  /** 自定义渲染单元格内容 */
+  render: (task: IGanttTask, group: IGanttGroup, info: {
+    taskIndex: number;
+    isGroupFirst: boolean;
+  }) => ReactNode;
+  /** 控制该列是否可见，默认 true */
+  visible?: boolean;
+  /** 是否合并行：同一分组内该列的多行合并为一个单元格，仅在分组首行调用 render，默认 false */
+  rowMerge?: boolean;
+  /** 合并行的内容是否在水平和垂直方向都居中，默认 false（内容展示在分组第一行的位置），仅 rowMerge 为 true 时生效 */
+  textCenter?: boolean;
+}
+/** 甘特图预设颜色主题 */
+export type GanttBarColorPreset = 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple' | 'gray' | 'lightBlue';
+/** 甘特图组件 Props */
+export interface IGanttProps {
+  /** 甘特图分组数据 */
+  dataSource: IGanttGroup[];
+  /** 左侧列配置，传入时 showGroup/showLinks/renderLinks 将被忽略 */
+  columns?: IGanttColumn[];
+  /** 是否显示日期范围选择器，默认 false */
+  showDateRangePicker?: boolean;
+  /** 日期范围选择器的属性 */
+  dateRangePickerProps?: RangePickerProps;
+  /** 时间范围-开始日期，格式 YYYY-MM-DD，同时作为日期范围选择器的默认起始值 */
+  startDate?: string;
+  /** 时间范围-结束日期，格式 YYYY-MM-DD，同时作为日期范围选择器的默认结束值 */
+  endDate?: string;
+  /** 每列（天）的宽度，默认 36 */
+  columnWidth?: number;
+  /** 行高，默认 40 */
+  rowHeight?: number;
+  /** 是否高亮今天（今日线与日期表头高亮），默认 true */
+  highlightToday?: boolean;
+  /** 今日线标记的日期，格式 YYYY-MM-DD，默认为当前日期 */
+  todayDate?: string;
+  /** 今日线颜色，默认 #ff4d4f */
+  todayLineColor?: string;
+  /** 分组列标题，默认 '负责人' */
+  groupTitle?: string;
+  /** 任务列标题，默认 '任务名' */
+  taskTitle?: string;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 日期范围变更回调 */
+  onDateRangeChange?: (startDate: string, endDate: string) => void;
+  /** 点击行时触发 */
+  onRowClick?: (info: IGanttRowClickInfo) => void;
+  /** 点击任务条时触发 */
+  onBarClick?: (info: IGanttBarClickInfo) => void;
+  /** 自定义渲染任务条 */
+  renderBar?: (bar: IGanttBar, task: IGanttTask) => ReactNode;
+}
+//#endregion

package/es/gantt/utils.d.ts

@@ -0,0 +1,38 @@
+import { IGanttBar, IGanttDateColumn, IGanttGroup, IGanttMonthGroup } from "./type.js";
+//#region components/gantt/utils.d.ts
+/**
+ * 归一化今日线日期，非法或未传入时回退到当前日期
+ */
+export declare function resolveTodayDate(todayDate?: string): string;
+/**
+ * 生成日期列数组
+ */
+export declare function buildDateColumns(startDate: string, endDate: string, todayDate?: string): IGanttDateColumn[];
+/**
+ * 生成月份分组（用于表头上方的月份标记）
+ */
+export declare function buildMonthGroups(columns: IGanttDateColumn[]): IGanttMonthGroup[];
+/**
+ * 根据数据自动计算时间范围
+ */
+export declare function autoDateRange(data: IGanttGroup[]): [string, string];
+/**
+ * 计算任务条在时间轴上的位置和宽度
+ */
+export declare function calcBarPosition(bar: IGanttBar, startDate: string, columnWidth: number): {
+  left: number;
+  width: number;
+} | null;
+/**
+ * 计算今日线的位置
+ */
+export declare function calcTodayPosition(startDate: string, endDate: string, columnWidth: number, todayDate?: string): number | null;
+/**
+ * 预设颜色映射
+ */
+export declare const COLOR_PRESETS: Record<string, string>;
+/**
+ * 获取条的实际颜色值
+ */
+export declare function resolveBarColor(color?: string): string;
+//#endregion

package/es/gantt/utils.js

@@ -0,0 +1 @@
+import e from"dayjs";const t={0:`日`,1:`一`,2:`二`,3:`三`,4:`四`,5:`五`,6:`六`};function n(t){let n=t?e(t):e();return(n.isValid()?n:e()).format(`YYYY-MM-DD`)}function r(r,i,a){let o=e(r),s=e(i),c=[],l=n(a),u=o;for(;u.isBefore(s)||u.isSame(s,`day`);){let e=u.format(`YYYY-MM-DD`),n=u.day();c.push({date:e,day:u.date(),weekDay:t[n],isToday:e===l,isWeekend:n===0||n===6}),u=u.add(1,`day`)}return c}function i(t){if(t.length===0)return[];let n=[],r=e(t[0].date).year(),i=e(t[0].date).month(),a=0;for(let o of t){let t=e(o.date),s=t.year(),c=t.month();c!==i||s!==r?(n.push({label:`${r}年${i+1}月`,days:a}),r=s,i=c,a=1):a++}return n.push({label:`${r}年${i+1}月`,days:a}),n}function a(t){let n=e().subtract(3,`day`),r=e().add(30,`day`);for(let i of t)for(let t of i.tasks)for(let i of t.bars){let t=e(i.startDate),a=e(i.endDate);t.isValid()&&t.isBefore(n)&&(n=t),a.isValid()&&a.isAfter(r)&&(r=a)}return[n.subtract(3,`day`).format(`YYYY-MM-DD`),r.add(3,`day`).format(`YYYY-MM-DD`)]}function o(t,n,r){let i=e(n),a=e(t.startDate),o=e(t.endDate);if(!a.isValid()||!o.isValid())return null;let s=a.diff(i,`day`),c=o.diff(a,`day`)+1;return{left:s*r,width:c*r}}function s(t,r,i,a){let o=e(t),s=e(r),c=e(n(a)).startOf(`day`);return c.isBefore(o,`day`)||c.isAfter(s,`day`)?null:c.diff(o,`day`)*i+i/2}const c={blue:`#8BBFFF`,green:`#95DE64`,orange:`#FFB347`,red:`#FF7875`,yellow:`#FFE58F`,purple:`#B37FEB`,gray:`#D9D9D9`,lightBlue:`#BAE7FF`};function l(e){return e?c[e]||e:c.blue}export{c as COLOR_PRESETS,a as autoDateRange,r as buildDateColumns,i as buildMonthGroups,o as calcBarPosition,s as calcTodayPosition,l as resolveBarColor,n as resolveTodayDate};

package/es/grid/RowContext.d.ts

@@ -0,0 +1,8 @@
+//#region components/grid/RowContext.d.ts
+export interface RowContextState {
+  gutter?: [number, number];
+  wrap?: boolean;
+}
+declare const RowContext: import("react").Context<RowContextState>;
+//#endregion
+export { RowContext as default };

package/es/grid/RowContext.js

@@ -0,0 +1 @@
+import{createContext as e}from"react";const t=e({});export{t as default};

package/es/grid/col.d.ts

@@ -0,0 +1,31 @@
+import { LiteralUnion } from "../_util/type.js";
+import * as React$1 from "react";
+//#region components/grid/col.d.ts
+type ColSpanType = number | string;
+type FlexType = number | LiteralUnion<'none' | 'auto'>;
+export interface ColSize {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+}
+export interface ColProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+  xs?: ColSpanType | ColSize;
+  sm?: ColSpanType | ColSize;
+  md?: ColSpanType | ColSize;
+  lg?: ColSpanType | ColSize;
+  xl?: ColSpanType | ColSize;
+  xxl?: ColSpanType | ColSize;
+  prefixCls?: string;
+}
+declare const Col: React$1.ForwardRefExoticComponent<ColProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Col as default };

package/es/grid/col.js

@@ -0,0 +1 @@
+import{ConfigContext as e}from"../config-provider/context.js";import"../config-provider/index.js";import t from"./RowContext.js";import{useColStyle as n}from"./style/index.js";import*as r from"react";import i from"classnames";function a(e){return typeof e==`number`?`${e} ${e} auto`:/^\d+(\.\d+)?(px|em|rem|%)$/.test(e)?`0 0 ${e}`:e}const o=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],s=r.forwardRef((s,c)=>{let{getPrefixCls:l,direction:u}=r.useContext(e),{gutter:d,wrap:f}=r.useContext(t),{prefixCls:p,span:m,order:h,offset:g,push:_,pull:v,className:y,children:b,flex:x,style:S,...C}=s,w=l(`col`,p),[T,E,D]=n(w),O={},k={};o.forEach(e=>{let t={},n=s[e];typeof n==`number`?t.span=n:typeof n==`object`&&(t=n||{}),delete C[e],k={...k,[`${w}-${e}-${t.span}`]:t.span!==void 0,[`${w}-${e}-order-${t.order}`]:t.order||t.order===0,[`${w}-${e}-offset-${t.offset}`]:t.offset||t.offset===0,[`${w}-${e}-push-${t.push}`]:t.push||t.push===0,[`${w}-${e}-pull-${t.pull}`]:t.pull||t.pull===0,[`${w}-rtl`]:u===`rtl`},t.flex&&(k[`${w}-${e}-flex`]=!0,O[`--${w}-${e}-flex`]=a(t.flex))});let A=i(w,{[`${w}-${m}`]:m!==void 0,[`${w}-order-${h}`]:h,[`${w}-offset-${g}`]:g,[`${w}-push-${_}`]:_,[`${w}-pull-${v}`]:v},y,k,E,D),j={};if(d&&d[0]>0){let e=d[0]/2;j.paddingLeft=e,j.paddingRight=e}return x&&(j.flex=a(x),f===!1&&!j.minWidth&&(j.minWidth=0)),T(r.createElement(`div`,{...C,style:{...j,...S,...O},className:A,ref:c},b))});export{s as default};

package/es/grid/hooks/useBreakpoint.d.ts

@@ -0,0 +1,5 @@
+import { ScreenMap } from "../../_util/responsiveObserver.js";
+//#region components/grid/hooks/useBreakpoint.d.ts
+declare function useBreakpoint(refreshOnChange?: boolean): ScreenMap;
+//#endregion
+export { useBreakpoint as default };

package/es/grid/hooks/useBreakpoint.js

@@ -0,0 +1 @@
+import e from"../../_util/responsiveObserver.js";import t from"../../_util/hooks/useForceUpdate.js";import{useRef as n}from"react";import r from"rc-util/lib/hooks/useLayoutEffect";function i(i=!0){let a=n({}),o=t(),s=e();return r(()=>{let e=s.subscribe(e=>{a.current=e,i&&o()});return()=>s.unsubscribe(e)},[]),a.current}export{i as default};

package/es/grid/index.d.ts

@@ -0,0 +1,11 @@
+import Col, { ColProps, ColSize } from "./col.js";
+import { Breakpoint } from "../_util/responsiveObserver.js";
+import "../index.js";
+import Row, { RowProps } from "./row.js";
+//#region components/grid/index.d.ts
+declare function useBreakpoint(): Partial<Record<Breakpoint, boolean>>;
+declare const _default: {
+  useBreakpoint: typeof useBreakpoint;
+};
+//#endregion
+export { Col, type ColProps, type ColSize, Row, type RowProps, _default as default };

package/es/grid/index.js

@@ -0,0 +1 @@
+import e from"./hooks/useBreakpoint.js";import t from"./col.js";import n from"./row.js";function r(){return e()}var i={useBreakpoint:r};export{t as Col,n as Row,i as default};

package/es/grid/row.d.ts

@@ -0,0 +1,20 @@
+import { Breakpoint } from "../_util/responsiveObserver.js";
+import * as React$1 from "react";
+//#region components/grid/row.d.ts
+declare const _RowAligns: readonly ["top", "middle", "bottom", "stretch"];
+declare const _RowJustify: readonly ["start", "end", "center", "space-around", "space-between", "space-evenly"];
+type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ResponsiveLike<T> = { [key in Responsive]?: T; };
+export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
+type ResponsiveAligns = ResponsiveLike<(typeof _RowAligns)[number]>;
+type ResponsiveJustify = ResponsiveLike<(typeof _RowJustify)[number]>;
+export interface RowProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  gutter?: Gutter | [Gutter, Gutter];
+  align?: (typeof _RowAligns)[number] | ResponsiveAligns;
+  justify?: (typeof _RowJustify)[number] | ResponsiveJustify;
+  prefixCls?: string;
+  wrap?: boolean;
+}
+declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Row as default };

package/es/grid/row.js

@@ -0,0 +1 @@
+import{ConfigContext as e}from"../config-provider/context.js";import"../config-provider/index.js";import t,{responsiveArray as n}from"../_util/responsiveObserver.js";import r from"./RowContext.js";import{useRowStyle as i}from"./style/index.js";import*as a from"react";import o from"classnames";function s(e,t){let[r,i]=a.useState(typeof e==`string`?e:``),o=()=>{if(typeof e==`string`&&i(e),typeof e==`object`)for(let r=0;r<n.length;r++){let a=n[r];if(!t[a])continue;let o=e[a];if(o!==void 0){i(o);return}}};return a.useEffect(()=>{o()},[JSON.stringify(e),t]),r}const c=a.forwardRef((c,l)=>{let{prefixCls:u,justify:d,align:f,className:p,style:m,children:h,gutter:g=0,wrap:_,...v}=c,{getPrefixCls:y,direction:b}=a.useContext(e),[x,S]=a.useState({xs:!0,sm:!0,md:!0,lg:!0,xl:!0,xxl:!0}),[C,w]=a.useState({xs:!1,sm:!1,md:!1,lg:!1,xl:!1,xxl:!1}),T=s(f,C),E=s(d,C),D=a.useRef(g),O=t();a.useEffect(()=>{let e=O.subscribe(e=>{w(e);let t=D.current||0;(!Array.isArray(t)&&typeof t==`object`||Array.isArray(t)&&(typeof t[0]==`object`||typeof t[1]==`object`))&&S(e)});return()=>O.unsubscribe(e)},[]);let k=()=>{let e=[void 0,void 0];return(Array.isArray(g)?g:[g,void 0]).forEach((t,r)=>{if(typeof t==`object`)for(let i=0;i<n.length;i++){let a=n[i];if(x[a]&&t[a]!==void 0){e[r]=t[a];break}}else e[r]=t}),e},A=y(`row`,u),[j,M,N]=i(A),P=k(),F=o(A,{[`${A}-no-wrap`]:_===!1,[`${A}-${E}`]:E,[`${A}-${T}`]:T,[`${A}-rtl`]:b===`rtl`},p,M,N),I={},L=P[0]!=null&&P[0]>0?P[0]/-2:void 0;L&&(I.marginLeft=L,I.marginRight=L);let[R,z]=P;I.rowGap=z;let B=a.useMemo(()=>({gutter:[R,z],wrap:_}),[R,z,_]);return j(a.createElement(r.Provider,{value:B},a.createElement(`div`,{...v,className:F,style:{...I,...m},ref:l},h)))});export{c as default};

package/es/grid/style/index.d.ts

@@ -0,0 +1,9 @@
+import "../../theme/internal.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+//#region components/grid/style/index.d.ts
+export interface ComponentToken {}
+export declare const prepareRowComponentToken: GetDefaultToken<'Grid'>;
+export declare const prepareColComponentToken: GetDefaultToken<'Grid'>;
+export declare const useRowStyle: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export declare const useColStyle: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+//#endregion

package/es/grid/style/index.js

@@ -0,0 +1 @@
+import{genStyleHooks as e}from"../../theme/util/genStyleUtils.js";import{mergeToken as t}from"../../theme/internal.js";import{unit as n}from"@ant-design/cssinjs";const r=e=>{let{componentCls:t}=e;return{[t]:{display:`flex`,flexFlow:`row wrap`,minWidth:0,"&::before, &::after":{display:`flex`},"&-no-wrap":{flexWrap:`nowrap`},"&-start":{justifyContent:`flex-start`},"&-center":{justifyContent:`center`},"&-end":{justifyContent:`flex-end`},"&-space-between":{justifyContent:`space-between`},"&-space-around":{justifyContent:`space-around`},"&-space-evenly":{justifyContent:`space-evenly`},"&-top":{alignItems:`flex-start`},"&-middle":{alignItems:`center`},"&-bottom":{alignItems:`flex-end`}}}},i=e=>{let{componentCls:t}=e;return{[t]:{position:`relative`,maxWidth:`100%`,minHeight:1}}},a=(e,t)=>{let{prefixCls:n,componentCls:r,gridColumns:i}=e,a={};for(let e=i;e>=0;e--)e===0?(a[`${r}${t}-${e}`]={display:`none`},a[`${r}-push-${e}`]={insetInlineStart:`auto`},a[`${r}-pull-${e}`]={insetInlineEnd:`auto`},a[`${r}${t}-push-${e}`]={insetInlineStart:`auto`},a[`${r}${t}-pull-${e}`]={insetInlineEnd:`auto`},a[`${r}${t}-offset-${e}`]={marginInlineStart:0},a[`${r}${t}-order-${e}`]={order:0}):(a[`${r}${t}-${e}`]=[{"--ant-display":`block`,display:`block`},{display:`var(--ant-display)`,flex:`0 0 ${e/i*100}%`,maxWidth:`${e/i*100}%`}],a[`${r}${t}-push-${e}`]={insetInlineStart:`${e/i*100}%`},a[`${r}${t}-pull-${e}`]={insetInlineEnd:`${e/i*100}%`},a[`${r}${t}-offset-${e}`]={marginInlineStart:`${e/i*100}%`},a[`${r}${t}-order-${e}`]={order:e});return a[`${r}${t}-flex`]={flex:`var(--${n}${t}-flex)`},a},o=(e,t)=>a(e,t),s=(e,t,r)=>({[`@media (min-width: ${n(t)})`]:{...o(e,r)}}),c=()=>({}),l=()=>({}),u=e(`Grid`,r,c),d=e(`Grid`,e=>{let n=t(e,{gridColumns:24}),r={"-sm":n.screenSMMin,"-md":n.screenMDMin,"-lg":n.screenLGMin,"-xl":n.screenXLMin,"-xxl":n.screenXXLMin};return[i(n),o(n,``),o(n,`-xs`),Object.keys(r).map(e=>s(n,r[e],e)).reduce((e,t)=>({...e,...t}),{})]},l);export{l as prepareColComponentToken,c as prepareRowComponentToken,d as useColStyle,u as useRowStyle};

package/es/hooks/index.d.ts

@@ -0,0 +1,6 @@
+import useDrawer from "./useDrawer.js";
+import useModal from "./useModal.js";
+import useForm from "./useForm.js";
+import useParsedHash from "./useParsedHash.js";
+import useUrlState from "./useUrlState.js";
+export { useDrawer, useForm, useModal, useParsedHash, useUrlState };