@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/cjs/styles/themes/next-gen/spacing.d.ts

@@ -5,5 +5,6 @@ declare const scale: {
     lg: number;
     xl: number;
     xx: string;
+    'md-s': string;
 };
 export default scale;

package/lib/cjs/styles/themes/next-gen/spacing.js

@@ -12,6 +12,7 @@ var scale = {
   md: _onyxTokens.astroTokens.spacing.md,
   lg: _onyxTokens.astroTokens.spacing.lg,
   xl: _onyxTokens.astroTokens.spacing.xl,
-  xx: '4rem'
+  xx: '4rem',
+  'md-s': '12px'
 };
 var _default = exports["default"] = scale;

package/lib/cjs/styles/themes/next-gen/variants/arrayField.d.ts

@@ -0,0 +1,9 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const arrayField: {
+    listItem: ThemeUICSSObject;
+    helperTextContainer: ThemeUICSSObject;
+    bottomBar: ThemeUICSSObject;
+    addButton: ThemeUICSSObject;
+    addButtonText: ThemeUICSSObject;
+};
+export default arrayField;

package/lib/cjs/styles/themes/next-gen/variants/arrayField.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.arrayField = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
+// Onyx spec: 8px between rows.
+var listItem = {
+  mb: _onyxTokens.astroTokens.spacing.sm,
+  // The blocks below the list (helper text container and bottom bar) carry
+  // their own 8px top margin, so the last row drops its bottom margin to keep
+  // the spec's 8px gap instead of doubling it to 16px.
+  '&:last-of-type': {
+    mb: 0
+  },
+  // Row fields get their accessible name from aria-label, so their built-in
+  // label renders empty; the Onyx label variant's margin on that empty
+  // element would otherwise double the row spacing.
+  '& label.field-label:empty': {
+    mb: 0
+  },
+  // The delete control sits inline after the input per the Onyx spec, so the
+  // field's own control wrapper lays out horizontally with a centered
+  // alignment. The input flexes to fill the space left of the control
+  // (32px control + 16px gap) and spans the full row width when the control
+  // is absent ("cannot delete last item" state).
+  '& .field-control-wrapper': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& .field-control-input': {
+      height: '50px',
+      width: '100%',
+      flex: '1 1 auto',
+      minWidth: 0
+    }
+  }
+};
+var helperTextContainer = {
+  mt: _onyxTokens.astroTokens.spacing.sm,
+  lineHeight: 'body',
+  '& > *': {
+    mt: '0px !important',
+    pt: '0px !important'
+  },
+  // 4px between the helper text and the maximum feedback, from the Onyx spec.
+  '& > * + *': {
+    mt: "".concat(_onyxTokens.astroTokens.spacing.xs, "px !important")
+  }
+};
+var bottomBar = {
+  mt: _onyxTokens.astroTokens.spacing.sm
+};
+var addButton = {
+  width: 'fit-content',
+  fontWeight: 0
+};
+var addButtonText = {
+  variant: 'text.label',
+  color: 'font.link',
+  fontWeight: 0
+};
+var arrayField = exports.arrayField = {
+  listItem: listItem,
+  helperTextContainer: helperTextContainer,
+  bottomBar: bottomBar,
+  addButton: addButton,
+  addButtonText: addButtonText
+};
+var _default = exports["default"] = arrayField;

package/lib/cjs/styles/themes/next-gen/variants/arrayFieldDeleteButton.d.ts

@@ -0,0 +1,5 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const arrayFieldDeleteButton: {
+    deleteButton: ThemeUICSSObject;
+};
+export default arrayFieldDeleteButton;

package/lib/cjs/styles/themes/next-gen/variants/arrayFieldDeleteButton.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.arrayFieldDeleteButton = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
+// Onyx places the delete control inline after the field: 16px gap, 32x32 hit
+// area, circular badge-style focus ring and hover background. The base
+// Astro variant (merged underneath by the theme merge) positions the
+// control absolutely outside the row for its own layout, so those
+// properties are reset here to keep the control inside the flex row.
+var deleteButton = {
+  position: 'static',
+  right: 'auto',
+  top: 'auto',
+  ml: _onyxTokens.astroTokens.spacing.md,
+  width: 32,
+  height: 32,
+  alignSelf: 'center',
+  // '&&' out-specifies the base variant and the fieldControlWrapper
+  // '> button' rule; the focus indicator is circular, which needs the
+  // 28px radius kept as well.
+  '&&': {
+    border: 'none',
+    borderRadius: '28px'
+  },
+  cursor: 'pointer',
+  // This variant no longer extends the base icon button (the variant prop
+  // replaces it), so it carries its own focus ring and hover treatment.
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'active',
+    outlineOffset: '2px'
+  },
+  '&.is-hovered': {
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100]
+  }
+};
+var arrayFieldDeleteButton = exports.arrayFieldDeleteButton = {
+  deleteButton: deleteButton
+};
+var _default = exports["default"] = arrayFieldDeleteButton;