@sigx/lynx-zero 0.4.9 → 0.5.0

package/src/layout/Col.tsx

@@ -1,53 +1,53 @@
-import { component, type Define } from '@sigx/lynx';
-import type { BackgroundValue } from '../contract.js';
-import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
-
-export type ColProps =
-  & Define.Prop<'gap', number, false>
-  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
-  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
-  & Define.Prop<'wrap', boolean, false>
-  & Define.Prop<'padding', SpacingValue, false>
-  & Define.Prop<'margin', SpacingValue, false>
-  & Define.Prop<'width', number | string, false>
-  & Define.Prop<'height', number | string, false>
-  & Define.Prop<'flex', number, false>
-  & Define.Prop<'background', BackgroundValue, false>
-  & Define.Prop<'borderRadius', number, false>
-  & Define.Prop<'class', string, false>
-  & Define.Slot<'default'>;
-
-export const Col = component<ColProps>(({ props, slots }) => {
-  const getStyle = (): Record<string, string | number> => {
-    const style: Record<string, string | number> = {
-      display: 'flex',
-      flexDirection: 'column',
-    };
-
-    if (props.gap !== undefined) style.gap = props.gap;
-    if (props.align) style.alignItems = props.align;
-    if (props.justify) style.justifyContent = props.justify;
-    if (props.wrap) style.flexWrap = 'wrap';
-
-    const box = resolveBoxStyle({
-      width: props.width,
-      height: props.height,
-      flex: props.flex,
-      background: props.background,
-      borderRadius: props.borderRadius,
-      padding: props.padding,
-      margin: props.margin,
-    });
-    for (const key in box) {
-      style[key] = box[key] as string | number;
-    }
-
-    return style;
-  };
-
-  return () => (
-    <view class={props.class} style={getStyle()}>
-      {slots.default?.()}
-    </view>
-  );
-});
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
+
+export type ColProps =
+  & Define.Prop<'gap', number, false>
+  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
+  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
+  & Define.Prop<'wrap', boolean, false>
+  & Define.Prop<'padding', SpacingValue, false>
+  & Define.Prop<'margin', SpacingValue, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Col = component<ColProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      flexDirection: 'column',
+    };
+
+    if (props.gap !== undefined) style.gap = props.gap;
+    if (props.align) style.alignItems = props.align;
+    if (props.justify) style.justifyContent = props.justify;
+    if (props.wrap) style.flexWrap = 'wrap';
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+      padding: props.padding,
+      margin: props.margin,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});

package/src/layout/Row.tsx

@@ -1,53 +1,53 @@
-import { component, type Define } from '@sigx/lynx';
-import type { BackgroundValue } from '../contract.js';
-import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
-
-export type RowProps =
-  & Define.Prop<'gap', number, false>
-  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
-  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
-  & Define.Prop<'wrap', boolean, false>
-  & Define.Prop<'padding', SpacingValue, false>
-  & Define.Prop<'margin', SpacingValue, false>
-  & Define.Prop<'width', number | string, false>
-  & Define.Prop<'height', number | string, false>
-  & Define.Prop<'flex', number, false>
-  & Define.Prop<'background', BackgroundValue, false>
-  & Define.Prop<'borderRadius', number, false>
-  & Define.Prop<'class', string, false>
-  & Define.Slot<'default'>;
-
-export const Row = component<RowProps>(({ props, slots }) => {
-  const getStyle = (): Record<string, string | number> => {
-    const style: Record<string, string | number> = {
-      display: 'flex',
-      flexDirection: 'row',
-    };
-
-    if (props.gap !== undefined) style.gap = props.gap;
-    if (props.align) style.alignItems = props.align;
-    if (props.justify) style.justifyContent = props.justify;
-    if (props.wrap) style.flexWrap = 'wrap';
-
-    const box = resolveBoxStyle({
-      width: props.width,
-      height: props.height,
-      flex: props.flex,
-      background: props.background,
-      borderRadius: props.borderRadius,
-      padding: props.padding,
-      margin: props.margin,
-    });
-    for (const key in box) {
-      style[key] = box[key] as string | number;
-    }
-
-    return style;
-  };
-
-  return () => (
-    <view class={props.class} style={getStyle()}>
-      {slots.default?.()}
-    </view>
-  );
-});
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
+
+export type RowProps =
+  & Define.Prop<'gap', number, false>
+  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
+  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
+  & Define.Prop<'wrap', boolean, false>
+  & Define.Prop<'padding', SpacingValue, false>
+  & Define.Prop<'margin', SpacingValue, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Row = component<RowProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      flexDirection: 'row',
+    };
+
+    if (props.gap !== undefined) style.gap = props.gap;
+    if (props.align) style.alignItems = props.align;
+    if (props.justify) style.justifyContent = props.justify;
+    if (props.wrap) style.flexWrap = 'wrap';
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+      padding: props.padding,
+      margin: props.margin,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});

package/src/layout/ScrollView.tsx

@@ -1,38 +1,38 @@
-import { component, type Define } from '@sigx/lynx';
-
-export type ScrollViewProps =
-  & Define.Prop<'direction', 'vertical' | 'horizontal', false>
-  & Define.Prop<'height', number | string, false>
-  & Define.Prop<'width', number | string, false>
-  & Define.Prop<'flex', number, false>
-  & Define.Prop<'showScrollbar', boolean, false>
-  & Define.Prop<'bounces', boolean, false>
-  & Define.Prop<'class', string, false>
-  & Define.Slot<'default'>;
-
-export const ScrollView = component<ScrollViewProps>(({ props, slots }) => {
-  const getStyle = (): Record<string, string | number> => {
-    const style: Record<string, string | number> = {};
-    if (props.height !== undefined) style.height = props.height;
-    if (props.width !== undefined) style.width = props.width;
-    if (props.flex !== undefined) style.flex = props.flex;
-    return style;
-  };
-
-  return () => {
-    const dir = props.direction ?? 'vertical';
-    return (
-      <scroll-view
-        class={props.class}
-        style={getStyle()}
-        scroll-orientation={dir}
-        scroll-y={dir === 'vertical' ? true : undefined}
-        scroll-x={dir === 'horizontal' ? true : undefined}
-        show-scrollbar={props.showScrollbar}
-        bounces={props.bounces}
-      >
-        {slots.default?.()}
-      </scroll-view>
-    );
-  };
-});
+import { component, type Define } from '@sigx/lynx';
+
+export type ScrollViewProps =
+  & Define.Prop<'direction', 'vertical' | 'horizontal', false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'showScrollbar', boolean, false>
+  & Define.Prop<'bounces', boolean, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const ScrollView = component<ScrollViewProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {};
+    if (props.height !== undefined) style.height = props.height;
+    if (props.width !== undefined) style.width = props.width;
+    if (props.flex !== undefined) style.flex = props.flex;
+    return style;
+  };
+
+  return () => {
+    const dir = props.direction ?? 'vertical';
+    return (
+      <scroll-view
+        class={props.class}
+        style={getStyle()}
+        scroll-orientation={dir}
+        scroll-y={dir === 'vertical' ? true : undefined}
+        scroll-x={dir === 'horizontal' ? true : undefined}
+        show-scrollbar={props.showScrollbar}
+        bounces={props.bounces}
+      >
+        {slots.default?.()}
+      </scroll-view>
+    );
+  };
+});

package/src/layout/Spacer.tsx

@@ -1,18 +1,18 @@
-import { component, type Define } from '@sigx/lynx';
-
-export type SpacerProps =
-  & Define.Prop<'size', number, false>
-  & Define.Prop<'class', string, false>;
-
-export const Spacer = component<SpacerProps>(({ props }) => {
-  const getStyle = (): Record<string, string | number> => {
-    if (props.size !== undefined) {
-      return { width: props.size, height: props.size };
-    }
-    return { flex: 1 };
-  };
-
-  return () => (
-    <view class={props.class} style={getStyle()} />
-  );
-});
+import { component, type Define } from '@sigx/lynx';
+
+export type SpacerProps =
+  & Define.Prop<'size', number, false>
+  & Define.Prop<'class', string, false>;
+
+export const Spacer = component<SpacerProps>(({ props }) => {
+  const getStyle = (): Record<string, string | number> => {
+    if (props.size !== undefined) {
+      return { width: props.size, height: props.size };
+    }
+    return { flex: 1 };
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()} />
+  );
+});

package/src/preset/index.ts

@@ -1,77 +1,77 @@
-import type { Config } from 'tailwindcss';
-import plugin from 'tailwindcss/plugin';
-import { COLOR_VARIANT_LIST } from '../contract.js';
-
-/**
- * The design-system-neutral Tailwind preset pieces — the parts of a DS preset
- * that are really the *contract*, not the design system:
- *
- *   • `contractColors`: every semantic color token (incl. the `*-soft`
- *     tints) → `var(--color-*)`, so utilities like `bg-primary` and
- *     `text-base-content` resolve against the active theme of whichever
- *     design system is mounted.
- *   • `contractFontSizes`: re-points Tailwind's `text-xs`…`text-3xl`
- *     font-size utilities at the shared `--text-*` ramp (defaults in
- *     `styles/tokens.css`, multiplied app-wide by the theme controller's
- *     `fontScale`). Merged via `theme.extend.fontSize`, so larger Tailwind
- *     keys (`text-4xl`+) keep their rem defaults.
- *   • `lynxLayoutPlugin`: ships `flex-fill` — the Lynx-correct "fill
- *     remaining space" utility. In Lynx (like React Native) the `flex: 1`
- *     shorthand expands to `flex: 1 1 auto`, where `flexBasis: 'auto'` sizes
- *     the box to its content first, collapsing the layout chain; Tailwind's
- *     own `flex-1` expands to the same broken shorthand. `flex-fill` writes
- *     the long-form properties so the result actually fills.
- *
- * Design-system presets compose these (`@sigx/lynx-daisyui/preset`,
- * `@sigx/lynx-heroui/preset`) and layer any DS-specific extensions on top;
- * apps normally consume the DS preset, not this one directly.
- */
-
-export const contractColors: Record<string, string> = Object.fromEntries([
-  ...COLOR_VARIANT_LIST.flatMap((v) => [
-    [v, `var(--color-${v})`],
-    [`${v}-content`, `var(--color-${v}-content)`],
-    [`${v}-soft`, `var(--color-${v}-soft)`],
-  ]),
-  ['base-100', 'var(--color-base-100)'],
-  ['base-200', 'var(--color-base-200)'],
-  ['base-300', 'var(--color-base-300)'],
-  ['base-content', 'var(--color-base-content)'],
-]);
-
-export const contractFontSizes: Record<string, string> = {
-  'xs': 'var(--text-xs)',
-  'sm': 'var(--text-sm)',
-  'base': 'var(--text-base)',
-  'lg': 'var(--text-lg)',
-  'xl': 'var(--text-xl)',
-  '2xl': 'var(--text-2xl)',
-  '3xl': 'var(--text-3xl)',
-};
-
-export const lynxLayoutPlugin = plugin(({ addUtilities }) => {
-  addUtilities({
-    // Long-form flex-fill — the Lynx-correct "take remaining space along
-    // the main axis" utility. Default flex direction column; consumers
-    // who want a horizontal fill compose with `flex-row` on the parent.
-    '.flex-fill': {
-      flexGrow: '1',
-      flexShrink: '1',
-      flexBasis: '0',
-      minHeight: '0',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-  });
-});
-
-/** The composed neutral preset — what DS presets spread. */
-export const zeroPreset: Partial<Config> = {
-  theme: {
-    extend: {
-      colors: contractColors,
-      fontSize: contractFontSizes,
-    },
-  },
-  plugins: [lynxLayoutPlugin],
-};
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+import { COLOR_VARIANT_LIST } from '../contract.js';
+
+/**
+ * The design-system-neutral Tailwind preset pieces — the parts of a DS preset
+ * that are really the *contract*, not the design system:
+ *
+ *   • `contractColors`: every semantic color token (incl. the `*-soft`
+ *     tints) → `var(--color-*)`, so utilities like `bg-primary` and
+ *     `text-base-content` resolve against the active theme of whichever
+ *     design system is mounted.
+ *   • `contractFontSizes`: re-points Tailwind's `text-xs`…`text-3xl`
+ *     font-size utilities at the shared `--text-*` ramp (defaults in
+ *     `styles/tokens.css`, multiplied app-wide by the theme controller's
+ *     `fontScale`). Merged via `theme.extend.fontSize`, so larger Tailwind
+ *     keys (`text-4xl`+) keep their rem defaults.
+ *   • `lynxLayoutPlugin`: ships `flex-fill` — the Lynx-correct "fill
+ *     remaining space" utility. In Lynx (like React Native) the `flex: 1`
+ *     shorthand expands to `flex: 1 1 auto`, where `flexBasis: 'auto'` sizes
+ *     the box to its content first, collapsing the layout chain; Tailwind's
+ *     own `flex-1` expands to the same broken shorthand. `flex-fill` writes
+ *     the long-form properties so the result actually fills.
+ *
+ * Design-system presets compose these (`@sigx/lynx-daisyui/preset`,
+ * `@sigx/lynx-heroui/preset`) and layer any DS-specific extensions on top;
+ * apps normally consume the DS preset, not this one directly.
+ */
+
+export const contractColors: Record<string, string> = Object.fromEntries([
+  ...COLOR_VARIANT_LIST.flatMap((v) => [
+    [v, `var(--color-${v})`],
+    [`${v}-content`, `var(--color-${v}-content)`],
+    [`${v}-soft`, `var(--color-${v}-soft)`],
+  ]),
+  ['base-100', 'var(--color-base-100)'],
+  ['base-200', 'var(--color-base-200)'],
+  ['base-300', 'var(--color-base-300)'],
+  ['base-content', 'var(--color-base-content)'],
+]);
+
+export const contractFontSizes: Record<string, string> = {
+  'xs': 'var(--text-xs)',
+  'sm': 'var(--text-sm)',
+  'base': 'var(--text-base)',
+  'lg': 'var(--text-lg)',
+  'xl': 'var(--text-xl)',
+  '2xl': 'var(--text-2xl)',
+  '3xl': 'var(--text-3xl)',
+};
+
+export const lynxLayoutPlugin = plugin(({ addUtilities }) => {
+  addUtilities({
+    // Long-form flex-fill — the Lynx-correct "take remaining space along
+    // the main axis" utility. Default flex direction column; consumers
+    // who want a horizontal fill compose with `flex-row` on the parent.
+    '.flex-fill': {
+      flexGrow: '1',
+      flexShrink: '1',
+      flexBasis: '0',
+      minHeight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  });
+});
+
+/** The composed neutral preset — what DS presets spread. */
+export const zeroPreset: Partial<Config> = {
+  theme: {
+    extend: {
+      colors: contractColors,
+      fontSize: contractFontSizes,
+    },
+  },
+  plugins: [lynxLayoutPlugin],
+};

package/src/shared/press.ts

@@ -1,6 +1,6 @@
-// Shared press-feedback defaults applied across interactive components in
-// every design system. Lynx has no CSS `:active` support, so press feedback
-// comes from `<Pressable>` (in `@sigx/lynx-gestures`) flipping inline
-// opacity/transform on the main thread.
-export const PRESSED_SCALE = 0.97;
-export const PRESSED_OPACITY = 0.85;
+// Shared press-feedback defaults applied across interactive components in
+// every design system. Lynx has no CSS `:active` support, so press feedback
+// comes from `<Pressable>` (in `@sigx/lynx-gestures`) flipping inline
+// opacity/transform on the main thread.
+export const PRESSED_SCALE = 0.97;
+export const PRESSED_OPACITY = 0.85;